クラシックタグとノンブロッキングタグの使用例を詳しく解説-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

クラシックタグとノンブロッキングタグの使用例を詳しく解説

伊谢尔伦

Jul 21, 2017 pm 03:41 PM

scriptラベル使用法

最新のブラウザの <script> タグは、クラシックとノンブロッキングの 2 つの新しいタイプに分類されます。これら 2 つのタグを使用してページをできるだけ早く読み込む方法について説明します。 </script>

1. ブロックしているスクリプトはどこに行くのでしょうか?

上記の理由に基づいて、ページの

タグの最後にスクリプトを配置することがますます一般的になってきています。このようにして、ユーザーはページをより速く表示できる一方で、スクリプトはイベントがトリガーされるのを待たずに DOM にアクティブにアクセスすることもできます。ほとんどのスクリプトにとって、この「移動」は大きな改善です。

しかし、すべてのスクリプトが同じというわけではありません。スクリプトを読み進める前に、自分自身に 2 つの質問をしてください。

このスクリプトが

タグ内のインライン JavaScript によって直接呼び出される可能性はありますか?答えは明らかかもしれませんが、それでも確認する価値はあります。

このスクリプトはレンダリングされたページの外観に影響しますか? Typekit ホストフォントは一例です。 Typekit スクリプトをドキュメントの最後に配置すると、ページテキストはドキュメントが読み取られた直後とスクリプトの実行時に 2 回レンダリングされます。

上記の質問に対する答えの 1 つが「はい」である限り、スクリプトは

タグに配置する必要があります。それ以外の場合は、ドキュメントは次のようになります。これにより読み込み時間は確かに大幅に短縮されますが、bodyScripts.js が読み込まれる前にユーザーがページを操作する機会が与えられる可能性があることに注意してください。

2. スクリプトの早期読み込みと遅延実行

ほとんどのスクリプトはに配置することをお勧めします。これにより、ユーザーは Web ページをより速く表示できるだけでなく、バインドする前に DOM を操作する必要がなくなります。準備完了" "イベントの費用。ただし、このアプローチには、ドキュメント全体が読み込まれるまでブラウザがこれらのスクリプトを読み込めないという欠点もあり、これが低速接続で送信される大きなドキュメントのボトルネックになる可能性があります。

理想的には、スクリプトはドキュメントのロードと同時にロードされる必要があり、DOM のレンダリングには影響しません。この方法では、スクリプトは <script> タグの順序ですでに読み込まれているため、ドキュメントの準備ができたらスクリプトを実行できます。 <p>ここまで読んだ方は、そのようなニーズを満たすカスタム Ajax スクリプトローダーを作成したくなるはずです。ただし、ほとんどのブラウザは、より単純なソリューションをサポートしています。 <p><pre class='brush:php;toolbar:false;'><html> <head>  <script src="headScripts.js"></scripts> </head> <body>  <script src="bodyScripts.js"></script> </body> </html></pre> defer 属性を追加することは、ブラウザに次のように指示することと同じです。「今すぐこのスクリプトの読み込みを開始してください。ただし、ドキュメントの準備が整い、defer 属性を持つ以前のすべてのスクリプトの実行が完了するまで待ってからドキュメント内で実行してください。」遅延スクリプトを <head> タグに配置すると、スクリプトを <body> タグに配置することによるすべての利点が得られるだけでなく、大きなドキュメントの読み込み速度も大幅に向上します。 <p>欠点は、すべてのブラウザが defer 属性をサポートしているわけではないことです。つまり、ドキュメントのロード後に遅延スクリプトを実行できるようにするには、すべての遅延スクリプトコードを jQuery の $(document).ready などの構造にカプセル化する必要があります。 <p>前のセクションのページ例は次のように改善されました: <p><pre class='brush:php;toolbar:false;'><script defer src = "deferredScript.js"></pre> deferredScript のカプセル化は重要であることに注意してください。そのため、ブラウザーが defer をサポートしていない場合でも、deferredScript はドキュメントの準備完了イベントが終了するまで実行されません。ページのメインコンテンツが数キロバイトよりはるかに大きい場合は、価格を支払う価値があります。 <p>3. スクリプトの並列読み込み<p> ページの読み込み時間をミリ秒単位で気にする完璧主義者にとって、遅延は味のない醤油のようなものかもしれません。以前のすべての遅延スクリプトの実行が完了するまで待つ必要はなく、これらのスクリプトを実行する前にドキュメントの準備が完了するまで待つ必要もありません。これらのスクリプトをできるだけ早くロードして実行したいだけです。これが、最新のブラウザーが async 属性を提供する理由です。 <p><pre class='brush:php;toolbar:false;'><script async src = "speedyGonzales.js"> <script async src = "roadRunner.js"></pre><p>如果说defer 让我们想到一种静静等待文档加载的有序排队场景，那么async 就会让我们想到混乱的无政府状态。前面给出的那两个脚本会以任意次序运行，而且只要JavaScript 引擎可用就会立即运行，而不论文档就绪与否。<br/>对大多数脚本来说，async 是一块难以下咽的鸡肋。async 不像defer那样得到广泛的支持。同时，由于异步脚本会在任意时刻运行，它实在太容易引起海森堡蚁虫之灾了（脚本刚好结束加载时就会蚁虫四起）。<br/>当我们加载一些第三方脚本，而且也不在乎它们谁先运行谁后运行。因此，对这些第三方脚本使用async 属性，相当于一分钱没花就提升了它们的运行速度。<br/>上一个页面示例再添加两个独立的第三方小部件，得到的结果如下：<pre class='brush:php;toolbar:false;'><html> <head>  <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer></script> </head> <body>  <script async defer src="feedbackWidget.js"></script> <script async defer src="chatWidget.js"></script> </body> </html></pre><p>这个页面结构清晰展示了脚本的优先次序。对于绝大多数浏览器，DOM的渲染只会延迟至headScripts.js 结束运行时。进行DOM渲染的同时会在后台加载deferredScripts.js。接着，在DOM 渲染结束时将运行deferredScripts.js 和那两个小部件脚本。这两个小部件脚本在那些支持async 的浏览器中会做无序运行。如果不确定这是否妥当，请勿使用async！</script>

以上がクラシックタグとノンブロッキングタグの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます