瀏覽器渲染原理
渲染機(jī)制
- 瀏覽器加載HTML代碼后解析HTML代碼來(lái)構(gòu)建HTML樹(shù)（DOM）
- 加載CSS代碼后解析并構(gòu)建CSS樹(shù)（CSSOM）
- 將兩棵樹(shù)合并成一棵渲染樹(shù)Render tree
- 根據(jù)文檔流、盒模型、計(jì)算大小和位置等布局 Layout
- 根據(jù)邊框、文字顏色以及陰影等繪制 Paint
- 再根據(jù)層疊關(guān)系等合成并展示畫(huà)面 Compose
1589719767199-e3108fd7-8823-42f7-9331-5479ab5d3fe0.png
更新樣式
- 一般使用Js更新樣式，比如：
? div.style.background = 'red'
? div.style.display = 'none'
? div.classList.add('red')
? div.remove()直接刪除節(jié)點(diǎn)
動(dòng)畫(huà)
定義
- 由許多靜止的畫(huà)面（幀）以一定的播放速度（如每秒30張）連續(xù)播放
- 肉眼因視覺(jué)殘像而產(chǎn)生錯(cuò)覺(jué)誤以為是活動(dòng)的畫(huà)面
概念
? 幀：每個(gè)靜止的畫(huà)面
? 播放速度：影視每秒24幀，游戲每秒最少30幀
動(dòng)畫(huà)優(yōu)化
CSS優(yōu)化
使用will-change或translate
JS優(yōu)化
使用requestAnimationFrame代替setTimeout和setInterval
transform轉(zhuǎn)換
常用功能
? 位移translate
? 縮放scale
? 旋轉(zhuǎn)rotate
? 傾斜skew
translate取值
- translateX，沿著 X 軸移動(dòng)元素
- translateY，沿著 Y 軸移動(dòng)元素
- translate(x,y)，沿著 X 和 Y 軸移動(dòng)元素
- translate3d，3D 轉(zhuǎn)化
經(jīng)驗(yàn)
? 一般要配合過(guò)渡 transition
? inline元素不支持 transform，需要變成block
? translate(-50%, -50%) 可以做絕對(duì)定位元素居中
scale取值 - scaleX，改變?cè)氐膶挾?/li>
- scaleY，改變?cè)氐母叨?/li>
- scale(x,y) ，改變?cè)氐膶挾群透叨?/li>
- scale3d(x,y,z) ，3D 縮放轉(zhuǎn)換
經(jīng)驗(yàn)
? 少用，容易出現(xiàn)模糊
rotate
在參數(shù)中規(guī)定角度，一般用于360度旋轉(zhuǎn)制作 loading
skew - skewX，沿著 X 軸
- skewY，沿著 Y 軸
- skew，沿著 X 和 Y 軸
transition過(guò)渡
語(yǔ)法
- transition: 屬性名 時(shí)長(zhǎng) 過(guò)渡方式 延遲
- 可以用逗號(hào)分隔兩個(gè)不同屬性
- 可用all代表所有屬性
- 過(guò)渡方式有l(wèi)inear、ease、ease-in、ease-in-out、ease-out、step-start、step-end
過(guò)渡起始
過(guò)渡必須要有起始，一般只有一次動(dòng)畫(huà)或者兩次，比如hover和非hover狀態(tài)的過(guò)渡
不是所有屬性都能過(guò)渡
display: none -> block沒(méi)法過(guò)渡，一般改成visibility: hidden -> visible
animation
縮寫(xiě)語(yǔ)法
animation: 時(shí)長(zhǎng) | 過(guò)渡方式 | 延遲 | 次數(shù) | 方向 | 填充模式 | 是否暫停 | 動(dòng)畫(huà)名
時(shí)長(zhǎng)
1s 或 1000ms
過(guò)渡方式
跟 transition 一樣，比如 linear
次數(shù)
3 或 infinite
方向
reverse | alternate | alternate-reverse
填充模式
none | forwards | backwards | both
是否暫停
pause | running
