問題

ほとんどのブラウザは、ユーザーインターフェイス（UI）とJavaScriptの実装を処理するために単一のプロセスを使用しているので、それは、ブラウザのJavaScriptコードを実行するとき、あなたは他に何もできないと言うことです。ブラウザは、ユーザーの他の操作には対応できませんので、JavaScriptの実行時間が長すぎると、それは「スタック」感じを与えます。

コード上の反応は、あること、それぞれの出会いの<script>タグは、ブラウザが停止して、ダウンロードし解析し、実行するスクリプトを待ちます。

スクリプトの実行のプロセスは、任意の時点でのページの内容を変更する可能性があるため、単一のプロセスでブラウザは、処理する理由は、スクリプトが終了した後、UIがレンダリングされるまで待つ必要があります。例えば：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div>
            <script>
                document.write(new Date().toDateString());
            </script>
        </div>
    </body>
</html>

ソリューション

スクリプトの場所

一般的に、我々はスクリプトファイルやCSSファイルを読み込む次のように書かれています。

<hmtl>
    <head>
        <script type="text/javascript" src="script1.js"></script>
        <script type="text/javascript" src="script2.js"></script>
        <script type="text/javascript" src="script3.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>Hello World</div>
    </body>
</html>

理論的には、上のスクリプトとスタイルファイル<head>のタグは、ページのレンダリングとの相互作用の正しさを支持してロードされます。

しかし、これは我々は、ブラウザが目の前に遭遇したことを知って、深刻なパフォーマンスの問題が発生します<script>停止されたラベルとそのダウンロードして実行、ページのレンダリング後も継続するすべてのを待っていました。そして解決するために、ブラウザ<body>ラベルの後には、ページのコンテンツをレンダリングします。

言い換えれば、<script>上のラベル<head>、タグ、ページの読み込みが長く表示で空白のページが生じる可能性が、それはページと対話することはできません、気持ちがロードすることは非常に遅いです。

最も近代的なブラウザでは良いニュースですが、スクリプトはまだプロセスが他のリソース、ダウンロードをブロックしますダウンロードし、並列ダウンロードスクリプトファイル、許可がイメージなどを。また、ブラウザはまだ継続するためのスクリプトを実行し、すべてのを待っています。そこで問題は、根本的に解決されていません。実際には、シングルスレッドのJavaScriptので、この問題は、硬化させることが困難です。

しかし、我々はまだこの問題は、ユーザーがそれほど明らかでは見えないようにしようことができます。

あなたは置くことができます<script>上のラベルを<body>下のラベル、そのページの内容がロードを開始するために再びロードされるまで、あなたは待つことができます<script>。

ページが出てロードされているので、ユーザーは、この時間はまだ完了していないかもしれないが、スクリプトファイルがロードされて実行される、「ページ読み込み速度大丈夫」という感じを与えるので。

一例として、上記のコードに：

<hmtl>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>Hello World</div>
        <script type="text/javascript" src="script1.js"></script>
        <script type="text/javascript" src="script2.js"></script>
        <script type="text/javascript" src="script3.js"></script>
    </body>
</html>

組織スクリプト

レンダリングするので、それはスクリプトファイルを並列にダウンロードすることができますが、HTTPリクエストがパフォーマンスのオーバーヘッドも非常に印象的であるもたらした場合でも、スクリプトファイルのダウンロードページをブロックするため、スクリプトファイルの数を減らすためにしようと、あるいは<script>数がパフォーマンスを向上させることができるようになります。

それによって削減、一つに複数のスクリプトファイルの方法で包装することができる<script>ラベルの数を。

ノンブロッキングスクリプト

スクリプトは、ファイルサイズを小さくし、パフォーマンスの最適化の唯一の最初のステップのHTTPリクエストの数を制限します。単一の大規模なスクリプトをダウンロードするだけでHTTPリクエストを生成したファイルが、それはブラウザの時間の大期間をブロックします。これを防ぐために、我々は徐々にのJavaScriptファイルのページをロードすることができます。

スクリプトの遅延（延期）

HTMLのために<script>タグの拡張属性を定義するdeferコード遅延を安全に行うことができるようにスクリプトに含まれる要素は、DOMを変更しないことを示すこと。

defer属性<script>文書のどこにでも配置することができます。ラベルをされてダウンロードを開始するには、ブラウザで解決されますが、DOMは（DOMReady）をロード完了するまで実行されません。

動的スクリプト

動的なシナリオでは、JavaScriptの使用を作成するために使用することができるで<script>必要なときに、スクリプトファイルを再ロードすることができるように、そのページに追加されています。例えば：

let script = document.createElement("script");
script.type = "text/javascript";
scirpt.src = "file1.js";
document.head.appendChild(script);

JavaScriptのパフォーマンス - ロードと実行

記事のディレクトリ

問題