这个前端经典轮子值得去造!

Virtual-DOM 是什么?

Virtual-DOM 即虚拟 DOM,它是对真实 DOM 的一个内存中的抽象表示。在前端开发中,当需要更新页面时,传统的直接操作 DOM 的方式可能会非常低效,因为 DOM 操作本身就很昂贵。虚拟 DOM 的引入允许在一个轻量级的 JavaScript 对象(即虚拟 DOM)上进行更改,然后通过一种高效的比较算法(如 React 的 Diff 算法)来确定哪些更改需要实际应用到真实的 DOM 上。这样可以大大减少不必要的 DOM 操作,从而显著提高页面渲染性能。

目前,很多主流前端框架都使用了虚拟 DOM 技术,比如:React、Vue、Preact

Virtual-DOM 案例

Million.js

Million.js 是一个完整的并且经过微调和优化的虚拟 DOM 库,减少了 Diff 的开销,其宣称可以使 React 的组件渲染速度提高 70%。这个项目在 Github 上已获得 15.5看 Star,值的学习。

图片

Github:https://github.com/aidenybai/million

Snabbdom

Snabbdom 是一个轻量级且高效的虚拟 DOM 库,它允许开发者以函数的形式来表达程序视图,同时提供了灵活且可拓展的模块化结构。Snabbdom 的核心代码非常简洁,大约只有200行,理解起来比较简单。

图片

Github:https://github.com/snabbdom/snabbdom

virtual-dom

这是虚拟 DOM 的一个很经典的实现,在 Github 上拥有 11.6k Star。

图片

Github:https://github.com/Matt-Esch/virtual-dom

blockdom

blockdom 自称是世界上最快的虚拟 DOM 库,它通过独特的按块而非按元素进行差异计算的方法,显著提升了渲染速度。这种设计使得 blockdom 能够高效直接复制整块内容,从而极大地简化了 diff 过程,并因虚拟 DOM 树的大幅精简而进一步提升了性能。

图片

Github:https://github.com/ged-odoo/blockdom

Maquette

Maquette 是一个纯粹而简单的虚拟 DOM 库。

图片

Github:https://github.com/AFASSoftware/maquette

其他

  • simple-virtual-dom:
    • 简介:简单的虚拟 dom 算法,代码只有 500 行,包括虚拟 DOM 算法非常基本的思想。
    • Github:https://github.com/livoras/simple-virtual-dom
  • petit-dom:
    • 简介:一个极简的虚拟 DOM 库。
    • Github:https://github.com/yelouafi/petit-dom
图片

原创文章,作者:guozi,如若转载,请注明出处:https://www.sudun.com/ask/81882.html

(0)
guozi's avatarguozi
上一篇 2024年5月31日 下午1:41
下一篇 2024年5月31日 下午2:00

相关推荐

  • 网站被攻击的手段包括,网站被攻击的九种形式有哪些类型

    什么是网站攻击? 网站攻击是当前互联网行业面临的严重问题。每天,无数的网站受到各种形式的攻击。如果您有自己的网站,则应采取谨慎的预防措施。否则可能会造成无法挽回的损失。那么,如何才…

    行业资讯 2024年5月9日
    0
  • 傲盾防火墙

    在当今信息安全日益受到关注的时代,网络安全加速行业也迎来了新的发展机遇。作为一款备受瞩目的产品,傲盾防火墙凭借其卓越的技术特点,在网络安全领域掀起了一股热潮。那么,什么是傲盾防火墙…

    行业资讯 2024年3月24日
    0
  • Android如何实现进度条?

    随着移动互联网的快速发展,Android系统已经成为了当前最主流的移动操作系统。而在这个操作系统中,进度条是一种非常重要的控件,它可以帮助用户更直观地了解任务的进度和状态。那么,你…

    行业资讯 2024年3月25日
    0
  • 网站被攻击立案标准,网站被攻击了如何处理

    随着互联网的发展,针对网站的攻击也时有发生。但是你知道这个法律实际上是为了保护你的网站的安全吗?那么,如果你的网站受到攻击了,有哪些法律可以保护你呢?我们一起来了解一下吧!首先,我…

    行业资讯 2024年5月12日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注