Vue.js框架中权衡的艺术（二）

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的计算量

新建页面时，JavaScript运算和DOM构建层面相差不大，innerHTML 性能甚至优于 虚拟dom

当更新页面时

更新dom 时，虚拟DOM性能更加优越

修改dom的三个方法对比

权衡之后，vue 使用的 虚拟dom 性能是很不错的，目前没有更好的方案

运行时和编译时的权衡

设计一个框架时，一般有三种选择

纯运行时

我个人理解，纯运行时，就比如jquery，或者和命令式框架写法相似

纯编译时

比如Svelte, 0运行时，直接编译成可执行的js代码，因此性能更好。

运行时+编译时

vue react 都是运行时+编译时。

<template><jsx>

代码都会在编译时被打包成被渲染成 树形结构。在运行时，执行render进行渲染。