ホームページ > 記事 > ウェブフロントエンド > 高パフォーマンスの JavaScript スクリプトの読み込みと実行_javascript スキルの作成

高パフォーマンスの JavaScript スクリプトの読み込みと実行_javascript スキルの作成

WBOYオリジナル: 2016-05-16 18:29:15731ブラウズ

スクリプトは HTML ページの先頭または本文に配置できます。
スクリプトを本文に挿入します。ブラウザは <script> タグを検出すると、スクリプトがテキストタグを挿入するか HTML タグを挿入するかを認識しないため、ブラウザは HTML ページの分析を停止してスクリプトを実行します。 src を使用してスクリプトを追加すると、ブラウザは同じことを行います。スクリプトの処理中、ページのレンダリングとユーザーの操作は完全にブロックされます。スクリプトのダウンロードと実行により、ページのレンダリングに使用される画像などの他のリソースのダウンロードがブロックされます。 (多くのブラウザはスクリプトの並列ダウンロード技術を実装していますが、この問題はまだ解決されていません) <br>スクリプトの場所<br>上記の理由を考慮すると、スクリプトは常にページの下部に配置する必要があります。つまり、 </body> の前にあります。 <br><strong>簡単な例:</strong> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="780" class="copybut" id="copybut780" onclick="doCopy('code780')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code780"> <br><html> <br><head> <br><title>スクリプト例</title> <br><link rel="stylesheet" type="text/css" href=" style.css "> <br></head> <br><body> <br><p>Hello world!</p> <br><script type="text/javascript" src ="file1 .js"></script>

マージスクリプト
スクリプトのダウンロードによりページのレンダリングがブロックされるため、スクリプトがインラインか外部かに関係なく、ページの <script> タグの使用を減らす必要があります。外部スクリプトを扱う場合は、リクエストの確立に時間がかかるため、ブラウザが 100 kb のスクリプトをダウンロードするのにかかる時間は、25 kb のスクリプト 4 つをダウンロードするよりもはるかに短くなります。したがって、ページでは外部スクリプトへの参照を最小限に抑える必要があります。 <br>ノンブロッキングスクリプト <br>その秘密は、ページの読み込みが完了した後、つまり window オブジェクトの onload イベントがトリガーされる前にスクリプトを読み込むことです。これを実装する方法はいくつかあります。 <br><strong>1. defer</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="92494" class="copybut" id="copybut92494" onclick="doCopy('code92494')"><u> を使用してコード </u></a></span> をコピーします。コードは次のとおりです: </div> <div class="codebody" id="code92494"> <br><html> <br><title>スクリプト遅延の例</title> <body> <br><スクリプト遅延> <br></script>
alert("script");

window.onload = function(){
;/body>

このテクノロジーの欠点は、script/defer/load のみがサポートされていることです。 IE4とFF3.5による。
ノンブロッキングスクリプト (続き)

2. 動的スクリプト要素