JavaScriptの非同期loading_javascriptスキルの簡単な分析

はしがき

JavaScript スクリプトの読み込みで多くの問題に遭遇したことがあるかと思います。主にいくつかの点で——

1> 同期スクリプトと非同期スクリプトによって引き起こされるファイルの読み込み、ファイルの依存関係、および実行順序の問題
2> 同期スクリプトと非同期スクリプトによって引き起こされるパフォーマンスの最適化の問題

スクリプトの読み込みに関連するすべての側面を完全に理解することは、実際的な問題の解決に役立つだけでなく、パフォーマンスの最適化を把握して実装するのにも役立ちます。

まず、スクリプト タグ コードを確認します—

コードをコピー コードは次のとおりです:

の上に配置すると、すべてのページのレンダリング作業がブロックされ、スクリプトがロードされて実行されるまでユーザーは「死の白い画面」状態になります。 の最後にあるスクリプトでは、クライアント側のレンダリングが実行されるべき場所に、効果のないコントロールと空のボックスが散在する、活気のない静的ページのみが表示されます。テストケースを取得する -

コードをコピーします コードは次のとおりです:

私はコンテンツです

その中で、test.js の内容—

コードをコピー コードは次のとおりです:

alert('私はヘッドのスクリプトコードです。ここでjsを実行すると、ボディのコンテンツのレンダリングが開始されます!');

アラートが一時停止ポイントであり、この時点ではページが空白であることがわかります。ただし、この時点でページ全体がロードされていることに注意してください。本文に特定の src 属性を持つタグ (上記の img タグなど) が含まれている場合、ブラウザは関連コンテンツのロードをすでに開始しています。つまり、js エンジンとレンダリング エンジンの動作タイミングは相互に排他的であることに注意してください (書籍によっては、これを UI スレッドと呼んでいます)。

したがって、ページの見栄えを良くし、使いやすくするスクリプトはすぐにロードし、後でロードできるスクリプトは後でロードする必要があります。

1. スクリプトの実行の遅延

ページの

タグの最後にスクリプトを配置することがますます一般的になってきています。このようにして、ユーザーはページをより速く表示できる一方で、スクリプトはロードされた DOM 要素を直接操作できるようになります。ほとんどのスクリプトにとって、この「移動」は大きな改善です。ページモデルは次のとおりです——

コードをコピー コードは次のとおりです:

これにより、ページのレンダリング時間が大幅に短縮されますが、bodyScript が読み込まれる前にユーザーがページを操作する機会が得られる可能性があることに注意してください。その理由は、ドキュメント全体が読み込まれるまでブラウザはこれらのスクリプトを読み込むことができないためです。これが、低速接続で送信される大きなドキュメントのボトルネックになる可能性があります。

理想的には、スクリプトの読み込みはドキュメントの読み込みと同時に行われ、DOM のレンダリングに影響を与えないようにする必要があります。この方法では、スクリプトは <script> タグの順序ですでに読み込まれているため、ドキュメントの準備ができたらスクリプトを実行できます。 </script>

この要件を満たすために defer を使用できます。つまり、

コードをコピー コードは次のとおりです:

defer 属性を追加することは、ブラウザに「このスクリプトのロードを今すぐ開始してください。ただし、ドキュメントの準備ができ、defer 属性を持つ以前のすべてのスクリプトの実行が完了するまで待ってから実行してください」と伝えることと同じです。

このように、head タグに遅延スクリプトを配置すると、body タグにスクリプトを配置した場合のすべての利点が得られ、大きなドキュメントの読み込み速度も大幅に向上します。この時のページモードは——

コードをコピー コードは次のとおりです:

ただし、すべてのブラウザーが defer をサポートしているわけではありません (一部の最新のブラウザーでは、defer が宣言されている場合、内部スクリプトは document.write および DOM レンダリング操作を実行しません。IE4 はすべて defer 属性をサポートしています)。つまり、ドキュメントのロード後に遅延スクリプトを実行できるようにするには、すべての遅延スクリプト コードを jQuery の $(document).ready などの構造にカプセル化する必要があります。訪問者のほぼ 97% が並列読み込みのメリットを享受し、残りの 3% は依然として完全に機能する JavaScript にアクセスできるため、これには価値があります。

2. スクリプトの完全な並列化

スクリプトの読み込みと実行を 1 段階速くします。遅延スクリプトが次々に実行されるのを待ちたくありません (遅延という言葉は、ドキュメントが読み込まれるのを静かに待つという順序立てたキューのシナリオを思い出させます)。これらのスクリプトを実行する前にドキュメントの準備ができるまで待ちたいと考えています。できるだけ早くロードして、できるだけ早くこれらのスクリプトを実行したいと考えています。ここで HTML5 の async 属性が思い浮かびますが、これは混沌とした無秩序であることに注意してください。

たとえば、まったく無関係な 2 つのサードパーティ スクリプトをロードします。これらのスクリプトがなくてもページは問題なく動作します。どちらが最初に実行され、どちらが最後に実行されるかは気にしません。したがって、これらのサードパーティ スクリプトで async 属性を使用することは、一銭も費やすことなく実行速度を向上させることと同じです。

async 属性は HTML5 の新機能です。この関数は defer に似ており、スクリプトのダウンロード中に DOM レンダリングを可能にします。ただし、スクリプトはダウンロード後できるだけ早く実行されます (つまり、JS エンジンはアイドル状態になるとすぐに実行されます)。スクリプトが順番に実行されるという保証はありません。これらは onload イベントの前に完了します。

Firefox 3.6、Opera 10.5、IE 9、および最新の Chrome と Safari はすべて、async 属性をサポートしています。 async と defer を同時に使用できるため、IE 4 以降のすべての IE は非同期読み込みをサポートしますが、async は defer を上書きすることに注意してください。

すると、この時のページモデルは以下の通りです——

コードをコピーします コードは次のとおりです: