当前位置： 文江博客话题详情

延迟 JavaScript 解析 - Google Page Speed

发布于 2024-12-01 14:35:41 字数 1403 浏览 0 评论 0原文

我的所有 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>

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

它仅适用于Google chrome还是适用于所有浏览器？

原文

All of my JavaScript files are already at the bottom but Google Page Speed is giving this suggestion to improve speed:

Defer parsing of JavaScript

88.6KiB of JavaScript is parsed during initial page load. Defer
parsing JavaScript to reduce blocking of page rendering.
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 of inline JavaScript)

This is the my html (example)

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

What should I do to increase performance by using defer?

Is it only for Google chrome or for all?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

温馨耳语 2024-12-08 14:35:41

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

还可以在 head 中使用 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

If you're looking for page performance then first and foremost you should move those scripts to the bottom of your page to allow the other assets to load.

Also use dns prefetch in the head to set the base domain for google-code

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

Since this is just a small piece of code, you could simply add it to your plugins.js file at the bottom then defer the plugins file.

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

That's what I'd do anyway, all my sites are optimized to 98 and 97 respectively in yslow and page speed.

Hope it helps.

-V

回复 原文
明月松间行 2024-12-08 14:35:41

添加 

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

Add in <script type="text/javascript" defer="defer"> tag like that it works for me.

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>
回复 原文
蝶舞 2024-12-08 14:35:41

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

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

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

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

I see this is an old question, but since I was looking for a good answer myself, I am going to share the method I currently use.

As far as inline Javascript is concerned, what I do is change all the type attributes to text/deferred-javascript, or something similar, so that the code within the script tag is not evaluated during page load. Then I attach a function to the page onload event; said function finds all the scripts matching the type above and evaluates the code inside using eval(). I know in general eval() is evil but it seems to be helpful here.

For external Javascript files, I do something very similar. Instead of adding the script tags to the page, I record them and insert them one-by-one after page load has completed.

One problem I'm having is that if one of the inline deferred Javascript contains an error (say a parse error), the subsequent scripts are not loaded (but that might depend on my current implementation).

回复 原文
只为守护你 2024-12-08 14:35:41

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

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

示例

加载性能文章

编辑：

基于关于最近发布的 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 中没有看到类似的内容。

That's probably a generic response/suggestion for when it encounters a certain level of performance.

Although, it specifically mentions jQuery, a plugin, and 109 bytes of inline JavaScript. Do you have any inline JavaScript? Are you also placing your JavaScript includes at the bottom of the <body>?

Example

Loading Performance article

EDIT:

Based on recently posted HTML...

As a test, remove these two items to see if it makes any difference:

<!--[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>

Also, the warning message mentions 109 bytes of inline JS, yet I don't see anything like that in the HTML you've posted.

回复 原文
傲世九天 2024-12-08 14:35:41

大家好，最近我们创建了一个名为“优雅框架”的开源 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
}

Hi recently we have created an opensource nodejs framework called "elegant framework" that help you building fast web application and we succeeded to get 100% google page speed in both desktop and mobile in all pages :
you can check it at:

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

there is a lot of things you can learn from it by viewing the page source also if anything you cannot understand please comment so i can help you with

so far you can try this method:

// 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
}
回复 原文
~没有更多了~

关于作者

酒解孤独

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苍风燃霜

文章 0 评论 0

我的黑色迷你裙

文章 0 评论 0

悸初

文章 0 评论 0

撧情箌佬

文章 0 评论 0

森罗

文章 0 评论 0

lyn1245

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文