在 JavaScript 开发中，通过 innerHTML 拼接字符串来添加 HTML 元素虽然便捷，但会导致显著的性能损耗。本文对比了直接使用 innerHTML 赋值与使用 document.createElement 创建节点并追加的方法，指出字符串转换为 DOM 控件的过程会引发性能瓶颈，推荐使用后者以提升页面响应速度。
避免使用 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 节点），这一转换过程涉及较大的性能开销，从而导致页面响应迟缓。