17

我所有的 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/ （109B 的内联 JavaScript）

这是我的 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>

我应该怎么做才能通过使用 defer 来提高性能？

它仅适用于 Google chrome 还是适用于所有人？

4

5 回答 5

9

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

还可以在头部使用 dns prefetch 为 google-code 设置基域

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

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

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

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

希望能帮助到你。

-V

于 2012-02-27T07:30:41.363 回答
2

添加<script type="text/javascript" defer="defer">这样的标签对我有用。

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>
于 2014-12-31T07:58:35.317 回答
1

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

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

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

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

于 2013-01-20T14:32:02.380 回答
0

嗨，最近我们创建了一个名为“优雅框架”的开源 nodejs 框架，它可以帮助您构建快速的 Web 应用程序，我们成功地在所有页面中在桌面和移动设备中获得 100% 的谷歌页面速度：您可以在以下位置查看它：

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
}
于 2014-01-09T21:09:37.863 回答
0

当它遇到一定的性能水平时，这可能是一个通用的响应/建议。

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

例子

加载性能文章

编辑：

基于最近发布的 HTML...

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

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



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


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

于 2011-08-26T14:57:17.210 回答