Question

我的所有JavaScript文件已经位于底部，但Google Page Speed正在提供此建议以提高速度：

推迟解析JavaScript

在初始页面加载期间解析了88.6KiB的JavaScript。推迟   解析JavaScript以减少页面呈现的阻塞。   http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js   （76.8KiB）http://websiteurl/js/plugins.js（11.7KiB）http://websiteurl/   （内联JavaScript的109B）

这是我的html（示例）

<html>
<head>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
    <script src="js/plugins.js"></script>
    <script>$(document).ready(function() {
            $("#various2").fancybox({
                'width': 485,
                'height': 691,
            });
        });</script>
    </body>
    </html>

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

仅适用于Google Chrome或所有人吗？

Answer 1

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

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

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

由于这只是一小段代码，您只需将其添加到底部的plugins.js文件中，然后推迟插件文件。

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

无论如何，这就是我所做的，我的所有网站都以yslow和页面速度分别优化为98和97.

希望它有所帮助。

-V

Answer 2

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

就内联Javascript而言，我所做的是将所有type属性更改为text/deferred-javascript或类似的内容，以便在页面加载期间不评估脚本标记中的代码。然后我将一个函数附加到页面onload事件;所述函数找到与上述类型匹配的所有脚本，并使用eval()评估内部代码。我知道一般eval()是邪恶的，但在这里似乎很有帮助。

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

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

Answer 3

添加<script type="text/javascript" defer="defer">标签，就像它对我有用。

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

Answer 4

这可能是遇到某种程度的表现时的一般性回应/建议。

虽然，它特别提到了jQuery，一个插件和109字节的内联JavaScript。你有任何内联JavaScript吗？您是否还将JavaScript包含放在<body>？

的底部

Example

Loading Performance article

修改

基于最近发布的HTML ...

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



<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>

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

Answer 5

您最近我们创建了一个名为“优雅框架”的开源nodejs框架，可以帮助您构建快速的Web应用程序，并且我们成功地在所有页面中在桌面和移动设备上获得100％的Google页面速度：你可以在以下网址查看：

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

有很多东西你可以通过查看页面来源来学习它，如果你有什么不明白请注释，这样我可以帮助你

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

// 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
}

推迟解析JavaScript - Google Page Speed

5 个答案: