文章目录一、什么是运行时Runtime二、什么是编译时Compile-time三、如何区分运行时与编译时四、三大前端框架对比五、框架类型对开发的影响1. 性能2. 开发体验3. 生态与应用场景六、总结我们在前端开发中经常听到“运行时runtime”和“编译时compile-time”尤其是在选择框架时这两个概念直接影响性能、开发体验和项目规模。这篇文章详细解释这两个概念并对比 React、Vue、Svelte 三大前端框架的实现方式。一、什么是运行时Runtime运行时指的是程序真正执行的阶段发生在浏览器或服务器上程序中的逻辑在这一阶段才被触发。特点代码已经交给浏览器执行动态行为在运行时才发生比如用户交互触发状态更新DOM 渲染与更新生命周期钩子触发需要依赖框架提供的运行时支持举例React 的useState和useEffectVue 的响应式系统追踪依赖并更新 DOMVirtual DOM 的 diff 算法简单理解运行时就是浏览器里真正处理 UI 的时间点二、什么是编译时Compile-time编译时指的是程序在构建阶段被处理或转换的阶段浏览器还没有执行代码。特点构建工具或框架编译源代码可以生成原生 JavaScript 或 DOM 操作代码优化性能减少浏览器运行时的工作量举例Svelte 将组件直接编译成原生 JS DOM 操作Vue 的模板template被编译成 render 函数JSX 在构建阶段被 Babel 转成React.createElement调用简单理解编译时就是浏览器看到的最终可执行代码生成阶段三、如何区分运行时与编译时看浏览器执行依赖核心逻辑必须在浏览器里处理 → 运行时框架构建阶段生成可执行代码 → 编译时框架看 Virtual DOM依赖 Virtual DOM 更新 UI → 运行时框架React、Vue无 Virtual DOM → 编译时框架Svelte看 bundle 体积和依赖运行时框架通常包含大量框架代码编译时框架体积小运行时依赖极少四、三大前端框架对比框架Virtual DOM编译运行时依赖框架类型特点React✅JSX → createElement高react react-dom运行时框架灵活、生态强大、适合大型项目但心智负担大Vue✅template → render 函数中等vue.runtime.js编译 运行时上手快、模板友好、响应式系统精准Svelte❌编译成纯 JS DOM 操作极少编译时框架性能极高、包体小、运行时代码几乎为零五、框架类型对开发的影响1. 性能Svelte Vue ReactSvelte 编译时生成精确 DOM 操作不用 Virtual DOMVue 响应式系统精确更新性能比 React 好React 需要 Virtual DOM diff每次状态更新都要重新计算2. 开发体验Svelte 写法最自然像原生 JSVue 上手容易语法直观React 函数式思维强Hooks 需要理解依赖关系3. 生态与应用场景React企业级后台、移动端React Native、大型项目首选Vue中小型项目、企业官网、轻量后台Svelte个人项目、轻量网站、对性能要求极高的场景六、总结运行时浏览器执行阶段需要框架提供运行时支持动态更新 UI编译时构建阶段生成最终代码减少运行时工作量提高性能框架对比React → 运行时框架Vue → 编译 运行时框架Svelte → 编译时框架一句话总结React 和 Vue 在浏览器里“还活着”而 Svelte 编译后“几乎消失”只留下纯粹的 DOM 操作。选型建议大型复杂项目→ ReactNext.js中小型企业项目→ VueNuxt轻量、性能优先项目→ SvelteSvelteKit 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目
