动态对DOM进行基准测试

Benchmarking the DOM on the fly

本文关键字：基准测试 DOM 动态更新时间：2023-09-26

我有一个页面，其中大量的DOM元素是动画。这主要适用于现代硬件和软件，但我担心它可能会在较慢的javascript解释器的旧电脑上太慢。

我想做的是获得一些关于DOM性能的信息，并禁用一些动画，如果这是在某个阈值以下。一种简单的方法是添加大约10000个透明元素，然后删除它们并测量所需的时间。在实现这一点之前，我想知道是否已经存在这样的东西，也许更完善。

你知道有什么工具可以合理地衡量DOM的性能吗?

如果你测量动画的实际帧率，你可以将其与你试图动画的帧率进行比较。如果实际帧率明显较低，那么您可以以较慢的速率或较少的速率绘制。在这个答案中有关于Google的描述

您可以使用Chrome Developer Tools或Web Inspector (Profiles面板)在基于webkit的浏览器(Chrome/Safari)中实现原型并对其进行配置。这将让你深入了解到底是什么减慢了你的应用程序:JavaScript代码还是WebKit内部。