减慢浏览器渲染速度

Posted 2023-02-23

【中文标题】减慢浏览器渲染速度

【英文标题】：Slow down browser rendering

【发布时间】：2014-04-20 08:18:43

【问题描述】：

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

一些澄清：

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

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

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

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

【问题讨论】：

webmasters.stackexchange.com/questions/861/…

我认为如果充分限制其资源，使用 vm 将是一个很好的解决方案。

你不能真正模拟这个，除非是任意的，因为不同的浏览器和设备在不同的方面都很慢，比如渲染慢，读/写 RAM 慢，CPU 慢，因为后台 xfers 慢等等……

***.com/questions/8521683/…

【参考方案1】：

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

---

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

确保选中Screenshots

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

做你的活动

停止录制

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

【参考方案2】：

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

【讨论】：

这不是关于函数的持续时间，而是关于 DOM 的构建。我们正在使用 Angular.JS。有时您会看到页面正在构建。但不总是。所以我们想放慢整个过程，看看哪些部分导致了“故障”。

这会因浏览器而异。在控制台中检查每个浏览器的加载/渲染时间。

这与我们的时代无关。我们只想以慢动作查看页面是如何构建的。

Chrome 的分析器可以在呈现页面时截取屏幕截图，因此您可以将视觉页面更改与函数调用相匹配。

@z0r 感谢您为我指明正确的方向！我发现 Chrome DevTools 时间轴面板可以在页面呈现时截取屏幕截图。 See here.

【参考方案3】：

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

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

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

试试webpagetest.org

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

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