如何在 chrome devtools 时间线上捕获 css 代码执行？答案

【问题标题】：How can i capture the css code execution on chrome devtools timeline?如何在 chrome devtools 时间线上捕获 css 代码执行？
【发布时间】：2015-11-13 18:26:48
【问题描述】：

我的代码是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>dom</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
    <div class="test"></div>
    <div class="test2"></div>
</body>
</html>

我尝试在 chrome devtools 时间轴上捕获 css 代码执行，但一无所获。那我该怎么办？

我找到了如何捕获 css 代码“执行”细节以及何时发生。根据this article，你应该勾选“paint”框来捕获：

Chrome DevTools 时间线中有一个选项可以为您提供更多信息：油漆分析器。要启用它，请转到时间轴并选中顶部的“绘画”框。

并且绘制发生在“解析作者样式表”事件之后：

这是我关于stackoverflow的第一个问题，感谢大家帮助我。

【问题讨论】：

你不能。 CSS 不是编程语言，它只是一组样式规则。
width:100px 将使 div.test 成为 100px，所以 css 代码必须做一些事情，我怎么能捕捉到“某事”？我对这个过程很好奇，尤其是当它发生时。

标签： css google-chrome-devtools

【解决方案1】：

CSS 不是命令式语言，它本身并不“执行”。但是，当样式表内容或 DOM 结构发生变化时，就会应用 CSS 规则。 Timeline 上的“Style Recalculate”事件表示渲染器根据 CSS 规则计算和应用样式到从 DOM 节点生成的单个渲染对象所花费的时间。该事件的详细信息提供了有关有多少节点受到影响的信息。

【讨论】：

感谢您的概念，但我在“解析作者样式表”事件之后找到了相关的绘画，而不是“样式重新计算”。我的 chrome 版本是 44.0.2403.155（64 位）的 mac。
解析作者样式表（顺便说一句，在最新版本中是“解析样式表”）有些不同——也就是说，呃，只是解析样式表，即将它们转换为内部样式模型表示作为它们的收到文本内容。
在屏幕截图中显示的特定情况下，您的 onload 事件处理程序中似乎有“强制布局”警告，我希望样式重新计算作为其中的一部分发生，即在加载事件处理程序中.
感谢您更正我的陈述！我希望你也能纠正我的泳池英语声明^^当我有 15 个代表时，我会给你一个当之无愧的支持。