前端性能工具——performance
2022-05-13 10:38:16
前端性能工具——Performance
Performance是谷歌浏览器提供的一款强大的前端性能分析工具，它能够帮助开发者深入了解页面加载和渲染过程中的性能瓶颈，从而进行优化。以下是关于Performance的详细介绍和使用指南。
一、浏览器渲染过程
浏览器渲染页面的整个过程是一个从上到下解析文档的过程，主要包括以下几个步骤：
- 解析HTML：生成DOM树。
- 解析CSS：生成CSSOM树。
- 生成渲染树：将DOM树和CSSOM树结合，生成渲染树（Render Tree）。
- 布局（Layout）：根据渲染树中各节点的样式和依赖关系，计算出每个节点在屏幕中的位置。
- 绘图（Painting）：按照计算出来的结果，将需要显示的节点、节点的CSS与位置信息，通过显卡，把内容画到屏幕上。
二、渲染过程中可能遇到的问题
CSS阻塞：
style标签中的样式：由HTML解析器进行解析，不阻塞浏览器渲染（可能会产生“闪屏现象”），不阻塞DOM解析。
link引入的外部css样式：由CSS解析器进行解析，阻塞浏览器渲染（避免“闪屏现象”），阻塞其后面的JS语句的执行。
JS阻塞：浏览器不知道后续脚本的内容，如果先去解析了下面的DOM，而随后的JS删除了后面所有的DOM，那么浏览器就做了无用功。因此，浏览器会等待JS脚本执行完毕后再继续向下解析DOM。可以通过给script标签添加defer和async属性，异步引入JS文件来解决这一问题。
三、优化核心理念
- 尽可能快的提高外部css加载速度：使用CDN节点进行外部资源加速；对CSS进行压缩；减少HTTP请求数，将多个CSS文件合并；优化样式表的代码。
- CSS的解析和JS的执行是互斥的：CSS解析的时候JS停止执行，JS执行的时候CSS停止解析。
- 浏览器预解析：在执行JS脚本时，浏览器的其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源，从而提高总体速度。
四、Performance使用指南
Performance工具主要分为三个主要部分：概览面板、性能指标面板和详情面板。
概览面板：
FPS：帧陵谈速率，如果FPS图标上出现了红色块，表示红色块附近渲染出一帧所需时间过久，可能导致页面卡顿。
CPU：CPU使用率，如果CPU图形占用面积太大，表示CPU使用率越高，可能因为某个JavaScript占用太多的主线亩烂程时间。
网络请求流量：显示页面加载过程中的网络请求情况。
V8内存使用量：显示JavaScript引擎（V8）的内存使用情况。
性能指标面板：
火焰图：记录了渲染主线程、合成线程和GPU进程主线程的任务执行过程。通过火焰图，可以轻松地定位到页面的性能问题。
任务：每个灰色横条对应了一个任务，灰色长条的长度对应了任务的执行时长。点击任务可以查看任务的详细执行过程和源代码位置。
long task：长时间执行的任务，会导致页面卡顿。性能分析的主要目的迅汪漏是找到long task并消除它。
详情面板：
Summary：表示各指标时间占用统计报表。
Bottom-Up：表示事件时长排序列表（倒序）。
Call tree：表示事件调用顺序列表。
Event Log：表示事件发生的顺序列表。
五、总结
通过Performance工具，我们可以定位到页面的性能瓶颈，并采取相应的优化措施。优化的目标包括减少long task的耗时、拆分长时间执行的任务、利用web worker进行耗时计算等。前端的性能优化是一条很长的路，需要不断学习和实践，以提升用户体验和页面渲染效率。
热门标签
