JavaScript从初级往高级走系列————Virtual Dom

原创 Bios 随笔 js 38阅读 15 天前 举报

原文博客地址:https://finget.github.io/2018/05/22/virtualDom/

什么是虚拟DOM

  • 用JS模拟DOM结构
  • DOM变化的对比,放在JS层来做(图灵完备语言)
  • 提高重绘性能

重绘和回流

页面渲染过程:
重绘和回流

  • 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。
  • 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

模拟虚拟DOM

虽然只改变了两个数据,但是整个table都闪烁了(回流&重绘)

  • DOM操作是‘昂贵’的,js运行效率高
  • 尽量减少DOM操作,尽量减少回流重绘

虚拟DOM如何应用,核心API是什么

介绍 snabbdom

snabbdom GitHub地址

官网例子:

snabbdom h 函数

snabbdom patch 函数

snabbdom例子

看图,只有修改了的数据才进行了刷新,减少了DOM操作,这其实就是vnode与newVnode对比,找出改变了的地方,然后只重新渲染改变的

重做之前的demo

核心API

  • h('<标签名>',{...属性...},[...子元素...])
  • h('<标签名>',{...属性...},'...')
  • patch(container,vnode)
  • patch(vnode,newVnode)

简单介绍 diff 算法

什么是 diff 算法

这里有两个文本文件:

借用git bashdiff 命令可以比较两个文件的区别:

在线diff工具

虚拟DOM ---> DOM

vnode ---> newVnode

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复