javascript - Pagespeed 脚本添加，它有什么作用？

Question

我已经启用了 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');

Answer 1

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

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

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