1. HTTP优化
- 减少HTTP请求
一个完整的HTTP请求需要经历DNS查找、TCP握手、浏览器发出请求、服务器接收请求，服务器处理请求并相应，浏览器接收响应等过程，比较繁琐，所以建议适当将多个小文件合并成一个大文件，从而减少HTTP请求次数
- 使用HTTP/2
- 合理设置HTTP缓存（强缓存与协商缓存）
2. 加载渲染优化
- 利用CDN加载第三方模块
- 按需加载资源
- 尽量减少避免重绘和回流
涉及到样式、尺寸、节点增减等操作，都会触发reflow 和 repaint
- 尽量用css动画代替js动画，canvas动画代替js动画
3. CSS优化
- 降低css选择器的复杂性
- 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取
#block .text p{ color: red; }首先查找所有p元素=>查找结果1p元素中的元素是否有类名为text的父元素=> 查找结果2p元素中的元素是否有id为block的父元素;- css选择器优先级：内联 > ID选择器 > 类选择器 > 标签选择器;最好选择ID和类选择器
- 使用flexbox布局模型
- css写在头部
- 避免使用css表达式如
calc() - 可以使用prefetch预加载
preload和prefetch都是link标签rel属性的可选值。preload是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源；prefetch是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。
