使用HTML属性的DOM惩罚 [英] DOM penalty of using html attributes
问题描述
我正在考虑使用HTML5数据属性来简化我的应用程序的第三方脚本。因此，考虑两种情况：
I’m thinking of using HTML5 data attributes for easier third-party scripting of my application. So, consider two cases:
- 页面上有10,000个HTML元素，如
< div> Sticker< / div>。 - 还有其他10'000个HTML元素，如
< div data-id ={{id}} data-category ={{category-id}}> Sticker< / div>。
- There are 10'000 HTML elements on page like
<div>Sticker</div>. - There are other 10'000 HTML elements like
<div data-id="{{id}}" data-category="{{category-id}}">Sticker</div>.
第二种情况（attrs的存在）可能会影响DOM /渲染性能，不是吗？如果是这样，多少？
The second case (presence of attrs) probably affects DOM / rendering performance, doesn’t it? If so, how much?
只是为了澄清，我不打算自己使用数据属性，只是将它们暴露给第三方脚本或浏览器插件。考虑dotjs等等。使用数据属性，很容易抓取/抓取页面。
Just to clarify, I don’t plan to use data attributes on my own, just exposing them for third-party scripts or browser addons. Consider dotjs or so. With data attributes it’s very easy to scrape / crawl page.
推荐答案
主要的perf命中原因在于解析HTML。这个时间被捕获并显示在Chrome DevTools时间轴上，但是在很棒的方案中，它非常小。
The primary perf hit this causes is in Parsing HTML. This time is captured and shown in the Chrome DevTools timeline, but in the great scheme of things, it's quite small.
数据属性不影响renderTree，因此对Layout和Paint的影响为零。 querySelector（'div'）性能也不会受到影响。什么性能影响这个可以只是你在DOM中存储真相，所以你会做DOM操纵来读取这些值。抓取一个元素来读取数据（使用 elem.dataset ）将永远比从DOM上的结构中抓取数据慢。因此，您可以使用CPU分析器或时间线来确定应用程序中的操作的开销。取决于多少和多久。
Data attributes don't affect the renderTree and therefore the impact to Layout and Paint is zero. querySelector('div') performance will not be affected either. What performance influence this could have is just that you're storing truth in the DOM, so you'll be doing DOM manip to read the values out. Grabbing an element to read data off (with elem.dataset) will always be slower than grabbing that data out of a structure that's not on the DOM. So you can use the CPU profiler or Timeline to ascertain the perf overhead of manip inside the app. Depends really on how much and how often.
TL; DR：对渲染/滚动没有影响。对页面加载时间的影响极小。对运行时性能影响小。
TL;DR: no impact to rendering/scrolling. super-minimal impact to page load time. small impact to runtime performance.
所有这些都可以通过Chrome DevTools时间轴来衡量。
All these things are measurable with the Chrome DevTools Timeline.
这篇关于使用HTML属性的DOM惩罚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
