解析html，得到乙個dom tree
解析css，得到cssom tree
將兩者整合成渲染數，render tree
布局（layout）， 根據render tree計算每個節點的位置大小等資訊 （在草稿本上畫了個草圖）
繪製（painting ）根據計算好的資訊繪製整個頁面
擴充：1、2、3非常快，但是4和5比較耗時，有三個術語：
「重排」 和 「回流」 指的是重新執行步驟4
「重繪」 指重新執行步驟5
重排意味著重新計算節點的位置大小等資訊，重新在草稿本上畫了草圖，所以一定會重繪
重繪不一定會重排，比如背景顏色改變
重排和重繪代價很高，所以瀏覽器並不會一有資訊改變就去執行重排和重繪，而是會將多個可能的重排和重繪一次執行。是的，它可能會非同步。
有兩個css屬性，display: none和visibility: hidden，前者會導致重排和重繪，後者會導致重繪。這是後者的有點，但缺點是此節點一直儲存在記憶體中，占用資源。
前端瀏覽器渲染原理 渲染過程
瀏覽器接收到 html 檔案並轉換為 dom 樹 當我們開啟乙個網頁時，瀏覽器都會去請求對應的html檔案。雖然平時我們寫 時都會分為js css html檔案，也就是字串，但是計算機硬體是不理解這些字串的，所以在網路中傳輸的內容其實都是0和1這些位元組資料。當瀏覽器接收到這些位元組資料以後，它會將...
瀏覽器渲染過程
瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹，不...
瀏覽器渲染過程
1.頁面準備 2.重定向 在header定義了重定向才會有這個過程，如果沒有就不會產生這個過程 關於重定向的分析 4.dns解析 把網域名稱解析成ip，如果直接用ip位址訪問，不會產生這個過程 5.tcp連線 6.request header 請求頭資訊 7.request body 請求體資訊，比...