search

theydy / notebook

记录读书笔记 + 知识整理，vuepress 迁移中 https://theydy.github.io/notebook/
0 stars 0 forks source link

前端性能优化总结 #12

Open theydy opened 5 years ago

theydy commented 5 years ago

加快下载速度

  1. 静态文件使用 CDN 加快资源下载
  2. 减小资源文件大小，比如 Gzip 压缩

HTTP 相关优化

  1. 可以的话使用 HTTP2，所有的请求使用同一个 TCP 连接
  2. 资源尽量分成多个不同的域名，因为 Chrome 对同一域名下的 TCP 连接数量有限制，最多 6 个。
  3. 另一方面，资源和主站使用不同的域名，还可以避免下载资源时携带了多余的 Cookies （2, 3 两点主要使用 CDN 来完成）
  4. 合理使用缓存策略（强缓存，协商缓存）
  5. 减少不必要的 HTTP 请求数量

HTML 相关优化

  1. 避免多余的嵌套，无意义的标签
  2. 加少文件大小

CSS 相关优化

  1. 避免使用通配符，只对需要用到的元素进行格式化
  2. 少用标签选择器，用类选择器代替
  3. 不加多余的选择器，比如类选择器和标签选择器一起用
  4. 减少嵌套，层级尽量扁平
  5. 写在开头，浏览器需要 CSS 规则树才能生成渲染树开始渲染界面，所以要尽早下载资源

JS 相关优化

  1. 写在 body 标签末尾
  2. 使用 async 模式加载，异步加载，加载完毕后立即执行
  3. 使用 defer 模式加载，异步加载，等 DOMContentLoaded 事件完成后按顺序执行
  4. 注意节流防抖
  5. 避免回流重绘

图片优化

  1. 合理的使用图片格式
  2. 小图片可以使用雪碧图或 base64，减少 HTTP 请求
  3. 图片懒加载

WebPack 相关优化

  1. 使用最新版本的 node, npm, webpack ，因为新版本肯定对于打包有优化
  2. 优化 loader 使用范围
  3. loader 开启缓存
  4. DLLPlugin 缓存第三方库的打包文件，防止重复打包未做改动的第三方库
  5. Happypack，将 loader 由单进程转为多进程处理
  6. 开启代码压缩
  7. 按需加载
  8. 代码分割
  9. Tree shaking