LocalStorageやその他の犯人によるDOMブロッキングを避ける方法

キーポイント

• コンピューティング、DOMの更新、LocalStorageまたはIndexEdDBブロックDOMの更新を使用してデータの保存と取得などのJavaScript操作の同期とフロントエンドのパフォーマンスに影響を与えます。
• Webワーカーを使用して、長期にわたるプロセスを処理できます。メインブラウザーアプリケーションは、バックグラウンドスクリプトを起動し、メッセージイベントを使用して通信することができますが、DOMまたはLocalStorageに直接アクセスできません。
• ハードウェアアクセラレーションのCSSアニメーションは、独自のレイヤーで実行され、アニメーションの滑らかさが向上し、ほとんどの最新のブラウザではブロックされていません。
• メモリストレージは、ディスクベースのストレージメカニズムよりも高速なデータ更新を提供します。メモリオブジェクトを使用してパフォーマンスを改善し、便利な場合はデータを永久に保存することをお勧めします。

ブラウザやnode.jsなどの実行環境でのJavaScriptプログラムは、単一のスレッドで実行されます。コードが[ブラウザ]タブで実行されると、他のすべての操作が停止します：メニューコマンド、ダウンロード、レンダリング、DOM更新、さらにはGIFアニメーション。

ユーザーは、小さなブロックで処理が迅速に進行するため、これに気付くことはめったにありません。たとえば、ボタンをクリック、イベントのスロー、関数の実行、計算の実行、DOMの更新。完了すると、ブラウザはキュー内の次のアイテムを自由に処理できます。

JavaScriptコードは、Ajaxリクエストを行うたびにアプリケーションがフリーズする場合に、それがどれほどイライラするかを想像できません。したがって、JavaScriptコードは、イベントとコールバックを使用して操作します。ブラウザまたはオペレーティングシステムレベルのプロセスを指示して、操作が完了した後に特定の機能を呼び出し、結果が準備ができています。

次の例では、ボタンクリックイベントが発生すると、CSSクラスをアニメーション化するハンドラー関数が実行されます。アニメーションが完了すると、匿名のコールバックがクラスを削除します。

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

ES2015は約束を提供し、ES2017はエンコーディングを簡素化するためにASYNC/待ち望を導入しますが、それでも表面の下でコールバックを使用します。詳細については、「Modern JSのプロセス制御」を参照してください。

因子

残念ながら、一部のJavaScript操作は常に同期されます。

計算を実行します

• update dom
• LocalStorageまたはIndexEdDBを使用してデータを保存および取得します。
次の例は、動きにCSSアニメーションを使用し、JavaScriptを手足に振る侵入者を示しています。右側の画像は、基本的なアニメーションGIFです。デフォルトの100,000 SESSIONSTORAGE操作を使用して[書き込み]ボタンをクリックします。

[Codepenサンプルリンク-Codepen Embedコードをここに挿入する必要があります]

この操作中に、DOMの更新がブロックされます。ほとんどのブラウザでは、侵入者が停止または立ち往生します。アニメーションGIFの特定のアニメーションは一時停止されます。より遅いデバイスは、「スクリプトの無反応」警告を表示する場合があります。

これは複雑な例ですが、基本操作がフロントエンドのパフォーマンスにどのように影響するかを示しています。

webワーカー

長期にわたるプロセスのソリューションの1つは、Webワーカーです。これらにより、メインブラウザアプリケーションはバックグラウンドスクリプトを開始し、メッセージイベントを使用して通信できます。たとえば、

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

Webワーカースクリプト：

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 启动 Web Worker 脚本
let myWorker = new Worker('myworker.js');

// 从 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 发送消息
myWorker.postMessage('hello');

労働者は、他の労働者を生成して、複雑なスレッド操作をシミュレートすることもできます。ただし、ワーカーの機能は意図的に制限されており、ワーカーはDOMまたはLocalStorageに直接アクセスできません（実際にJavaScriptをマルチスレッドし、ブラウザの安定性を破壊します）。したがって、すべてのメッセージは文字列として送信されるため、jsonエンコードされたオブジェクトを渡すことができますが、domノードを通過させることはできません。

