css优化

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 .使用媒体查询