グーグル ページ スピード義 Defer Loading of JavaScript 項目を 翻訳した のだ.

要約

始める 時 ジャバスクリプト 関数 呼び出しを 延ばす のは 初期 ダウンロード 用量を 減らす. 違う 資源たちを 並列的に ダウンロードするように 許容すること だからだ. それでは 実行 時間と レンダリング 速度が 早くなる.(凡そ 意味は 当たるのに 翻訳は 正確か 分からない : Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time. )

詳らかに 表示

スタイルシーツのように, スクリプトも ブラウザーが ウェブ ページを レンダリングすること 前に ダウンロードされて パッシングされると する. 再び 言って, 下痢 スクリプトが 外部 ファイルで ページに 挿入されて あって, ブラウザーが それを キャッシュで 保存して あると しても, ディスクに 保存されて あった ジャバスクリプト コードを 皆 行うこと 前まで ブラウザーは スクリプト 下に ある あらゆる エレメントに 大韓 レンダリングを 止める. しかし, いくつか ブラウザーで, こういう 状況を スタイルシーツより もっと 中 良い 結果を 生む: ジャバスクリプトが 実行される 間, 初めから 違う 資源に 大韓 ダウンロードを 止めて 捨てる のだ. 大容量 ジャバスクリプトを 含む AJAX タイプ アプリケーションで, これは 速度を 深刻に 延ばすように なる 数 ある.

スクリプト 集約的な アプリケーションで 多い 場合 大容量 ジャバスクリプト コードは 使用者が 何か 割 時 起る イベントを 制御する コードだ. マウス クリックや ドラッグ, フォーム 項目と 提出, 隠し 要素 広げること 等々. こういう 式で 使用者が 発生させる イベントは 皆 ページが ロードされた 次 起る イベントで, onload イベントが これらを 行う. したがって, メイン ページを ローディングする 瞬間に 引き延ばしが 多く なる のは ジャバスクリプト ローディングを, それが 実際で 必要になる 前まで, 延ばして 避ける 数 ある. “怠けな” ローディングが 実際 ジャバスクリプト コードの 用量を 減らす のは ない. しかし ページが 始まる 時 ダウンロードすると する 用量は かなり 減らして 与える. そして 残りは バックグラウンドで 非動機的に(始める 時 ところで 受けるの ないという 意味だ) ダウンするように 残して おく のだ.

これ テクニックを 使えば, onload イベントで 呼び出す ジャバスクリプト 関数と そうなの ない のを 区分すると する. ページ 手始め 時 呼び出すの ない 関数が 25犬 以上なら, それを 分離して 外部 js ファイルで 移す. ファイルたちの 依存性を 考慮しながら リペックトリングを すると 割 首都 ある. (そんな 関数が 25犬 未満なら 努力を 野良仕事 価値が ない.)

そして 出て, 文書の ヘッド 部分に ジャバスクリプト イベント リスナーを 挿入する. onload イベントで, 外部 ジャバスクリプト ファイルを ロードする 数 あるように 言葉だ. どうな スクリプト コードを 使って これを しても 上官 ない. するが 私たちは 阿洲 簡単な ドーム エレメント スクリプトを お勧めする. (クロス ブラウザーと 同一 ドメイン 政策 イシューを 避ける 数 あること だからだ.) ここ 例示が ある.(ローディングを 引き延ばすと する 関数を 含みと ある “deferredfunctions.js”を 扱う コードだ.)

<script type="text/javascript">

 // Add a script element as a child of the body
 // スクリプト 要素を body義 子で 入れる.
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 // ブラウザーに よって イベント ハンドリング 命令を ダリ する.
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。