ブラウザの一時停止アニメーションを防ぐための html5 WebWorkers サンプルコード共有-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

ブラウザの一時停止アニメーションを防ぐための html5 WebWorkers サンプルコード共有

黄舟

Mar 20, 2017 pm 04:10 PM

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 サイトの他の関連記事を参照してください。

声明

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

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。