作為乙個web開發，經常會聽到這兩個詞，除了「回流一定會引起重繪，但重繪不一定會回流」之外，對這兩個概念理解的也不是很透徹。今天就整理一下吧解析html**，生成dom樹；
解析css樣式表，生成cssom樹；
dom樹和cssom樹合成render tree；（不是完全匹配的，假如有樣式為diaplay:none的元素節點，那該元素就不存在在render tree中）
layout（回流）：根據渲染樹進行計算得到節點在裝置視口內的位置大小的實際畫素值，進行排列布局；
painting（重繪）：根據回流的結果所得到的畫素值進行繪製；
display：頁面展現
位置、大小（position、float、width、height、top…、***width/height…、margin、padding…）
元素內容改變（font…、text-align、line-height）
視口大小改變
只要回流必然會進行重繪。
只發生重繪的一些情況：
color、visibility、background、box-shadow、outline、transfrom、opacity、filter等
瀏覽器渲染佇列機制：瀏覽器不會每檢測到要回流重繪就去執行一次，而是將修改操作放入修改佇列中，當達到一定時間或者一定數量的時候才會批量進行一次回流重繪。
但是，下列這些操作會強制重新整理佇列的style樣式請求：
offsettop, offsetleft, offsetwidth, offsetheight
scrolltop, scrollleft, scrollwidth, scrollheight
clienttop, clientleft, clientwidth, clientheight
getcomputedstyle(), 或者 ie的 currentstyle
重繪和重排（回流）
html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...
重繪和重排（回流）
html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...
回流和重繪
在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tree 渲染樹 然後根據...