1 . 动画的实现, 改变位置, 大小, 旋转, 透明度
2 .CSS 图层的概念. 渲染 dom 的时候, 浏览器分为以下几步
分割图层, 对每个图层的节点计算样式结果, 为每个节点生成图形和位置, 重排.
将节点绘制填充到图层位图中, 重绘. 图层作为纹理上传到 CPU, 融合多个图层到页面生成图像, 如果图层中某个元素需要重绘, 那么整个图层都需要重绘.
3 . 创建图层的条件
3d 或者透视变换
video 节点
拥有 3d 上下文或者加速的 2d 上下文 canvas 的节点.
混合插件 flash
有后代子元素的节点
元素有 z-index
4 . 触发重布局的属性
盒子模型的相关属性. 定位属性和浮动属性
改变节点内部文字结构也会触发重布局, font-size 这类级别的也不行
所有改变元素位置或大小的元素, 都会触发重排.
5 . 触发重绘的属性: 不修改节点位置和大小的属性是不会触发布局的, 只是节点内部的渲染效果发生改变, 所以需要重绘
6 . 触发图层重组的属性
透明度
使用 tanslateZ(0),translate3D() 使浏览器创建新的图层, 可以使动画尽快开始.
transform: 可以改变节点的位置, 旋转, 大小, 但是这些都不会发生重布局.
7 . 在网页中使用 css 类来对节点做状态表示, 当这些节点的状态标记类发生修改的时候, 将会触发节点的重绘和重布局. 所以在节点上使用 css 类来做状态比较是非常昂贵的.
8 . 把首次绘制的 css 提取出来, 优于其他 css 文件发送. 递增的交付较小的 js 块. 使用订制的外部更新机制, 客户端在后台下载新的 js 文件, 然后在页面刷新的时候更新.
9 . 慎重选择高消耗操作
- box-shadow
- border-radius
- transparency
- transform
- 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 . 如何开启硬件加速:
- translate3d
- scale3d
- 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 . 使用媒体查询
来源: http://www.jianshu.com/p/75dd0f659e0d