跳到主要内容

前端性能优化

· 阅读需 4 分钟
素明诚
素明诚
Full stack development

内容方面​

  1. 减少 HTTP 请求：雪碧图、合并文件
  2. 减少 DNS 查询：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询
  3. 避免重定向：多余的中间访问
  4. 组件加载：非必须组件延迟加载，未来所需组件预加载
  5. DOM 元素：减少 DOM 元素数量、或者是减少 DOM 元素嵌套的深度
  6. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量。这个限制的目的是防止网站占用大量网络带宽导致其他网站网络质量变差。大多数浏览器都有默认的并行请求数限制，通常是在 6 到 8 之间。
  7. 减少 iframe 数量：iframe 会阻塞主页面的 Onload 事件及 iframe 和主页面共享连接池，会影响页面的并行加载。并且 iframe 加载速度慢同时也不利于 SEO。

服务器方面​

  1. CDN：常用的包用CDN 代替，https://www.bootcdn.cn/
  2. 添加Expires或者Cache-Control响应头来设置缓存，尽可能的使用本地缓存，减少服务器压力，增强用户体验
  3. 使用Gzip压缩：注意!!! 图片和PDF文件不要使用gzip。它们本身已经压缩过，再使用gzip压缩不仅浪费 CPU资源，而且还可能增加文件体积。
  4. 配置ETag：Etag通过文件版本标识，方便服务器判断请求的内容是否有更新，如果没有就响应304命中本地缓存，避免重新下载。
  5. 避免空src的img标签：src属性为空时，浏览器在渲染的过程中仍会将href属性或src属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。可以使用一个Base64的图片来作为骨架屏。

CSS 方面​

  1. 将样式表放到页面顶部
  2. 减少CSS类名的嵌套深度
  3. 不使用CSS表达式：在前端这块避免使用CSS表达式，因为它的重绘次数非常多，相当的影响性能。但是calc方法不会有性能问题
  4. 如果你使用的是Sass/Scss/Less 要尽可能合并相同的样式规则
  5. 使用 CSS 压缩工具压缩 CSS 文件
  6. 异步加载样式表，避免阻塞页面渲染。
<link rel="preload" href="style.css" as="style">

Javascript 方面​

  1. 将脚本放到页面底部，不影响DOM的渲染
  2. 压缩JavaScript和CSS
  3. 删除不需要的脚本
  4. 尽可能的用类名操作样式，而不是直接操作DOM样式
  5. 合理setTimeout、setInterval，使用时候用变量接收移除并赋值为null
  6. 使用documentFragment来减少 DOM操作的次数
  7. 全局变量的访问会比局部变量慢，因此应该尽可能地使用局部变量
  8. 如果数组过大，尽量减少数组的操作，例如使用 forEach方法取代 for 循环。
  9. 遇到CPU密集型的场景可以使用Web Workers

Vue 方面​

  1. 尽可能的使用v-show，减少DOM操作
  2. 多使用计算属性，因为它会缓存值
  3. v-for的时候必须添加Key ，没有Key就用nanoId
  4. 禁止v-for和v-if连用，当它们处于同一节点，v-for 的优先级比**v-if 更高**，这意味着 v-if 将分别重复运行于每个 v-for 循环中
  5. 图片懒加载
  6. vue-router 使用懒加载
  7. 按需引入不同的包，这很重要，大多时候包体积过大都是没有按需引入
  8. 服务端渲染提升首屏用户体验
  9. 使用 mixin 提取公共逻辑
  10. 长列表性能优化：只用于展示的可以freeze对象
export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

Webpack 方面​

  1. 可以用image-webpack-loader来压缩图片
  2. 提取公共代码
  3. 使用SourceMap解决构建后的项目无法精准定位错误的问题
  4. 构建结果输出分析使用webpack-bundle-analyzer
  5. 使用Tree Shaking剔除JS死代码，它正常工作的前提是代码必须采用ES6的模块化语法

其他方面​

  1. Chrome Performance：使用Chrome开发者工具分析页面性能
  2. 让用户使用Chrome
  3. 使用Git管理代码，而不是使用SVN
  4. 团队代码尽可能使用ESlint保证编码风格