執行緒 & 程序

瀏覽器開啟一個頁面是開闢一個程序（程式），在這個頁面中我們要幹很多事情，所以需要分配對個執行緒去處理這些事前。

• 一個程序中包含一個到對個執行緒，一個執行緒同時只能幹一件事件
• 瀏覽器是多執行緒的
  • GUI渲染執行緒：自上而下渲染頁面的過程
  • JS引擎執行緒：渲染和執行JS程式碼的過程、
  • 事件觸發執行緒：事件繫結的時候，會有一個執行緒去監聽事件是否觸發，一旦事件觸發，這個執行緒幫我們通知繫結的方法執行
  • 定時觸發器執行緒：設定定時器之後，分配一個執行緒去監聽是否到達時間，當到時間後，通知對應的方法執行
  • 非同步HTTP請求執行緒：分配一個執行緒從伺服器端獲取內容（資料）...
  • ...

JS引擎執行緒

JS是單執行緒的，因為瀏覽器只分配一個執行緒（JS引擎執行緒）去渲染JS

GUI渲染執行緒

GUI渲染執行緒負責渲染瀏覽器介面HTML元素（瀏覽器渲染頁面）,當介面需要重繪(Repaint)或由於某種操作引發迴流(reflow)時，該執行緒就會執行。在Javascript引擎執行指令碼期間,GUI渲染執行緒都是處於掛起狀態的，也就是說被凍結了。

瀏覽器渲染頁面的過程

1. 生成‘DOM tree’
2. 生成‘CSSOM tree’
3. 把生成的‘DOM tree’和‘CSSOM tree’合併在一起，共同建立為‘render tree’渲染樹
4. 瀏覽器開始按照‘render tree’進行渲染

瀏覽器的渲染隊裡機制

• 在當前上下文中，如果遇到修改DOM樣式操作，並不會立即去修改樣式，而是先放在“渲染佇列”中，然後看後面是否還存在其它修改樣式的操作，如果有則繼續放在佇列中，等待當前上下文執行完畢，會把佇列中所有修改樣式的操作，一次性執行處理，觸發一次DOM重排。
• 如果遇到直到遇到非修改樣式的操作（比如：獲取元素樣式的程式碼），則直接重新整理渲染佇列【意思：把現在佇列中修改樣式的操作，立即執行處理】

減少DOM的重排（優化）