Cómo pesa el diseño del framework front-end

El artículo se basa en el estudio del capítulo "El arte del equilibrio" de "Diseño e implementación de Vue.js", además de la comprensión personal, y no copia completamente el código y el texto del libro. Se recomienda comprar el "Diseño e implementación de Vue.js" genuino para el aprendizaje profundo.

Imperativo y Declarativo

La programación imperativa se centra en el proceso , una típica biblioteca de programación imperativa jQuery:

<div id="app"></div>

// 获取 id 为 app 的 div 标签
$('#app')
    // 设置文本类容为 hello world
    .text('hello world')
    // 点击时，内容修改为 hello jquery
    .on('click', function () {
        this.innerText = 'hello jquery'
    })
复制代码

La programación imperativa está más en línea con la forma ordinaria de pensar, opera directamente el DOM y el rendimiento es mejor.

La programación declarativa se centra en los resultados , como Vue:

<template>
    <!-- 定义 UI -->
    <div id="app">{{ content }}</div>
</template>

<script setup>
import { ref } from 'vue'

// 声明状态
const content = ref('hello world')
const changeContent = () => {
    // 修改状态
    content.value = 'hello vue'
}
</script>
复制代码

La programación declarativa se ajusta UI = f(x)a la idea funcional de la vista basada en datos y el proceso de modificación de la interfaz de usuario se entrega al marco. Los desarrolladores solo necesitan prestar atención a las variables, lo que reduce la carga mental durante el mantenimiento.

Resumen : la programación declarativa es más fácil de mantener, pero el rendimiento es inferior al imperativo, lo que Vue tiene que hacer es mantener la capacidad de mantenimiento y minimizar la pérdida de rendimiento.

Rendimiento del DOM virtual

Cuando Vue representa la vista por primera vez, generará un VNode, y cuando se actualice, se generará un nuevo VNode. Los VNodes nuevos y antiguos se compararán para encontrar la diferencia de modificación mínima y dejar que se modifiquen, así que:

Actualizar el costo de rendimiento del código declarativo = costo de rendimiento de encontrar la diferencia + costo de rendimiento de modificar el DOM

En teoría, el rendimiento de operar directamente el DOM con JavaScript nativo es mejor, pero esto tiene mayores requisitos sobre la capacidad del desarrollador. En los días de jQuery, a menudo había mucha innerHTMLfuerza bruta .

Comparación de rendimiento en el primer render

DOM virtual que requiere mucho tiempo = creación de objetos JavaScript (VNode) + renderizado DOM completo

innerHTML requiere mucho tiempo = empalmar cadenas de JavaScript + renderizado DOM completo

Comparación de rendimiento al actualizar

DOM virtual que requiere mucho tiempo = crear un nuevo objeto JavaScript (VNode) + Diff + representación DOM parcial

innerHTML requiere mucho tiempo = empalmar cadenas de JavaScript + renderizado DOM completo

resumen

操作虚拟 DOM 和操作原生 DOM 谁的性能更好，不能简单下结论。因为这跟如何操作 DOM，何时操作 DOM，修改量多少都有关。

虚拟 DOM 是保证运行性能、代码可维护性、降低心智负担的综合选择。

运行时与编译时

纯运行时

手写 DOM 对象，运行时直接遍历对象进行渲染，但书写麻烦。

var vnode = {
    tag: 'div',
    children: [
        {
            tag: 'span',
            children: 'hello '
        },
        {
            tag: 'span',
            children: 'vue'
        }
    ]
}
function render(vnode, parent) {
    const el = document.createElement(vnode.tag)
    const children = vnode.children
    if (typeof children === 'string') {
        el.innerHTML = vnode.children
    }
    if (Array.isArray(children) && children.length !== 0) {
        children.forEach(child => {
            render(child, el)
        })
    }
    parent.appendChild(el)
}
render(vnode, document.body)
复制代码

编译时 + 运行时

开发时写普通 HTML 模板：

<div>
    <span>hello </span>
    <span>vue</span>
</div>
复制代码

构建时通过 compiler 进行编译：

const htmlString = '<div>...</div>'
const content = compile(htmlString)
复制代码

运行时渲染：

render(content, document.body)
复制代码

纯编译时

我们可以将模板编译成渲染函数或者 VNode，那同样也可以直接编译成原生 DOM 操作：

const htmlString = '<div>...</div>'
const content = compile(htmlString)

// 编译生成
const div = document.createElement('div')
const hello = document.createElement('span')
hello.innerHTML = 'hello '
div.appendChild(hello)
// ...
复制代码

小结

纯运行时以及编译时 + 运行时的方式都可以通过不同的渲染器实现跨平台渲染，灵活性高。

但是纯运行时书写麻烦，如果想做静态优化需要手动标记，而编译时 + 运行时可以交给 compiler 去做。

纯编译时 理论上能获得最好的性能，但灵活性相对较弱。

综上

Vue 是一个编译时 + 运行时的声明式 UI 框架，利用虚拟 DOM 进行更新渲染。保证其拥有良好的可维护性和灵活性，同时加上静态优化，尽可能接近原生的性能。