はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- 非同期処理についての理解を深める
本題
1. ブラウザとスレッド
スレッド
連続して実行される一本の処理の流れ
ex. Main thread
Main Thread
JavaScriptの実行とレンダリング（画像描写処理）
FPS(Flames Per Second)
1秒間あたりの画面（フレーム）更新頻度
ex. 1秒間に60回画面が更新：60fps
→16.7m秒に1回画面更新
最近のテレビは全部60fps!
2.同期処理と非同期処理
同期処理
一つの処理が完了するまで次の処理が始まらない
例1
// 関数を用意
// sleep関数が実行されるとms分だけメインスレッドを占有できる仕組み
// 実行されるとsleep doneと表示される
function sleep(ms) {
const startTime = new Date();
while (new Date() - startTime < ms);
console.log('sleep done');
}
const btn = document.querySelector('button');
// ブラウザ上のボタンを押すとコンソール上にbutton clickedと表示される
btn.addEventListener('click', function(){
console.log('button clicked');
});
// ここで3秒後に出力される
sleep(3000)
// この処理中にボタンを押してもsleep doneの後にbutton clickedが表示される
同期処理では前の処理が終わってから次の処理が始まる
非同期処理
一時的にメインスレッドから処理が切り離される
ex.setTimeout, Promise, クリック etc.....
例1
setTimeoutで出力する
function sleep(ms) {
const startTime = new Date();
while (new Date() - startTime < ms);
console.log('sleep done');
}
const btn = document.querySelector('button');
btn.addEventListener('click', function(){
console.log('button clicked');
});
// 2秒待ってからsleep実行する
setTimeout(function(){
sleep(3000)
},2000)
// 上記のようにすると第二引数で与えた分だけメインスレッドが解放される
// ボタンを連続で押すと2秒後に処理が止まりsleep doneが出力された後、クリックした分が表示される
今日はここまで！