Javascript読み込み実行最適化_JavaScriptスキルに関する調査報告書

私は 1 年以上フロントエンド開発を行ってきましたが、まだフロントエンドについていくつかの洞察を持っています。今日はそれを共有します。

フロントエンド開発にはさまざまなツールが必要です。たとえば、私は今でも Google ブラウザと重火器 Fiddler の使用に慣れています。

1: 元の状況

まず、次のコードを見てください:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

プログラマーの 90% が js ファイルを頭に入れると推定されていますが、それについて調べたことがありますか?多くのブラウザは、単一のスレッドを使用して「UI 更新」と「JS スクリプト処理」を実行します。

つまり、実行エンジンが「<script>」に遭遇すると、ページのダウンロードとレンダリングは、<script>の実行が完了するまで待機する必要があります。ユーザーにとって、ロックされたページを見るのは悲しいことです</p> <p>この時点で、ユーザーがそれをオフにする可能性があります。 </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201412/201412160855464.png"></p> <p>上のウォーターフォール チャートから 2 つのポイントがわかります: </p> <p>1位：</p> <p>3 つの js ファイルが並行してダウンロードされますが、上記の私の理論によれば、js ファイルは順番に実行されるはずです。ただし、IE8、Firefox3.5、Chrome2ではjsの並列ダウンロードが実装されており、</p> <p>これは非常に優れていますが、画像などの他のリソースのダウンロードは依然として妨げられます。 </p> <p>2 番目: </p> <p>画像 1.jpg のダウンロードは、js の実行が完了した後にトリガーされます。これにより、上記の状況も確認され、画像の読み込みが防止されます。 </p> <p><strong>2: 最初のステップの最適化</strong></p> <p>js は UI のレンダリングを妨げるため、<script> の前の html が完全にレンダリングされ、待機中のページがユーザーに表示されないように、js を </script>

悲惨な状況は自然に友好度を高めます。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

下の図では、1.jpg と 3 つの js がダウンロードされ、ほぼ並行して実行されていることがわかります。時間は上記の「469ms」から「326ms」に短縮されます。

3: 最適化の第 2 ステップ

上記の「ウォーターフォール チャート」を見ると、3 つの js ファイルが 3 つの「Get」リクエストを行っていることに気づいたかもしれません。Get リクエストには http ヘッダーが必要であることは誰もが知っています。

時間がかかるため、解決策としては当然 Get リクエストを減らすことになります。通常、オプションは 2 つあります。

最初: 上記の「hello.js」と「world.js」をマージするなど、js ファイルをマージします。

2 番目: PHP の Minify などのサードパーティ ツールを使用します。

2 番目の方法に関しては、淘宝網がより頻繁に使用されます。スクリプトの 1 つを見てください。これは 3 つの js ファイルを使用します。 3 Get リクエストから 1 へ。

4: 最適化の 3 番目のステップ

js ファイルを最後に置くか、3 つを 1 つにマージするかに関係なく、本質は「ブロッキング モード」です。これは、Web ページがますます複雑になり、js ファイルの数が増えると、ブラウザをロックすることを意味します。または

頭の痛い問題は、現時点では js スクリプトをロードするための「ノンブロッキング モード」を推奨していることです。つまり、ページが完全にレンダリングされた後に js を追加します。これは window.onload イベントがトリガーされたときに対応します。私たち

js を追加します。これは「ノンブロッキング」と呼ばれますが、注意する必要があるのは、js の要件が厳密な順序になっているかどうかです。

第一: 順序要件はありません。たとえば、「hello.js」と「world.js」には順序要件がありません。その場合、jquery を使用して実装を動的に追加できます。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

<スクリプトタイプ="text/javascript">
window.onload = function () {
$("#head").append("")
$("#head").append("");
}

図からわかるように、青い線の後に「hello.js」と「world.js」が表示されます。これは、これら 2 つの js が DomContentLoad の終了後にロードされるようにトリガーされ、ページ ロックが発生しないことを意味します。

待ってください。

2 番目: 注文要件があります

なぜ注文要件の概念が必要なのでしょうか?上記の動的に追加される「2 つの js」ファイルについて、IE シリーズでは、world.js よりも先に hello.js が実行されることは保証できません。

彼はサーバーから返された順序でのみコードを実行します。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   
   

   
    <スクリプトタイプ="text/javascript">
        関数loadScript(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";

//IE
            if (script.readyState) {
                script.onreadystatechange = function () {
                    if (script.readyState == "ロード済み" || script.readyState == "complete") {
                        script.onreadystatechange = null;
                        コールバック();
                    }
                }
            } else {
                //非IE
                script.onload = function () {
                    コールバック();
                }
            }
            script.src = url;
            document.getElementById("head").appendChild(script);
        }
        //第一步加ダウンロードjquery类库
        loadScript("jquery/jquery-1.4.1.js", function () {
            //第二弾加ダウンロードhello.js
            loadScript("js/hello.js", function () {
                //第三步加ダウンロードworld.js
                loadScript("js/world.js", function () {

});
            });
        });
   

一般にもわかりましたが、トップページの完全なロード時間は 310 ミリ秒程度であり、ネットワークのダウンロードの表示と分かりやすさが大幅に向上しています。

是非常的有用呢，当人此処も花了数日来做これら研究赋试，所望小伙伴们能看到心里去，毕竟これも“麻花藤”公司の解决方案，大家参照下吧