css性能介紹
瀏覽器渲染步驟
- 根據(jù)HTML構(gòu)建HTML樹(shù)（DOM）止后，DOM含长，也就是文檔對(duì)象模型（Document Object Model诀豁，簡(jiǎn)稱(chēng)DOM）矾柜，是W3C組織推薦的處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口阱驾。在網(wǎng)頁(yè)上，組織頁(yè)面（或文檔）的對(duì)象被組織在一個(gè)樹(shù)形結(jié)構(gòu)中怪蔑，用來(lái)表示文檔中對(duì)象的標(biāo)準(zhǔn)模型就稱(chēng)為DOM里覆。
- 根據(jù)CSS構(gòu)建CSS樹(shù)（CSS DOM）
- 將兩棵樹(shù)合成一個(gè)渲染樹(shù)（render tree）
- 布局（layout）
這里主要管文檔流，盒模型饮睬，通過(guò)計(jì)算他們的大小和位置從而確定布局 - 繪制（paint）
畫(huà)出邊框顏色租谈，文字顏色等等 - 合成（compose）
根據(jù)層疊關(guān)系展示畫(huà)面
渲染步驟的選取
- 不走4（layout）
在用js進(jìn)行樣式的修改時(shí)候，由于有一些情況并不會(huì)改變其整體文檔流和盒模型的情況捆愁，瀏覽器為了節(jié)省性能會(huì)不走4 - 全走
- 不走45
具體的情況可以在這個(gè)網(wǎng)站csstriggers里寫(xiě)的非常清楚割去，不知道是如何渲染就查一下。csstriggers
- TIPs：
在js中一個(gè)個(gè)加樣式進(jìn)行修改比較麻煩昼丑，不如添加一個(gè)節(jié)點(diǎn)呻逆，比如我們命名為'red',通過(guò)div.classlist.add('red')進(jìn)行樣式的添加，這個(gè)'red'并不是紅色菩帝，而是一個(gè)名字咖城，節(jié)點(diǎn)里面可以添加多個(gè)樣式，比較方便呼奢。
CSS動(dòng)畫(huà)的優(yōu)化
可根據(jù)6個(gè)步驟進(jìn)行分別優(yōu)化宜雀，具體的都在這個(gè)文章里Google 寫(xiě)的文章
最為重要的優(yōu)化是
- JS 優(yōu)化
使用 requestAnimationFrame 代替 setTimeout 或 setInterval - CSS 優(yōu)化
使用 will-change 或 translate
CSS動(dòng)畫(huà)介紹
transform
主要有4個(gè)常用的屬性
- translate
translateX(length-percentage)
translateY(length-percentage)
translateZ(length)且父容器 perspective* translate3d(x,y,z)
代碼例子 演示
Tips：
- 如果z方向移動(dòng)不設(shè)置視點(diǎn)位置，也就是perspective握础，不會(huì)有差別辐董，因?yàn)橐朁c(diǎn)就在表面正中心，你上下移動(dòng)根據(jù)透視原理沒(méi)有差別禀综。
- 可以縮寫(xiě)
translate(length-percentage,length-percentage) - 可以用translate(-50%,-50%)讓絕對(duì)定位元素的居中简烘，
具體看案例 - scale
常用寫(xiě)法
- scaleX(number)
- scaleY(number)
- scale(number,number?)
- 代碼例子 演示
Tips：
- 用得較少，因?yàn)槿菀壮霈F(xiàn)模糊和變形
- rotate
主要的常用寫(xiě)法
- rotate([angle|zero])
- rotateZ([angle|zero])
- rotateX([angle|zero])
- rotateY([angle|zero])
- rotate3d 太復(fù)雜定枷，現(xiàn)在可以不學(xué)孤澎，一般用不到，除非你做 3d 開(kāi)發(fā)欠窒，那時(shí)候才用得到
-
代碼例子 演示
Tips：
一般用于 360 度旋轉(zhuǎn)制作 loading覆旭，或者一些按鈕的交互（鼠標(biāo)移到按鈕上就轉(zhuǎn)一圈）
用到時(shí)再搜索 rotate MDN 看文檔
skew
常用寫(xiě)法
- skewX([angle|zero])
- skewY([angle|zero])
- skew([angle|zero])
-
代碼例子 演示
Tips：
- 用得較少
- 用到時(shí)再搜 skew MDN 文檔
transform 多重效果
組合使用
- transform:scale(0.5) translate(-100%,-100%)
- transform:scale(1.5) rotate(45deg)
- transform:none;取消所有。不寫(xiě)代碼也就是什么都沒(méi)有，其實(shí)沒(méi)必要寫(xiě)這個(gè)
transition
主要用來(lái)添加關(guān)鍵幀
transition:屬性名 時(shí)長(zhǎng) 過(guò)渡方式 延遲
eg.transition：left 200ms linear 3s
Tips:
- 可以用逗號(hào)分隔兩個(gè)不同屬性
eg.transition:left 200ms,top 400ms - 可以用 all 代表所有屬性
eg. transition:all 200ms - 時(shí)長(zhǎng)單位只有 s 和 ms
- 過(guò)渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
具體的在mdn里面查
不可transition的屬性
- display:none=>block不可過(guò)渡姐扮，一般改成 visibility:hidden=>visible（但是 visibility 永遠(yuǎn)是占位置的）
display:none（不顯示對(duì)應(yīng)的元素絮供，在文檔布局不分配空間）
visibility:hidden（不顯示對(duì)應(yīng)的元素，在文檔布局保留空間）
簡(jiǎn)單來(lái)說(shuō)就是display:none直接沒(méi)了茶敏，visibility:hidden只是隱藏起來(lái)，該占的位置還要占據(jù) - background 顏色
- opacity 透明度缚俏，但不推薦惊搏，一般是0-1/1-0
Tips： - 如果一個(gè)屬性過(guò)渡出了 bug 就改成其他能過(guò)渡的屬性就好了
- 一般只有一次/二次動(dòng)畫(huà)效果
- 必須要有起始
animation
animation:時(shí)長(zhǎng)|過(guò)渡方式|延遲|次數(shù)|方向|填充模式|是否暫停|動(dòng)畫(huà)名；
- 時(shí)長(zhǎng)：s 或者 ms
- 過(guò)渡方式：跟 transition 取值一樣忧换，如 linear
- 次數(shù)：3 或者 2.4 或者 infinite（無(wú)限次)
- 方向：reverse|alternate|alternate-reverse
- 填充模式：none|forwards|backwards|both恬惯，一般 forwards 用得多
- 是否暫停：paused|running
Tips： - 以上所有屬性都有對(duì)應(yīng)的單獨(dú)屬性。如果只改一個(gè)就要單獨(dú)寫(xiě)亚茬，就不能用 animation 了
@keyframes
兩種寫(xiě)法
- from to
@keyframes slidein{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
- 百分?jǐn)?shù)（這種寫(xiě)法更廣泛）
@keyframes identifier{
0%{top:0;left:0;}
30%{top:50px;}
68%,72%{left:50px;}
100%{top:100px;left:100%;}
}
不懂的就去mdn查一下酪耳，寫(xiě)的很清楚。
