前端性能优化
代码
避免重绘回流
css
- 使用
transform代替top - 使用
visibility 替换 display: none，前者引起重绘，后者引发回流 - 避免使用
table 布局 - 尽可能在
DOM 树的最末端改变 class - 避免设置多层内联样式，
CSS 选择符从右往左匹配查找，避免节点层级过多 - 将动画效果应用到
position 属性为 absolute 或 fixed 的元素上，避免影响其他元素的布局 - 避免使用
CSS表达式，可能会引发回流 CSS硬件加速
js
- 避免频繁操作样式，修改
class 最好 - 避免频繁操作
DOM，合并多次修改为一次 - 避免频繁读取会引发
回流/重绘的属性，将结果缓存 - 对具有复杂动画的元素使用绝对定位，使它脱离文档流
减少不必要代码
网络请求
减少请求数量
减少请求大小
gzip压缩- 压缩文件
- 尽可能减小
cookie的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的cookie
调整资源优先级
- 对某些资源使用preload预加载，提高优先级
- 对某些资源使用async延时加载，降低优先级
- 初始首屏之外的图片资源按需加载
- 静态资源延迟加载
网络优化
使用缓存
- 缓存
ajax - 使用
CDN服务，来提高用户对于资源请求时的响应速度 - 使用外部
js和css文件以便缓存 - 添加
Expires头 - 服务端配置
Etag - 使用
serviceWorker
开启http2