根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。
構建渲染樹。
頁面的重繪與重排（也有稱回流）。頁面渲染完成後，若js操作了dom節點，根據js對dom操作動作的大小，瀏覽器對頁面進行重繪或者是重排。
1.1構建dom樹3.1重繪：螢幕的一部分要重繪。渲染樹節點發生改變，但不影響該節點在頁面當中的空間位置及大小。譬如某個div標籤節點的背景顏色、字型顏色等等發生改變，但是該div標籤節點的寬、高、內外邊距並不發生變化，此時觸發瀏覽器重繪。
3.2重排: 也有稱回流，當渲染樹節點發生改變，影響了節點的幾何屬性，導致節點位置發生變化，此時觸發瀏覽器重排，需要重新生成渲染樹，重新布局，即重排。
**注意：重排必將引起重繪，而重繪不一定會引起重排。
何時會引起重排？
當頁面布局和幾何屬性改變時就需要從排。下述情況會發生瀏覽器重排：
3.3如何減少和避免重排
重排的成本比重繪高的多的多。乙個節點的重排很有可能導致子節點，甚至父節點以及兄弟節點的重排。在一些高效能的電腦上也許沒什麼，但重排發生在手機上，那麼這個過程是延慢載入和耗電的
瀏覽器渲染頁面的原理及流程
瀏覽器將網域名稱通過網路通訊從伺服器拿到html檔案後，如何渲染頁面呢？1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。2.構建渲染樹 render tree 3.頁面的重...
瀏覽器渲染頁面的原理及流程
1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。js會對dom節點進行操作，瀏覽器無法 未來的dom節點的具體內容，為了防止無效操作，節省資源，只能阻塞dom樹的構建。2....
瀏覽器渲染頁面的原理及流程
我們可能都知道瀏覽器含有乙個渲染引擎，用來渲染視窗所展示的內容。預設情況下，渲染引擎可以顯示html xml文件及，它也可以借助外掛程式 一種瀏覽器擴充套件 顯示其他型別資料，例如使用pdf閱讀器外掛程式，用於顯示pdf格式。但是其具體的渲染原理和流程估計也有很多人都不知道或者不清楚吧。這些天研究了...