ワーカーは、特定のウィンドウプロパティ、WebSocket、およびIndexDBにアクセスできますが、上記の例を改善しません。ほとんどの場合、労働者は、レイトレース、画像処理、ビットコインマイニングなど、長期にわたる計算に使用されます。

（node.jsは、Webワーカーに似た子どものプロセスを提供しますが、他の言語で記述された実行可能ファイルを実行するオプションがあります。

ハードウェアアクセラレーションアニメーション

ほとんどの最新のブラウザは、独自のレイヤーで実行されているハードウェアアクセラレーションのCSSアニメーションをブロックしません。

デフォルトでは、上記の例では、左マージンを変更することで侵入者を移動します。このプロパティと左や幅などの同様のプロパティにより、ブラウザは各アニメーションステップでドキュメント全体を再ストリーミングして再描画します。

変換プロパティおよび/または不透明な特性を使用する場合、動物の効率がより効率的です。これらは実際に要素を個別の組成層に入れて、GPUが個別にそれらをアニメーション化できるようにします。

「ハードウェアアクセラレーション」チェックボックスをクリックすると、アニメーションはすぐにスムーズになります。次に、別のSessionStorage Writeを試してください。これはJavaScriptによって制御されるため、四肢の動きは依然として一時停止されることに注意してください。

メモリストレージ

メモリ内のオブジェクトの更新は、ディスクに書かれたストレージメカニズムを使用するよりもはるかに高速です。上記の例では、オブジェクトストレージタイプを選択し、[書き込み]をクリックします。結果は異なりますが、同等のSessionStorage操作の約10倍高速にする必要があります。

メモリは揮発性です：タブを閉じるか、ナビゲーションを離れると、すべてのデータが失われます。優れたトレードオフは、メモリオブジェクトを使用してパフォーマンスを改善し、それが便利なときにデータを永久に保存することです。

ゲームまたはシングルページアプリケーションには、より複雑なオプションが必要になる場合があります。たとえば、データが保存される時点：

// myworker.js
// 接收消息时启动
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...长时间运行的进程...
  // 发送回消息
  postMessage('result');
};

しばらくの間、ユーザーアクティビティ（マウス、タッチまたはキーボードイベント）はありません

ゲームの一時停止またはバックグラウンドでのアプリケーションタグ（ページVivisibilityAPIを参照）

• 自然な一時停止があります。プレーヤーの死、レベルの完了、家庭画の間を移動するなど。
• WebパフォーマンスWebパフォーマンスはホットなトピックです。開発者はブラウザの制限により制限が少なく、ユーザーは高速でオペレーティングシステムのようなアプリケーションのパフォーマンスを期待しています。

できるだけ処理を行わないと、DOMが著しくブロックされることはありません。幸いなことに、長期にわたるタスクを避けられない場合、いくつかのオプションがあります。

ユーザーとクライアントは、速度の最適化に決して気付かないかもしれませんが、アプリケーションが遅くなったときに常に不満を言います！

domブロッキング（FAQ）

に関するFAQ

domブロッキングとは何ですか？なぜそれが問題なのですか？

domブロッキングとは、スクリプトが完了するのを待っているため、ブラウザがWebページをレンダリングできないことを意味します。これにより、Webページの読み込み速度が大幅に低下し、ユーザーエクスペリエンスが低下します。ブラウザは、HTMLタグを解析してDOMツリーを構築する必要があります。このプロセス中に、スクリプトが遭遇した場合、停止して実行する必要があります。これは、スクリプトがDOMツリー構造を変更する可能性があり、ブラウザが最新のビューを確認する必要があるためです。

domブロッキングを避ける方法は？

