Virtual DOM 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Virtual DOM 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 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的时...

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

Virtual DOM(八)

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

0
0
发表了博客
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
发表了博客
2019/01/16 15:01

实现虚拟(Virtual)DOM

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

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

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

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

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

virtual dom & mvvm

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

0
0
发表了博客
04/20 10:41

从零开始创建Virtual DOM

1)Virtual DOM从何说起? 说它之前,我们先回顾一下前端领域最近几年都发生了什么事情。以前的前端开发基本都是静态页面,通过服务器同步数据渲染然后通过http响应内容返回给浏览器解析。页面与页面之间的跳转物理路由直接跳转。所有页面交互通过ajax异步请求数据,再局部刷新。但是这样开发有一些缺点,就是页面与页面...

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

浅谈 Virtual DOM 的那些事

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

0
0
2019/04/16 09:11

深入理解 React 的 Virtual DOM

React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX、理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用。 这是Choerodon的一个...

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

Virtual DOM 是React的精髓所在

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

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