浅谈前端性能优化

·  阅读 75

「这是我参与11月更文挑战的第23天,活动详情查看:2021最后一次更文挑战

前端的性能优化主要体现在几个方面:

网络连接优化

  1. 在图片、css、js等方面减少http请求
  2. 通过http缓存减少http请求,节省带宽
  3. 针对首屏多页面应用图片懒加载
  4. 合理使用字体图标和雪碧图
  5. 减少接口并发请求
  6. 多使用http2(相比于http1.1,http2可以多路复用,多个请求可以共用一个 TCP 连接,在 TCP 连接中可以乱序发送,到达目的地后再通过流 ID 重新组建,解析速度更快)
  7. 做好响应式图片

组件优化

  1. 做好组件模块化,按照模块化标准合理分配路由
  2. 能多复用组件就多复用组件
  3. 样式之类可以写公共模块

(注意:复用组件要以功能为基础,按照业务逻辑做好准备)

代码优化

  1. 可以将CSS文件 放在文件头部,JavaScript 文件放在底部

原因: (1) JS 加载和执行会阻塞 HTML 解析,影响 css树 构建

(2) CSS 执行会阻塞渲染,阻止 JS 执行

(3) CSS不放头部还会造成,先加载 HTML 再加载 CSS,影响用户视觉体验

  1. css提取公共样式,减少css文件大小
  2. 提取共用的方法,放在util.js
  3. 在vue合理使用v-if、v-show等方法
  4. 减少 ES6 转为 ES5 的冗余代码
  5. 减少重绘重排

打包优化

  1. 合理使用 webpack等打包工具尽量压缩文件,压缩文件可以减少文件下载时间,让用户体验性更好
  2. 通过 webpack 按需加载代码,提取第三库代码
  3. 合理第三方引入优化,做到按需引入
  4. 打包时,按需懒加载一些大文件
  5. vuex、vue-router、axios等文件可以直接引入
分类:
前端
标签: