JavaScriptで高パフォーマンスの読み込み順序を実装する方法-jsチュートリアル-php.cn

この記事では、主に高パフォーマンス JavaScript の読み込み順序と実行原理に関する関連情報をサンプル コードを通じて詳しく紹介します。この記事は、学習や仕事に必要な学習に役立ちます。一緒に勉強しましょう。

はじめに

今日は、ブラウザーでの JavaScript のパフォーマンスは、開発者が直面する最も深刻なユーザビリティの問題と考えられます。今日は、高パフォーマンスの JavaScript の読み込みと実行に関する章を読んだ後、その方法について話しましょう。 js の読み込み順序と実行原理を解決します。以下で説明することはあまりありません。詳細な紹介を見てみましょう:

ブラウザが タグに遭遇したとき、ブラウザは最初に時間を言う必要があります。外部リンクのファイルをダウンロードして実行する際、ページのレンダリングとユーザーの操作は完全にブロックされます。

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

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

最初の js ファイルがダウンロードされた後、最初の js ファイルが完全にダウンロードされるまで 2 番目の js ファイルは実行されません。ただし、現在、IE8、Firefox3.5、Safari4、Chrome2 ではすべて、js ファイルの並列ダウンロードが可能です。はい、残念ながら、js のダウンロード プロセスは、画像などの他のリソースのダウンロードをブロックします

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

スクリプトを整理する

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

一般的に、100KB のファイルを 1 つダウンロードする方が、25KB のファイルを 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 ファイル 要求されたページと同じドメインにある必要があります。js ファイルは CDN からダウンロードできません。通常、大規模な Web アプリケーションでは、この方法を使用することをお勧めします。

コードを追加します。最初にダイナミクスに必要なコード、次にページを初期化するふりをする残りのコード [画像のアップロードに失敗しました...(image-dd3f9-1515902024710)]

上で多くのことを紹介しましたが、いくつかのダイナミックをお勧めしたいと思いますYUI3、LazyLoad、LABjsを含む遅延読み込みライブラリ これらのライブラリを待っていますが、個人的にはLABjsライブラリの方が使いやすいと思いますが、使用方法についてはここでは説明しません。

概要:

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

1. タグを閉じる前に、すべての タグをページの下部に配置します。これにより、スクリプトが実行される前にページが確実にレンダリングされます 2. スクリプトをマージします。ページ内の タグが少ないほど、読み込みと応答が速くなります。これは、外部リンク ファイルや埋め込みスクリプトに関係なく当てはまります 3. ブロックせずに js をダウンロードするには、さまざまな方法があります 3.1 タグの defer 属性を使用します 3.2 動的に作成された 要素を使用して、コード

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

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

上記は次のとおりです皆さんのためにまとめましたので、今後も活用していただければ幸いです。

jsでMVVMフレームワークを実装する(詳細なチュートリアル)

requireJSでモジュールローダーを実装するには?

淘宝網のJSsearchを模倣する(詳細なチュートリアル)