本文同步本人掘金平台的文章：https://juejin.cn/post/7090351370691149855
作为一个前端开发者，前端性能优化问题是无可避免的。比如，你使用 vue 去开发一个运营活动的项目，首屏加载缓慢，你应该怎么办呢？又比如，你开发官网，你选择 ssr 还是 spa 呢？
本文，我们来聊聊遇到前端加载缓慢，应该怎么做～
框架生命周期熟悉使用
现在前端框架已是三足鼎立 -- Angular，React 和 Vue。我们在使用它们开发的过程中，应该了解相应框架的生命周期，而不是似懂非懂讲究用。我们以 Angular 前端框架为例：
- 编程中，触发更改内容应该在 ngOnChanges 中调用，而不是在 ngDoCheck 中调用
- 订阅操作，应该在组件销毁的时候 ngOnDestroy 取消订阅
接口处理
接口方面，可以考虑下面的处理方案：
- 避免同个接口多次发起请求
- 避免不必要的接口请求
- 需要缓存的数据，进行缓存，不需要发起二次请求
- 列表接口采用分页处理，避免一次性加载数据，从而造成系统卡顿
- 接口开启 Gzip 压缩
- 接口可按需配置 Etag 作为缓存标志
- 浏览器并非请求数量协调：同一时间针对同一域名下的请求又一定数量限制。超过数量限制数目的请求会被阻塞。合理使用不同的域名获取请求
- 减少请求数，比如使用雪碧图，合并 CSS / JavaScript 文件
静态资源处理
所有的文件都有可能是静态资源，比如 Json， Image 等。我们可以考虑以下处理：
- 使用 CDN，避免资源放在项目的服务器上，特别是访问量大的站点，会容易奔溃或者造成资源加载缓慢，用户体验不良
- 资源压缩 2.1 图片资源可以使用 TinyPNG 2.2 视频/音频 可以通过 FFmpeg 处理 2.3 Html，CSS 和 JavaScript 等资源，可以通过 Webpack 处理，现代前端框架都会集成，你只需要运行 npm run build 即可
- 静态资源是否有其他的替代方案呢？比如用 CSS 实现三角形总比引入一个三角形的图案要强多了
DOM 处理
前端开发，就是以 DOM 为基石进行处理的一门艺术。
- 减少重绘和重排，他们会导致页面重新渲染
- DOM 节点元素需要语义化，不能都一股脑的使用 DIV 元素，这样不利于 SEO；起码在对外的系统上要注重语义化的处理
- 老生常谈的点了：样式需要放在 <head> 标签中，脚本需要放在 </body> 之前引用。样式靠后会使得骨架 HTML 看起来辣眼睛；脚本提前加载会造成页面阻塞。
- 避免 Img 节点元素的 alt 指向为空，为空不利于 SEO
工具处理
- 使用 Lighthouse 灯塔：它可以通过谷歌浏览器去安装使用；也可以通过本地全局安装，通过运行命令行去审查指定的页面。
- 使用 Perfermance 面板：谷歌浏览器中的 Perfermance 面板可以用于分析站点运行时性能；建议以隐身模式开启，排除其他扩展对性能测量的影响。Safari 浏览器对应时间轴面板，看个人爱好选择调试。其他浏览器对应的性能分析面板自查。
- 使用 Perfermance 接口：通过 W3C 提供的 Perfermance 接口，监听页面的相关信息。
不知道读者平常会怎么进行页面的性能分析和解决呢？可以留言交流交流～
【完】?
本文暂时没有评论，来添加一个吧(●'◡'●)