首先要清楚頁面呈現的具體過程： 1. 瀏覽器把獲取到的HTML代碼解析成1個DOM樹，HTML中的每個tag都是DOM樹中的1個節點，根節點就是我們常用的document對象。DOM樹 ...

1、瀏覽器渲染機制 瀏覽器采用流式布局模型（Flow Based Layout） 瀏覽器會把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合並就產生了渲染樹（Render Tre ...

前言 頁面顯示到瀏覽器上的過程： 1.1、生成一個DOM樹。 瀏覽器將獲取到的HTML代碼解析成1個DOM樹，包含了所有標簽，包括display:none和動態添加的節點。 1.2、生成樣式結 ...

回流（reflow）：指的是網絡瀏覽器為了重新渲染部分或全部的文檔而重新計算文檔中元素的位置和幾何結構的過程。 頁面上節點是以樹的形式展現的，我們通過js將頁面上的一個節點刪除，此時為了不讓剩下的節點脫節，將斷點結合起來重新形成一棵樹。而這個重新結合過程就是回流。就是由於某些修改，要將元素 ...

前端有個很經典的問題是說下重排和重繪的區別，一般我們會說重排性能低，而重繪性能高。但其實我們可以深入探究一下其中但原因。 重排（回流） 定義 當通過JS或者 CSS 修改元素的幾何屬性，例如改變元素的寬度、高度等，那么瀏覽器會觸發重新布局，解析之后的一系列子階段，這個過程就叫重排。無疑，重排 ...

前言： 　　在了解回流與重繪之前，我們先來了解下瀏覽器的渲染機制： 　　1. 瀏覽器采用的是流式布局模型（Flow Based Layout） 　　2. 瀏覽器會把CSS解析成CSSOM Tree，把HTML解析成 DOM Tree，把這兩個合並成 Render Tree 　　3. ...

記得前幾個月小伙伴准備跳槽的時候，建議他可以准備下“從輸入URL到頁面加載發生了什么”這個前端面試常見問題。結果真的命中了兩次。后來仔細思考，中間的確也反應出了很多知識點。如果能把整個過 ...