1 瀏覽器渲染

1.1 瀏覽器渲染步驟

1. HTML (DOM樹)
2. CSS(CSS樹)
3. DOM樹和CSS樹組合成render(渲染樹)
4. layout布局(文檔流,盒模型等大小,位置)
5. paint繪制(背景,邊框顏色,陰影等畫出來)
6. Compose合成(根據層疊關系展示畫面)

1.2 JS更新樣式之后瀏覽器會產生3中情況

1. JS->Style->layout(重新布局)->repaint(重繪)->Composite(合成)
2. JS->Style->repaint(重繪)->Composite(合成)
3. JS->Style->Composite(合成)

• 總結: JS改變CSS的某些樣式后
  • 會改變layout,需要執(zhí)行1.重新布局,重繪,合成.
  • 會改變繪制,需要執(zhí)行2.重繪,合成.
  • 改變后僅僅合成就可以.

1.3 如何優(yōu)化瀏覽器渲染?

• 在JS改變樣式時
  • 盡可能多使用不需要重新layout或者repaint的屬性樣式.
  • 例如: transform
  • 不要使用left做動畫或者移動,會導致layout.

2 transition 過渡

• 過渡是一個元素在不同狀態(tài)之間的切換.
• transition: 過渡屬性 時間 過渡延遲 過渡函數.

2.1 過渡屬性

• 過渡屬性: 可以選某個屬性,也可以使用all選擇所有可以過渡的屬性.
• transition-delay: 過渡延遲
• transition-duration: 過渡持續(xù)時間
• transition-timing-function: 過渡函數

2.2 過渡函數

transition-timing-function: ease //慢-快-慢(默認)
transition-timing-function: ease-in //加速運動
transition-timing-function: ease-out //減速運動
transition-timing-function: ease-in-out //快-慢
transition-timing-function: linear //勻速
transition-timing-function: steps(4, end) //分步::將過渡分步完成效果.

3 animation

• 過渡是元素一個狀態(tài)到另外一個狀態(tài)的切換
• 動畫是元素在多個狀態(tài)之間切換

3.1 關鍵幀(動畫設置)

@keyframes  animal {
    from {}
    to {}
}
/* 或者 */
@keyframes  animal {
    0% {}
    25% {}
    50% {}
    100% {}
}

3.2 動畫屬性

• animation: 動畫名字 持續(xù)時間 運行函數 動畫運行方向 動畫運行次數.

• animation-name: //動畫的關鍵幀名稱

• animation-duration: //動畫的持續(xù)時間

• animation-timing-function: //動畫函數(和過渡的函數一致)

• animation-iteration-count: n次或者 infinite 無數次

• animation-direction :: 動畫運行的方向

  • normal 默認值 0---100%
  • reverse 100%---0
  • alternate 跑馬燈 0---100%---0%
  • alternate-reverse 逆向跑馬燈 100%---0%---100%

• animation-play-state: 動畫狀態(tài)

  • running 運動
  • parused 暫停