前端性能优化介绍
什么是 Web 性能
MDN:Web 性能(web performance)是网站或应用程序的客观度量和可感知的用户体验。
- 减少总体加载时间:减少文件体积,减少 HTTP 请求数量、使用预加载
- 使网站尽快可用:仅加载首屏内容,其他内容根据需要进行懒加载
- 平滑和交互性:使用 css 动画代替 js 动画、减少 UI 重绘
- 感知表现:耗时操作要给用户反馈,比如 loading 动画、进度条、骨架屏等提示信息
- 性能测定:性能指标、性能测试、性能监控持续优化
Web 性能包括加载时间、每秒帧数和交互时间等客观度量,以及加载内容所需时间的主观体验。
为什么要关注 Web 性能
- 用户的留存
- 体验与传播
- 搜索排名
- 客户投诉
- 提升工作绩效
- …
如何进行 Web 性能优化
- 首先需要了解性能指标 - 多快才算快?
- 使用专业的工具可量化地评估出网站或应用的性能表现
- 然后立足于网站页面响应的生命周期,分析出造成较差性能表现的原因
- 最后进行技术改造、可行性分析等具体的优化实施
- 迭代优化
下面进行简单介绍。
性能指标
Google 制定了一些标准:
以上链接指向 https://web.dev 需要翻墙访问,后续有详细介绍。
性能测量
通常我们会借助一些工具来完成性能测量:
- 浏览器 DevTools 调试工具
- 网络监控分析
- 性能监控分析
- …
- 灯塔(Lighthouse)
- 网站整体质量评估,并给出优化建议
- WebPageTest
- 多测试地点
- 全面的性能报告
- …
生命周期
网站页面的生命周期,就是经典的面试题 - 从浏览器的地址栏输入一个 URL 后,到整个页面渲染出来的过程。
整个过程包括域名解析,建立 TCP 连接,前后端通过 HTTP 进行会话,压缩与解压缩,以及前端的关键渲染路径等。
把这些阶段拆解开来看,不仅能容易的获得优化性能的启发,而且也能为今后的前端工程师之路构建出完整的知识框架。
网站页面加载的生命周期如下图:
优化方案
- 从发出请求到收到响应的优化,比如 DNS 查询、HTTP 长连接、HTTP2、HTTP 压缩、HTTP 缓存等
- 关键渲染路径优化,比如是否存在不必要的重绘和回流
- 加载过程的优化,比如延迟加载,是否有不必需要在首屏展示的非关键信息,占用了页面加载的时间
- 资源优化,比如图片、视频等不同的格式类型会有不同的使用场景,在使用的过程中是否恰当
- 构建优化,比如压缩合并、基于 Webpack 构建优化方案等
- …