瀏覽器的渲染過程
首先，我們先來了解一下瀏覽器的渲染過程是什么樣的，也就是說瀏覽器把一堆代碼呈現(xiàn)到頁面上的過程是什么樣子的，瀏覽器采用流式布局模型(Flow Bsaed Layout)，根據(jù)下圖，我們可以總結(jié)出瀏覽器的渲染步驟為：

步驟：
1.解析HTML代碼，生成DOM樹(DOM Tree)；解析CSS代碼，生成CSSOM樹(CSS Tree)；
2.將DOM樹和CSSOM樹進行結(jié)合從而構(gòu)建起渲染樹(Render Tree)；
Render Tree類似于DOM Tree，但存在很大的區(qū)別：Render Tree能夠識別樣式，Render Tree中的每個節(jié)點都有自己的樣式，而且Render Tree不包含隱藏的節(jié)點，比如display:none的節(jié)點，因為這些節(jié)點不會用于頁面呈現(xiàn)。
3.回流(Layout)，根據(jù)生成的Render Tree，進行Layout，得到節(jié)點的位置、大小；
4.重繪(Painting)，根據(jù)Render Tree以及回流得到的位置信息，確定各節(jié)點的絕對位置，得到各節(jié)點的絕對像素；
5.呈現(xiàn)(Display)，將像素發(fā)送給GPU，展示到頁面上。
由于瀏覽器采用流式布局，對Render Tree的計算通常只需要遍歷一次就可以完成，但是table以及其內(nèi)部元素除外，他們可能需要多次計算，通常要花三倍同等元素的時間，這也是為什么要避免使用table布局的原因。
————分割線————
在步驟2中，渲染樹(Render Tree)是如果構(gòu)建的呢？

如上圖所示，總結(jié)出的構(gòu)建步驟為：
1.從DOM樹的根節(jié)點開始遍歷每個可見節(jié)點；
遍歷的是每個可見節(jié)點，那么不可見的節(jié)點包括：
(a) 一些不會渲染輸出的節(jié)點，比如script、meta、link等；
(b) 一些通過css進行隱藏的節(jié)點。比如display:none。注意，利用visibility和opacity隱藏的節(jié)點，還是會顯示在渲染樹上的。只有display:none的節(jié)點才不會顯示在渲染樹上。
2.對于每個可見的節(jié)點，找到CSSOM樹中對應(yīng)的規(guī)則，并應(yīng)用它們；
3.根據(jù)每個可見節(jié)點以及其對應(yīng)的樣式，組合生成渲染樹。
又是怎么組合的呢？
簡單是就是一個匹配的過程，要將每個HTML元素節(jié)點與之正確的樣式相匹配。因為節(jié)點位置屬性將通過CSS選擇器鏈的優(yōu)先級來決定，渲染樹中的某個結(jié)點可能會同時滿足多個選擇器鏈，這時候就要通過選擇器的優(yōu)先級來完成屬性的賦值。
這時候，將渲染結(jié)點同時滿足的幾個選擇器鏈通過其優(yōu)先級加權(quán)算值，從小到大依次覆蓋渲染結(jié)點；而如何確定此渲染結(jié)點是否滿足某個選擇器鏈呢？這也是一個逐層判斷的過程：從此渲染結(jié)點開始，判斷此結(jié)點是否與選擇器鏈表的當前選擇器相匹配。如果匹配，判斷此選擇器與下一個選擇器的關(guān)系：如果為NONE，表示本選擇器是選擇器鏈的最后一個，返回成功；如果關(guān)系為AND (比如：#id.class)，選擇下一個選擇器與本渲染結(jié)點繼續(xù)比較；如果關(guān)系為CHILD，表示本選擇器是下一個選擇器的子結(jié)點，返回下一個選擇器與下一個渲染結(jié)點的匹配結(jié)果；否則，關(guān)系為DESCENDANT，選擇器和渲染結(jié)點各指向下一個結(jié)點，然后將渲染結(jié)點繼續(xù)回溯，直到第一個滿足回溯后的選擇器的結(jié)點，此時將繼續(xù)判斷回溯后的選擇器和回溯后的渲染結(jié)點是否匹配。
————分割線————
重繪
什么是重繪呢？當Render Tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風(fēng)格，而不會影響布局的，比如改變背景顏色等，這就會引起瀏覽器重繪(Painting)。重繪有一定的代價，因為瀏覽器會驗證DOM樹上其他元素的可見性。例如：
某網(wǎng)站首頁頁面中，將藍色框內(nèi)導(dǎo)航欄的背景顏色變?yōu)榉凵?#xff0c;其他的不變，并沒有改變整體布局和各個部分的位置，所以此時會引起重繪，不會引起回流。

