JavaScript timers_javascript スキルの詳細な探索

JavaScript シングルスレッド

JavaScript の単一スレッドはその目的に関連しています。ブラウザーのスクリプト言語としての JavaScript の主な目的は、ユーザーと対話し、DOM を操作することです。これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。たとえば、JavaScript に同時に 2 つのスレッドがあるとします。1 つのスレッドが特定の DOM ノードにコンテンツを追加し、もう 1 つのスレッドがそのノードを削除するとします。この場合、ブラウザーはどちらのスレッドを使用すればよいでしょうか。したがって、複雑さを避けるために、JavaScript は誕生以来シングルスレッドであり、これは言語の中核的な機能となっており、今後も変更されることはありません。

タスクをキューに入れる

シングルスレッドとは、すべてのタスクをキューに入れる必要があり、前のタスクが完了するまで次のタスクは実行されないことを意味します。前のタスクに時間がかかると、次のタスクも待たされることになります。

非同期イベント駆動型

マウス クリック イベント、ウィンドウ サイズのドラッグ イベント、タイマー トリガー イベント、XMLHttpRequest 完了コールバックなど、ブラウザーの多くの動作は非同期 (非同期) です。非同期イベントが発生すると、イベント キューに入ります。ブラウザには、大規模なイベント キューをポーリングしてイベントを処理する大規模な内部メッセージ ループ、イベント ループがあります。たとえば、ブラウザは現在 onclick イベントの処理でビジー状態になっているため、別のイベント (ウィンドウの onSize など) がイベント キューに入れられ、前の処理が完了したときにのみ実行されます。完成しており、無料のイベントです。

イベントループ

JavaScript はシングルスレッドですが、ブラウザはシングルスレッドではありません

ブラウザには次のプロセスの少なくとも一部が含まれます

1. ブラウザ GUI レンダリング スレッド

2.JavaScript エンジン スレッド

3. ブラウザのスケジュールされたトリガー スレッド

4. ブラウザイベントトリガースレッド

5. ブラウザの http 非同期リクエスト スレッド

JavaScript エンジンはシングルスレッドであるため、コードはまずキューにプッシュされ、その後エンジンによって先入れ先出し方式で実行されます。イベント処理関数やタイマー実行関数もこのキューにキューイングされ、キューの先頭から関数を連続的に取り出して実行する無限ループがイベントループです。

要約すると、js はシングルスレッドですが、ブラウザーはマルチスレッドです。非同期に遭遇すると、ブラウザーは、js スレッドがビジーでないときに、イベント ループの読み取りに進みます。

タイマー原理

タイマーの使用法

setTimeout(fn, 遅延)

setInterval(fn, 遅延)

fn は関数または文字列、Delay は遅延時間、単位はミリ秒です

以下の注意事項があります

1.fn は文字列にすることもできますが、この方法で使用することは決して推奨されません

2. in.fn 関数にこれがある場合、これは実行時にウィンドウを指します

jsのシングルスレッドとイベントループを理解していればタイマーの原理も理解しやすいです

タイマーが設定されている場合、遅延時間に達すると、ブラウザーは遅延実行イベントをイベント ループに入れます。時間が経過すると、JS スレッドがアイドル状態であれば実行されます。タイマーは正確ではありません)

いつもポーリング関数のsetTimeoutとsetIntervalの違いを紹介した記事を読みました。コードは次のとおりです
。

コードをコピーします コードは次のとおりです:

setTimeout(function(){
setTimeout(arguments.callee,100) },100)
setInterval(function(){},1000)

この記事の一般的な意味は、setTimeout はコールバック関数の実行後に次のタイマーを開始するため、一定間隔で実行する必要があるのに対し、setInterval は常に実行される可能性があるということです。 be イベントループに複数のコールバックを追加します。js スレッドがビジーでない場合、複数の が一度に実行されます。

テストの結果、ie、ff、chrome、Opera、Safari のいずれにおいても、setInterval は一定の間隔で設定されることがわかりました

テストコードは以下の通りです

コードをコピー コードは次のとおりです:

setInterval(function(){
xx.innerHTML=xx.innerHTML 1;
},100);

for(var i=0;i xx.offsetWidth
}

setTimeout(function(){
デバッガ;
},10)

ブレークポイントでは、1 が 1 つだけ出力されました

タイマーの精度の問題

js はシングルスレッドなので、ビジー状態の場合、タイマーは確実に不正確になり、時間がどんどん長くなります。これに対する解決策はないようです。解決策はありません。

もう 1 つの精度の問題は、最小間隔 setTimeout(fun,0)

js スレッドがビジー状態ではない場合、0 秒後にすぐに実行することはできません。これはブラウザごとに異なります。

w3c 標準について言及した記事を読みましたが、ソースが見つからず検証できません。 ！ ！

タイマーに関連するいくつかの最適化

タイマーを作成するときに、いくつかの最適化が行われる可能性があります

1. たとえば、window.onresize がバインドされている場合、ブラウザーがズームされると非常に頻繁にトリガーされるため、実行を遅らせ、次の実行が発生したときにクリアして、頻繁な実行を減らすことができます

疑似コードは次のとおりです

コードをコピーします コードは次のとおりです:

var タイマー;
関数 r(){
clearTimeout(タイマー);
timer = setTimeout(function(){
//何かをする
},150); }

2. スクロール バーが引き下げられると、過度の計算を避けるために画像の遅延読み込み用のタイマーも必要です

3. タイマーが必要な場所が複数ある場合、時間間隔は最小のものに基づいて配列に挿入されます。間隔に達したら、配列を走査するだけです

小さなデモ

コードをコピー コードは次のとおりです:

   
   

   

       

0

       

0

       

0

       

0

   

小さなパートナーは、JavaScript タイマーが認識しているかどうかを確認します。