虚拟DOM选择的原因
虚拟DOM和innerHTML的性能区别
- 涉及到DOM运算远比JavaScript层面上的计算性能差,就是说dom运算所花费的时间会比JavaScript运算的时间长
- 对于创建新页面的时候,两种运算性能差不多。
- 对于更新页面的时候,纯JavaScript运算中,虚拟DOM是创建新的JavaScript对象加diff运算,innerHTML是渲染HTML字符串。在DOM运算中,虚拟DOM只需要有必要的DOM更新,而innerHTML则需要先销毁所有旧DOM在新建所有新DOM。
- 虚拟dom在JavaScript层面比innerHTML多加了一个diff运算,由于他也是JavaScript层面的运算,所以不会产生数量级的差异。相对于innerHTML需要把所有的DOM更新,虚拟DOM只需要更新必要元素。
- innerHTML:心智负担中等,性能差
- 虚拟DOM:心智负担小,可维护性强,性能不错
- 原生JavaScript:心智负担大,可维护性差,性能高