Chrome浏览器的渲染过程真的有Render-tree构建的步骤吗？为什么在 devtools 性能中没有这样的步骤？

编程问答 2022-05-17

问题描述

我读过一篇文章，链接在这里：Render-tree Construction,Layout,and Paint

演示页面：

<!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>

性能面板：

enter image description here

放大红色部分：

enter image description here

如您所见，没有渲染树构建步骤。

为什么？是贴错了还是Render-tree构建部分是Recalculate Style？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-chromegoogle-chrome-appweb-performance