資訊專欄INFORMATION COLUMN
摘要：前言最近在研究，接著就研究回顧起回流與重繪了。回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。注意回流必將引起重繪，而重繪不一定會(huì)引起回流。
前言
最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。
回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。下面我是我稍做的整理：
瀏覽器渲染流程在理解這兩個(gè)概念之前，我們先來看看瀏覽器渲染的工作流程。這里以webkit渲染引擎為例
瀏覽器請(qǐng)求到html文檔后，將html解析成dom Tree
css被解析成css style rules
解析完成后，將結(jié)合dom Tree和style rules構(gòu)造render tree
瀏覽器計(jì)算render tree中每個(gè)渲染對(duì)象的位置和大小，即布局（layout）
最后進(jìn)行繪制（painting）
回流與重繪回流（reflow）
當(dāng)元素的規(guī)模尺寸、布局、隱藏等改變，而導(dǎo)致render tree的一部分(或全部)重新構(gòu)建，即稱為回流。每個(gè)頁面至少進(jìn)過一次回流，就在頁面第一次加載的時(shí)候。在回流的時(shí)候，瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，該過程成為重繪。
重繪（repaint）
當(dāng)render tree中的一些元素需要更新屬性，這些屬性只影響元素的外觀，風(fēng)格，而不會(huì)影響元素尺寸、布局、隱藏的，比如background-color，就叫重繪。
注意：回流必將引起重繪，而重繪不一定會(huì)引起回流。
回流的發(fā)生可見元素尺寸的改變，如width、height、margin、padding等屬性改變引起尺寸的變化
window resize事件的觸發(fā)
元素display屬性的改變
元素位置的改變
等等
性能優(yōu)化回流與重繪非常影響web性能，因?yàn)槊恳淮蝖tml和css的重新解析然后再構(gòu)建成render tree，都需要經(jīng)過大量的計(jì)算，這個(gè)過程是很耗時(shí)間耗性能的。如何減少呢？建議
頁面元素適當(dāng)定高，如img的夾在在文檔流中占據(jù)的空間從0到完全加載，會(huì)產(chǎn)生頻繁的重繪
減少dom的深度，可以減少解析器耗時(shí)
盡量簡(jiǎn)化css
復(fù)雜的動(dòng)畫，可以使其元素脫離文檔流，使用position:absolute或者position:fixed，以減少對(duì)父元素的影響
當(dāng)然，這里列舉的并不是全部的方法，若你有更好的建議，也希望一起分享出來
參考文檔https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108823.html
摘要：前言最近在研究，接著就研究回顧起回流與重繪了。回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。注意回流必將引起重繪，而重繪不一定會(huì)引起回流。 前言 最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。 回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。下面我是我稍做的整理： 瀏覽器渲染流程 在理解這...
摘要：寫在金三銀四之際。一個(gè)節(jié)點(diǎn)觸發(fā)了，瀏覽器會(huì)檢查中其他所有節(jié)點(diǎn)的顯示方式一個(gè)節(jié)點(diǎn)觸發(fā)了會(huì)導(dǎo)致它的祖先節(jié)點(diǎn)，后代節(jié)點(diǎn)以及在它之后的節(jié)點(diǎn)全部。對(duì)性能的影響大于。解決方式控制我們無力去改變，對(duì)性能損害的程度，我們能做的只有減少它們發(fā)生的次數(shù)。 寫在金三銀四之際。 因?yàn)榉N種原因想要謀求新的發(fā)展，不得已翻起了塵封已久的高程書；寫起了各種經(jīng)典CSS布局；回顧起記憶略顯模糊的幾個(gè)項(xiàng)目。感慨著太多太多...
摘要：回流也被稱為重排，其實(shí)從字面上來看，重排更容易讓人形象易懂即重新排版整個(gè)頁面。重繪當(dāng)頁面元素樣式改變不影響元素在文檔流中的位置時(shí)如，，，瀏覽器只會(huì)將新樣式賦予元素并進(jìn)行重新繪制操作。你真的了解回流和重繪嗎 簡(jiǎn)單先了解一下瀏覽器的渲染過程（圖片來自于網(wǎng)絡(luò)） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 瀏覽器生成渲染...
摘要：本文是求索的動(dòng)畫快于嗎為何的續(xù)文。沒有集中繪制，每個(gè)都在一個(gè)事件回調(diào)函數(shù)上下文中處理，有多少個(gè)就有多少個(gè)上下文有集中繪制。測(cè)試過程中為了比較好的效果用了隨機(jī)數(shù)。 本文是求索：GSAP的動(dòng)畫快于jQuery嗎？為何？ 的續(xù)文。GSAP是一個(gè)js動(dòng)畫插件，它聲稱20x faster than jQuery，是什么讓它這么快呢？ 每當(dāng)有這樣的問題的時(shí)候，我們可以通過以下步驟來...
閱讀 1206·2021-11-24 11:16
閱讀 3435·2021-11-15 11:38
閱讀 1927·2021-10-20 13:47
閱讀 552·2021-09-29 09:35
閱讀 2199·2021-09-22 15:17
閱讀 1016·2021-09-07 09:59
閱讀 3385·2019-08-30 13:21
閱讀 2909·2019-08-30 12:47
