キーポイント

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

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

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

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

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

// 單擊按鈕時(shí)引發(fā)事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 處理按鈕單擊事件
function handleClick(e) {

  // 獲取要設(shè)置動(dòng)畫的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 動(dòng)畫結(jié)束時(shí)刪除“animate”類
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

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

ES2015は約束を提供し、ES2017はエンコーディングを簡(jiǎn)素化するためにASYNC/待ち望を?qū)毪筏蓼工ⅳ饯欷扦獗砻妞蜗陇钎畅`ルバックを使用します。詳細(xì)については、「Modern JSのプロセス制御」を參照してください。

因子

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

計(jì)算を?qū)g行します

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

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

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

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

webワーカー

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

// 單擊按鈕時(shí)引發(fā)事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 處理按鈕單擊事件
function handleClick(e) {

  // 獲取要設(shè)置動(dòng)畫的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 動(dòng)畫結(jié)束時(shí)刪除“animate”類
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

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

Webワーカースクリプト：

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

// 啟動(dòng) Web Worker 腳本
let myWorker = new Worker('myworker.js');

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

// 向 myWorker 發(fā)送消息
myWorker.postMessage('hello');

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

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

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

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

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

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

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

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

メモリストレージ

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

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

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

// myworker.js
// 接收消息時(shí)啟動(dòng)
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...長(zhǎng)時(shí)間運(yùn)行的進(jìn)程...
  // 發(fā)送回消息
  postMessage('result');
};

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

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

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

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

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

domブロッキング（FAQ）

に関するFAQ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がLocalStorageやその他の犯人によるDOMブロッキングを避ける方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。