hoisting

目的：可以在　function 宣告前先執行，也將這個概念擴展到變數
注意：let const 沒有初始化為 undefined

test ()

function test() {
  console.log(1)
}

她有被宣告，只是 undefined。這個現象叫做 hoisting

function test() {
  console.log(a)
  var a = 10
}
test() // 輸出是 undefined

temporal dead zone

從 function 開始到實際賦值的地方都叫 temporal dead zone。以下面例子說明，在 TDZ 要存取 a 他就會跳出 undefined 這個錯誤。

function test() {
  let a = 1
  function test2() {
    console.log(a)
    var a = 10
  }
  test2()
}
test() // undefined

現在只要記得 1.變數命名的重要性 2.不要在宣告變數前亂用 3. 盡量不要有同名變數

回呼函式 (call back function)

一定要等資料拿回來放到 result 裡，才能執行下一行。如果 getData() 執行三天，我就會卡在這裡三天。

// 同步 阻塞 bock
const result = getData() // call funct 得到回傳值，將他存到 result 變數裡
console.log(result)

我們不希望程式因為耗時間的操作或未知的等待而卡在哪邊，所以有了 call back function

呼叫函數時，在函數裡面以參數的方式帶入 call back function，當 cb 被執行時，就代表我的函式已完成(通常這個函式會做大量的耗時工作)。

// callMe 這個 function 就是 cb funct
function callMe(data) {
  console.log('done')
  console.log(data)
}

getData(callMe)

function getData(cb) {
  發 request
  response 回來
  cb(response) // 完成後 call cb
}

運用匿名函式進行代碼重構，這樣就不用額外宣告一個 cb function。

getData(function(data) {
  console.log('done')
  console.log(data)
})

GET vs POST

多數人區別兩者從瀏覽器的角度出發

1. Get 有長度限制
2. Get 出現在瀏覽器上的網址列，所以不會放敏感資訊
3. Get 的資訊可以被加到書籤裡

瀏覽器只是媒介，就算沒有瀏覽器一樣可以發 request 用 get 指令拿到 response 回來

curl url

如果要回答兩者差異，不要侷限在瀏覽器上，如 : Get 參數帶在網址，Post 帶在 request body

瀏覽器運作原理

導讀資料 part 1

part 1

為了知道瀏覽器如何工作，要先知道電腦如何工作

CPU (Central Processing Unit)

A CPU core, pictured here as an office worker, can handle many different tasks one by one as they come in. A core is like another CPU living in the same chip.

GPU (Graphics Processing Unit)

Unlike CPU, GPU is good at handling simple tasks but across multiple cores at the same time. As the name suggests, it was first developed to handle graphics. 一開始為了繪圖相關，因為繪圖需要大量效能、要大量的平行運算。後來會使用 GPU 幫忙處理某些運算的加速。

首先會有硬體(CPU, GPU)，作業系統跑在硬體上，應用程式跑在作業系統上。
這也解釋為甚麼有些程式在 window 上有 mac 上沒有，因為他們不同作業系統，除非背後有其他機制，不然不能 share。

Executing program on Process and Thread

• Process (程序/進程)：作業系統最小單位。A process can be described as an application’s executing program.
• Thread (執行緒/線程)：A thread is the one that lives inside of process and executes any part of its process's program.

一個 process 下面可以有很多 threads。一個作業系統可以跑多個應用程式，應用程式裡面處理事情又會跑多個 process，每個 process 又可以跑多個 thread。

不同程序的溝通透過　Inter Process Communication (IPC)。

Browser Architecture

瀏覽器內有很多 process，他們的溝通透過 IPC。
how is a web browser built using processes and threads? Well, it could be one process with many different threads or many different processes with a few threads communicating over IPC.

Chrome 裡面每一個 tab 就是一個 process。
Until very recently, Chrome gave each tab a process when it could; now it tries to give each site its own process, including iframes (see Site Isolation).

The benefit of multi-process architecture in Chrome

優點一、 分頁穩定
因為每個分頁都是一個 process，所以就算其中一個掛掉，也不影響其他的分頁。但如果所有都跑在 process 裡面，一個掛掉剩下的全部都掛掉。開越多 process 就會越消耗資源。為了節省記憶體，chrome 有限制最多同時可以有多少 process。

the browser can sandbox certain processes from certain features. For example, the Chrome browser restricts arbitrary file access for processes that handle arbitrary user input like the renderer process.

優點二、security and sandboxing
每個分頁都有自己的執行環境，不太可能從隔壁分頁拿到他的資料。

part 2

導讀資料
brower process and render process 互相溝通

part3

html 轉換成 dom 物件 => 計算 style css 要套用在那些節點上 => 排版，決定位置 => 決定物件順序

前三 part 比較重要，第四 part 太深，可暫時跳過。