innerHTML
- 可以获取调用元素的所有子节点对应的html片段
- 可以是根据指定的值创建DOM树,替换原有的元素节点
一般我们插入大量新HTML标记时,使用innerHTML 与 通过多次DOM操作先创建节点再指定它们之间的关系相比,效率更高,因为在设置innerHTML 时就会先创建一个HTML解析器,这个解析是在浏览器级别的基础上代码(c++)运行的,因此比执行js 快得多,当然也会带来 创建销毁 html 解析器也有性能消耗。所以控制使用次数。
当新建页面时
const html = ` <div><span>...</span></div> ` div.innerHTML = html
通过 innerHtml 创建页面的性能 = HTML字符串拼接的计算量 + innerHTML的DOM计算量
通过 虚拟dom 创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量
innerHTML | 虚拟DOM |
|
JavaScript运算 | 拼接html字符串 |
创建虚拟dom |
DOM构建 | 新建所有dom元素 | 新建所有dom元素 |
新建页面时,JavaScript运算和DOM构建层面相差不大,innerHTML 性能甚至优于 虚拟dom
当更新页面时
innerHTML | 虚拟DOM | |
JavaScript运算 | 拼接html字符串 |
创建虚拟dom + diff算法 |
DOM构建性能因素 | 销毁旧dom新建新dom与模版大小相关 | 必要的dom更新与数据变化量相关 |
更新dom 时,虚拟DOM性能更加优越
修改dom的三个方法对比
innerHTML | 虚拟dom | 原生js(createElement) |
心智负担重等性能差 | 心智负担小可维护性高性能不错 | 心智负担大可维护性差性能高 |
权衡之后,vue 使用的 虚拟dom 性能是很不错的,目前没有更好的方案
运行时和编译时的权衡
设计一个框架时,一般有三种选择
纯运行时
我个人理解,纯运行时,就比如jquery,或者和命令式框架写法相似
纯编译时
比如Svelte, 0运行时,直接编译成可执行的js代码,因此性能更好。
运行时+编译时
vue react 都是运行时+编译时。
<template><jsx>
代码都会在编译时被打包成被渲染成 树形结构。在运行时,执行render进行渲染。