reflow(回流)和repaint(優化):reflow是說假如某個子元素樣式發生改變,直接影響到其父元素以及往上追溯很多的祖先元素包括它的兄弟元素。
reflow是說如果改變某個元素的背景色、文字顏色、邊框顏色等不影響它周圍內部布局的屬性,將只會引起瀏覽器重繪。
導致reflow發生的情況有:1.改變視窗大小。2.改變文字大小。3.內容的改變。4.啟用偽類。5.操作css類。6.指令碼操作dom.7.計算offsetwidth和offsetheight。8.設定style屬性。
如何減少回流:不要通過父級改變子元素樣式,最好直接改變子元素樣式。當然了,改變子元素樣式的時候最好不要影響父元素和子元素的尺寸和大小。盡量通過class來設計元素樣式,切記用style。
前端效能優化 回流與重繪
最近在研究virtual dom,接著就研究回顧起回流 reflow 與重繪 repaint 了。在理解這兩個概念之前,我們先來看看瀏覽器渲染的工作流程。這裡以webkit渲染引擎為例 瀏覽器請求到html文件後,將html解析成dom tree css被解析成css style rules 解析完...
頁面的重繪與回流及優化
首先要清楚頁面呈現的具體過程 1.瀏覽器把獲取到的html 解析成1個dom樹,html中的每個tag都是dom樹中的1個節點,根節點就是我們常用的document物件。dom樹里包含了所有html標籤,包括display none隱藏,還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的...
重構與回流
在討論頁面重繪 回流 重排 之前。需要對頁面的呈現流程有些了解,頁面是怎麼把html結合css等顯示到瀏覽器上的,下面的流程圖顯示了瀏覽器對頁面的呈現的處理流程。可能不同的瀏覽器略微會有些不同。但基本上都是類似的。瀏覽器的渲染過程 1 首先獲取html,然後構建dom樹 dom樹里包含了所有html...