Virtual DOM 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Virtual DOM 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Virtual DOM 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Virtual DOM 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Virtual DOM 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 叶秀兰
适用人群 未知
收录时间 2015-09-28

软件简介

Virtual DOM 是一个 JavaScript DOM 模型,支持元素创建,区别计算和分支操作,提供高效的渲染。

代码示例

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
// 1: Create a function that declares what the DOM should look like
function render(count)  {
    return h('div', {
        style: {
            textAlign: 'center',
            lineHeight: (100 + count) + 'px',
            border: '1px solid red',
            width: (100 + count) + 'px',
            height: (100 + count) + 'px'
        }
    }, [String(count)]);
}
// 2: Initialise the document
var count = 0;      // We need some app data. Here we just store a count.
var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document
// 3: Wire up the update logic
setInterval(function () {
      count++;
      var newTree = render(count);
      var patches = diff(tree, newTree);
      rootNode = patch(rootNode, patches);
      tree = newTree;
}, 1000);
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/08/05 11:02

虚拟DOM(Virtual DOM)

什么是Virtual DOM? Virtual DOM是对DOM的抽象,本质上是JavaScript对象(也就是通过JavaScript语言来描述一段HTML代码),这个对象就是更加轻量级的对DOM的描述. 虚拟DOM首次产生是React框架最先提出和使用的,其卓越的性能很快得到广大开发者的认可,继React之后vue2.0也在其核心引入了虚拟DOM的概念。在没有虚拟DOM的时候,我们在创建页面的时候一般都是使用HTML标签一个一个的去搭建我们的页面,既然有了DOM节点以后,为什么...

0
0
发表了博客
2019/08/14 14:37

Virtual DOM(八)

Virtual DOM 这个概念相信大部分人都不会陌生,它产生的前提是浏览器中的 DOM 是很“昂贵"的,为了更直观的感受,我们可以简单的把一个简单的 div 元素的属性都打印出来,如图所示: 可以看到,真正的 DOM 元素是非常庞大的,因为浏览器的标准就把 DOM 设计的非常复杂。当我们频繁的去做 DOM 更新,会产生一定的性能问题。 而 Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM 的代价要小很多。...

0
0
发表了博客
2020/05/12 13:56

Shadow DOM Virtual DOM 异同点

1.参考点 https://www.blog.duomly.com/what-is-the-difference-between-shadow-dom-and-virtual-dom/ 2、异同点 相同点:创建Document Object Model,优化性能。 不同点: virtual DOM创建整个Document Object 的拷贝。 Shadow DOM创建一部分的Document Object 的拷贝,这部分有自己的独立的作用域。...

0
0
01/17 13:31

Virtual DOM 认知误区

作者:莫得盐 链接:https://juejin.cn/post/6898526276529684493 在当下最流行的两个前端框架都存在 Virtual DOM 的前提下, 渐渐比较多的听到类似“使用 Virtual DOM 有什么优势?” 的面试题,但一直没有太在意。直到今天在写一个文档时,突让想到要把“为什么需要 Virtual DOM ?”也写进去,待我流畅的写好答案,略一思索——漏洞百出!也不知道是接纳了哪方的知识,让我一直有能轻松回答这个问题的错觉, 其实对于这个问题...

0
0
发表了博客
2019/01/16 15:01

实现虚拟(Virtual)DOM

Virtual DOM算法 把一个div元素的属性打印出来,如下: 可以看到仅仅是第一层,真正DOM的元素是非常庞大的,这也是DOM加载慢的原因。 相对于DOM对象,原生的JavaScript对象处理起来更快,而且更简单。DOM树上的结构、属性信息都可以用JavaScript对象表示出来: var element = { tagName: 'ul', // 节点标签名 props: { // DOM的属性,用一个对象存储键值对 id: 'list' }, children: [ // 该节点的子节点 ...

0
0
发表了博客
2019/09/06 23:56

Virtual DOM 真的比操作原生 DOM 快吗?

1. 原生 DOM 操作 vs. 通过框架封装操作。 这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的。针对任何一个 benchmark,我都可以写出比任何框架更快的手动优化,但是那有什么意义呢?在构建一个实际应...

0
0
发表了博客
2018/03/13 20:13

virtual dom & mvvm

虚拟dom 用js对象来表示dom树的结构,然后用这个对象来构建一个真正的dom树插入文档中; 当状态有变时,重新构造一个新的对象树,然后比较新的和旧的树,记录两个数的差异; 把差异部分应用到真正的dom树上,更新视图。 核心算法实现(diff算法) 用js对象表示dom树 var e = { tagName: 'ul', props: { id: 'list' }, children: [ {tagName: 'li', props: {class: 'li1'}, children: ['item1']}, {t...

0
0
发表于大前端专区
2016/07/08 19:55

Virtual DOM 是React的精髓所在

Virtual DOM 毫无疑问是 React 的精髓。 可能很多人包括我看完官方文档之后对Virtual DOM的理解就是: 它通过JS对象模拟原生DOM,加上DOM Diff 极大提升了DOM操作的性能。 这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。 如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义:抽象。 Virtual DOM 最大的意义绝不是提升性能,而是他对DOM进行了一层抽象。当我们在浏览器中使用 React的时...

0
2
发表了博客
2018/06/24 12:11

浅谈 Virtual DOM 的那些事

背景 我们都知道频繁的dom给我们带来的代价是昂贵的,例如我们有时候需要去更新Table 的部分数据,必须去重新重绘表格,这代价实在是太大了,相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom.    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>virtualDom</title> </head> <body> <div id="...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
3 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部