解析html(html parser)
構建dom樹(dom tree)
渲染樹構建(render tree)
繪製渲染樹(painting)
什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。
瀏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構的程序叫做reflow.
通俗點說就是當開發人員定義好了樣式後(也包括瀏覽器的預設樣式),瀏覽器根據這些來計算並根據結果將元素放到它應該出現的位置上，這個過程叫做reflow.
由於reflow是一種瀏覽器中的使用者攔截操作，所以我們了解如何減少reflow次數，及dom的層級，css效率對refolw次數的影響是十分有必要的。
reflow(回流)是導致dom指令碼執行效率低的關鍵因素之一，頁面上任何乙個節點觸發了reflow，會導致它的子節點及祖先節點重新渲染。
簡單解釋一下 reflow：當元素改變的時候，將會影響文件內容或結構，或元素位置，此過程稱為 reflow。
//code fromhello
name:bding
male
coding
loving
當p節點上發生reflow時，hello和body也會重新渲染，甚至h5和ol都會收到影響。
常見的重排元素
width
height
padding
margin
display
border-width
border
topposition
font-size
float
text-align
overflow-y
font-weight
overflow
left
font-family
line-height
vertical-align
right
clear
white-space
bottom
min-height
優化CSS重排重繪與瀏覽器效能
瀏覽器渲染展示網頁的過程，大致分為以下幾個步驟 解析html html parser 構建dom樹 dom tree 渲染樹構建 render tree 繪製渲染樹 painting 什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。瀏覽器為了重新渲染部分或整個頁面，重新計算...
優化CSS重排重繪與瀏覽器效能
關於css重排和重繪的概念，最近看到不少這方面的文章，覺得挺有用，在製作中考慮瀏覽器的效能，減少重排能夠節省瀏覽器對其子元素及父類元素的重新渲染 避免過分的重繪也能節省瀏覽器效能 優化動畫，使用3d啟用gpu硬體加速 慎重選擇高消耗的樣式，如box shadow border radius tran...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...