瀏覽器的渲染原理
渲染步驟
-根據HTML構建HTML樹（DOM）
-根據CSS構建CSS樹（CSSOM）
-將兩棵樹合并成一顆渲染樹（render tree）
-Layout布局（文檔流嗡官、盒模型闲延、計算大小和位置）
-Paint繪制（把邊框顏色、文字顏色志膀、陰影等畫出來）
-Compose合成（根據層疊關系展示畫面）
三棵樹長啥樣佑吝？
如何更新樣式
一般來說用JS更新樣式
例如：
-div.style.background = 'red'
-div.style.dispay = 'none'
-div.classList.add('red')
-div.remove()直接刪掉節(jié)點
三種更新樣式的方式
1.全走
div.remove() 會觸發(fā)當前消失坐昙，其它元素relayout
2.跳過layout
直接repaint+composite
3.跳過layout和paint
改變transform，只需composite
注意必須全屏查看效果芋忿，在iframe里看會出現(xiàn)問題
我們并不知道那個屬性觸發(fā)了什么流程炸客，但是有人一個個試過并且將這些屬性分享了
tramsform 更好的做動畫方式
原理
示例
transform: translateX(0 =>300px);
transition過度屬性可以自動腦部中間幀
性能
由于過程中并沒有repaint，所以transform性能比改left性能好戈钢。
transform常用功能
-位移 translate
-縮放 scale
-旋轉 rotate
-傾斜 skew
注意：這些功能一般都需要配合transition過度痹仙，inline元素不支持transform，需要先變成block
translate常用寫法示例
translateX(<length-percentage>);
translateY(<length-percentage>);
translate(<length-percentage>,<length-percentage>);
translate3d(x,y,z);
更多用法參考MDN
scale常用寫法示例
scaleX(<number>);
scaleY(<number>);
scale(<number>,<number>);
scale使用較少殉了，因為容易出現(xiàn)模糊的情況
rotate常用寫法示例
rotate(<angle>|<zero>]);
rotateX(<angle>|<zero>]);
rotateY(<angle>|<zero>]);
rotateZ(<angle>|<zero>]);
另外开仰，還有rotate3d，由于很復雜這里不做說明薪铜，需要的時候再去查閱MDN文檔众弓。
rotate常用于制作loading的動畫
skew常用寫法示例
這個是真的很少很少用，有需要的時候再查閱吧隔箍！
**transform可以組合使用
過渡 transition
作用
補充中間幀
語法
transition: 屬性名|時長|過度方式|延遲
transition: left 200ms linear;
可以用逗號分隔不同屬性谓娃；
transition: left 200ms, top 400ms;
可以用all代表所有屬性；
transition: all 200ms蜒滩；
常用的過度方式是 linear滨达，具體的過度方式可以查閱MDN
并不是所有的屬性都能用過渡
display:none => block無法使用過渡，一般會改成visibility：hidden=> visible
display 和 visibility的區(qū)別是：display:none是徹底消失帮掉，不在文檔流中占位弦悉，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了蟆炊，可以理解為透明度為0的效果稽莉，在文檔流中占位，瀏覽器會解析該元素涩搓。
過度必須要有起始
一般只有一次動畫污秆，或者兩次
比如hover和非hover狀態(tài)的過渡
制作動畫的方法
使用兩次transform
.a===transform===>.b
.b===transform===>.c
**使用setTimeout或者監(jiān)聽transitionend事件來指導是否已經進行到中間點劈猪。
使用animation
#demo.start{
animation: xxx 1.5s;
}
@keyframes xxx{
0%{
transform:none;
}
50%{
transform: translateX(200px);
}
100%{
transform: translateX(200px),
translateY(200px);
}}
keyframes的完整語法
form to
@keyframes xxx{
from{
transform: translateX(200px);
}
to{
transform: translateX(200px),
translateY(200px);
}}
百分數(shù)寫法
@keyframes xxx{
0%{
transform:none;
}
50%{
transform: translateX(200px);
}
100%{
transform: translateX(200px),
translateY(200px);
}}
animation的縮寫語法
縮寫語法
animation: 時長|過渡方式|延遲|次數(shù)|方向|填充方式|是否暫停|動畫名;
時長： 1s或者1000ms
過渡方式：跟transition取值一樣，例如linear
次數(shù)：可以是整數(shù)也可以是小數(shù)或者infinite
方向：reverse|alternate|alternate-reverse
填充模式：none|forwards|backwards|both
是否暫停：paused|running
以上的所有屬性都有對應的單獨屬性
