我也很想搞清楚这一点。所以我做了一个简单的litte测试用例。
我创建了两个html页面。
伪变体: 50.000
paragraph
节点CSS:p:before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; content: ""; }
“多DOM元素” -variant: 50.000
paragraph
CSS:.icon { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; }
I然后在我的Macbook Pro上运行Chrome Devtools Performance监视器几次,然后观察结果。
1. 我用“开始分析和重新加载页面”来观察解析和渲染花了多长时间。一般来说,“许多DOM元素”解决方案的速度大约为300毫秒。例如在下面这个例子中,它花费了2452ms,而“伪”变量花了2033ms。试了几次,大约有400毫秒的差异。
2.后的页面已经完全载入我打“记录”再次出现在性能监视器。使用窗口管理器(1.全屏模式,2.右半屏幕3.左半屏幕)改变浏览器窗口的大小3次,我只是改变了浏览器窗口的大小
在这种情况下“伪”变体总是大约慢了330毫秒,例如在下面的图像中花了1463秒,而“许多DOM元素”只花了1136秒。
我还使用脚本和时间测量触发使用document.body.offsetHeight;和前后记录的时间回流尝试。但我只发现花了1到4毫秒,所以我怀疑它确实可以用来可靠地测量任何东西。可能需要更多元素或操作才有用。
只是我想到的第一件事情的一个非常快速的测试。让我知道是否还有其他东西我应该尝试或测量:)