虚拟DOM概念为我们带来的变化
2017-05-27 12:12
302 查看
从react 推出虚拟DOM概念,从VUE、avalon、angularjs、knockout 等等框架产生了巨大的影响。迫使他们进行大量的重构,大版本升级.
那很多人也想知道虚拟DOM主要是干嘛?估计很多在网上搜过知道大概的原理和作用。那如果让你去设计一个框架用它具体干些什么的时候。你知道怎么做?我的理解:当你的框架有大量操作DOM或者频繁操作DOM的时候应该要考虑一下性能的影响,是否采用虚拟DOM进行差异化比较渲染.
我们也知道一个页面就是一个巨大DOM树,它有很多分支,而且分支的深度未知,DOM有很多计算属性。就跟我们MVVM框架那种属性一种。当然它更复杂。你一访问它就会造成大量的运算,相当耗性能.
那有些运算我们是否可以在虚拟DOM上面,先进行演练计算,计算完毕再一次性渲染到页面。这种的性能会快很多。
例如以前MVVM框架渲染DOM的方式:
先找上下文所有带有指令的DOM,然后解析指令,然后绑定指令,再对指令绑定对应的表达式添加依赖。当数据源或DOM发变化,会具体由指令进行相关事物操作。例如较复杂的钳套for 循环指令,需要大量的代码去处理DOM
现在的MVVM框架采了虚拟DOM方式:
先找到上下文,获取它的HTML代码(OuterHTML),再对HTML进行解析组合成虚拟DOM树结构的对象(例如React的JSX 其实跟这个也是一样的道理,最后react 把jsx 解析成虚拟DOM树),最后对虚拟对象进行动态脚本编译,在编译的过程就实现了很多复杂指令.具体例子
例如:createVElement(tag,attr,children) 别名_c
var root={tag:'div',children:[{tag:div,{'v-for':'(item,index)in list'},'item.name']}
var for=function(data,callback){ return data.map((l,index)=>callback(l,index)) }
var code=new Function('data','with(data){ return _c('div',for(list,function(item,index){ return _c('div',null,item.name )})) }') // 编译动态脚本,缓存code
code({list:[{name:"呵呵"}]}) // 最后这样一执行就创建了一个虚拟DOM树最后渲染到页面中,当然了,比如List 发生变化了。再执行code 得到最新的虚拟DOM树。然后拿最新的和上一个作差异化比较,就能知道哪个地方变动了,只去局部更新那一部分。
相关文章推荐
- C# 3.0 给我们带来了什么?从C#1.1到LINQ的查询语句变化
- 机器学习的来临在日常中给我们带来了什么变化?
- web app和html5给前端带来的变化——我们的html5游戏平台之旅
- Vuex给我们的.vue文件结构带来了这些变化
- C# 3.0 给我们带来了什么?从C#1.1到LINQ的查询语句变化
- 云计算给我们带来哪些变化?
- 由C++转向C#:我们需要注意哪些方面的变化?
- 聚焦惠普质量问题是否带来行业变化?
- 科技巨头抢占AI市场 智能芯片给生活带来了怎样的变化? | 行业
- LOGIN给我们带来了方便
- Imagine Cup 给我们带来了什么
- Oracle 10g flashback table 索引名带来的变化
- EPOLL为我们带来了什么。
- 深度丨有生之年,人工智能会给世界带来什么变化?
- 由C++转向C#:我们需要注意哪些方面的变化?
- Extjs 4.1会给我们带来什么
- HTML5能为我们带来什么?(二)
- 盗版给我们带来了什么?
- 镜花水月,过不留痕————铭记那些给我们带来进步的C语言小难题