由于公司项目的前端处理逻辑及其多，导致页面渲染卡顿，为了解决这个问题，故从网上找了好多资料，在这里统一整理一下。
主要从以下几点展开描述。
一、为什么要优化前端性能
- 小于100毫秒加载速度才是爽的
- 47%的用户希望网页能在两秒或更短的时间内加载
- 100ms到300ms 感觉良好
- 40% 的用户当网页加载超过 3 秒，表示会放弃该网站
- 一秒钟大概是用户思路不被打断的极限。用户会感觉到延迟，但还可以接受
- 10秒左右是用户注意力的极限。 大多数用户会在10秒后离开你的网站
二、影响性能的几个要素
- 网络链路
域名解析、交换机、路由器、网络服务提供商、内容分发网络、服务器等都会影响到前端渲染速度。 - 服务器资源
服务器无法响应或响应过慢也会直接影响页面与用户的互动。 - 前端资源渲染效率
浏览器获取所需 HTML、CSS、脚本、图片等静态资源，绘制首屏呈现给用户的过程；或用户与页面交互后，浏览器重新计算需要呈现的内容，然后重新绘制的过程。这些过程的处理效率也是影响性能的重要因素。 - 用户端硬件
发起网络请求，解析网络响应，页面渲染绘制等过程都需要消耗计算机硬件资源。所以计算机资源，特别是 CPU 和 GPU 资源短缺时（比如打显卡杀手类的游戏），也会影响页面性能。
三、常用前端性能分析工具
常用的主要是Chrome Dev Tools 和 Audits。
-
Chrome Dev Tools
这个是谷歌浏览器自带的工具，主要使用的有Network、Performance、Memory、JavaScript Profiler、Rendering
image.png-
Network
页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic…)、资源类型、资源大小、资源时间线等情况。
本地分析性能时最好把网速调成slow 3G，可模拟最差网络环境下的效果。
image.png
-
Network
image.png
- performance
页面各项性能指标的火焰图，这里能看到白屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息。
image.png
- Memory
可以记录某个时刻的页面内存情况，一般用于分析内存泄露。 - JavaScript Profiler
可以记录函数的耗时情况，方便找出耗时较多的函数。 - Rendering
可高亮显示正在重新渲染的组件。
-
Audits（Lighthouse）
需要安装google插件Lighthouse。点击generate report一键生成测试报告。
可以根据给出的优化方向对系统进行优化。
image.png
image.png
- Yslow
- PageSpeed Insights
- Lighthouse
- WebPageTest
- Pingdom
- Sitespeed.io
- Calibre
- SpeedCurve
- SpeedTracker
四、常见的性能问题
- JavaScript 计算
- 大开销输入处理程序影响响应或动画, 让浏览器尽可能晚地处理触摸和滚动，或者绑定侦听。
- 时机不当的 JavaScript 影响响应、动画、加载, 使用requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程。
- 长时间运行的 JavaScript 影响响应, 将纯粹的计算工作转移到web worker中。如果需要 DOM 访问权限，配合使用requestAnimationFrame。
- 重排
- 布局（或重排）是浏览器用来计算页面上所有元素的位置和大小的过程。
- 网页的布局模式意味着一个元素可能影响其他元素, 例如: body元素的宽度一般会影响其子元素的宽度以及树中各处的节点等等。
- 重绘
- 绘制是填充像素的过程, 经常是渲染流程开销最大的部分。如果在任何情况下注意到页面出现卡顿现象，很有可能存在绘制问题。
五、如何提高性能
- DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
- 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
- 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
- 使用虚拟DOM的脚本库，比如React等。
- 使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。
- 使用http/2.0，该协议使用了多路复用，而http/1.1最大并发HTTP连接数有限制。
- 图片等静态资源可使用多个域名指向同一个IP，可提高并发数，但也不能用太多，会增加DNS查询。
- 静态资源使用使用cookie-free domains的方法
- 按需加载，图片可使用懒加载
- 资源压缩、http压缩
- 使用webp图片等小尺寸的图片
- 开启http缓存
参考文档
前端性能分析利器-Chrome性能分析&性能监视器： https://juejin.cn/post/6844904045774110733
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析： https://zhuanlan.zhihu.com/p/105561186
前端开发 8 大性能分析工具： https://zhuanlan.zhihu.com/p/187132148
