virtual-dom 的文章 - SegmentFault 思否

0

React 中 Virtual DOM 与 Diffing 算法的关系

sanget 8月27日发布于
收藏

这篇文章是基于 React 官方文档对于 Virtual DOM 的理念和 Diffing 算法的策略的整合。

0

Vue中的虚拟DOM及diff算法

chaumet 8月23日发布于
收藏

为什么出现：浏览器解析一个html大致分为五步：创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。每次对真实dom进行操作的时候，浏览器都会从构建dom树开始从头...

0

React系列 --- virtualdom diff算法实现分析(三)

炸鸡超人 8月7日发布于
收藏

经历过PHP模板开发或者JQuery的洗礼的人都知道,它们实现重新渲染采用最简单粗暴的办法就是重新构建DOM替换旧DOM,问题也很明显

3

理解JavaScript中的Repaint和Reflow

darkCode 7月22日发布于
收藏

最近，在研究React的虚拟DOM如此之快的原因时，我意识到我们对javascript性能的了解甚少。所以我写这篇文章是为了帮助提高对Repaint和Reflow以及JavaScript性能的认识。

0

Vue基于snabbdom做了哪些事

令狐洋葱 6月21日发布于
收藏

之前有简单看过 Vue patch 部分的源码，了解了是基于 Snabbdom 库实现的。最近想详细了解下 Vue 处理 vnode patch 的整个过程，想知道它在 Snabbdom 之上做了哪些事情？所以带着这个问题，写了这篇文章来记录。

62

虚拟 DOM 到底是什么？

自然醒 6月18日发布于
49 收藏

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）。因为很多人是在学习 React 的过程中接触到的虚拟 DOM ，所以为先...

2

如何实现一个虚拟 DOM——virtual-dom 源码分析

hjava 3月13日发布于
1 收藏

本文通过对virtual-dom的源码进行阅读和分析，针对Virtual DOM的结构和相关的Diff算法进行讲解，让读者能够对整个数据结构以及相关的Diff算法有一定的了解。

2

vue：虚拟dom的实现

Alfred 2月21日发布于
2 收藏

那么为什么要用 VDOM：现代 Web 页面的大多数逻辑的本质就是不停地修改DOM，但是 DOM 操作太慢了，直接导致整个页面掉帧、卡顿甚至失去响应。然而仔细想一想，很多 DOM 操作是可以打包（多个操作压成一个）和合并...

68

如何编写自己的虚拟DOM

前端小智 1月8日发布于
53 收藏

要构建自己的虚拟DOM，需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码，因为它们是如此庞大和复杂——但实际上，虚拟DOM的主要部分只需不到50行代码。

9

vue虚拟dom原理剖析

chen4342024 2018年12月28日发布于
8 收藏

vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟dom结构的实现。就难度不大了！

0

snabbdom源码解析（七）事件处理

chen4342024 2018年12月26日发布于
收藏

我们在使用 vue 的时候，相信你一定也会对事件的处理比较感兴趣。我们通过 @click 的时候，到底是发生了什么呢！

0

snabbdom源码解析（六）模块

chen4342024 2018年12月26日发布于
收藏

在 ./src/modules 里面，定义了一系列的模块，这些模块定义了相应的钩子。这些钩子会在 patch 的不同阶段触发，以完成相应模块的功能处理

0

snabbdom源码解析（五）钩子

chen4342024 2018年12月26日发布于
收藏

这个文件主要是定义了 Virtual Dom 在实现过程中，在其执行过程中的一系列钩子。方便外部做一些处理

0

snabbdom源码解析（四） patch 方法

chen4342024 2018年12月26日发布于
收藏

就近复用为了尽可能不发生 DOM 的移动，会就近复用相同的 DOM 节点，复用的依据是判断是否是同类型的 dom 元素

0

snabbdom源码解析（三） vnode对象

chen4342024 2018年12月26日发布于
收藏

vnode 对象 vnode 是一个对象，用来表示相应的 dom 结构代码位置：./src/vnode.ts 定义 vnode 类型 {代码...} 定义 VNodeData 的类型 {代码...} 创建 VNode 对象 {代码...} snabbdom源码解析系列 snabbdom源码...