使用html属性的DOM惩罚

Question

我正在考虑使用HTML5数据属性来简化我的应用程序的第三方脚本.所以,考虑两种情况:

1. 页面上有10'000个HTML元素<div>Sticker</div>.
2. 还有其他10'000个HTML元素<div data-id="{{id}}" data-category="{{category-id}}">Sticker</div>.

第二种情况(attrs的存在)可能会影响DOM /渲染性能,不是吗？如果是这样,多少钱？

为了澄清,我不打算单独使用数据属性,只是将它们暴露给第三方脚本或浏览器插件.考虑dotjs左右.使用数据属性,可以非常轻松地抓取/抓取页面.

Answer 1

这个原因的主要因素是解析HTML.这一时间被捕获并显示在Chrome DevTools时间轴中,但在很棒的方案中,它非常小.

数据属性不会影响renderTree,因此对Layout和Paint的影响为零.querySelector('div')表现也不会受到影响.这可能带来的性能影响只是你在DOM中存储真相,所以你将使用DOM操作来读出值.elem.dataset抓取一个元素来读取数据(使用)将总是比从DOM上没有的结构中获取数据要慢.因此,您可以使用CPU分析器或时间轴来确定应用程序内操作的执行开销.真的取决于多少和多少次.

TL; DR:对渲染/滚动没有影响.对页面加载时间的极小影响.对运行时性能的影响很小.

所有这些都可以通过Chrome DevTools时间轴来衡量.