前端问题总结

浏览器对象模型（BOM，Browser Object Model）是以window对象为基 础的，这个对象代表了浏览器窗口和页面可见的区域。window对象也被复用为ECMAScript的Global对象，因此所有全局变量和函数都是它的属性，而且所有原生类型的构造函数和普通函数也都从一开始就存在于这个对象之上。
要引用其他window对象，可以使用几个不同的窗口指针。

通过location对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性，可以改变浏览器URL中的某一部分或全部。
使用replace()方法可以替换浏览器历史记录中当前显示的页面，
并导航到新URL。
navigator对象提供关于浏览器的信息。提供的信息类型取决于浏
览器，不过有些属性如userAgent是所有浏览器都支持的。
BOM中的另外两个对象也提供了一些功能。screen对象中保存着客户端显示器的信息。这些信息通常用于评估浏览网站的设备信息。history对象提供了操纵浏览器历史记录的能力，开发者可以确定历史记录中包含多少个条目，并以编程方式实现在历史记录中导航，而且也可以修改历史记录。

文档对象模型（DOM，Document Object Model）是语言中立的HTML和 XML文档的API。DOM Level 1将HTML和XML文档定义为一个节点的 多层级结构，并暴露JavaScript接口以操作文档的底层结构和外观。
DOM由一系列节点类型构成，主要包括以下几种。
Node是基准节点类型，是文档一个部分的抽象表示，所有其他类型 都继承Node。
Document类型表示整个文档，对应树形结构的根节点。在JavaScript 中，document对象是Document的实例，拥有查询和获取节点的很多方法。
Element节点表示文档中所有HTML或XML元素，可以用来操作它 们的内容和属性。 其他节点类型分别表示文本内容、注释、文档类型、CDATA区块 和文档片段。

DOM编程在多数情况下没什么问题，在涉及某些元素时会有一点兼容性问题。因为这些元素分别包含脚本和样式信息，所以浏 览器会将它们与其他元素区别对待。
要理解DOM，最关键的一点是知道影响其性能的问题所在。DOM操作 在JavaScript代码中是代价比较高的，NodeList对象尤其需要注 意。NodeList对象是“实时更新”的，这意味着每次访问它都会执行一次 新的查询。考虑到这些问题，实践中要尽量减少DOM操作的数量。
MutationObserver是为代替性能不好的MutationEvent而创造的。