延迟JavaScript解析-谷歌页面速度

我的所有JavaScript文件都已位于底部，但Google Page Speed建议提高速度：

JavaScript的延迟解析

在初始页面加载期间解析88.6KiB的JavaScript。推迟 解析JavaScript以减少页面呈现的阻塞。 （76.8千磅）（11.7千磅） （109B的内联JavaScript）

这是我的html（示例）

!window.jQuery&&document.write（unescape（“%3Cscript src=”js/libs/jQuery-1.5.1.min.js”%3E%3C/script%3E'））
$（文档）.ready（函数（）{
$（“#various2”）.fancybox({
“宽度”：485，
‘高度’：691，
});
});

我应该如何使用延迟来提高性能？

---

它是只针对谷歌chrome还是针对所有人？

这可能是对它遇到一定性能水平时的一般性响应/建议

尽管如此，它特别提到了jQuery，一个插件和109字节的内联JavaScript。你有内联JavaScript吗？您是否也将JavaScript包含放在

的底部

编辑：

基于最近发布的HTML

作为测试，删除这两个项目，看看是否有任何区别：

<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

！window.jQuery&&document.write（unescape（“%3Cscript src=”js/libs/jQuery-1.5.1.min.js”%3E%3C/script%3E'））

---

另外，警告消息中提到了109字节的内联JS，但我在您发布的HTML中没有看到类似的内容。

如果您正在寻找页面性能，那么首先您应该将这些脚本移动到页面底部，以允许加载其他资产

还可以在头部使用dns预取来设置google代码的基本域

<link rel="dns-prefetch" href="//ajax.googleapis.com">

由于这只是一小段代码，您可以简单地将其添加到底部的plugins.js文件中，然后延迟插件文件

<script src="js/plugins.js" defer></script>

这就是我要做的，我所有的网站在yslow和PageSpeed上分别优化到98和97

希望能有帮助

---

-V

我知道这是一个老问题，但由于我自己一直在寻找一个好的答案，我将分享我目前使用的方法

就内联Javascript而言，我要做的是将所有

type

属性更改为

text/deferred-Javascript

，或类似的内容，以便在页面加载期间不会计算脚本标记中的代码。然后我将一个函数附加到页面

onload

事件；该函数查找与上述类型匹配的所有脚本，并使用

eval（）

计算内部代码。我知道通常

eval（）

是邪恶的，但在这里它似乎是有用的

对于外部Javascript文件，我做了一些非常类似的事情。我没有将脚本标记添加到页面中，而是记录它们，并在页面加载完成后逐个插入它们

---

我遇到的一个问题是，如果其中一个内联延迟Javascript包含错误（比如解析错误），则不会加载后续脚本（但这可能取决于我当前的实现）。

最近，我们创建了一个名为“优雅框架”的开源nodejs框架这有助于您构建快速的web应用程序，我们成功地在桌面和手机的所有页面中获得100%的谷歌页面速度： 您可以在以下网址查看：

有很多东西，你可以从中学习，通过查看网页源代码，如果有什么你不能理解，请评论，这样我可以帮助你

到目前为止，您可以尝试以下方法：

// Load script element as a child of the body
function loadJS(src, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    script.src = src;
    document.body.appendChild(script);
}
// Load style element as a child of the body
function loadCSS(href,callback) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    if (element.readyState) {  //IE
        element.onreadystatechange = function () {
            if (element.readyState == "loaded" || script.readyState == "complete") {
                element.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        element.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    element.href = href;
    document.body.appendChild(element);
}
// Load All Resources
function loadResources() {
    // css
    loadCSS("/compressed/code-mirror-style.css?please1");
    loadCSS("/compressed/all.css?please2");

    // js
    loadJS("/compressed/code-mirror.js", function () {
        loadJS("/compressed/common.js", function () {
            $("[data-lang]").each(function () {
                var code = $(this).addClass("code").text();
                $(this).empty();

                var myCodeMirror = CodeMirror(this, {
                    value: code,
                    mode: $(this).attr("data-lang"),
                    lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'),
                    readOnly: true
                });
            });
        });
    });
}

// Check for browser support of event handling capability
if (window.addEventListener) {
    window.addEventListener("load", loadResources, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadResources);
} else {
    window.onload = loadResources
}

添加

标记，就像它对我有用一样

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>

---

当你说“我的JavaScript已经在底部”时，你是指你自己写的JS，还是你也在考虑jquery的标签，等等？在@Jitendra之前的底部没有其他javascript，是的，我的所有javascript都是javascript：那么也许我们可以看到您的代码或页面链接？这是我的html`$（document）.ready（function（）{$（“#various2”）.fancybox（{‘宽度’：485，‘高度’：691，}）中的内联javascript`
// Load script element as a child of the body
function loadJS(src, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    script.src = src;
    document.body.appendChild(script);
}
// Load style element as a child of the body
function loadCSS(href,callback) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    if (element.readyState) {  //IE
        element.onreadystatechange = function () {
            if (element.readyState == "loaded" || script.readyState == "complete") {
                element.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        element.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    element.href = href;
    document.body.appendChild(element);
}
// Load All Resources
function loadResources() {
    // css
    loadCSS("/compressed/code-mirror-style.css?please1");
    loadCSS("/compressed/all.css?please2");

    // js
    loadJS("/compressed/code-mirror.js", function () {
        loadJS("/compressed/common.js", function () {
            $("[data-lang]").each(function () {
                var code = $(this).addClass("code").text();
                $(this).empty();

                var myCodeMirror = CodeMirror(this, {
                    value: code,
                    mode: $(this).attr("data-lang"),
                    lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'),
                    readOnly: true
                });
            });
        });
    });
}

// Check for browser support of event handling capability
if (window.addEventListener) {
    window.addEventListener("load", loadResources, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadResources);
} else {
    window.onload = loadResources
}

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>