推迟解析的JavaScript -谷歌页面速度

Defer parsing of JavaScript - Google Page Speed

本文关键字：谷歌 速度 JavaScript 推迟      更新时间：2023-09-26

我所有的JavaScript文件已经在底部，但谷歌页面速度给出了这个建议，以提高速度:

延迟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)

这是我的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还是适用于所有?

如果你在寻找页面性能，那么首先你应该把这些脚本移到页面的底部，以允许其他资源加载。

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

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

因为这只是一小段代码，你可以简单地把它添加到你的plugins.js文件的底部，然后推迟plugins文件。

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

这就是我要做的，我所有的网站在慢速和页面速度上分别优化到98和97。

希望有帮助。

- v

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

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

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

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

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

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

这可能是遇到特定性能级别时的通用响应/建议。

虽然，它特别提到了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中没有看到任何类似的内容

嗨，最近我们创建了一个名为"优雅框架"的开源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
}
相关文章：