css性能介绍
浏览器渲染步骤
- 根据HTML构建HTML树（DOM），DOM，也就是文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
- 根据CSS构建CSS树（CSS DOM）
- 将两棵树合成一个渲染树（render tree）
- 布局（layout）
这里主要管文档流，盒模型，通过计算他们的大小和位置从而确定布局 - 绘制（paint）
画出边框颜色，文字颜色等等 - 合成（compose）
根据层叠关系展示画面
渲染步骤的选取
- 不走4（layout）
在用js进行样式的修改时候，由于有一些情况并不会改变其整体文档流和盒模型的情况，浏览器为了节省性能会不走4 - 全走
- 不走45
具体的情况可以在这个网站csstriggers里写的非常清楚，不知道是如何渲染就查一下。csstriggers
- TIPs：
在js中一个个加样式进行修改比较麻烦，不如添加一个节点，比如我们命名为'red',通过div.classlist.add('red')进行样式的添加，这个'red'并不是红色，而是一个名字，节点里面可以添加多个样式，比较方便。
CSS动画的优化
可根据6个步骤进行分别优化，具体的都在这个文章里Google 写的文章
最为重要的优化是
- JS 优化
使用 requestAnimationFrame 代替 setTimeout 或 setInterval - CSS 优化
使用 will-change 或 translate
CSS动画介绍
transform
主要有4个常用的属性
- translate
-
translateX(length-percentage)
-
translateY(length-percentage)
-
translateZ(length)且父容器 perspective* translate3d(x,y,z)
-
代码例子 演示
Tips：
- 如果z方向移动不设置视点位置，也就是perspective，不会有差别，因为视点就在表面正中心，你上下移动根据透视原理没有差别。
- 可以缩写
translate(length-percentage,length-percentage) - 可以用translate(-50%,-50%)让绝对定位元素的居中，
具体看案例 - scale
常用写法
- scaleX(number)
- scaleY(number)
- scale(number,number?)
- 代码例子 演示
Tips：
- 用得较少，因为容易出现模糊和变形
- rotate
主要的常用写法
- rotate([angle|zero])
- rotateZ([angle|zero])
- rotateX([angle|zero])
- rotateY([angle|zero])
- rotate3d 太复杂，现在可以不学，一般用不到，除非你做 3d 开发，那时候才用得到
-
代码例子 演示
Tips：
-
一般用于 360 度旋转制作 loading，或者一些按钮的交互（鼠标移到按钮上就转一圈）
-
用到时再搜索 rotate MDN 看文档
-
skew
常用写法
- skewX([angle|zero])
- skewY([angle|zero])
- skew([angle|zero])
-
代码例子 演示
Tips：
- 用得较少
- 用到时再搜 skew MDN 文档
transform 多重效果
组合使用
- transform:scale(0.5) translate(-100%,-100%)
- transform:scale(1.5) rotate(45deg)
- transform:none;取消所有。不写代码也就是什么都没有，其实没必要写这个
transition
主要用来添加关键帧
transition:属性名 时长 过渡方式 延迟
eg.transition：left 200ms linear 3s
Tips:
- 可以用逗号分隔两个不同属性
eg.transition:left 200ms,top 400ms - 可以用 all 代表所有属性
eg. transition:all 200ms - 时长单位只有 s 和 ms
- 过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
具体的在mdn里面查
不可transition的属性
- display:none=>block不可过渡，一般改成 visibility:hidden=>visible（但是 visibility 永远是占位置的）
display:none（不显示对应的元素，在文档布局不分配空间）
visibility:hidden（不显示对应的元素，在文档布局保留空间）
简单来说就是display:none直接没了，visibility:hidden只是隐藏起来，该占的位置还要占据 - background 颜色
- opacity 透明度，但不推荐，一般是0-1/1-0
Tips： - 如果一个属性过渡出了 bug 就改成其他能过渡的属性就好了
- 一般只有一次/二次动画效果
- 必须要有起始
animation
animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；
- 时长：s 或者 ms
- 过渡方式：跟 transition 取值一样，如 linear
- 次数：3 或者 2.4 或者 infinite（无限次)
- 方向：reverse|alternate|alternate-reverse
- 填充模式：none|forwards|backwards|both，一般 forwards 用得多
- 是否暂停：paused|running
Tips： - 以上所有属性都有对应的单独属性。如果只改一个就要单独写，就不能用 animation 了
@keyframes
两种写法
- from to
@keyframes slidein{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
- 百分数（这种写法更广泛）
@keyframes identifier{
0%{top:0;left:0;}
30%{top:50px;}
68%,72%{left:50px;}
100%{top:100px;left:100%;}
}
不懂的就去mdn查一下，写的很清楚。
网友评论