修改innerHTML性能问题

Question

dom_clone = dom_target.cloneNode(true)
dom_clone.innerHTML = decodeURIComponent(json_typeset.Html)
dom_div.appendChild(dom_clone)
dom_target.innerHTML = decodeURIComponent(str_Html)

我这块需要复制一下div完了给他添加到后面，之后给这个div重新附一下innerHTML，完了因为不能用es6，请问下这块该怎么优化性能

Answer 1

根据你的逻辑，应该是没什么好优化的了。

其中，decodeURIComponent是必须的，innerHTML将文本解析成DOM也不可避免。

唯一略有差异的是，dom_target是在文档树里的，而dom_clone是文档树的文档碎片里的。实在要优化就调整一下顺序吧。

既然询问性能问题，很可能是这段代码执行的时间过长。这里可能会存在的问题是，大量的字符串造成的解码和DOM解析的问题。另外，你可能需要关注DOM节点变化造成的渲染问题。也有可能有其他框架影响的问题。

字符串的DOM解析可以提前完成，这样可以减少时间。

Answer 2

优化的可能上面朋友提到了其实不多的。我想从你处理逻辑上看看。

我有一个疑问就是为什么要:

dom_clone = dom_target.cloneNode(true)
dom_clone.innerHTML = decodeURIComponent(json_typeset.Html)

类似处理，因为这样意义真的不大，如果dom_target本身很厚重，则这步占资源，但下面马上用新内容填充了，即原来dom_target的内容其实没有什么意义的，真正有用的是dom_target的类型，如果这个是确定的，直接设置即可，如果不确定，也不用克隆，而是查询类型后使用。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。