ブラウザの一時停止アニメーションを防ぐための html5 WebWorkers サンプル コード共有
Web 開発中、ブラウザがイベントに応答せず、アニメーションが一時停止した状態になったり、「スクリプトの実行時間が長すぎます」というプロンプト ボックスが表示されたりすることがよくあります。これが発生した場合は、スクリプトが正常に動作していないことを意味します。制御不能。
ブラウザには少なくとも 3 つのスレッドがあります: js エンジン スレッド (js の処理)、GUI レンダリング スレッド (ページのレンダリング)、ブラウザ イベント トリガー スレッド (対話の制御)。
1: JavaScript エンジン は、イベント駆動型の シングルスレッド 実行に基づいています。JS エンジンは、タスクキュー内のタスクの到着を待ってから、それらを処理します。ブラウザーでは、1 つの JS スレッドのみが実行されます。いつでも JS プログラムを実行できます。
2: GUI レンダリング スレッドは、ブラウザ インターフェイスのレンダリングを担当します。インターフェイスを再描画 (再描画) する必要がある場合、または何らかの操作によってリフローが発生した場合、このスレッドが実行されます。ただし、GUI レンダリング スレッドと JS エンジンは相互に排他的であることに注意してください。JS エンジンが実行されると、GUI スレッドは一時停止され、GUI の更新はキューに保存され、JS エンジンが実行されるとすぐに実行されます。アイドル。
3: イベントトリガースレッド。イベントがトリガーされると、スレッドは保留キューの最後にイベントを追加し、JS エンジンによる処理を待ちます。これらのイベントは、setTimeOut などの JavaScript エンジンによって現在実行されているコード ブロック、またはマウス クリック、AJAX 非同期リクエストなどのブラウザ カーネル内の他のスレッドから発生する可能性があります。ただし、JS のシングルスレッド関係により、すべてのイベントが発生します。これらのイベントは、JS エンジンによる処理のためにキューに入れられる必要があります。
ブラウザのカーネル処理方法を理解すれば、ブラウザが一時停止アニメーション状態になる理由を理解するのは難しくありません。JS スクリプトが長時間プロセッサを占有すると、ブラウザの GUI の更新が一時停止され、その後のイベント応答が中断されます。キュー内のキューもブロックされるため、ブラウザが一時停止アニメーション状態にロックされます。さらに、DOM 操作は JS スクリプトで実行されるため、JS 呼び出しが完了すると、次のタスクを開始する直前に GUI レンダリングが実行されます。そのため、JS での DOM 操作が多数発生すると、イベントの応答が遅くなる場合があります。 IE6 で一度に大量の HTML を挿入するなど、ブラウザをフリーズします。 「スクリプトの実行時間が長すぎます」というプロンプト ボックスが表示された場合は、JS スクリプトに無限ループが含まれているか、深すぎる再帰操作を実行する必要があることを意味します。
このような状況に遭遇した場合、コードを最適化するだけでなく、それ以上のことを行うことができます。HTML5 webWorkers は、複雑で時間のかかる純粋な js ロジック処理をブラウザーのバックグラウンド スレッドに配置できるようにする js バックグラウンド処理スレッド API を提供します。 js スレッドが UI スレッドのレンダリングをブロックしないようにします。このスレッドは、要素やアラートの取得など、ページと対話することはできません。同じ方法で複数のスレッド間でデータを転送することもできます。
コードを直接見てみましょう:
例: ユーザーが数値を入力し、加算 (+=) を実行します
以前のアプローチ:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
var result =0;
for(var i =0; i<num;i++){
result += i;
}
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+result;
document.getElementById("time").innerHTML ="普通 耗时："+ (data2 - data1)+"ms";
}
</script>
</body>
</html>webWorkers を使用した後:
Calculate.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
var worker = new Worker("calculate.js");
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+data;
document.getElementById("time").innerHTML ="workers 耗时："+ (data2 - data1)+"ms";
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
worker.postMessage(val);
}
</script>
</body>
</html>Calculate.js
onmessage = function(event){
var num = event.data;
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result);
};webWorker コードを Web サーバーに入れる必要があります。localhost を使用している場合は、Chrome ブラウザの上位バージョンを使用してください。Firefox ブラウザが localhost を処理すると、「ドメインを取得できませんでした!」というエラーが表示されます。 」と表示されます
上記2つの実装方法を比較すると、計算値が100億に達すると、通常の方法では時間がかかり、通常は行き詰まってしまいます。
Chrome15 での webWorkers の効果。 訂正: getTime() は秒 (s) ではなくミリ秒 (ms) を返す必要があります。
Chrome 15 での通常のメソッドの効果
今後の Web アプリケーションでは、WebWorkers が依然として非常に価値があることがわかります。
以上がブラウザの一時停止アニメーションを防ぐための html5 WebWorkers サンプル コード共有の詳細内容です。詳細については、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）
ホットトピック
7694
15
1640
14
1393
52
1287
25
1229
29
H5コードの理解：HTML5の基礎
Apr 17, 2025 am 12:08 AM
HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。
Apache Serverとは何ですか？ Apache Serverとは何ですか？
Apr 13, 2025 am 11:57 AM
Apache Serverは、ブラウザとWebサイトサーバーの間のブリッジとして機能する強力なWebサーバーソフトウェアです。 1.リクエストに基づいてHTTPリクエストを処理し、Webページコンテンツを返します。 2。モジュラー設計により、SSL暗号化や動的Webページのサポートなど、拡張機能が可能になります。 3.構成ファイル（仮想ホスト構成など）は、セキュリティの脆弱性を回避し、スレッドカウントやタイムアウト時間などのパフォーマンスパラメーターを最適化して、高性能および安全なWebアプリケーションを構築するために慎重に設定する必要があります。
H5はHTML5の速記ですか？詳細の調査
Apr 14, 2025 am 12:05 AM
H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。
CENTOSでHDFSファイルシステムを使用するためのヒント
Apr 14, 2025 pm 07:30 PM
CENTOSシステムの下でのHDFSファイルシステム用のインストール、構成、および最適化ガイドこの記事では、CENTOSシステムにHadoop分散ファイルシステム（HDFS）をインストール、構成、最適化する方法をガイドします。 HDFSのインストールと構成Java環境のインストール：最初に、適切なJava環境がインストールされていることを確認してください。 /etc/プロフィールファイルを編集し、以下を追加して、/usr/lib/java-1.8.0/jdk1.8.0_144を実際のJavaインストールパスで置き換えます：Exportjava_home =/usr/lib/Java-1.8.0/JDK1.8.0_144EXPORTPATH = $ J
クラフトCMSのキャッシングの問題を解決する：Wiejeben/Craft-Laravel-Mixプラグインの使用
Apr 18, 2025 am 09:24 AM
CraftCMSを使用してWebサイトを開発する場合、特にCSSやJavaScriptファイルを頻繁に更新する場合、リソースファイルのキャッシュ問題が発生することがよくあります。古いバージョンのファイルがブラウザによってキャッシュされ、ユーザーが最新の変更を表示しないようにすることがあります。この問題は、ユーザーエクスペリエンスに影響を与えるだけでなく、開発とデバッグの難しさを高めます。最近、プロジェクトで同様のトラブルに遭遇し、いくつかの調査の後、プラグインWiejeben/Craft-Laravel-Mixが見つかりました。
Nginxパフォーマンスの監視とトラブルシューティングツール
Apr 13, 2025 pm 10:00 PM
Nginxパフォーマンスの監視とトラブルシューティングは、主に次の手順を通じて実行されます。1。nginx-Vを使用してバージョン情報を表示し、Stub_statusモジュールを有効にしてアクティブな接続、要求、キャッシュヒット率の数を監視します。 2. TOPコマンドを使用して、システムリソースの職業、IOSTAT、VMSTATモニターディスクI/O、およびメモリ使用量をそれぞれ監視します。 3. TCPDUMPを使用してパケットをキャプチャしてネットワークトラフィックを分析し、ネットワーク接続の問題をトラブルシューティングします。 4.ワーカープロセスの数を適切に構成して、同時処理機能不足または過度のプロセスコンテキストスイッチングオーバーヘッドを回避します。 5.不適切なキャッシュサイズの設定を回避するように、nginxキャッシュを正しく構成します。 6.AWKコマンドやエルクの使用など、nginxログを分析することにより
debian opensslでHTTPSサーバーを構成する方法
Apr 13, 2025 am 11:03 AM
DebianシステムでHTTPSサーバーの構成には、必要なソフトウェアのインストール、SSL証明書の生成、SSL証明書を使用するWebサーバー（ApacheやNginxなど）の構成など、いくつかのステップが含まれます。 Apachewebサーバーを使用していると仮定して、基本的なガイドです。 1.最初に必要なソフトウェアをインストールし、システムが最新であることを確認し、ApacheとOpenSSL：sudoaptupdatesudoaptupgraysudoaptinstaをインストールしてください
CENTOSのHDFSステータスを監視する方法
Apr 14, 2025 pm 07:33 PM
CENTOSシステム上のHDF（Hadoop分散ファイルシステム）のステータスを監視する方法はたくさんあります。この記事では、最も適切なソリューションを選択するのに役立ついくつかの一般的に使用される方法を紹介します。 1. Hadoop独自のWebUIを使用して、Hadoop独自のWebインターフェイスを使用して、クラスターステータス監視機能を提供します。手順：Hadoopクラスターが稼働していることを確認してください。 WebUIへのアクセス：ブラウザにhttp：//：50070（hadoop2.x）またはhttp：//：9870（hadoop3.x）を入力します。デフォルトのユーザー名とパスワードは通常、HDFS/HDFSです。 2。コマンドラインツール監視Hadoopは、監視を容易にする一連のコマンドラインツールを提供します
