JavaScript_javascript スキルのノンブロッキング読み込みパフォーマンス最適化ソリューション
ブラウザにおける Javascript のパフォーマンスは、フロントエンド開発者が直面する最も重要なユーザビリティの問題であると言えます。
Yahoo の Yslow 23 ルールのうち、その 1 つは JS を最後に置くことです。その理由は、実際には、ほとんどのブラウザーは単一のプロセスを使用して UI や Javascript の更新などの複数のタスクを処理し、一度に 1 つのタスクしか実行できないためです。 JavaScript の実行時間と、ブラウザーがユーザー操作に応答するためにアイドル状態になるまでの待機時間。
基本的なレベルでは、これは <script> タグの存在により、ページ全体がスクリプトの解析と実行を待機することを意味します。実際の JavaScript コードがインラインであるか、無関係な外部ファイルに含まれているかに関係なく、ページのダウンロードと解析のプロセスは停止し、スクリプトがこの処理を完了するまで待ってから続行する必要があります。スクリプトは実行中にページのコンテンツを変更する可能性があるため、これはページのライフサイクルの重要な部分です。典型的な例は、document.write() 関数です。例: <br>
</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="5199" class="copybut" id="copybut5199" onclick="doCopy('code5199')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code5199">
<br>
<html><br>
<頭><br>
<title>スクリプトの例</title><br>
</頭> <br>
<br>
<br>
<p><br>
<script type="text/javascript"><br>
document.write("日付は " (new Date()).toDateString());<br>
</p><br>
</本文> <br>
</html><br>
<br>
</div>
上記の HTML ページのように、ブラウザが <script> タグに遭遇した場合、JavaScript が <p> タグにコンテンツを追加するかどうかを予測する方法はありません。したがって、ブラウザは停止し、この JavaScript コードを実行し、ページの解析と翻訳を続行します。 src 属性を使用して JavaScript をロードするときにも同じことが起こります。ブラウザーはまず外部ファイルのコードをダウンロードする必要がありますが、これには時間がかかり、次にコードを解析して実行します。このプロセス中、ページの解析とユーザーの操作は完全にブロックされます。 <br>
スクリプトは他のページ リソースのダウンロード プロセスをブロックするため、すべての <script> タグをできるだけ <body> タグの最後に配置して、全体のダウンロードへの影響を最小限に抑えることをお勧めします。ページ。例: <p>
<br></p>
<div class="codetitle"><span><a style="CURSOR: pointer" data="96913" class="copybut" id="copybut96913" onclick="doCopy('code96913')">コードをコピー<u></u></a> コードは次のとおりです:</span></div>
<div class="codebody" id="code96913">
<html><br>
<頭><br>
<title>スクリプトの例</title><br>
<link rel="stylesheet" type="text/css" href="styles.css">
</head><br>
<br>
<br>
<p>Hello world!</p><br>
<-- 推奨されるスクリプトの配置の例 --> <br />
<script type="text/javascript" src="file1.js"></script>