**：
瀏覽器將網域名稱通過網路通訊從伺服器拿到html檔案後，如何渲染頁面呢？
1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。
2.構建渲染樹（render tree）。
3.頁面的重繪（repaint）與重排（reflow，也有稱回流）。頁面渲染完成後，若js操作了dom節點，根據js對dom操作動作的大小，瀏覽器對頁面進行重繪或是重排。
html 文件中的所有內容皆是節點，各節點之間擁有層級關係，如父子關係、兄弟關係等，彼此相連，構成dom樹。最常見的幾種節點有：文件節點、元素節點、文字節點、屬性節點、注釋節點。
dom節點樹中節點與html文件中內容一一對應，dom樹構建過程：讀取html文件，將位元組轉換成字元，確定tokens（標籤），再將tokens轉換成節點，以節點構建 dom 樹。如下圖所示：
css文件中，所有元素皆是節點，與html檔案中的標籤節點一一對應。css中各節點之間同樣擁有層級關係，如父子關係、兄弟關係等，彼此相連，構成cssom樹。
在構建dom樹的過程中，在 html 文件的 head 標籤中遇到 link 標籤，該標籤引用了乙個外部css樣式表。由於預見到需要利用該css資源來渲染頁面，瀏覽器會立即發出對該css資源的請求，並進行cssdom樹的構建。
cssom樹構建過程與dom樹構建流程一致：讀取css文件，將位元組轉換成字元，確定tokens（標籤），再將tokens轉換成節點，以節點構建 cssom 樹。如下圖所示：
.css檔案，又名層疊樣式表。當cssom樹生成節點時，每乙個節點首先會繼承其父節點的所有樣式，層疊覆蓋，然後再以"向下級聯"的規則，為該節點應用更具體的樣式，遞迴生成cssom樹。譬如，上右圖中第二層的p節點，有父節點body，因此該p將繼承body節點的樣式："font-size: 16px;"。然後再應用該p節點自身的樣式："font-weight: bold;"。所以最終該p節點的樣式為："font-size: 16px;font-weight: bold;"。
若在html頭部載入js檔案，由於js阻塞，會推遲頁面的首繪。為了加快頁面渲染，一般將js檔案放到html底部進行載入，或是對js檔案執行async或defer載入。
渲染樹（render tree）由dom樹、cssom樹合併而成，但並不是必須等dom樹及cssom樹載入完成後才開始合併構建渲染樹。三者的構建並無先後條件，亦非完全獨立，而是會有交叉，並行構建。因此會形成一邊載入，一邊解析，一邊渲染的工作現象。
構建渲染樹，根據渲染樹計算每個可見元素的布局，並輸出到繪製流程，將畫素渲染到螢幕上。
螢幕的一部分要重繪。渲染樹節點發生改變，但不影響該節點在頁面當中的空間位置及大小。譬如某個div標籤節點的背景顏色、字型顏色等等發生改變，但是該div標籤節點的寬、高、內外邊距並不發生變化，此時觸發瀏覽器重繪（repaint）
也有稱回流，當渲染樹節點發生改變，影響了節點的幾何屬性（如寬、高、內邊距、外邊距、或是float、position、display：none;等等），導致節點位置發生變化，此時觸發瀏覽器重排（reflow），需要重新生成渲染樹。譬如js為某個p標籤節點新增新的樣式："display:none;"。導致該p標籤被隱藏起來，該p標籤之後的所有節點位置都會發生改變。此時瀏覽器需要重新生成渲染樹，重新布局，即重排（reflow）
注意：重排必將引起重繪，而重繪不一定會引起重排。
何時回引起重排？
當頁面布局和幾何屬性改變時就需要重排。下述情況會發生瀏覽器重排：
1、新增或者刪除可見的dom元素；
2、元素位置改變——display、float、position、overflow等等；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文字改變或者大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器視窗尺寸改變——resize事件發生時；
reflow 的成本比 repaint 的成本高得多的多。乙個節點的 reflow 很有可能導致子節點，甚至父節點以及兄弟節點的 reflow 。在一些高效能的電腦上也許還沒什麼，但是如果 reflow 發生在手機上，那麼這個過程是延慢載入和耗電的。----瀏覽器的渲染原理簡介
直接改變classname，如果動態改變樣式，則使用csstext（考慮沒有優化的瀏覽器）；
讓要操作的元素進行」離線處理」，處理完後一起更新；
a) 使用documentfragment進行快取操作,引發一次回流和重繪；
b) 使用display:none技術，只引發兩次回流和重繪；
c) 使用clonenode(true or false) 和 replacechild 技術，引發一次回流和重繪；
3.不要經常訪問會引起瀏覽器flush佇列的屬性，如果你確實要訪問，利用快取；
讓元素脫離動畫流，減少回流的render tree的規模；
瀏覽器渲染頁面的原理及流程
1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。js會對dom節點進行操作，瀏覽器無法 未來的dom節點的具體內容，為了防止無效操作，節省資源，只能阻塞dom樹的構建。2....
瀏覽器渲染頁面的原理及流程
我們可能都知道瀏覽器含有乙個渲染引擎，用來渲染視窗所展示的內容。預設情況下，渲染引擎可以顯示html xml文件及，它也可以借助外掛程式 一種瀏覽器擴充套件 顯示其他型別資料，例如使用pdf閱讀器外掛程式，用於顯示pdf格式。但是其具體的渲染原理和流程估計也有很多人都不知道或者不清楚吧。這些天研究了...
瀏覽器渲染頁面的流程
瀏覽器渲染頁面的流程 1 根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。2 構建渲染樹 render tree 3 頁面的重繪 repaint 與重排 reflow，也有稱回...