JavaScript 操作 DOM：避免使用 innerHTML 拼接字符串

避免使用 innerHTML 拼接字符串

在排查 Web 应用性能问题时，开发者通常会先检查冗余循环并精简控件数量。若优化后性能仍无改善，需进一步深入排查。有时一个看似微小的修改能显著提升效率，例如将直接操作 innerHTML 的方式调整为标准的 DOM 节点创建方式。

 
objDiv.innerHTML += '<img id="picture" src="back.gif">';

 
var imga = document.createElement("img");
imga.setAttribute("src","back.gif");
imga.setAttribute("id","picture");
objDiv.appendChild(imga);

性能差异分析

为了书写便利，开发者常倾向于直接使用 innerHTML 赋值字符串，而非先创建页面元素、分别赋值属性最后再嵌套追加。虽然前者简单便捷，但性能较差。这是因为浏览器必须将字符串解析并转换为正确的页面控件（DOM 节点），这一转换过程涉及较大的性能开销，从而导致页面响应迟缓。