クラシックタグとノンブロッキングタグの使用例を詳しく解説
最新のブラウザの <script> タグは、クラシックとノンブロッキングの 2 つの新しいタイプに分類されます。これら 2 つのタグを使用してページをできるだけ早く読み込む方法について説明します。 </p> <p>1. ブロックしているスクリプトはどこに行くのでしょうか? </p> <p> <script> タグの標準バージョンは、ブロッキング タグと呼ばれることがあります。この用語は文脈の中で理解する必要があります。最新のブラウザは、ブロッキング <script> タグを見つけると、ブロッキング ポイントをスキップして、ドキュメントの読み取りと他のリソース (スクリプトとスタイルシート) のダウンロードを続行します。ただし、スクリプトがダウンロードされて実行されるまで、ブラウザーはチョークポイントを超えてこれらのリソースを評価しません。したがって、Web ドキュメントの </p> タグ内に 5 つのブロック <script> タグがある場合、5 つのスクリプトすべてがダウンロードされて実行されるまで、ユーザーにはページ タイトルのみが表示されます。それだけでなく、これらのスクリプトが実行されたとしても、ブロック ポイントより前のドキュメントの部分しか表示されません。 <body> タグでロードを待っているすべての機能を確認したい場合は、document.onreadystatechange のようなイベントにイベント ハンドラーをバインドする必要があります。 <p>上記の理由に基づいて、ページの <body> タグの最後にスクリプトを配置することがますます一般的になってきています。このようにして、ユーザーはページをより速く表示できる一方で、スクリプトはイベントがトリガーされるのを待たずに DOM にアクティブにアクセスすることもできます。ほとんどのスクリプトにとって、この「移動」は大きな改善です。 <p>しかし、すべてのスクリプトが同じというわけではありません。スクリプトを読み進める前に、自分自身に 2 つの質問をしてください。 <p>このスクリプトが <body> タグ内のインライン JavaScript によって直接呼び出される可能性はありますか?答えは明らかかもしれませんが、それでも確認する価値はあります。 <p>このスクリプトはレンダリングされたページの外観に影響しますか? Typekit ホスト フォントは一例です。 Typekit スクリプトをドキュメントの最後に配置すると、ページ テキストはドキュメントが読み取られた直後とスクリプトの実行時に 2 回レンダリングされます。 <p>上記の質問に対する答えの 1 つが「はい」である限り、スクリプトは <head> タグに配置する必要があります。それ以外の場合は、ドキュメントは次のようになります。 これにより読み込み時間は確かに大幅に短縮されますが、bodyScripts.js が読み込まれる前にユーザーがページを操作する機会が与えられる可能性があることに注意してください。 <p>2. スクリプトの早期読み込みと遅延実行<p> ほとんどのスクリプトは <body> に配置することをお勧めします。これにより、ユーザーは Web ページをより速く表示できるだけでなく、バインドする前に DOM を操作する必要がなくなります。準備完了" "イベントの費用。ただし、このアプローチには、ドキュメント全体が読み込まれるまでブラウザがこれらのスクリプトを読み込めないという欠点もあり、これが低速接続で送信される大きなドキュメントのボトルネックになる可能性があります。 <p>理想的には、スクリプトはドキュメントのロードと同時にロードされる必要があり、DOM のレンダリングには影響しません。この方法では、スクリプトは <script> タグの順序ですでに読み込まれているため、ドキュメントの準備ができたらスクリプトを実行できます。 <p>ここまで読んだ方は、そのようなニーズを満たすカスタム Ajax スクリプト ローダーを作成したくなるはずです。ただし、ほとんどのブラウザは、より単純なソリューションをサポートしています。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><html> <head> <!--metadata and stylesheets go here --> <script src="headScripts.js"></scripts> </head> <body> <!-- content goes here --> <script src="bodyScripts.js"></script> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div></p> defer 属性を追加することは、ブラウザに次のように指示することと同じです。「今すぐこのスクリプトの読み込みを開始してください。ただし、ドキュメントの準備が整い、defer 属性を持つ以前のすべてのスクリプトの実行が完了するまで待ってからドキュメント内で実行してください。」遅延スクリプトを <head> タグに配置すると、スクリプトを <body> タグに配置することによるすべての利点が得られるだけでなく、大きなドキュメントの読み込み速度も大幅に向上します。 <p></p>欠点は、すべてのブラウザが defer 属性をサポートしているわけではないことです。つまり、ドキュメントのロード後に遅延スクリプトを実行できるようにするには、すべての遅延スクリプト コードを jQuery の $(document).ready などの構造にカプセル化する必要があります。 <p></p>前のセクションのページ例は次のように改善されました: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script defer src = "deferredScript.js"></pre><div class="contentsignin">ログイン後にコピー</div></div></p> deferredScript のカプセル化は重要であることに注意してください。そのため、ブラウザーが defer をサポートしていない場合でも、deferredScript はドキュメントの準備完了イベントが終了するまで実行されません。ページのメインコンテンツが数キロバイトよりはるかに大きい場合は、価格を支払う価値があります。 <p></p>3. スクリプトの並列読み込み<p></p> ページの読み込み時間をミリ秒単位で気にする完璧主義者にとって、遅延は味のない醤油のようなものかもしれません。以前のすべての遅延スクリプトの実行が完了するまで待つ必要はなく、これらのスクリプトを実行する前にドキュメントの準備が完了するまで待つ必要もありません。これらのスクリプトをできるだけ早くロードして実行したいだけです。これが、最新のブラウザーが async 属性を提供する理由です。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script async src = "speedyGonzales.js"> <script async src = "roadRunner.js"></pre><div class="contentsignin">ログイン後にコピー</div></div><p>如果说defer 让我们想到一种静静等待文档加载的有序排队场景，那么async 就会让我们想到混乱的无政府状态。前面给出的那两个脚本会以任意次序运行，而且只要JavaScript 引擎可用就会立即运行，而不论文档就绪与否。<br/>对大多数脚本来说，async 是一块难以下咽的鸡肋。async 不像defer那样得到广泛的支持。同时，由于异步脚本会在任意时刻运行，它实在太容易引起海森堡蚁虫之灾了（脚本刚好结束加载时就会蚁虫四起）。<br/>当我们加载一些第三方脚本，而且也不在乎它们谁先运行谁后运行。因此，对这些第三方脚本使用async 属性，相当于一分钱没花就提升了它们的运行速度。<br/>上一个页面示例再添加两个独立的第三方小部件，得到的结果如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer></script> </head> <body> <!-- content goes here --> <script async defer src="feedbackWidget.js"></script> <script async defer src="chatWidget.js"></script> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div><p>这个页面结构清晰展示了脚本的优先次序。对于绝大多数浏览器，DOM的渲染只会延迟至headScripts.js 结束运行时。进行DOM渲染的同时会在后台加载deferredScripts.js。接着，在DOM 渲染结束时将运行deferredScripts.js 和那两个小部件脚本。这两个小部件脚本在那些支持async 的浏览器中会做无序运行。如果不确定这是否妥当，请勿使用async！</script>
以上がクラシックタグとノンブロッキングタグの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7691
15
1639
14
1393
52
1287
25
1229
29
JSPコメントの使用法と分類を分析する
Feb 01, 2024 am 08:01 AM
JSP コメントの分類と使用状況の分析 JSP コメントは 2 つのタイプに分類されます。 単一行コメント: で終わる、単一行のコードのみコメントできます。複数行のコメント: /* で始まり */ で終わると、複数行のコードにコメントを付けることができます。単一行のコメントの例 複数行のコメントの例/**これは複数行のコメントです*コードの複数行にコメントできます*/JSP コメントの使用法 JSP コードを読みやすくするために JSP コメントを使用できます。
Chrome と Edge のすべてのタブでテキストを検索する方法
Feb 19, 2024 am 11:30 AM
このチュートリアルでは、Windows の Chrome または Edge で開いているすべてのタブで特定のテキストまたは語句を検索する方法を説明します。 Chrome で開いているすべてのタブでテキスト検索を行う方法はありますか?はい。Chrome で無料の外部 Web 拡張機能を使用すると、タブを手動で切り替えることなく、開いているすべてのタブでテキスト検索を実行できます。 TabSearch や Ctrl-FPlus などの一部の拡張機能を使用すると、これを簡単に実現できます。 Google Chrome のすべてのタブでテキストを検索するにはどうすればよいですか? Ctrl-FPlus は、ユーザーがブラウザ ウィンドウのすべてのタブで特定の単語、語句、またはテキストを簡単に検索できるようにする無料の拡張機能です。この展開は
C言語でexit関数を正しく使用する方法
Feb 18, 2024 pm 03:40 PM
C 言語で exit 関数を使用する方法には、具体的なコード例が必要です。C 言語では、プログラムの実行をプログラムの初期段階で終了したり、特定の条件下でプログラムを終了したりする必要があることがよくあります。 C 言語には、この関数を実装するための exit() 関数が用意されています。この記事では、exit() 関数の使用法を紹介し、対応するコード例を示します。 exit() 関数は C 言語の標準ライブラリ関数であり、ヘッダー ファイルに含まれています。その機能はプログラムの実行を終了することであり、整数を取ることができます。
WPSdatedif関数の使い方
Feb 20, 2024 pm 10:27 PM
WPS は一般的に使用されるオフィス ソフトウェア スイートであり、WPS テーブル関数はデータ処理と計算に広く使用されています。 WPS テーブルには、2 つの日付間の時差を計算するために使用される、DATEDIF 関数という非常に便利な関数があります。 DATEDIF 関数は英語の DateDifference の略語で、構文は次のとおりです: DATEDIF(start_date,end_date,unit) ここで、start_date は開始日を表します。
Python関数入門：abs関数の使い方と例
Nov 03, 2023 pm 12:05 PM
Python 関数入門: abs 関数の使い方と例 1. abs 関数の使い方の概要 Python では、abs 関数は、指定された値の絶対値を計算するために使用される組み込み関数です。数値引数を受け入れ、その数値の絶対値を返すことができます。 abs 関数の基本構文は次のとおりです。 abs(x) ここで、x は絶対値を計算する数値パラメータであり、整数または浮動小数点数を指定できます。 2. abs 関数の例 以下に、いくつかの具体的な例を通して abs 関数の使用法を示します。 例 1: 計算
Python関数入門：isinstance関数の使い方と例
Nov 04, 2023 pm 03:15 PM
Python 関数の紹介: isinstance 関数の使用法と例 Python は、プログラミングをより便利かつ効率的にするための多くの組み込み関数を提供する強力なプログラミング言語です。非常に便利な組み込み関数の 1 つは isinstance() 関数です。この記事では、isinstance関数の使い方と例を紹介し、具体的なコード例を紹介します。 isinstance() 関数は、オブジェクトが指定されたクラスまたは型のインスタンスであるかどうかを判断するために使用されます。この関数の構文は次のとおりです
MySQL ISNULL関数の詳しい解説と使い方紹介
Mar 01, 2024 pm 05:24 PM
MySQL の ISNULL() 関数は、指定された式またはカラムが NULL かどうかを判断するために使用される関数です。ブール値、式が NULL の場合は 1、それ以外の場合は 0 を返します。 ISNULL()関数は、SELECT文やWHERE句の条件判定に使用できます。 1. ISNULL() 関数の基本構文: ISNULL(expression) ここで、expression は、NULL かどうかを判断する式です。
Douyin にタグを追加してトラフィックを集めるにはどうすればよいですか?プラットフォーム上のどのタグがトラフィックを引き付けるのが最も簡単ですか?
Mar 22, 2024 am 10:28 AM
人気のショートビデオソーシャルプラットフォームとして、Douyin は巨大なユーザーベースを持っています。 Douyin クリエイターにとって、タグを使用してトラフィックを集めるのは、コンテンツの露出を増やして注目を集める効果的な方法です。では、Douyin はトラフィックを集めるためにタグをどのように使用しているのでしょうか?この記事では、この質問に詳しく答え、関連するテクニックを紹介します。 1. Douyin にタグを追加してトラフィックを集めるにはどうすればよいですか?動画を投稿するときは、必ずコンテンツに関連したタグを選択してください。ユーザーがタグからビデオを見つけやすくするために、これらのタグはビデオのトピックとキーワードをカバーする必要があります。人気のハッシュタグを活用することは、動画の露出を増やす効果的な方法です。現在人気のタグやトレンドを調査し、動画の説明やタグに組み込んでください。これらの人気のあるタグは通常、視認性が高く、より多くの視聴者の注目を集めることができます。 3. ラベル
