前端性能分析与优化

由于公司项目的前端处理逻辑及其多，导致页面渲染卡顿，为了解决这个问题，故从网上找了好多资料，在这里统一整理一下。
主要从以下几点展开描述。

一、为什么要优化前端性能

1. 小于100毫秒加载速度才是爽的
2. 47%的用户希望网页能在两秒或更短的时间内加载
3. 100ms到300ms 感觉良好
4. 40% 的用户当网页加载超过 3 秒，表示会放弃该网站
5. 一秒钟大概是用户思路不被打断的极限。用户会感觉到延迟，但还可以接受
6. 10秒左右是用户注意力的极限。 大多数用户会在10秒后离开你的网站

二、影响性能的几个要素

1. 网络链路
   域名解析、交换机、路由器、网络服务提供商、内容分发网络、服务器等都会影响到前端渲染速度。
2. 服务器资源
   服务器无法响应或响应过慢也会直接影响页面与用户的互动。
3. 前端资源渲染效率
   浏览器获取所需 HTML、CSS、脚本、图片等静态资源，绘制首屏呈现给用户的过程；或用户与页面交互后，浏览器重新计算需要呈现的内容，然后重新绘制的过程。这些过程的处理效率也是影响性能的重要因素。
4. 用户端硬件
   发起网络请求，解析网络响应，页面渲染绘制等过程都需要消耗计算机硬件资源。所以计算机资源，特别是 CPU 和 GPU 资源短缺时（比如打显卡杀手类的游戏），也会影响页面性能。

三、常用前端性能分析工具

常用的主要是Chrome Dev Tools 和 Audits。

1. Chrome Dev Tools
   这个是谷歌浏览器自带的工具，主要使用的有Network、Performance、Memory、JavaScript Profiler、Rendering
   
   image.png
   • Network
     页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic…)、资源类型、资源大小、资源时间线等情况。
     本地分析性能时最好把网速调成slow 3G，可模拟最差网络环境下的效果。
     
     image.png

image.png

• performance

页面各项性能指标的火焰图，这里能看到白屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息。

image.png

• Memory
  可以记录某个时刻的页面内存情况，一般用于分析内存泄露。
• JavaScript Profiler
  可以记录函数的耗时情况，方便找出耗时较多的函数。
• Rendering
  可高亮显示正在重新渲染的组件。

2. Audits（Lighthouse）
   需要安装google插件Lighthouse。点击generate report一键生成测试报告。
   可以根据给出的优化方向对系统进行优化。
   
   image.png

image.png

3. Yslow
4. PageSpeed Insights
5. Lighthouse
6. WebPageTest
7. Pingdom
8. Sitespeed.io
9. Calibre
10. SpeedCurve
11. SpeedTracker

四、常见的性能问题

1. JavaScript 计算
   • 大开销输入处理程序影响响应或动画, 让浏览器尽可能晚地处理触摸和滚动，或者绑定侦听。
   • 时机不当的 JavaScript 影响响应、动画、加载, 使用requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程。
   • 长时间运行的 JavaScript 影响响应, 将纯粹的计算工作转移到web worker中。如果需要 DOM 访问权限，配合使用requestAnimationFrame。
2. 重排
   • 布局（或重排）是浏览器用来计算页面上所有元素的位置和大小的过程。
   • 网页的布局模式意味着一个元素可能影响其他元素, 例如: body元素的宽度一般会影响其子元素的宽度以及树中各处的节点等等。
3. 重绘
   • 绘制是填充像素的过程, 经常是渲染流程开销最大的部分。如果在任何情况下注意到页面出现卡顿现象，很有可能存在绘制问题。

五、如何提高性能

1. DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
2. 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
3. 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
4. 使用虚拟DOM的脚本库，比如React等。
5. 使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。
6. 使用http/2.0，该协议使用了多路复用，而http/1.1最大并发HTTP连接数有限制。
7. 图片等静态资源可使用多个域名指向同一个IP，可提高并发数，但也不能用太多，会增加DNS查询。
8. 静态资源使用使用cookie-free domains的方法
9. 按需加载，图片可使用懒加载
10. 资源压缩、http压缩
11. 使用webp图片等小尺寸的图片
12. 开启http缓存

参考文档

前端性能分析利器-Chrome性能分析&性能监视器： https://juejin.cn/post/6844904045774110733
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析： https://zhuanlan.zhihu.com/p/105561186
前端开发 8 大性能分析工具： https://zhuanlan.zhihu.com/p/187132148