前言
在一次腾讯的面试中，碰到了一道code review 的面试题，题目需要从各方面考虑，指出代码中的不足。
其中有一处纯文本的修改使用了innerHTML，在作答时我写下：将innerHTML 修改为innerText。
面试官问：为什么使用innerText 替代innerHTML？
我答：因为只修改了文本，所以可以使用innerText，它的性能更好、开销更小一些。
这个回答十分笼统，有点知其然不知其所以然的味道，所以今天出这篇文章来对比一下innerHTML 和innerText 。
注：本文仅讨论对文本进行修改时，innerHTML 和innerText 的性能表现。
正文
对比
更新innerHTML 时：对文本进行HTML 解析 + 更新DOM + 重排 + 重绘
更新innerText 时：更新DOM + 重排 + 重绘
对于innerHTML 而言，在进行内容更新的时候，它会先对内容进行HTML 解析，然后更新DOM ，并触发重排重绘。
对于innerText 而言，它会直接将内容插入到对应的DOM 中，也就是直接更新DOM，然后触发重排重绘，并不会进行HTML 解析。
我们使用下面代码来进行测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container1">container1</div>
<div id="container2">container2</div>
<script>
console.time(1)
let div1 = document.getElementById('container1');
div1.innerHTML = 'Hello World';
console.timeEnd(1)
console.time(2)
let div2 = document.getElementById('container2');
div2.innerText = 'Hello World';
console.timeEnd(2)
</script>
</body>
</html>
可以看到，使用innerText 更新文本性能优于使用innerHTML。
总结
在使用innerHTML 和innerText 更新节点文本的时候，由于innerHTML 需要对内容进行HTML 解析，因此性能开销相对于innerText 来说更大。
因此，在不涉及修改DOM 结构的时候，可以使用innerText 来修改。
最后（其实也可以使用textContent）
