一分钟早读系列：运行时和编译时

相信大家都有阅读过框架源码，其中有一个高频词汇叫runtime，他的意思是运行时。与之对应的还有编译时。一个框架可能会在运行时处理事务，也可能会在编译时处理事务，又或是运行时和编译时都处理事务。由此延展出一个框架有三种类型：纯运行时，纯编译时，运行时+编译时。本文将介绍这三种类型

纯运行时

假设我们有一个框架，框架提供了一个render方法，其功能为将用户的数据渲染成DOM元素。举个例子，用户提供的数据为

js 复制代码

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

接下来我们实现render方法

js 复制代码

function render(obj, root) {
    // 首先根据tag创建指定标签
    const el = document.createElement(obj.tag)
    if (typeof obj.children === 'string') {
        // 如果是字符串，直接设为内容
        el.innerText = obj.children
    } else {
       // 如果是数组，说明还有子元素，递归调用render渲染
        obj.children.forEach(child => render(child, el))
    }
    // 将渲染结果添加到root
    root.appendChild(el)
}

用户可以这样使用：

js 复制代码

render(obj, document.body)

执行完我们就可以看到我们期望中的内容了。我们可以发现，此类方法用户只需关注obj的构建，不需要学习其他额外的知识。但如果有一天用户觉得手写obj这种树形结构过于麻烦，又不直观，想要使用类似HTML的结构来描述呢？很遗憾，不行。这就是一个纯运行时的框架

运行时+编译时

为了满足刚才用户的需求，就要开始思考，如果加上一个compile函数，能够将

js 复制代码

const html = `<div>
    <span>hello world</span>
</div>`

编译成

js 复制代码

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

再调用render进行渲染，问题不就解决了吗？用户只需要如此调用即可

js 复制代码

const obj = compile(html)
render(obj, document.body)

这样，这个框架就变成了一个运行时+编译时 的框架。既支持运行时渲染用户传入的obj，也支持编译时执行compile将用户的html编译成obj，再交由运行时渲染。

纯编译时

基于运行时+编译时，我们换一个思路，为什么要有obj和render呢？直接将html编译成js指令不可以吗？当然可以，事实上我们只需要将

js 复制代码

const html = `<div>
    <span>hello world</span>
</div>`

编译成

js 复制代码

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

就可以了，比起将html转换成obj再转换成指令，如此一步到位性能不是更高吗？其实这就是纯编译时框架，他不支持任何的运行时内容

性能分析

上面讲了三种框架类型：纯运行时，纯编译时，运行时+编译时。其实一个框架可以是这三种的任何一种，重要的是看场景需要。纯运行时的灵活性较高，但是维护起来心智负担比较重。纯编译时的性能较高，但又损失了一定的灵活性。运行时+编译时处于两者之间，相当于对纯运行时做了一些优化，将一些步骤能放在编译时去做；性能上虽然不如纯编译时，但补足了灵活性。三种类型各有取舍，每个类型都有其代表的框架。

总结

本文介绍了三种框架类型，纯运行时，纯编译时和运行时+编译时，用简单的例子描述了相关的特点。三种类型各有优缺点，没有绝对的优劣，可以根据具体使用场景来决定使用哪种类型。