ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptの読み込みと実行を高速化する方法
JavaScriptの読み込みと実行を高速化する方法
- 黄舟オリジナル
- 2016-12-20 15:40:111061ブラウズ
JS には非常にサイレントなブロック機能があります。つまり、ブラウザーが JS コードを実行しているときは、コードが埋め込みか外部かに関係なく、同時に他のことを行うことはできません。
ブラウザーが外部 JS ファイルを導入する 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを検出すると、ページのレンダリングとユーザーの操作を完全にブロックして、そのファイルをダウンロード、解析、実行します。一時停止や空白のページがある場合は、JS スクリプトをできるだけページの下部に配置する必要があります。これは非常に重要です。ページ内の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの数は可能な限り減らす必要があります。これは同時に、HTTP リクエストによって追加のパフォーマンス オーバーヘッドが生じることも考慮されており、ページ内の外部リンク スクリプトの数を減らす必要があります。減らされる。
複数の JS ファイルを手動でマージすることも、Yahoo! コンボ ハンドラーなどのリアルタイム オンライン サービスを使用することもできます。たとえば、以下の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは実際に 3 つの JS ファイルを読み込みます。ブロッキング状況を解決するために、JS スクリプトの並列ダウンロードを実装するためのいくつかの解決策を次に示します。
1. 遅延スクリプト
HTML4 では、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの defer 属性が定義されており、この属性は IE4 以降と Firefox 3.5 以降でのみサポートされています。 defer 属性を宣言する 3f1c4e4b6b16bbbd69b2ee476dc4f83a は、DOM の読み込みが完了して window.onload イベントがトリガーされる前に解析されて実行されます:
<html> <head> <title>无标题文档</title> <link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/"> </head> <body> <p>页面的内容。。。</p> <!-- 推荐的位置，页面底部： --> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </html>
2. 動的スクリプト要素
これは、最も一般的なソリューションであり、動的に作成されます。 DOM3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素をドキュメントに挿入すると、要素がページに追加されるとファイルのダウンロードが開始されます。そのため、ダウンロードがいつ開始されたとしても、ファイルのダウンロードと実行のプロセスは、その上の他のプロセスをブロックしません。ページ。
ただし、この方法でロードされたコードはすぐに実行されるため、各ファイルの役割と適切な実行順序を明確に理解する必要があることに注意してください。このとき、スクリプトのダウンロードを追跡して確認する必要があります。 is completed and Ready, not IE 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素が完了すると、ブラウザはloadイベントをトリガーしますが、IEはreadystatechangeイベントをトリガーし、readyState属性を通じてそれを判断します。以下は、互換性のある JS スクリプトを動的にロードする関数です:
<html> <head> <title>无标题文档</title> <link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/"> </head> <body> <p>页面的内容。。。</p> <!-- 推荐的位置，页面底部： --> <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script> </body> </html>
この関数をload_script.js ファイルに保存し、複数のスクリプトをロードする場合、この関数を使用して他のスクリプトをロードすることができます。読み込みシーケンスでは、load_script() の実行を連続して接続し、最後にページの下部に配置できます。これは完璧な解決策です:
<script type="text/javascript" src="file1.js" defer></script>
3. XMLHttpRequest スクリプト挿入
は読み込みを意味します。 AJAX を使用しますが、この方法ではクロスドメイン読み込みを実現できないため、大規模な Web サイトには適していません。
もちろん、私たちが上記で行った作業は、これらの才能ある人々によって完了されており、いくつかの優れた JS ライブラリが私たちが使用できるように書かれています。これらはすべて、JS スクリプトのブロッキング問題を解決し、並列ダウンロードを実現します。 YUI3、LazyLoad、LABjsなど
上記は JavaScript の読み込みと実行を高速化する方法です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。