121.ブラウザとJavascriptについて,122.非同期処理

覚えておくべきごく

スレッド

連続して実行される1本の処理のこと
今回のスレッドは
＊Main Thread:Javascriptの実行とレンダリングを行う
＊Service Worker:
＊WebWorker

レンダリング

データ（ここでいうとソースコード）をもとに何らかを表示させるということなので
rendering（レンダリング）」意味は表現に近い。
今回の意味合いは
javascriptのソースコードを用いてブラウザに表示させるという意味で使われる

FPS

FPSとは1秒あたり画面の更新頻度のこと
例えば
60fpsだと
1秒間で60回画面更新になります
ちなみに
＊24fps 遅いけど、重い処理はこのくらいかな
＊60fps なめらか
ちなみにMaxは120くらいらしい
＜参考＞
https://qiita.com/umi_kappa/items/d9656f6083fbee6add70

同期処理の問題

同期処理ではメインスレッドでコードが順番に実行される
同期処理では１つの処理が完了するまで次の処理には進まない
つまり、前に重い処理がある場合は次の処理に進むまで何もできません。

同期処理と非同期処理の比較

①5秒間かかる処理です

②ボタンをクリックします

// ①5秒間かかる処理です
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');
});

sleep(5000);

5秒間ぐるぐるだよ

やっとボタン押せた、、、

待機時間解決方法

＊WEBAPIを指定する
1.setTimeout<実はsetTimeoutもAPI>
2.Promiseなど　//次回

setTimeoutとは？

ー秒まって実行する関数
グローバルの setTimeout() メソッドは、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。

使い方

setTimeout(コールバック関数, -秒後に実行)

// 例
setTimeout(function() {
	sleep(3000)
}, 2000)

こうすると、
1.まっている2秒間だけ、次の処理（ここでいうとボタンを押すこと）ができる
2.Timeoutが終わり3秒かかるsleep(3000)が始まり、再び次の処理ができなくなる
3.sleep(3000)が終わったのでボタンが押せるようになる
ということ

つまり非同期処理とは

一時的にメインスレッドから切り離して処理を行うこと

APIの定義をもう一度見直そう