回流
當Render Tree中的部分節(jié)點因為元素的尺寸、布局、隱藏等改變而需要重新構(gòu)建，這就會引起瀏覽器回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候(瀏覽器渲染過程步驟3)，因為要第一次構(gòu)建Render Tree。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，即重繪。例如：
某網(wǎng)站首頁頁面中，將藍色框內(nèi)導(dǎo)航欄直接刪掉，則下面的所有部分會進行上移，整體的布局發(fā)生了變化，所以此時會引起回流，接著進行重繪。
在這里引出了回流與重繪的一個最大的區(qū)別：
【 回流一定會引起重繪，重繪不一定會引起回流 】回流是影響瀏覽器性能的關(guān)鍵因素，因為其變化會涉及到部分頁面甚至整個頁面的布局更新。
那么，何時會觸發(fā)回流重繪呢？
(a) 添加或刪除可見的DOM元素;
(b) 元素的位置發(fā)生變化;
(c) 元素的尺寸發(fā)生變化（包括外邊距、內(nèi)邊框、邊框大小、高度和寬度等）;
(d) 內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代;
(e) 頁面一開始渲染的時候（這肯定避免不了）;
(f) 瀏覽器的窗口尺寸變化（因為回流是根據(jù)視口的大小來計算元素的位置和大小的）......
————分割線————
優(yōu)化
上面提到，回流重繪給瀏覽器性能帶來了很大的影響，為了提高性能，可以采取下面的一些措施進行性能優(yōu)化。
1、瀏覽器優(yōu)化
現(xiàn)代瀏覽器大多是通過隊列機制來批量更新布局，瀏覽器把修改操作放在一個隊列里面，然后再批量執(zhí)行，如果是60HZ刷新率的話，至少要16.6ms才會清空隊列。但是當你獲取布局信息的操作的時候，會導(dǎo)致隊列被強制清空，觸發(fā)回流重繪以確保返回正確的值，主要包括以下屬性和方法：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• width height
• getComputedStyle()
• getBoundingClientRect()
  所以，上述的屬性和方法要避免頻繁使用，最好不用，如果要用，可以想辦法把值緩存下來。

2、減少回流與重繪
CSS

• 使用 transform 代替 top ；
• 使用 visibility 代替 dispaly。因為visibility只會引起重繪，而dispaly會引起回流；
• 避免 table 布局。可能一個小小的改動會導(dǎo)致整個table的重新布局；
• 盡可能的在DOM樹的最末端改變class；
• 避免設(shè)置多層的內(nèi)聯(lián)樣式，CSS選擇器從右向左匹配查找，避免節(jié)點層級太多；
• 將動畫效果應(yīng)用到position屬性為absolute或者fixed的元素上，避免影響其他元素布局，這樣只有重繪，同時，控制動畫速度可以用requestAnimationFrame；
• 避免使用CSS表達式；
• CSS3硬件加速(GPU加速)
  ......

JS

• 避免頻繁的操作樣式，最好一次性重寫style屬性，或者將樣式列表定義為class并一次性更改class屬性；
• 避免頻繁的操作DOM；
• 避免頻繁讀取會引發(fā)回流重繪的屬性；
• 對有復(fù)雜動畫的元素使用絕對定位

總結(jié)

以上是生活随笔為你收集整理的vuex中的值变化 页面重新渲染_浅谈浏览器的渲染过程，重绘与回流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。