sishen 使用Chrome Performance进行性能分析
重排分析
例1：入门
这一节主要是在复现参考链接1的内容。我们来写一个简单的demo：点击.div1，该元素高度变大。
复制代码 隐藏代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reflow</title>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: deepskyblue;
}
.div2 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<script>
function main() {
const div1 = document.querySelector('.div1')
function div1Click() {
div1.style.height = '200px'
}
div1.addEventListener('click', div1Click)
}
main()
</script>
</body>
</html>
我们打开Chrome Performance，点击箭头所示的按钮进行录制，并点击一下.div1，生成性能分析结果。
Main表示主线程，渲染和JS执行都是在主线程进行的。我们看到主线程有两个值得关注的Task，第一个Task主要依次由Schedule Style Recalculation、点击事件、Recalculate Style和Layout组成，第二个Task主要依次由Paint和Composite Layers组成。这里一个Task表示一个事件循环，Layout事件表示重排，Paint事件表示重绘，重排和重绘可能在同一个Task也可能不在同一个Task执行。
本站资源来自互联网收集，仅提供信息发布
一旦您浏览本站，即表示您已接受以下条约：
1.使用辅助可能会违反游戏协议，甚至违法，用户有权决定使用，并自行承担风险；
2.本站辅助严禁用于任何形式的商业用途，若被恶意贩卖，利益与本站无关；
3.本站为非营利性网站，但为了分担服务器等运营费用，收费均为赞助，没有任何利益收益。
死神科技 » 使用Chrome Performance进行性能分析
一旦您浏览本站，即表示您已接受以下条约：
1.使用辅助可能会违反游戏协议，甚至违法，用户有权决定使用，并自行承担风险；
2.本站辅助严禁用于任何形式的商业用途，若被恶意贩卖，利益与本站无关；
3.本站为非营利性网站，但为了分担服务器等运营费用，收费均为赞助，没有任何利益收益。
死神科技 » 使用Chrome Performance进行性能分析
