运行时和编译时

 1、假如我们需要将一个树形数据结构对象渲染成dom树，我们首先定义好树形结构的数据对象如下：

const obj = {
    tag: 'div', //表示标签名称
    children: [ // 既可以是一个数组（代表子节点），也可以直接是一段文字（文本子节点）
        {tag: 'span', children: 'hello world'}
    ]
}

function Render(obj, root) {    const el = document.createElement(obj.tag)    if (typeof obj.children === 'string') {        const text = document.createTextNode(obj.children)        el.appendChild(text)    } else if(obj.children) {        obj.children.forEach(element => {            Render(element, el)        });    }    root.appendChild(el)}

Render(obj, document.body)

浏览器运行上面这段代码，就可以看到我们预期的内容。

2、那么可以使用类似于HTML标签的方式描述树形结构对象呢？

<div>   <span>hello world</span></div>

编译为：

const obj = {
    tag: 'div',
    children: [
        {tag: 'span', children: 'hello world'}
    ]
}

我们编写了一个叫Compiler的程序，作用就是将html字符串编译成树形结构的数据对象

const html = `<div><span>hello world</span></div>`
const obj = compoler(html)
Render(obj, document.body)

以上就是运行+编译，如果运行时再编译，必然会消耗性能，但是可以在构建阶段进行编译，这样对性能就非常友好了

3、那么是不是可以直接将HTML标签字符串直接编译为命令式代码呢？

<div>     <span>hello world</span></div>

const div = document.createElement('div')const span = document.createElement('span')span.innerText = 'hello world'div.appendChild(span)document.body.appendChild(div)

这样我么只需要Compiler函数就可以了

以上分别时运行时、运行时+编译时、编译时三种场景，那么他们有哪些优缺点呢？

纯运行时：没办法分析用户提供的内容

纯编译时：性能好，有损灵活性，必须编译后才能用【Svelte就是纯编译，但是未能达到理论高度】

运行时+编译时：性能始终，灵活有度