作为一个前端开发者，前端性能优化问题是无可避免的。比如，你使用 ​​vue​​​ 去开发一个运营活动的项目，首屏加载缓慢，你应该怎么办呢？又比如，你开发官网，你选择 ​​ssr​​​ 还是 ​​spa​​ 呢？

本文，我们来聊聊遇到前端加载缓慢，应该怎么做～

框架生命周期熟悉使用

现在前端框架已是三足鼎立 -- ​​Angular​​​，​​React​​​ 和 ​​Vue​​​。我们在使用它们开发的过程中，应该了解相应框架的生命周期，而不是似懂非懂讲究用。我们以 ​​Angular​​ 前端框架为例：

  1. 编程中，触发更改内容应该在​​ngOnChanges​​​ 中调用，而不是在​​ngDoCheck​​ 中调用
  2. 订阅操作，应该在组件销毁的时候​​ngOnDestroy​​ 取消订阅

接口处理

接口方面，可以考虑下面的处理方案：

  1. 避免同个接口多次发起请求
  2. 避免不必要的接口请求
  3. 需要缓存的数据，进行缓存，不需要发起二次请求
  4. 列表接口采用分页处理，避免一次性加载数据，从而造成系统卡顿
  5. 接口开启​​Gzip​​ 压缩
  6. 接口可按需配置​​Etag​​ 作为缓存标志
  7. 浏览器并非请求数量协调：同一时间针对同一域名下的请求又一定数量限制。超过数量限制数目的请求会被阻塞。合理使用不同的域名获取请求
  8. 减少请求数，比如使用雪碧图，合并​​CSS / JavaScript​​ 文件

静态资源处理

所有的文件都有可能是静态资源，比如 ​​Json​​​， ​​Image​​ 等。我们可以考虑以下处理：

  1. 使用​​CDN​​，避免资源放在项目的服务器上，特别是访问量大的站点，会容易奔溃或者造成资源加载缓慢，用户体验不良
  2. 资源压缩 2.1 图片资源可以使用​​TinyPNG​​​ 2.2 视频/音频 可以通过​​​FFmpeg​​​ 处理 2.3​​​Html​​​，​​CSS​​​ 和​​JavaScript​​​ 等资源，可以通过​​Webpack​​​ 处理，现代前端框架都会集成，你只需要运行​​npm run build​​ 即可
  3. 静态资源是否有其他的替代方案呢？比如用​​CSS​​ 实现三角形总比引入一个三角形的图案要强多了

DOM 处理

前端开发，就是以 ​​DOM​​ 为基石进行处理的一门艺术。

  1. 减少重绘和重排，他们会导致页面重新渲染
  2. ​​DOM​​ 节点元素需要语义化，不能都一股脑的使用​​DIV​​​ 元素，这样不利于​​SEO​​；起码在对外的系统上要注重语义化的处理
  3. 老生常谈的点了：样式需要放在​​<head>​​​ 标签中，脚本需要放在​​</body>​​​ 之前引用。样式靠后会使得骨架​​HTML​​ 看起来辣眼睛；脚本提前加载会造成页面阻塞。
  4. 避免​​Img​​​ 节点元素的​​alt​​​ 指向为空，为空不利于​​SEO​​

工具处理

  1. 使用 ​​Lighthouse​​ 灯塔：它可以通过谷歌浏览器去安装使用；也可以通过本地全局安装，通过运行命令行去审查指定的页面。
  2. 使用 ​​Perfermance​​ 面板：谷歌浏览器中的​​Perfermance​​​ 面板可以用于分析站点运行时性能；建议以隐身模式开启，排除其他扩展对性能测量的影响。​​Safari​​ 浏览器对应时间轴面板，看个人爱好选择调试。其他浏览器对应的性能分析面板自查。
  3. 使用 ​​Perfermance​​ 接口：通过​​W3C​​​ 提供的​​Perfermance​​ 接口，监听页面的相关信息。

不知道读者平常会怎么进行页面的性能分析和解决呢？可以留言交流交流～

【完】✅