高機能JavaScriptの読み込み順序と実行原理を詳しく解説

ブラウザーの JavaScript のパフォーマンスは、開発者が直面する最も深刻なユーザビリティの問題と考えられます。この記事では、主に高パフォーマンスの JavaScript の読み込み順序と実行原理に関する関連情報をサンプル コードを通じて紹介します。非常に詳しく書かれており、すべての人の学習や仕事に参考となる学習価値があります。必要な友人は編集者に従って一緒に学習できます。

ブラウザが タグに遭遇すると、ブラウザはまず外部リンク ファイルをダウンロードしてから実行する必要があり、このプロセス中、ページのレンダリングとユーザーの操作は完全にブロックされます。

スクリプトを置くのに最適な場所はどこですか?

スクリプトがページのレンダリングをブロックし、すべてがダウンロードされて実行されるまでページのレンダリングが続行されないため、この状況には間違いなく深刻なパフォーマンスの問題があります。下の図はコードの実行シーケンスです

。

最初の js ファイルがダウンロードされますが、2 番目の js ファイルは、最初の js ファイルが完全にダウンロードされるまで実行されません。残念ながら、現在、IE8、Firefox3.5、Safari4、および Chrome2 ではすべて、js ファイルの並列ダウンロードが可能です。 、、、js のダウンロード プロセスは、次のような他のリソースのダウンロードを引き続きブロックします: 写真

そこで、パフォーマンスを向上させる方法の 1 つとして、スクリプトを本文の最後に配置します

スクリプトを整理します

各 タグにより、ダウンロード時にページのレンダリングがブロックされるため、ページに含まれる タグの数を減らすことが重要です。 解決策: 複数の js ファイルをマージしてパッケージ化できます。これの利点は、HTTP リクエストの削減に加えて、遅延時間を最小限に抑えることができ、ページ全体のパフォーマンスが大幅に向上することです。

一般に、100 KB のファイルを 1 つダウンロードする方が、25 KB のファイルを 4 つダウンロードするよりも高速です。

複数の外部リンク js ファイルがある場合、それらを 1 つの js ファイルにマージできます

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

1 つの大きな js ファイルをダウンロードすると HTTP リクエストが 1 つだけ生成され、閲覧は一時停止されますこの状況を回避するには、サーバーに時間がかかるため、js ファイルをページに徐々に読み込む必要があります。

遅延スクリプト

defer 属性は、この要素に含まれるスクリプトの実行を遅延できることを示しますが、それをサポートしているのは IE4 以降と Firefox3.5 以降のブラウザのみです

簡単に言えば、遅延メカニズムは待機することです。 DOM がロードされるまでは、js ファイルをダウンロードするだけで、ブラウザーの他のプロセスはブロックされません

defer 属性をサポートしていないブラウザーでポップアップ表示される順序は、defer、script、load です。

defer 属性をサポートするブラウザーのポップアップ 順序は次のとおりです: script、defer、load

したがって、onload イベントが実行される前に defer が呼び出されます

動的スクリプト

動的を注入するには 2 つの方法があります1 つ目はスクリプト タグを動的に作成することで、2 つ目は XMLHttpRequest インジェクション ページを渡すことです

まず最初の方法の使用方法について説明します:

このテクノロジーの重要な点は、次のとおりです。ダウンロードが開始されると、ファイルのダウンロードと実行プロセスはページの他のプロセスをブロックしませんが、動的スクリプト ノードが js ファイルをダウンロードすると、返されたコードがすぐに実行されます (Firefox と Opera を除く)。以前のすべての動的スクリプト ノードが実行を完了するまで待ちます)

主流のブラウザでは、 イベントを受信するとロードがトリガーされますが、IE ブラウザにはそれがないため、次のメソッドをカプセル化する必要があります。すべてのブラウザと互換性があります

この方法の欠点は、ファイルの読み込み順序を知る必要があることです。js ファイルが多すぎると、依存関係が複雑になると、順序の管理が困難になります。読み込まれた依存関係の数

このように書かれたコードは保守が困難です

スクリプトを動的に作成する 2 番目の方法は、実際にはインラインでスクリプトを作成するのと同じです。作成された 要素がページに追加されると、コードがすぐに実行され、準備が整います。

利点: js コードはダウンロードされますが、すぐには実行されません。この方法では、準備が整うまでスクリプトの実行を延期できます。

欠点: js ファイルは、ページは同じドメイン内にあり、CDN から js ファイルをダウンロードすることはできません。通常、大規模な Web アプリケーションではこの方法を使用しません。

ダイナミクスに必要なコードを追加します。まず、ページの残りの部分を初期化するふりをします

[画像のアップロードに失敗しました...(image-dd3f9-1515902024710)]

上記で多くのことを紹介しましたが、いくつかの動的コードをお勧めしたいと思います。遅延読み込みライブラリを紹介します

YUI3、LazyLoad、LABjsなどのライブラリがありますが、個人的にはLABjsライブラリの方が使いやすいと思いますが、使い方は説明しません。ここでそれを使用します。

概要:

js のパフォーマンスを向上させるためのいくつかの側面

1. タグを閉じる前に、すべての タグをページの下部に配置します。これにより、スクリプトが実行される前にページが確実にレンダリングされます

2. スクリプトをマージします。ページ内の タグが少ないほど、読み込みと応答が速くなります。これは、外部リンク ファイルや埋め込みスクリプトに関係なく当てはまります

3. ブロックせずに js をダウンロードする方法はたくさんあります 3.1 タグの defer 属性を使用します 3.2 動的に作成された 要素を使用してダウンロードして実行しますコード

3.3 XHR オブジェクトを使用して js コードをダウンロードし、ページに挿入します

上記の戦略を通じて、大量の js を必要とする Web アプリケーションの実際のパフォーマンスを大幅に向上させることができます。