草庐IT

javascript - Pagespeed 脚本添加,它有什么作用?

coder 2024-07-24 原文

我已经启用了 mod_pagespeed,现在在定义我的 HTML Logo 的地方周围添加了这个额外的 javascript。我不确定这段代码的作用以及如何禁用它?

<a href="http://www.example.com/" id="logo"><script pagespeed_no_defer="">//<![CDATA[
(function(){var g=this,h=function(b,d){var a=b.split("."),c=g;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var e;a.length&&(e=a.shift());)a.length||void 0===d?c[e]?c=c[e]:c=c[e]={}:c[e]=d};var l=function(b){var d=b.length;if(0<d){for(var a=Array(d),c=0;c<d;c++)a[c]=b[c];return a}return[]};var m=function(b){var d=window;if(d.addEventListener)d.addEventListener("load",b,!1);else if(d.attachEvent)d.attachEvent("onload",b);else{var a=d.onload;d.onload=function(){b.call(this);a&&a.call(this)}}};var n,p=function(b,d,a,c,e){this.f=b;this.h=d;this.i=a;this.c=e;this.e={height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth};this.g=c;this.b={};this.a=[];this.d={}},q=function(b,d){var a,c,e=d.getAttribute("pagespeed_url_hash");if(a=e&&!(e in b.d))if(0>=d.offsetWidth&&0>=d.offsetHeight)a=!1;else{c=d.getBoundingClientRect();var f=document.body;a=c.top+("pageYOffset"in window?window.pageYOffset:(document.documentElement||f.parentNode||f).scrollTop);c=c.left+("pageXOffset"in window?window.pageXOffset:(document.documentElement||f.parentNode||f).scrollLeft);f=a.toString()+","+c;b.b.hasOwnProperty(f)?a=!1:(b.b[f]=!0,a=a<=b.e.height&&c<=b.e.width)}a&&(b.a.push(e),b.d[e]=!0)};p.prototype.checkImageForCriticality=function(b){b.getBoundingClientRect&&q(this,b)};h("pagespeed.CriticalImages.checkImageForCriticality",function(b){n.checkImageForCriticality(b)});h("pagespeed.CriticalImages.checkCriticalImages",function(){r(n)});var r=function(b){b.b={};for(var d=["IMG","INPUT"],a=[],c=0;c<d.length;++c)a=a.concat(l(document.getElementsByTagName(d[c])));if(0!=a.length&&a[0].getBoundingClientRect){for(c=0;d=a[c];++c)q(b,d);a="oh="+b.i;b.c&&(a+="&n="+b.c);if(d=0!=b.a.length)for(a+="&ci="+encodeURIComponent(b.a[0]),c=1;c<b.a.length;++c){var e=","+encodeURIComponent(b.a[c]);131072>=a.length+e.length&&(a+=e)}b.g&&(e="&rd="+encodeURIComponent(JSON.stringify(s())),131072>=a.length+e.length&&(a+=e),d=!0);t=a;if(d){c=b.f;b=b.h;var f;if(window.XMLHttpRequest)f=new XMLHttpRequest;else if(window.ActiveXObject)try{f=new ActiveXObject("Msxml2.XMLHTTP")}catch(k){try{f=new ActiveXObject("Microsoft.XMLHTTP")}catch(u){}}f&&(f.open("POST",c+(-1==c.indexOf("?")?"?":"&")+"url="+encodeURIComponent(b)),f.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),f.send(a))}}},s=function(){var b={},d=document.getElementsByTagName("IMG");if(0==d.length)return{};var a=d[0];if(!("naturalWidth"in a&&"naturalHeight"in a))return{};for(var c=0;a=d[c];++c){var e=a.getAttribute("pagespeed_url_hash");e&&(!(e in b)&&0<a.width&&0<a.height&&0<a.naturalWidth&&0<a.naturalHeight||e in b&&a.width>=b[e].k&&a.height>=b[e].j)&&(b[e]={rw:a.width,rh:a.height,ow:a.naturalWidth,oh:a.naturalHeight})}return b},t="";h("pagespeed.CriticalImages.getBeaconData",function(){return t});h("pagespeed.CriticalImages.Run",function(b,d,a,c,e,f){var k=new p(b,d,a,e,f);n=k;c&&m(function(){window.setTimeout(function(){r(k)},0)})});})();pagespeed.CriticalImages.Run('/mod_pagespeed_beacon','http://www.example.com/slug','SLoDkQnME-',true,false,'gxYRJPh80JY');
//]]></script><img src="http://www.example.com/xlogo.png.pagespeed.ic.GAQP-mof5d.png" alt="Logo" pagespeed_url_hash="4083345942" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></a>

这是一个 fiddle :http://jsfiddle.net/vdkdekuu/和一个美化版本:

(function() {
    var g = this,
        h = function(b, d) {
            var a = b.split("."),
                c = g;
            a[0] in c || !c.execScript || c.execScript("var " + a[0]);
            for (var e; a.length && (e = a.shift());) a.length || void 0 === d ? c[e] ? c = c[e] : c = c[e] = {} : c[e] = d
        };
    var l = function(b) {
        var d = b.length;
        if (0 < d) {
            for (var a = Array(d), c = 0; c < d; c++) a[c] = b[c];
            return a
        }
        return []
    };
    var m = function(b) {
        var d = window;
        if (d.addEventListener) d.addEventListener("load", b, !1);
        else if (d.attachEvent) d.attachEvent("onload", b);
        else {
            var a = d.onload;
            d.onload = function() {
                b.call(this);
                a && a.call(this)
            }
        }
    };
    var n, p = function(b, d, a, c, e) {
            this.f = b;
            this.h = d;
            this.i = a;
            this.c = e;
            this.e = {
                height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            };
            this.g = c;
            this.b = {};
            this.a = [];
            this.d = {}
        },
        q = function(b, d) {
            var a, c, e = d.getAttribute("pagespeed_url_hash");
            if (a = e && !(e in b.d))
                if (0 >= d.offsetWidth && 0 >= d.offsetHeight) a = !1;
                else {
                    c = d.getBoundingClientRect();
                    var f = document.body;
                    a = c.top + ("pageYOffset" in window ? window.pageYOffset : (document.documentElement || f.parentNode || f).scrollTop);
                    c = c.left + ("pageXOffset" in window ? window.pageXOffset : (document.documentElement || f.parentNode || f).scrollLeft);
                    f = a.toString() + "," + c;
                    b.b.hasOwnProperty(f) ? a = !1 : (b.b[f] = !0, a = a <= b.e.height && c <= b.e.width)
                }
            a && (b.a.push(e), b.d[e] = !0)
        };
    p.prototype.checkImageForCriticality = function(b) {
        b.getBoundingClientRect && q(this, b)
    };
    h("pagespeed.CriticalImages.checkImageForCriticality", function(b) {
        n.checkImageForCriticality(b)
    });
    h("pagespeed.CriticalImages.checkCriticalImages", function() {
        r(n)
    });
    var r = function(b) {
            b.b = {};
            for (var d = ["IMG", "INPUT"], a = [], c = 0; c < d.length; ++c) a = a.concat(l(document.getElementsByTagName(d[c])));
            if (0 != a.length && a[0].getBoundingClientRect) {
                for (c = 0; d = a[c]; ++c) q(b, d);
                a = "oh=" + b.i;
                b.c && (a += "&n=" + b.c);
                if (d = 0 != b.a.length)
                    for (a += "&ci=" + encodeURIComponent(b.a[0]), c = 1; c < b.a.length; ++c) {
                        var e = "," + encodeURIComponent(b.a[c]);
                        131072 >= a.length + e.length && (a += e)
                    }
                b.g && (e = "&rd=" + encodeURIComponent(JSON.stringify(s())), 131072 >= a.length + e.length && (a += e), d = !0);
                t = a;
                if (d) {
                    c = b.f;
                    b = b.h;
                    var f;
                    if (window.XMLHttpRequest) f = new XMLHttpRequest;
                    else if (window.ActiveXObject) try {
                        f = new ActiveXObject("Msxml2.XMLHTTP")
                    } catch (k) {
                        try {
                            f = new ActiveXObject("Microsoft.XMLHTTP")
                        } catch (u) {}
                    }
                    f && (f.open("POST", c + (-1 == c.indexOf("?") ? "?" : "&") + "url=" + encodeURIComponent(b)), f.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"), f.send(a))
                }
            }
        },
        s = function() {
            var b = {},
                d = document.getElementsByTagName("IMG");
            if (0 == d.length) return {};
            var a = d[0];
            if (!("naturalWidth" in a && "naturalHeight" in a)) return {};
            for (var c = 0; a = d[c]; ++c) {
                var e = a.getAttribute("pagespeed_url_hash");
                e && (!(e in b) && 0 < a.width && 0 < a.height && 0 < a.naturalWidth && 0 < a.naturalHeight || e in b && a.width >= b[e].k && a.height >= b[e].j) && (b[e] = {
                    rw: a.width,
                    rh: a.height,
                    ow: a.naturalWidth,
                    oh: a.naturalHeight
                })
            }
            return b
        },
        t = "";
    h("pagespeed.CriticalImages.getBeaconData", function() {
        return t
    });
    h("pagespeed.CriticalImages.Run", function(b, d, a, c, e, f) {
        var k = new p(b, d, a, e, f);
        n = k;
        c && m(function() {
            window.setTimeout(function() {
                r(k)
            }, 0)
        })
    });
})();
pagespeed.CriticalImages.Run('/mod_pagespeed_beacon', 'http://www.example.com/slug', 'SLoDkQnME-', true, false, 'gxYRJPh80JY');

最佳答案

那个特定的 JS 片段实现了“关键图像信标”,它是 lazyload_images 过滤器的一部分。 lazyload_images 是一个过滤器,它可以通过仅在图像滚动到 View 中后才加载它们来加速您的网站。这可以防止“非首屏”图像(需要垂直滚动才能看到的图像)与更关键的资源竞争网络。默认情况下,启用此过滤器时,将延迟加载所有图像。

关键图像信标是对 lazyload_images 过滤器的增强。它在客户端的浏览器上运行,并确定默认情况下哪些图像在首屏。它将此信息发送回服务器,并且在以后的请求中,只会延迟加载非首屏图像。这有助于尽快加载首屏内容。如果它工作正常,在几次页面浏览后,mod_pagespeed 将停止对每个请求发出信标,并减少它检测的页面数量。您可以使用 ModPagespeedCriticalImagesBeaconEnabled 选项禁用此功能。

您可以在 mod_pagespeed here 中阅读更多关于信标的信息,以及关于 lazyload_images here .

关于javascript - Pagespeed 脚本添加,它有什么作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33099994/

有关javascript - Pagespeed 脚本添加,它有什么作用?的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗? - 2

    当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  4. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996?但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  8. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  9. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  10. ruby - ruby 中的 TOPLEVEL_BINDING 是什么? - 2

    它不等于主线程的binding,这个toplevel作用域是什么?此作用域与主线程中的binding有何不同?>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是,TOPLEVEL_BINDING始终引用Binding的预定义全局实例,而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层,它们都包含相同的绑定(bind),但它们不是同一个对象,您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

随机推荐