Javascriptの読み込みと実行パフォーマンスの向上_JavaScriptスキル

Js のブロックの性質 ブラウザーでの Javascript のパフォーマンスの問題は、最も重要なユーザビリティの問題である可能性があります Js のブロックの性質 ブラウザーは、単一のプロセスを使用して UI プロセスとJsの実行 埋め込みか外部かにかかわらず、ページを改変する可能性があるため、すぐにダウンロードして実行してください ページのライフサイクルの概念 ダウンロード時間と実行時間 スクリプトとリンク本体がヘッドにロードされるまでは何も出力されないため、空白のページが表示されます コードをコピー コードは次のとおりです。 document.write("日付は" (new Date().toDateString()) ) ; 複数の js とその他のリソース、ただし画像のダウンロードに影響あり 結論、スクリプトを最後に配置してロード スクリプトを整理する 目標は遅延を最小限に抑える時間 問題 複数のスクリプト ファイルを参照し、複数のスクリプト タグを埋め込むと 各 http リクエストによりパフォーマンスのオーバーヘッドが発生します リンクの直後のスクリプトはエラーになり、CSS が読み込まれるまで待機します。最も正確な描写を得るために 結論: スクリプトタグの数を減らす 複数のjsファイルを1つにマージ、パッケージ化ツール Yahooのマージプロセッサ ノンブロッキングスクリプト js は、http リクエストの処理やインターフェイスの更新など、ブラウザの特定のプロセスをブロックする傾向があります。これは最も重要なパフォーマンスの問題です。そのため、js ファイルのサイズを減らし、http リクエストの数を制限する必要があります ただし、豊富な機能とコードの量の間には矛盾があり、それを 1 つのファイルにマージすると、長時間ブラウザがロックされてしまいます。なので、JavaScript ファイルを徐々にロードする必要があります キーポイント: ページがロードされた後に JavaScript ファイルをロードします 1. スクリプトのロードを遅らせます defer 属性 ダウンロードする js ファイルが dom 操作を実行しない場合、この属性はファイルを並行してダウンロードできるようにするため、非常に便利です。ただし、onload イベントの後に実行されます。任意のスクリプトタグ 2. 動的読み込みスクリプト 関数 コードをコピー コード functionloadScript(url,callback){ var script = document.createElement('script'); script.type = 'text/javascript'; 🎜>if(script.readyState) { //IE script.onreadyStatechange = function() { if(script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadyStatechange = null; callback(); } } else { script.onload = function(){ callback(); } ここではブラウザの互換性に注意してください。 このようにロードする必要があるファイルが複数ある場合は、 コードをコピーします コードは次のとおりです: loadScript('file1.js', function(){ loadScript ('file2.js',function(){ }) }); 3. XHR スクリプト インジェクション コードをコピー コードは次のとおりです。 var xhr = new XMLHttpRequest() xhr.open('get ','file1.js',true); xhr.onreadystatechange= function(){ if(xhr.readyState == 4) { if(xhr.status >= 200 && xhr. status var oScript = document.createElement('script'); oScript.text = xhr.responseText; oScript); } } } 304 は、キャッシュからテキストを取得するときに ajax を使用することを示します コンテンツをテキストに入れます その利点 優れた互換性、非同期、欠点: ドメインを拡張できず、CDN からコンテンツを取得できない