BOM、DOM和Virtual DOM

什么是BOM

BOM（Browser Object Model）是指浏览器对象模型，它的作用是，使JavaScript有能力与浏览器进行“对话”，BOM提供了独立于内容，与浏览器窗口进行交互的对象。BOM的核心对象是window。BOM由一系列相关的对象构成，每个对象都包括了很多的方法和属性。
它提供了window对象，所有的浏览器都支持window对象，它表示浏览器窗口。所有的Javascript全局对象、函数以及变量都自动成为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法。
常见的window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

什么是DOM

DOM（Document Object Model）文档对象模型。
DOM就是把我们写的HTML文档抽象成为API（应用程序接口），提供给JS去操控HTML。

document.getElementById('text').innerHTML='newtext' //通过DOM修改HTML文本
getElementById就是HTML DOM API的方法

DOM的生命周期为：浏览器加载HTML文件到HTML文件被关闭。
当浏览器加载HTML时候，DOM就把HTML文档抽象成了DOM树。

<!DOCTYPE html>
<html>
<head>
    <title>mylist</title>
</head>
<body>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</body>
</html>

DOM树表示：

我们可以通过用Javascript操作DOM来实现对节点树的增加、删除、修改。这也就是我们常说的DOM操作，但经常能够听到别人说不要频繁的去操作DOM节点的说法。这是因为操作DOM在性能和时间上面是非常昂贵的。如何解决这一问题呢。接下来我们来了解Virtual DOM。

什么是Virtual DOM

首先 Virtual DOM不是由React发明的。Virtual DOM是DOM的抽象，轻量级的，本身DOM就属于抽象，所以Virtual DOM是抽象的抽象。使用者通过使用Virtual DOM来操控真实的DOM。
我们知道，在项目开发中，前端工程师需要将后台的数据呈现到界面中，同时要能对用户的操作提供反馈。这都离不开DOM操控。频繁的DOM操作会造成极大的资源浪费，这也是性能瓶颈的原因。
Virtual DOM的核心是计算比较改变前后的DOM区别，然后用最少的DOM操作语句对DOM进行操作。
Virtual DOM的实现机制：
我们可以简单的认为Virtual DOM是真实DOM的缓存，Vitual DOM只是一个JavaScript对象，它负责了一份真实的DOM的结构，我们的DOM操作不再去直接操作真实的DOM树，而是去操作Virtual DOM，对于Virtual DOM的操作过程，并不会触发浏览器的布局过程，当完成整个DOM操作函数后，Virtual DOM 会将所有被修改的DOM节点信息与真实的DOM进行对比，并将这些修改的信息一次性反馈到真实DOM上面。
使用Virtual DOM的好处如下：
1、可能会减少DOM操作的次数，带来性能上提升，我们只需要一次将Virtual DOM和 DOM同步即可。
2、真实的HTML节点有两百多个属性和方法，使用虚拟节点，能在数据结构上节省内存。
3、虚拟DOM不依赖浏览器环境，能在node环境实现，可以使用虚拟DOM生成html字符串，实现SSR（服务端渲染）

<li>1</li>                                    <li>5</li>
<li>2</li>                                    <li>6</li>
<li>3</li>                  ——>               <li>7</li>
<li>4</li>                                    <li>8</li>
                                              <li>9</li>

如果用DOM结构替换成右边的，需要进行四次删除，五次插入。这种消耗是非常大的。
Virtual DOM提供了diff算法，也就是比较两个DOM的差异，发现仅仅改变了四次内容，一次插入。需要加一个比较的时间。