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/ (インライン 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専用ですか、それともすべてですか？

4

5 に答える 5

9

ページのパフォーマンスを求めている場合は、何よりもまず、これらのスクリプトをページの下部に移動して、他のアセットが読み込まれるようにする必要があります。

また、head で dns prefetch を使用して、google-code のベース ドメインを設定します。

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

これはほんの小さなコードなので、plugins.js ファイルの一番下に追加して、plugins ファイルを延期するだけです。

<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

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

于 2013-01-20T14:32:02.380 に答える
0

これはおそらく、特定のレベルのパフォーマンスに遭遇したときの一般的な応答/提案です。

ただし、jQuery、プラグイン、および 109 バイトのインライン JavaScript について具体的に言及しています。インライン JavaScript はありますか? また、JavaScript インクルードを の一番下に配置しています<body>か?

例

パフォーマンスの記事を読み込んでいます

編集：

最近投稿された HTML に基づく...

テストとして、次の 2 つの項目を削除して、違いがあるかどうかを確認します。

<!--[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 に答える
0

こんにちは最近、私たちは「エレガントなフレームワーク」と呼ばれるオープンソースの nodejs フレームワークを作成しました。これは、高速な Web アプリケーションの構築に役立ち、すべてのページでデスクトップとモバイルの両方で 100% の Google ページ速度を達成することに成功しました。次の URL で確認できます。

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 に答える