2024年虚拟DOM技术将何去何从?

本文探讨了虚拟DOM技术的起源、现状及其争议,介绍了Svelte和Solidjs等非虚拟DOM框架如何挑战现状。Svelte通过编译时优化和减少代码量提供高效体验,而Vue的蒸汽模式则尝试优化虚拟DOM。2024年的前端框架市场呈现出虚拟DOM与非虚拟DOM并存的局面,开发者可根据项目需求选择合适的技术。
摘要由CSDN通过智能技术生成

d6923afa3229722729ceeb6adab12485.jpeg

从诞生之初谈起,从命令式到声明式,Web开发的演变之路

Web开发的起源与jQuery的统治

在Web开发的早期阶段,操作DOM元素主要依赖命令式编程。当时,jQuery因其易用性而广受欢迎。使用jQuery,开发者通过具体的命令操作DOM,比如:

// jQuery 示例
$("ol li").click(function() {});
let li = $("<li>我是一个列表项</li>");
$("ol").append(li);

这种方式虽然直观,但随着应用复杂度的提高,代码管理变得越来越困难。

声明式编程的兴起:React与JSX

2f427fc9bc954997432434892ce4cf4e.jpeg

2013年,Facebook的Jordan Walke提出了一个革命性的想法:将FaceBook在2010年开发的XHP功能迁移到JavaScript,借助JSX扩展形成新的编码风格。与命令式不同,声明式编程不再关注如何操作DOM,而是描述希望DOM是什么样子。例如:

// React组件示例
const Component = (
  <ul>
    {data.map(item => <MyItem data={item} />)}
  </ul>
);

声明式编程使得组件化开发成为可能,极大地提高了代码的可维护性和可扩展性。

虚拟DOM的出现

React的一个关键概念是虚拟DOM(Virtual DOM)。虚拟DOM是代码与实际DOM操作之间的中间层。这个概念允许代码先修改虚拟DOM树,然后再映射到真实的DOM树上。

虚拟DOM的优点包括:

  • 促进函数式UI编程:抽象组件,简化代码维护。

  • 跨平台能力:虚拟DOM本质上是JavaScript对象,可用于小程序、iOS、Android等应用的抽象层。

  • 数据绑定减少DOM操作:通过合并多个DOM操作为一次操作,减少浏览器重排。例如:

// 利用DocumentFragment优化DOM操作
const fragment = document.createDocumentFragment();
for(let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
const container = document.getElementById('container');
container.appendChild(fragment);
  • 轻量级JavaScript操作进行DOM差异化(Diffing):避免过度查询和存储实际DOM,提高性能。

  • 通过DOM Diff减少不必要的操作:减少页面重排和重绘。

  • 缓存DOM和保存节点状态:优化DOM更新。

通过这些技术的发展和应用,Web前端开发从繁琐的命令式操作转变为更加高效、可维护的声明式编程。虚拟DOM的概念不仅为React所采纳,也被许多其他框架所使用,从而推动了整个前端生态的发展。

虚拟DOM的现状及其争议

虚拟DOM的挑战

虽然虚拟DOM曾是前端开发的一大创新,但随着技术的发展,一些框架开始质疑并摒弃虚拟DOM。这背后的原因主要包括:

  • 首次渲染性能:虚拟DOM在首次渲染大量DOM时,由于额外的计算开销,可能会比直接使用innerHTML插入慢。

  • 内存占用:维护一份虚拟DOM树的内存副本。

  • 频繁更新的开销:在频繁更新时,虚拟DOM需要更多时间进行计算工作。

  • 大型项目的性能成本:即使现代框架进行了优化,比较和计算虚拟DOM的成本依然存在,特别是在构建虚拟DOM树时。

不同框架的应对策略

Uber:例如Uber,通过广泛且手动使用shouldComponentUpdate来最小化渲染调用。

React Fiber:React 16引入了React Fiber。通过优先级分割的中断机制,改善了因虚拟DOM树深度遍历造成的主进程阻塞问题。

Vue 3:Vue的创始人尤雨溪在“Vue 3的设计”中提到,他致力于寻找突破虚拟DOM的性能瓶颈。

Svelte:Svelte的作者Rich Harris提出了“虚拟DOM纯属开销”的观点,强调在某些情况或频繁更新下,虚拟DOM数据驱动模型带来的不必要开销。

2024年的虚拟DOM:还需要吗?

fcac80e0fef842d4f51aba592e000831.jpeg

当前非虚拟DOM框架的主力:Svelte

虚拟DOM的现状

目前,虚拟DOM仍然是主流框架中的主导技术。React持续在迭代中探索更合理的调度模式,而Vue3专注于优化虚拟DOM的diff算法。ivi和Inferno在虚拟DOM框架的性能前沿领先。尽管虚拟DOM在主流框架中仍占主导地位,但像Svelte和Solidjs这样的非虚拟DOM框架开始将它们的新模式引入公众视野。

Svelte的创新

Rich Harris,Svelte和rollup的作者,将他在代码打包策略上的专长带入了JavaScript框架领域。

理念:“最好的API是根本没有API” —— Rich Harris

Svelte3:Svelte3经过重大改变,成为一个更轻量级、语法更简洁、代码量更少的JavaScript框架,用于实现响应性。

Svelte在编译阶段,直接将声明式代码转换为更高效的命令式代码,并减少运行时代码。例如:

<script>
 let c
  • 24
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值