技术指南

TBS Studio性能分析工具正式上线！

使用步骤：

使用步骤：

1. 下载最新版本TBS Studio。

https://x5.tencent.com/tbs/guide/debug/download.html

2. 打开TBS Studio，终端打开待调试网页并启动调试。

3. 在DevTools工具中切换至Console Tab，在命令行中输入以下命令开启监控。

performance.enableMonitoring();

4. 刷新页面，Console显示性能指标的评分。

5. 调试结束后，在命令行中输入以下命令关闭监控。

performance.disableMonitoring();

优化方法：

1. 优化样式更新耗时

通过添加和删除元素，更改属性、类或通过动画来更改 DOM，全都会导致浏览器重新计算元素样式，在很多情况下还会对页面或页面的一部分进行布局。

计算样式的第一部分是创建一组匹配选择器，这实质上是浏览器计算出给指定元素应用哪些类、伪选择器和 ID。第二部分涉及从匹配选择器中获取所有样式规则，并计算出此元素的最终样式。

建议所有元素都有单个类，并且在需要层次结构时加入类的名称：

.list { }

.list__list-item { }

2. 优化排版耗时

布局是浏览器计算各元素几何信息的过程：元素的大小以及在页面中的位置。 根据所用的 CSS、元素的内容或父级元素，每个元素都将有显式或隐含的大小信息。

建议使用Flexbox，Flexbox提供了更好用的弹性布局，并且可以将硬盒变成了软盒，减少排版区域。

建议避免触发全局排版的操作。

3. 优化绘制耗时

绘制是填充像素的过程，像素最终合成到用户的屏幕上。 它往往是管道中运行时间最长的任务，应尽可能避免此任务。

建议使用transform、opacity实现动画，使用使用 will-change 或 translateZ 提升移动的元素，将需要频繁重绘的动画独立成一层。这样定期重绘的或通过变形在屏幕上移动的元素，可以在不影响其他元素的情况下进行处理

建议减少复杂绘制如shadow。复制绘制比background等简单绘制开销更大。

4. 优化绘制区域

绘制问题的一个大挑战是，浏览器将两个需要绘制的区域联合在一起，而这可能导致整个屏幕重绘。

建议减少重绘区域。

建议使用transform、opacity进行分层绘制。

5. 优化层级

建议减少transform、opacity的使用。

6. 优化DOM定时器个数

建议减少定时器触发动画或改变DOM属性

7. 优化输入事件响应

输入事件响应可能阻止帧完成，并且可能导致额外的布局工作

建议避免在输入处理程序中进行样式更改。

建议在requestAnimationFrame 回调中处理样式更改。