专栏首页女程序员的日常_Linvirtual DOM和diff算法(一)

virtual DOM和diff算法(一)

哈喽,大家好,今天是周一。周末回老家了,每次回老家后的第一个工作日都感觉很陌生,各位宝宝(づ。◕‿‿◕。)づ,有多久没回老家了?不管在哪里,记得好好照顾自己,好好爱自己!

speak is cheap

virtual DOM因react的流行而被人们重视,在没有virtual DOM的时候,我们都是操作dom节点来进行页面的渲染和修改的,相比于频繁操作dom,virtual DOM很好的将dom进行了一层映射,将原本需要在真实dom进行的创建节点、删除节点、添加节点等一系列复杂的dom操作完全放到virtual DOM中进行。所以说virtual DOM实际是存储了dom的重要信息的js。

vitual DOM

virtual DOM因react而流行,所以下面以react为例子,我们来看看virtual DOM。在一篇外文中看到一个很好的解释,翻译如下:

When a React UI is rendered, it is first rendered into a virtual DOM, which is not an actual DOM object graph, but a light-weight, pure JavaScript data structure of plain objects and arrays that represents a real DOM object graph. A separate process then takes that virtual DOM structure and creates the corresponding real DOM elements that are shown on the screen.

翻译:呈现react ui时,首先渲染成virtual DOM,这个virtaul DOM不是真实的DOM节点,而是一个轻量的、纯javascript数据结构的普通对象或者数组,代表真实的DOM对象图。之后通过一个单独的过程把virtual DOM创造成相应的真实DOM元素展示在屏幕上。

Then, when a change occurs, a new virtual DOM is created from scratch. That new virtual DOM will reflect the new state of the data model. React now has twovirtual DOM data structures at hand: The new one and the old one. It then runs a diffing algorithm on the two virtual DOMs, to get the set of changes between them. Those changes, and only those changes, are applied to the real DOM: This element was added, this attribute's value changed, etc.

翻译: 当改变发生时,从头开始创建一个新的virtual DOM。这个新的virtual DOM反应了新的数据模型的状态。这时react有新旧两个virtual DOM。然后运行diff算法在两个virtual DOM,来获取两个之间的变化。这些改变应用到真的DOM元素:添加了这个元素,改变属性值,等等。

So the big benefit of React, or at least one of them, is that you don't need to track change. You just re-render the whole UI every time and whatever changed will be in the new result. The virtual DOM diffing approach lets you do that while still minimizing the amount of expensive DOM operations.

翻译:所以react最大的优点就是你不必跟踪变化,只需要每次都重新渲染整个UI,并且任何改变都会重新生成。virtual DOM差异化可以帮助你实现,并且最大限度的减少昂贵的DOM操作。

通过difff算法得到需要修改的最小单位,再将最小单位的视图进行更新。这样就减少了很多不需要的DOM操作。今天就说这么多,明天更新关于diff算法的学习笔记,敬请期待~

愿我们有能力不向生活缴械投降---Lin

参考文献:

http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue源码解读--Vitual DOM(虚拟DOM)

    Virtual DOM产生的原因是浏览器中DOM是很“昂贵”的,我们来看一下一个p元素的属性都有哪些:

    用户3258338
  • 搜索引擎是如何工作的?

    SEO: Search Engine Optimization,直译为搜索引擎优化,其实这句话真正的意思是根据搜索引擎的工作原理对我们的项目进行优化。

    用户3258338
  • linux的用户权限

    最近一个同事把他的服务器分给我了一块,咿呀,万分激动之下,准备自己要搞一个博客!然而,每次一操作点啥,就给我报“permission deny”

    用户3258338
  • 增量 DOM 与虚拟 DOM 的对比使用

    如果你熟悉 React,你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。

    桃翁
  • 从 React 历史的长河里聊虚拟DOM及其价值

    本质上是 JavaScript 对象,这个对象就是更加轻量级的对 DOM 的描述。

    前端劝退师
  • Shadow DOM 初探

    Shadow DOM用官方的翻译来说就是影子 DOM,他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文档的时候会给指定的DOM结构插入...

    IMWeb前端团队
  • React虚拟DOM的理解

    Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最...

    WindrunnerMax
  • 现代前端技术解析:现代前端交互框架

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Shadow DOM v1 简介

    Shadow DOM 是 Web Components 定义的四大标准之一。Shadow DOM 解决了构建网络应用的脆弱性问题。脆弱性是由 HTML、CSS ...

    阿宝哥
  • DOM(W3C)

    W3C对DOM的定义是:“一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。” 换句话说,这是表示和处...

    py3study

扫码关注云+社区

领取腾讯云代金券