Chrome 浏览器渲染过程真的有合成渲染树这个流程吗?为什么 devtools Performance 中没有这一步?

发布于 2022-09-12 22:51:22 字数 830 浏览 27 评论 0

一个简单的没有 JavaScript 的页面:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>No JS</title>
    <link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

通过 Perfomance 分析的结果:
image.png
放大计算样式部分:
image.png
Recaculate Style 之后就直接 Layout 了。

是合成渲染树这个概念描述有问题还是合并到上面两个步骤其中之一去了?

不知道我哪里理解出了问题,求解答。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文