对一个DOM节点属性进行已存在的并且值相同的设置会不会产生渲染成本?
比如对一个data-id为title的元素<h1 data-id="title"></h1>
进行再次设置:
var h1 = document.getElementByTagName('h1')[0];
h1.setAttribute('data-id', 'title');
这样会不会产生渲染成本呢?
问题场景是一堆的DOM属性需要更新,但是有的是需要改变值的,有的是不需要改变值的。
开始的想法是设置每个元素的属性值前先判断原有属性值是否等于即将要设置的值,不同再进行设置,但是这样需要查找原有属性值,也消耗了DOM查找的成本。
所以有两个办法:
一律设置新值
先判断新值是否与旧值是否不等再设置
这个两个办法哪个好呢?
应该不会影响,除非设置的属性会影响元素的外观,触发了重绘或重排