DOMブロッキングを避ける方法はいくつかあります。最も効果的な方法の1つは、非同期ロードスクリプトを使用することです。これは、スクリプトがバックグラウンドにロードされ、ページの残りの部分がロードされ続けることを意味します。別のアプローチは、スクリプトを延期することです。つまり、HTMLドキュメントが完全に解析された後にのみ実行されることを意味します。最後に、スクリプトをHTMLドキュメントの下部に移動して、最後のロードされたコンテンツにすることもできます。

同期スクリプトと非同期スクリプトの違いは何ですか？

同期スクリプトは、完全にロードおよび実行されるまでDOMコンストラクトをブロックします。これは、スクリプトが長い間読み込まれた場合、Webページ全体を遅らせることを意味します。一方、非同期スクリプトはDOMの構築をブロックしません。それらはバックグラウンドにロードされ、DOMが完全に構築されていなくても、準備ができたら実行できます。

スクリプトタグの「延期」属性とは何ですか？

スクリプトタグ内の「延期」プロパティは、HTMLドキュメントが完全に解析された後にスクリプトを実行する必要があることを示すために使用されます。これは、スクリプトがDOMコンストラクトをブロックしないため、Webページの読み込み時間を高速化することを意味します。ただし、これはまた、DOMが構築されたときにスクリプトが準備ができていない可能性があることを意味するため、DOM構造を変更しないスクリプトでのみ使用できます。

スクリプトをHTMLドキュメントの下部に移動するとどのように役立ちますか？

スクリプトをHTMLドキュメントの下部に移動すると、それらが最後のコンテンツがロードされていることが保証されます。これは、スクリプトが完了するのを待つことなく、Webページの残りの部分をレンダリングできることを意味します。ただし、この方法は、DOM構造を変更しないスクリプトでのみ使用できます。これは、DOMが構築されたときに準備ができていない可能性があるためです。

スクリプトタグの「非同期」属性とは何ですか？

スクリプトタグの「async」属性は、スクリプトを非同期にロードする必要があることを示すために使用されます。これは、スクリプトがバックグラウンドに読み込まれ、残りのWebページがロードされ続けることを意味します。 DOMが完全に構築されていなくても、スクリプトはすぐに実行できます。これにより、Webページの読み込み時間を大幅に改善できますが、DOM構造を変更しないスクリプトにのみ使用できます。

SEOに対するDOMブロッキングの影響は何ですか？

DOMブロッキングは、Webページの読み込み速度を大幅に低下させる可能性があり、SEOランキングに悪影響を及ぼします。 Googleのような検索エンジンは、ランキング要因の1つとして速度を読み込むWebページの読み込み速度です。したがって、DOMブロッキングを避けることは、検索エンジンの結果でページが高いことを確認するために非常に重要です。

仮想DOMとは何ですか？それはどのように役立ちますか？

仮想Domは、Reactなどの最新のJavaScriptフレームワークで使用される概念です。これは実際のDOMのコピーであり、変更は実際のDOMではなく、仮想DOMで最初に行われます。すべての変更が完了すると、Coordinationと呼ばれるプロセスを通じて、仮想DOMが実際のDOMと同期されます。これにより、実際のDOMでの直接操作の数が減り、Webページの読み込み時間が高速化されます。

私のWebページにdomブロッキングの問題があるかどうかを確認する方法は？

GoogleのPageSpeed Insightsなどのツールを使用して、WebページにDOMブロッキングの問題があるかどうかを確認できます。このツールは、Webページを分析し、DOMブロッキングなどの潜在的な問題を含む、パフォーマンスに関する詳細なレポートを提供します。

CSSはDOMブロッキングも引き起こしますか？

はい、CSSはDOMブロッキングを引き起こす可能性があります。ブラウザがCSSファイルに遭遇する場合、Webページのレンダリングを続けるには、停止してロードする必要があります。これは、CSSファイルにWebページの外観を変更するスタイルが含まれている可能性があるためです。これを回避するために、インラインの重要なCSSや非批判的なCSSなどのメソッドを使用できます。

以上がLocalStorageやその他の犯人によるDOMブロッキングを避ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。