“长帧时间表示卡顿”答案

【问题标题】："Long frame times are an indication of jank"“长帧时间表示卡顿”
【发布时间】：2016-05-31 06:56:25
【问题描述】：

在 Chrome 中玩 web-developer 时，我遇到了这个 Long frame times are an indication of jank 问题。经过一些实验，我仍然没有明白这一点。
然后我创建了一个新的.html 文件，其内容如下（几乎为空）：

<!DOCTYPE html>
<html>
<head>
  <title>Empty</title>
</head>
<body>
<p id="p"></p>
<script>document.querySelector("#p").innerHTML = Date.now();</script>
</body>
</html>

（Date.now() 是定义 Chrome 肯定会重绘某些东西）

…在 Chrome 的Incognito mode 中打开它并以不同的方式重新加载了几次页面（Ctrl+R、Ctrl+Shift+R 和第三件事）。

在某些情况下，帧持续时间大约为 5 或 20 秒甚至 2 分钟！
（不得不说：我不必等待 2 分钟。）
我不明白，这里可能需要五秒钟才能加载。

这个问题是随便触发的，没有任何可见的逻辑，所以我需要帮助来管理它。

This course 让我对 Chrome 的渲染算法有了基本的了解，但是他们的控制台版本不同，所以有点帮助。

提问后的屏幕截图。 17.3 mins:

【问题讨论】：

之后调用document.close()，但真的不要使用document.write()，除非你必须这样做
@dandavis：没什么。创建了新的<p> 并在上面做了getElementsByTagName("P")[0].innerHTML = Date.now()。还是有卡顿。
我现在认为，这实际上不是问题，而是 Chrome 中的某种缺陷。因为此时它真的什么都不做。

标签： javascript html google-chrome rendering timeline

【解决方案1】：

我使用简单的JSBIN page 对此进行了测试 - 使用您问题中的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Empty</title>
</head>
<body>
<p id="p"></p>
<script>document.querySelector("#p").innerHTML = Date.now();</script>
</body>
</html>

无论我运行多少次，我都没有问题。值得注意的是，总是有一个帧时间条 - 但它可以表示“空闲帧时间”。

我没有收到任何卡顿警告。

如果您仍然有这个问题，请提供一个示例 - 特别是如果您的页面上还有其他可能是一个因素。

【讨论】：

看起来这不再是问题了。我也无法重现。