目次
参考文献
1 マクロタスクとマイクロタスク_哔哩哔哩_bilibili
バックアップ担当者マクロタスクマイクロタスク、タスクスケジューリングプロセスコースノート - プログラマーが求めた
必見です 10 分間のビデオを見ることを強くお勧めします。
1 マクロタスクとマイクロタスク_哔哩哔哩_bilibili
必見のリファレンス マクロタスクとマイクロタスクの詳細解説
ノート
マクロタスクとマイクロタスク
Q: js は同期と非同期に分けられますか? それはどのように見えますか？
回答: js はシングルスレッド言語であり、メインスレッドとタスクキューに分かれています。メインスレッドで同期的に実行され、メインスレッドのタスク実行時にタスクキュー内のタスクがポーリングされ、タスクがあればメインスレッド上で実行されます。
Q: マイクロタスクとマクロタスクとは何ですか?
回答: マイクロタスクも非同期キューであり、上記のメカニズムに従います。ただし、その優先度はマクロ タスクよりも高く、最初にポーリングされて実行されます。
タイマータスクのスケジュール設定
Q: タイマーの時間はどこで計算されますか?
回答: タイマー モジュールでは、時間が経過すると、タイマー タスク (コールバック関数) をタスク キューに入れます。
Q: タイマーのタスクは時間切れになったらすぐに実行されますか? それとも、メインスレッドのタスクが実行された後にタイミングが開始されますか?
回答: いいえ、メイン スレッドのタスクが完全に実行されるまで待ってから、タスク キューをポーリングしてタスクを取り出して実行する必要があります。また、タスクのタイミングと実行は 2 つの部分から構成されます。タイミングはメインスレッドのタスクとは関係ありません。
Promise のマイクロタスク処理ロジック
Q: Promise は同期ですか、それとも非同期ですか?
回答: Promise の構築コードは同期的であり、内部の関数はすぐに実行されます。ただし、Promise の .then または waited 部分は非同期で実行され、マイクロタスク キューに配置されます。
DOM レンダリング タスク
Q: DOM と JS は相互にブロックしますか?
回答: はい、DOM がロードされると、JS のコンテンツはブロックされます。同様に、JS も DOM をブロックします。
Q: JS の非同期は DOM がロードされた後に実行されますか、それとも途中で実行されますか?
回答: メイン スレッドは 1 つだけであるため、DOM を同時にレンダリングすることはできません。レンダリングが完了する前にタスク キューがポーリングされます。したがって、DOM がレンダリングされていない場合、JS タスク キューは待機し続ける必要があります。
タスクキュー共有メモリ
質問: タスク キューが 2 つあるため、タスクはマクロ キュー内のタスクからメイン スレッドの変数をどのように取得しますか?
回答: マクロ タスクの実行の前提条件は、メイン スレッドがポーリングしてタスクを取得することであるため、この質問は良い質問です。タスクの取得処理では、実際にタスクがマクロキューからメインスレッドに移動され、メインスレッドの環境に入る際にメインスレッドの変数が取得されます。
プログレスバーの実装
Q: 単純な進行状況バーを実装するにはどうすればよいですか?
回答: タスクキュー共有メモリのメカニズムを使用します。色付きの長方形を進行状況バーとして使用し、その幅が増加し続けると、進行状況バーの効果が実現されます。setTImeout を通じて関数自体を連続的に呼び出し、その時間は約 200 ミリ秒です。その後、カウンターを定義して 0 に割り当てます。カウンタが 100 を超えると、実行が停止します。
上位コード
<div class="progressBar"></div>
<style>
.progressBar {
height: 40px;
background: rgb(64, 143, 33);
width: 0px;
color: #fff;
}
</style>
<script>
let i = 0;
function run() {
if (i >= 100) {
return;
} else {
i++;
let dom = document.querySelector(".jindu");
dom.style.width = i + "px";
dom.innerHTML = i + "%";
setTimeout(run, 50);
}
}
run();
</script>
タスクを複数のタスクに分割する
Q: タスクを分割する理由は何ですか?
回答: js ではスレッドが 1 つしかないため、特定のタスクが大きすぎると他のタスクをブロックしようとし、視覚的な遅れが発生し、ユーザー エクスペリエンスに影響を与えます。
Q: タスクを分割するにはどうすればよいですか?
回答: 非常に簡単です。タスクをブロックに分割し、setTimeout に投げて実行するだけです。0元か100元かはニーズによって異なります。複数のタスクの実行方法は再帰的です。これは前のモジュール [進行状況バーの実装] に非常に似ており、再帰的な setTimeout という独自のメソッドを使用してこれを実行します。
複雑なタスク分割を約束する
Q：約束の分割方法は？
回答: 考え方は setTImeout と同じで、コードは Promise でラップされているため、コードはマイクロタスクに入り、非同期関数になり、後でメインスレッドの実行をブロックできなくなります。
img は同期ですか、それとも非同期ですか?
画像処理用の特別なモジュールがあり、ダウンロードが完了するとタスク キュー (onload メソッド) に置かれ、メイン スレッドが ps をポーリングするのを待ちます: ファイルをロードするためのモジュールが順番に並んでいません
。ロードが最初に実行されます。アドバンストキュー。これはキューの大きな違いです。