减慢浏览器渲染速度

Question

有没有办法减慢浏览器 DOM 渲染和 JS 执行以进行开发，以便我们可以看到网站的哪些部分过于 JS 密集并且在较慢的机器上可能会很慢？也许是适用于 Linux/OSX 的 Chrome/Firefox 的扩展？

一些澄清：

这与连接或测试浏览器的速度无关！只是为了让我们的开发人员查看页面的哪些部分呈现缓慢或“故障”。例如，当您使用 ajax 并且正在加载某些内容时，您会显示一个加载器，但是在显示加载器之后，加载的部分也会显示出来。我们希望以慢动作看到这一点。就像在 OSX 中进行 Expose 时按 SHIFT 一样。

PS。我确实找到了一些关于延迟 Internet 连接的文章，但在这种情况下还不够。

PPS。将所有内容加载到 VM 中对我们来说不起作用。

购买力平价。在我看来，使用 Javascript code for making my browser slow down 中提出的减速代码并不是最好的选择。

Answer 1

将@z0r 在 cmets 中所说的转换为答案：

---

在 Chrome 中，打开 devtools 并选择 Performance 标签

确保选中Screenshots

按下录制按钮（或按Ctrl + E）

做你的活动

停止录制

将鼠标悬停在时间轴上可查看随着情况变化的屏幕截图。

Answer 2

使用浏览器检查器上的时间线或分析器。在这里您可以看到，哪些功能会降低速度。

Answer 3

接受的答案是好的；我也使用并推荐 Chrome 开发工具。

作为 Chrome 开发工具的替代品：

一些“网站性能分析”服务提供时间线视图。运行一些互联网搜索，您会发现各种免费和付费选项。

试试webpagetest.org

它是开源的，备受推崇，并且已经运行多年。与 Chrome 开发工具相比，它可能提供不同的信息或以不同的方式访问。

在测试结果中，点击“Filmstrip View”。