以下是基於 google 的 blink web 引擎，css屬性改變所對應的重排和重繪改變，是為改變，否為不改變
css屬性
重排重繪
align-content是是
align-items是是
align-self是是
backface-visibility否是
background-attachment否是
background-blend-mode否是
background-clip否是
background-color否是
background-image否是
background-origin否是
background-position否是
background-repeat否是
background-size否是
border-bottom-color否是
border-bottom-left-radius否是
border-bottom-right-radius否是
border-bottom-style是是
border-bottom-width是是
border-collapse是是
border-image-outset 否
是border-image-repeat否是
border-image-slice否是
border-image-source是是
border-image-width否是
border-left-color否是
border-left-style是是
border-left-width是是
border-right-color否是
border-right-style是是
border-right-width是是
border-top-color否是
border-top-left-radius否是
border-top-right-radius否是
border-top-style是是
border-top-width是是
bottom是是
box-shadow是是
box-sizing是是
clear是是
clip否是
color否是
cursor否是
direction是是
display是是
flex-basis是是
flex-direction是是
flex-grow是是
flex-shrink是是
flex-wrap是是
float是是
font-family是是
font-kerning是是
font-size是是
font-style是是
font-variant是是
font-variant-ligatures是是
font-weight是是
height是是
justify-content是是
left是是
letter-spacing是是
line-height是是
list-style-image是是
list-style-position是是
list-style-type是是
margin-bottom是是
margin-left是是
margin-right是是
margin-top是是
max-height是是
max-width是是
min-height是是
min-width是是
opacity否是
order是是
orphans否是
outline-color是是
outline-offset是是
outline-style是是
outline-width是是
overflow-x是是
overflow-y是是
padding-bottom是是
padding-left是是
padding-right是是
padding-top是是
perspective否是
perspective-origin否是
pointer-events否是
position是是
resize否是
right是是
table-layout是是
text-align是是
text-decoration否是
text-indent是是
text-rendering是是
text-shadow是是
text-transform否是
top否
是transform否否
transform-origin否是
transform-style否否
unicode-bidi是是
vertical-align是是
visibility否是
white-space是是
widows否否
width是是
word-break是是
word-spacing是是
word-wrap是是
z-index否是
css重繪與重排的方法
瀏覽器載入頁面原理 通常在文件初次載入時，瀏覽器引擎會解析html文件來構建dom樹，之後根據dom元素的幾何屬性構建一棵用於渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似於 盒子模型 由於隱藏元素不需要顯示，渲染樹中並不包含dom樹中隱藏的元素 當渲染樹構建完成後，瀏覽器就可以將元素放置到正...
css 頁面重繪和回流 重排 以及優化
1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構...
css 頁面重繪和回流 重排 以及優化
一 html頁面的呈現流程 1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的c...