事件迴圈以及DOM渲染

單執行緒/非同步的設計

js是單執行緒的，這主要是由於web的特殊性，為了大量io操作，也為了避免各類衝突，js需要通過大量同步非同步操作達到頁面效果。

事件事件有很多種，觸發/產生事件的方式也有很多，包括：滑鼠、鍵盤等io操作的事件，瀏覽器的一些操作事件（操作dom，或者window繫結產生的事件），js指令碼執行過程中產生的非同步任務也是一種事件。這些非同步事件，也可以說是任務，級別上有兩類：微任務和巨集任務

迴圈遇到同步事件直接執行，遇到非同步事件，根據事件的類別分到不同的任務佇列裡。這一輪就算執行完成了的。

完成一輪事件後，看微任務佇列是否為空，不為空則執行微任務佇列裡的任務，同樣，這些任務裡的事件，同步的直接執行，非同步繼續分類到不同的任務佇列裡。只有微任務隊列為空時，才會執行巨集任務佇列裡的任務。這就是一次迴圈了。

打個比方，就如同篩選一樣：

每一輪篩選，我們都會把同步任務執行掉，微任務、巨集任務就放兩個籃子裡等待執行。

篩選完後，我們看一看微任務籃子裡有沒有東西，有的話拿出來篩選（這個篩選和上一部的篩選一樣，因此是迴圈過程）

微任務籃子選完後，再看看微任務籃子裡有沒有多出來的任務，有就繼續篩選。

完全清理乾淨微任務後就開始篩選巨集任務，注意，巨集任務就篩一趟，不管會不會多出新的巨集任務

故：有微則微，無巨集才實

對於計算機網路的握手都不提了，主要簡略講拿到資源後的瀏覽器的解析流程：

解析html原始碼，建立dom樹

瀏覽器會分析html原始碼，在dom樹中，每乙個html標籤都有乙個對應的節點(元素節點),並且每乙個文字也都有乙個對應的節點(文字節點)。dom樹的根節點就是documentelement，對應的是html標籤。

解析css**，計算樣式資料

瀏覽器會忽略錯誤的css**，然後根據樣式的優先順序進行解析，忽略一些選擇器的屬性，優先順序從低到高：瀏覽器預設設定，使用者設定，外聯樣式，內聯樣式，行內樣式等，這個是有權重的。

構建渲染樹

渲染樹和dom樹很相似，但是不一樣。主要區別是dom樹完全和html標籤一一對應，但渲染樹會忽略不需要渲染的元素，並且渲染樹每個節點會留有css樣式的資料資訊。可以認為dom+樣式資料=渲染樹。

繪製拿到渲染樹後，瀏覽器根據規則表現視覺效果。

extra: 虛擬dom

如今vue框架和react框架都用的虛擬dom，其就是要了減少頻繁dom操作帶來的重繪重排帶來的效能問題。也就是框架會生成乙個虛擬的dom樹，所有操作都會對虛擬dom樹進行操作，這也是為什麼vue不提倡直接操作document，而要用refs。

vue執行過程：模板（}語法）—> ast（抽象語法樹）—> f(x)（渲染函式）—>虛擬dom—>dom（diff演算法）

小知識：vue的前兩步一般由vue-template-compiler執行，也就是.vue檔案可以有模板，非.vue檔案不行，因為我們預設裝的vue是runtime-only的。也就是只走 f(x) —> 虛擬dom —> dom 這三步