例項演示
總結前端人員可能不太了解瀏覽器渲染html的過程，或者了解相關知識，但是不能通過具體的方式來更深入認識。
本文通過chrome的開發者工具來直觀了解瀏覽器渲染html的過程，能對於頁面效能優化有更好的幫助。
我們先看一張**：
我們看到html和css先是分開解析，然後合在一起生成rendertree，最後繪製，顯示。
瀏覽器渲染步驟大體可分為4步：
以上4步簡述瀏覽器的一次渲染過程，理論上，每一次的dom更改或者css幾何屬性更改，都會引起一次瀏覽器的重排/重繪過程，而如果是css的非幾何屬性更改，則只會引起重繪過程。所以說重排一定會引起重繪，而重繪不一定會引起重排。
簡單來說：
其中，重排會消耗更多效能，重繪則消耗小部分效能，所以我們優化頁面，要儘量減少重排！
現在我們做乙個demo，然後通過chrome的performance工具來直觀了解瀏覽器渲染html的過程：
頁面有乙個盒子和2個按鈕，現在我們點選錄製，然後重新整理頁面，看看過程是怎樣的
點選「改變背景色」看看過程是怎樣的：
可以看到如果只是改變背景色，並沒有觸發重排（layout），只觸發了重繪（paint）。
點選「改變寬度」看看過程是怎樣的：
可以看到如果只是改變寬度，則既觸發重排（layout）又觸發重繪（paint）
當然還有其它例如其它過程，例如合成圖層（composite layers）,這又是一大學問，日後再**。
我們通過上面簡單的demo了解到瀏覽器渲染html的過程，也了解到重排和重繪的知識，所以我們優化頁面效能，要儘量減少重排（減少dom操作、減少幾何屬性操作）。
chrome開發工具指南（十四）
您的任務不只侷限於確保 在 chrome 和 android 上出色執行。即使 device mode 可以模擬 iphone 等多種其他裝置，我們仍鼓勵您檢視其他瀏覽器模擬解決方案。瀏覽器模擬器非常適合於測試 的自適應能力，但它們無法模擬 api 差異 css 支援，以及您可以在移動裝置瀏覽器中看...
chrome開發工具指南（九）
如果您使用本地儲存儲存鍵值對 kvp 則可以從local storage窗格中檢查 修改和刪除這些 kvp。使用indexeddb窗格可以檢查 修改和刪除 indexeddb 資料。展開indexeddb窗格時，indexeddb 下的第乙個級別是資料庫。如果存在多個活動的資料庫，您會看到多個條目。...
chrome開發工具指南（三）
security 面板 要檢視頁面的整體安全性，請開啟 devtools，然後轉至 security 面板。您首先會看到 security overview。security overview 會一目了然地告訴您頁面是否安全。安全頁面會通過訊息this page is secure valid ht...