css动画优化
1 .动画的实现,改变位置,大小,旋转,透明度
2 .css图层的概念。渲染dom的时候,浏览器分为以下几步
1:分割图层,对每个图层的节点计算样式结果,为每个节点生成图形和位置,重排。
2:将节点绘制填充到图层位图中,重绘。图层作为纹理上传到CPU,融合多个图层到页面生成图像,如果图层中某个元素需要重绘,那么整个图层都需要重绘。
3 .创建图层的条件
1.3d或者透视变换
2.video节点
3.拥有3d上下文或者加速的2d上下文canvas的节点。
4.混合插件flash
5.有后代子元素的节点
6.元素有z-index
4 .触发重布局的属性
1.盒子模型的相关属性。定位属性和浮动属性
2.改变节点内部文字结构也会触发重布局,font-size这类级别的也不行
3.所有改变元素位置或大小的元素,都会触发重排。
5 .触发重绘的属性:不修改节点位置和大小的属性是不会触发布局的,只是节点内部的渲染效果发生改变,所以需要重绘
6 .触发图层重组的属性
1.透明度
2.使用tanslateZ(0),translate3D()使浏览器创建新的图层,可以使动画尽快开始。
3.transform:可以改变节点的位置,旋转,大小,但是这些都不会发生重布局。
7 .在网页中使用css类来对节点做状态表示,当这些节点的状态标记类发生修改的时候,将会触发节点的重绘和重布局。所以在节点上使用css类来做状态比较是非常昂贵的。
8 .把首次绘制的css提取出来,优于其他css文件发送。递增的交付较小的js块。使用订制的外部更新机制,客户端在后台下载新的js文件,然后在页面刷新的时候更新。
9 .慎重选择高消耗操作
1.box-shadow
2.border-radius
3.transparency
4.transform
5.css filter
10 .动画的元素使用absolute,fixed,尽量不影响其他元素
11 .不使用table布局,一旦其中的任何一个元素发生reflow,整个元素都必须reflow
12 .display:none .reflow 。visibity,repaint
13 .常见重排元素:font-size,text-align,overflow,vertical-align,clear,white-space.
13 .优化动画,启用GPU硬件加速,应用GPU的图形性能对浏览器的一些图形操作进行加速。包括3D,2D。
14 .canvas2D,布局合成,css3转换,3D变换,webGL和video.
15 .如何开启硬件加速:
1.translate3d
2.scale3d
3.rotate3d
16 .硬件加速最好使用在animation,transform上。
17 .cssom构建的时候,浏览器会延迟js和dom构建
18 .是否使用了!import 声明
19 .是否对个别浏览器做了hack
20 .是否使用了过多的不同选择器
21 .去除未使用的样式,随着网站的发展,未使用的样式会在不经意之间增多,被删除的元素或页面,重命名或者设计的元素,由第三方组件替代的元素,都会产生多于的样式。audits面板可以扫描html找到未使用的css
22 .合并和精简样式,如果你使用less或者sass的话,生成的代码也可能会包含大量冗余,重复定义和压缩的机会。
23 .使用高效的选择器。低效的选择器和!import规则通常会让css文件变得冗余
24 .优化网络字体:字体是能够提升页面美感而降低加载速度的典型例子,在加载字体的同事要注意尽可能的让字体高效,同时要测量性能和转化率等相关指标,确保字体在页面红付出的代价是值的
25 .创建可以复用的HTML标记:为资源缓存提供便利,防止设计师和开发者白费力气做重复的工作,在加载新资源的时候无需加载非必要的资源,帮助你删除那些不需要的样式和资源
26 .资源压缩和缓存:压缩可以使用工作话流程,缓存则是所有的静态文件都应该被缓存
27 .一个页面上原则上有一个css文件
28 .素材合并,对于超过五屏的页面,素材应该合并为多个文件,前三屏为一个文件,中间3屏为一个文件。
29 .小段的代码可以直接写在html里面,避免再次下载
30 .使用外部的css和js,外部的文件是都能在浏览器中产生缓存,内置的HTML文档中的js和css会在每次请求中随着HTML文档重新下载。
31 .避免使用滤镜,IE浏览器使用这个的时候可能会冻结滤镜。
32 .使用媒体查询