1、BOM
BOM是Browser Object Model的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象称为浏览器对象模型，即BOM。BOM的核心对象是window，window对象也是BOM的顶级对象，其中包含了浏览器的6个核心模块：
document---即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document用于描述DOM树的状态和属性，并提供了很多操作DOM的API
frames---HTML子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立作用域和上下文
history--以栈的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。
location--提供了当前窗口中加载的文档相关信息以及一些导航功能
navigator--用来描述浏览器本身，包括浏览器的名称，版本，语言，系统平台，用户特性字符串等信息
screen--提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度
2、DOM系统
DOM是Document Object Model的缩写，即文档对象模型，是所有浏览器公共遵守的标准，DOM将HTML和XML文档映射成一个不同节点组成的树形结构，俗称DOM树，其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM被划分为1级。2级、3级、共三个级别
1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM
HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM
HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。
2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM
2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM
1的核心进行了扩展，从而可支持XML命名空间。
3级DOM -
通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML
Infoset、 XPath、和XML Base。
3、事件系统
事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和
手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：
第一根手指放下，触发 touchstart，除此之外什么都不会发生
手指滑动时，触发touchmove
第二根手指放下，触发 gesturestart
触发第二根手指的 touchstart
立即触发 gesturechange
任意手指移动，持续触发 gesturechange
第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange
触发第二根手指的 touchend
触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch) _ ___
弹起第一根手指，触发 touchend
DOM2.0模型将事件处理流程分为3个阶段，即事件捕获，事件处理，事件maopao
事件捕获： 当用户触发点击事件后，顶层对象document就会发出一个事件流，从最外层的DOM节点向目标节点传递，最终到达目标元素
事件处理： 当到达目标元素之后，执行目标元素绑定的处理函数，如果没有绑定监听函数，则不做任何处理
事件冒泡： 事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行
利用事件冒泡原理可以实现事件委托，所谓事件委托，就是在父元素上添加时间监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同事件，当目标元素的事件被触发后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理，从而减少了不必要的事件绑定，对页面性能有一定的提升
4、HTML解析过程。。。。
浏览器加载html文件后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：
用户输入网址，浏览器向服务器发出请求，服务器返回html文件，渲染引擎开始解析html标签，并将标签转化为DOM节点，生成DOM树，如果head标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，这个过程会阻塞后面的解析，引擎开始解析body里面的内容，如果标签里引用了css样式，就需要解析刚才下载好的css文件，然后用css来设置标签里的样式属性，并生成渲染树，
如果引用了外部js文件，则发出js请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析，引擎开始解析body里面的内容，如果标签引用css样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树，
如果body中的img标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签
服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因袭引擎需要重新渲染这部分内容，如果此时js脚本中运行了stylel.display= 'none',布局被改变，引擎也需要重新渲染这部分代码，直到html结束标签为止，页面解析完毕。
5、重绘和回流
当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流，比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候
当渲染树中的一部分元素需要更新属性，而这些属性只是影响元素的外观，风格而不会影响布局的，比如background-color。则就叫重绘
因此，回流必定引起重绘，重绘不一定引起回流。
添加，删除，隐藏display:none，移动元素，改变浏览器大小，改变浏览器字体大小会引起回流加重绘
visibility：hidden只重绘不回流