当用户在浏览器中打开一个页面时，浏览器就会自动创建文档对象模型中的一些对象，这些对象存放了HTML页面的属性和其他的相关信息，因为这些对象在浏览器上运行，所以我们有时也称之为浏览器对象BOM。
浏览器接受数据流，进行加载，预加载。通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）浏览器引擎布局的过程，类似于树的前序遍历，是一个从上到下从左到右的过程。（在Dom这个层次化的节点树中，获取某个元素其属性this.attributes['XXX'].nodeValue）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面，并且还可以根据不同的文档流（文档流是文档中可显示对象在排列时所占用的位置包括：常规流，绝对定位流，浮动流）先渲染常规流再渲染其他两种，所以使用absolute绝对定位，fixed（与前者不同之处是始终显示在窗口上）会将对象从常规流中脱出，此类js操作会引起浏览器重排，就是浏览器根据新的渲染树重新绘制事件元素的子元素，兄弟元素等，带来效率问题。所以建议将改变属性操作尽量和归一处（使用类似于document.getElementById(‘changeDiv’).className = ‘changeDiv’操作类的方式，来减少重排次数）。另，已经设置position属性设为absolute或fixed的的重排操作不会影响其他元素，所以要将可能会出现事后js操作的元素事先设置为absolute或者fixed。
DOM是整个网页的核心，包含window.document这是与BOM的交集部分，BOM(Unicode规范中有一个BOM的概念,具体参考http://www.kuqin.com/webpagedesign/20081105/25815.html)的主要用途是浏览器窗口以及窗口之间的操作，与窗口有关的操作首先考虑window下的属性(目前各大浏览器已经屏蔽非点击产生的window.open(),如果您有好的方法请告知我)。页面如果包含框架iframe，则每个框架都有自己的window对象，可以通过window.frames['name名']来访问子级窗口，也可以通过parent.functionName()或者parent.document来访问父级对象（top与parent不在赘述）。DOM则是页面内容的操作。DOM其实是一个基于XML树的API，作为最终渲染树和传输流之间的解释语言。而javascript是被广泛认可的DOM操作语言，但DOM并不与javascript一一绑定，Dart等语言亦可操作。
参考：http://www.cnblogs.com/releaseyou/archive/2009/04/14/1435328.html
http://www.cnblogs.com/taoze/archive/2011/03/19/1988635.html