前端性能优化

前端性能优化

1. 减少请求数量

   • js css 文件压缩合并
   • 不可矢量化的图片，进行合并处理 css sprites
   • 可合并的请求尽量一次完成，如：页面首次加载请求合并

2. 提高请求质量

   • 使用 GET 请求替代 POST 请求
   • 缓存 Ajax 请求
   • 空闲时发送其他页面首次加载所必需的请求，并缓存请求数据
   • 减少跳转（301 302）

3. 优化 js

   • 把脚本置于页面底部
   • 减少 DOM 访问

4. 优化 css

   • 样式置于顶部
   • 避免使用 css 表达式
   • 减少或避免使用滤镜

5. 优化 html

   • 尽量减少 DOM 元素数量与嵌套层级，可以优化查询或遍历时的速度
   • 避免使用 iframe

6. 服务端可做

   • 开启 Gzip（一种数据压缩方式）
   • 配置 ETag（web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配）
   • 为文件头指定 Expires 或 Cache-Control