[英]DOM penalty of using html attributes
I'm thinking of using HTML5 data attributes for easier third-party scripting of my application. 我正在考虑使用HTML5数据属性来简化我的应用程序的第三方脚本。 So, consider two cases:
所以,考虑两种情况:
<div>Sticker</div>
. <div>Sticker</div>
。 <div data-id="{{id}}" data-category="{{category-id}}">Sticker</div>
. <div data-id="{{id}}" data-category="{{category-id}}">Sticker</div>
。 The second case (presence of attrs) probably affects DOM / rendering performance, doesn't it? 第二种情况(attrs的存在)可能会影响DOM /渲染性能,不是吗? If so, how much?
如果是这样,多少钱?
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.
考虑dotjs左右。 With data attributes it's very easy to scrape / crawl page.
使用数据属性,可以非常轻松地抓取/抓取页面。
The primary perf hit this causes is in Parsing HTML. 这个原因的主要因素是解析HTML。 This time is captured and shown in the Chrome DevTools timeline, but in the great scheme of things, it's quite small.
这一时间被捕获并显示在Chrome DevTools时间轴中,但在很棒的方案中,它非常小。
Data attributes don't affect the renderTree and therefore the impact to Layout and Paint is zero. 数据属性不会影响renderTree,因此对Layout和Paint的影响为零。
querySelector('div')
performance will not be affected either. querySelector('div')
性能也不会受到影响。 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. 这可能带来的性能影响只是你在DOM中存储真相,所以你将使用DOM操作来读出值。 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. 抓取一个元素来读取数据(使用
elem.dataset
)总是比从DOM上没有的结构中获取数据要慢。 So you can use the CPU profiler or Timeline to ascertain the perf overhead of manip inside the app. 因此,您可以使用CPU分析器或时间轴来确定应用程序内操作的执行开销。 Depends really on how much and how often.
真的取决于多少和多少次。
TL;DR: no impact to rendering/scrolling. TL; DR:对渲染/滚动没有影响。 super-minimal impact to page load time.
对页面加载时间的极小影响。 small impact to runtime performance.
对运行时性能的影响很小。
All these things are measurable with the Chrome DevTools Timeline. 所有这些都可以通过Chrome DevTools时间轴来衡量。
For data attributes, there are two interesting articles that it's important to read: 对于数据属性,有两篇有趣的文章,重要的是阅读:
1- https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/ 1- https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/
2- http://html5doctor.com/html5-custom-data-attributes/ 2- http://html5doctor.com/html5-custom-data-attributes/
So, in my opinion, if you have atencion to variable names, if you don't care with some problems in IE (maybe only IE7<, because I think that in 9 and 8 data attr will work ), use data attributs will be a nice solution. 所以,在我看来,如果你有变量名称,如果你不关心IE中的一些问题(也许只有IE7 <,因为我认为在9和8数据attr将起作用),使用数据attributs将是一个很好的解决方 About the performance, you can try the link above and see the differences, but I think it's bether to store the values in a consistent data structure in Javascript variables.
关于性能,您可以尝试上面的链接并查看差异,但我认为将值存储在Javascript变量中的一致数据结构中更为合适。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.