使用过React的同学对于Virtual DOM并不陌生，作为React的重要核心概念，Virtual DOM凭借其高效的diff算法，让我们不用关心应用的性能问题，毫无顾忌地修改各种数据状态。在实际的开发中，我们并不需要关注Virtual DOM在一个框架中是如何运行的，但是理解Virtual DOM的实现原理却是非常有必要的，同时也有助于我们更加深入React。

虚拟DOM (VDOM，也称为 VNode) 是非常神奇的，同时也是复杂难懂的。 React，Preact 以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以，我就想到自己动手写一篇。

本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法，并且尝试尽量把 Virtual DOM 的算法思路阐述清楚。希望在阅读本文后，能让你深入理解 Virtual DOM 算法，给你现有前端的编程提供一些新的思考。本文所实现的完整代码存放在 Github。

在 2017年，保证我们的页面能够快速加载的手段包括压缩，资源优化到缓存，CDN，代码分割以及 Tree Shaking 等。 然而，即便你不熟悉上面的这些概念，或者你感到无从下手，你仍然可以通过几个关键字以及精细的代码结构使得你的页面获得巨大的性能提升。这些新的 Web 标准 <link rel="preload">，使你能够实现更快的关键资源的加载，在这个月晚些时候，Firefox 就能看到这些特性。在 Firefox Nightly 版本中或者 开发者版本 已经可以使用这些功能。于此同时，这也是回顾基本原理，深入了解 DOM 解析相关性能的一个好时机。