瀏覽器渲染原理
瀏覽器渲染大致有以下幾個(gè)過程：
- 根據(jù)HTML構(gòu)建HTML樹（DOM）
- 根據(jù)CSS構(gòu)建CSS樹（CSSOM）
- HTML樹和CSS樹組合成一個(gè)渲染樹（render tree）
- Layout布局 ,包括文檔流猜欺、盒模型烈评、大小兴枯、位置等
- Paint繪制，包括邊框顏色帆卓、文字顏色腋舌、陰影等
- Composite合成塔嬉，根據(jù)層疊關(guān)系展示畫面
在更新樣式的時(shí)候阳惹，瀏覽器是否完全按照以上六個(gè)步驟進(jìn)行渲染呢？
并不一定
在更新樣式的時(shí)候晰筛，還有可能省略掉layout嫡丙，或者省略掉layout和paint。
那么如何查看是否省略掉其中的paint步驟读第？
我們可以在chrome瀏覽器中打開開發(fā)者工具 --> 按ESC --> 彈出的窗口曙博，左邊有三個(gè)小點(diǎn)，點(diǎn)擊 --> 選擇Rendering -> 勾選Paint flashing -> 接下來樣式改變的時(shí)候卦方，如果哪個(gè)地方變綠羊瘩，就說明哪里被重新渲染了泰佳，沒有變綠就沒有被重新渲染
CSS動(dòng)畫的兩種做法 transition 和 animation
transition過渡
transition 屬性是 transition-property盼砍，transition-duration尘吗，transition-timing-function和 transition-delay 的一個(gè)簡(jiǎn)寫屬性。
transition-property：指定應(yīng)用過渡屬性的名稱
transition-duration：以秒或毫秒為單位指定過渡動(dòng)畫所需的時(shí)間浇坐。默認(rèn)值為 0s 睬捶，表示不出現(xiàn)過渡動(dòng)畫
transition-timing-function： 動(dòng)畫速度的曲線，可以取的值有ease(默認(rèn))近刘、linear擒贸、ease-in、ease-out觉渴、ease-in-out介劫、以及貝塞爾曲線等
transition-delay：動(dòng)畫的延遲時(shí)間，即就是多長(zhǎng)時(shí)間后開始動(dòng)畫
注意：使用transition的時(shí)候案淋，要注意transition-duration和transition-delay的順序座韵，duration要放在delay前面。
animation動(dòng)畫
animation 屬性是 animation-name踢京，animation-duration, animation-timing-function誉碴，animation-delay，animation-iteration-count瓣距，animation-direction黔帕，animation-fill-mode 和 animation-play-state 屬性的一個(gè)簡(jiǎn)寫屬性形式
animation-name：動(dòng)畫的名稱，自定義就好
animation-duration：動(dòng)畫持續(xù)時(shí)間蹈丸，跟transition類似
animation-timing-function：動(dòng)畫速度曲線成黄，跟transition中類似
animation-delay：延遲事件
animation-iteration-count： 動(dòng)畫的運(yùn)行次數(shù)，無限次是infinite
animation-direction: 動(dòng)畫是否反向運(yùn)動(dòng)逻杖，常用的是alternate（動(dòng)畫交替運(yùn)行）
animation-fill-mode：動(dòng)畫結(jié)束時(shí)的位置慨默，forwards停到動(dòng)畫結(jié)束的位置
animation-play-state： 定義一個(gè)動(dòng)畫是否運(yùn)行或者暫停
animation通常和keyframes搭配使用
- 可以通過from to的形式
@keyframes name{
from{
動(dòng)畫開始的樣式
}
to{
動(dòng)畫結(jié)束的樣式
}
}
- 也可以通過百分比的形式
@keyframes name{
0%{
動(dòng)畫開始的樣式
}
50%｛
動(dòng)畫中間的樣式
｝
100%{
動(dòng)畫結(jié)束的樣式
}
}
