面试官经常会问你：“平时工作中，你怎么优化自己应用的性能？”
你回答如下：“我平时遵循以下几条原则来优化我的项目、以提高性能，主要有：”
a. 减少DOM操作的次数（减少DOM的获取与修改次数）
b. 减少网络请求
c. 压缩、合并静态资源文件（css、js、img等）
d. 小图片文件base64化处理
e. js少用全局变量
f. ...
Bingo！此时，你给自己抛了个可以把自己埋住的大坑。
因为面试官可能会追问你：“为什么减少DOM操作可以提高性能？”
为什么呢？
_______
DOM就是Document Object Model，文档对象模型，里边是接口，即方法函数。我们通过调用并传指定参数来使用。
官方定义：DOM是一个独立于语言的、用于操作XML和HTML文档的程序接口(API)。在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。
DOM是个与ES语言无关的API，它在浏览器中的接口却是用JavaScript来实现的，DOM就成了现在JS编码中的重要部分。
IE JavaScript的实现名为JScript，位于jscript.dll文件中 DOM的实现则存在另一个库中，名为mshtml.dll（内部称为trident）
safari JavaScript部分是由独立的SquirelFish引擎来实现。 DOM和渲染是使用webkit中的webcore实现
google chrome JavaScript引擎是他们自己研发的，名为V8。 使用webkit中的webCore库来渲染页面
firefox JavaScript引擎名为TraceMonkey 渲染引擎Gecko
1-2、ES和 DOM是两种东西
ES通多DOM接口来获取文档中的元素。
正因为浏览器中通常把DOM和ECMAScript独立实现。使得二者相互独立，就像两座孤岛。
所以ES每次操作DOM时，ES和DOM之间就像两个桥之间需要过车辆。
每次链接就都需要搭建一个桥梁，搭桥还是小事，ES请求DOM的车辆过桥时，会经过一个收费站，每次都会被收费。JS引擎会消耗浏览器的性能进行缴费。
而车辆通过后桥就销毁，下次链接重新搭桥二次缴费。所以说JS与DOM每次连接都需要消耗性能 。
也正因此，有了每操作一次DOM就多做点事的理念，尽可能以最少的次数处理最多的DOM操作，以实现每过一次桥多拉点货的效果。
（VUE也正是这种理念，操作虚拟dom减少性能消耗，因此vue性能更优，另个话题来说。）
正因为二者相互独立，所以每次链接、每次访问DOM都会消耗性能！！ 可以说操作dom是十分昂贵的！！宁可处理一万次js，也不操作一次dom！！
3、ES每次修改DOM元素的代价则更为昂贵像上边说的，每次操作DOM之前，就会先访问DOM，所以也会消耗性能。
在此基础上，因为修改DOM会导致浏览器重新计算页面的几何变化、引发浏览器模板引擎的重排(回流 - 回滚流程)和重绘，进而更加消耗性能。
浏览器下载完页面中的所有资源（比如HTML、JavaScript、CSS、图片等）后，会发生如下的6步过程：
解析HTML，构建DOM树（DOM Tree）
解析CSS，生成CSS规则树（CSSOM Tree）
合并DOM树和CSS规则树，生成渲染树render树（render Tree）
布局render树，根据生成的render树来对各元素尺寸、位置进行计算，得到每个节点的几何信息。（根据视口的大小来计算元素的位置和大小）（重排会走这一步）
绘制render树，绘制页面像素信息（根据render树上每个节点的几何信息，得到每个节点的像素数）（重绘会走这一步）
浏览器会将各层节点的像素信息发送给GPU，GPU将各层合成、绘制展示到页面上
4-1、浏览器渲染引擎是如何生成渲染树（render Tree）的？先看一张图：
由上图得知如下流程：
从DOM Tree的根节点开始遍历每一个可见节点（除meta、link、script等这些标签；除display:none;的元素）
对于每个可见节点，在CSSOM中找到对应规则并将样式规则应用到对应节点上。
根据每一个可见节点，以及其对应的样式，组合生成渲染树。
不可见节点： 不会渲染输出的节点（不会显示在屏幕上的节点）有以下几种
meta、link、script等标签;