该文介绍了一篇老外的关于提高innerHTML性能的文章.
老外的方法非常的怪异且神奇.
很多朋友在惊叹之余 对于背后的原理非常感兴趣.
受hax的提醒, 我看了一下webkit的代码.在这里我将分析的结果分享出来
说的不一定对 还请大家多多拍砖.
(请点击左边广告,谢谢)
浏览器在 el.innerHTML = newHTML 时所做的工作:
====================================
原始方法
1) 创建一个fragment(document碎片)
2) 将 newHTML 设置到 fragment 内部 (这里怎么设置的不必关心,反正不是用的innerHTML 呵呵)
3) 清除el下的所有子节点 , 类似 el.removeChildren()
4) 将fragment加入到 el内, 类似 el.appendChild(fragment)
====================================
文章里的新方法
1)克隆el节点(不包含子节点),相当于
newEl=document.createElement(el.tagName);
然或将el的所有属性赋值给 newEl (通过 el.getAttribute newEl.setAttribute)
2) 创建一个fragment(document碎片)
3) 将 newHTML 设置到 fragment 内部 (这里怎么设置的不必关心,反正不是用的innerHTML 呵呵)
4) 清除 newEl 下的所有子节点 , 类似 newEl.removeChildren()
5) 将 fragment 加入到 newEl 内, 类似 newEl.appendChild(fragment)
6) 用 fragment 替换 el. 相当于 el.parentNode.replaceChild(newEl, el);
新方法看起来比原始方法更麻烦, 但是为什么速度会更快呢?
关键点就是在 新方法的步骤 4 5 6 .
首先看4:
newEl 是clone的el,但是没有子结点,所以removeChildren很快就返回.相当于没有执行.
而且就算newEL有子结点,由于newEl不是一个在dom树里的节点, 也省去了其中复杂的一步
Java代码
- if (n->inDocument()) n->removedFromDocument();
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索性能优化
， 代码
属性
浅析犯罪预防的原理、ngrok原理浅析、appium原理浅析、netty实现原理浅析、高性能io模型浅析，以便于您获取更多的相关知识。