参考：http://kb.cnblogs.com/page/129756/
http://99jty.com/?p=678
http://iloveshare.sinaapp.com/?p=63
domcontentloaded和dom ready的意思不一样？？？
The rendering engine will start parsing the HTML document and turn the tags to DOM nodes
in a tree called the "content tree".
渲染引擎开始解析html文档，并将标签转换成一棵叫“内容树”的树。
It will parse the style data, both in external CSS files and in style elements. The styling information together with visual instructions in the HTML will be used to create another tree - the render
tree.
然后会解析样式数据，包括外部css和行内css。内容树和样式加在一起又变成了另一棵树－－“渲染树”。
The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.
渲染树由一个个拥有可视化属性如颜色，尺寸的矩形构成，它们按照一定正确的顺序排列着。
After the construction of the render tree it goes through a "layout"
process. This means giving each node the exact coordinates where it should appear on the screen.
渲染树完成后就是布局的过程。这个过程决定每个节点究竟位于屏幕的什么位置。
The next stage is painting -
the render tree will be traversed and each node will be painted using the UI backend layer.
下一步是绘画，渲染树通过浏览器的ui backend层将画在浏览器上，显示出来。
It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as
possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
要知道这是个逐渐的过程，渲染引擎会尽快将内容显示于屏幕，不会等所有html解析完才建立和布局渲染树，部分的内容会先解析完显示出来，剩余的部分会继续进行。
总结就是：
解析html变成内容树/DOM树，然后解析css变成渲染树，渲染树再进行布局决定每个节点的具体位置，最后将渲染树绘制于屏幕上。
dom树和渲染树的关系：
渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。
dom树建立和js执行：
这里要注意，js下载并执行的时候，会阻塞其他资源的下载和执行，因为js的操作可能涉及到dom，所以如果js执行的时候，html解析也可以进行的话，那其实很可能导致刚建成的dom树，马上要被修改，这样迭代间隔太低会导致效率问题，所以一般js下载执行，其他资源就不敢动。所以js一般是放在body标签结束前，等其他资源下载并执行完。但是我们要注意其实script标签也是一个元素节点，所以dom树建立完成，必然的前提是js下载并执行完毕，否则还有js没执行完，而且js可能修改dom，这叫什么dom建立完毕。
css放于head：
刚才文中提到，不会等到所有html解析完毕，才去构建渲染树，layout渲染树，绘制渲染树。所以css丢在head里还蛮有道理，这个时候html如果parse完1／3，那么这1／3可以优先的染上css变成渲染树，然后layout，然后绘制显示出来。。。
DOMContentLoaded和dom
ready：
DOM Ready，指的是页面解析完成的时间，在高级浏览器里有对应的DOM事件 – DOMContentLoaded，Firefox官方的解析如下：
Fired at the page’s Document object
when parsing of the document is finished. By the time this event fires, the page’s DOM is ready, but the referenced stylesheets, images, and subframesmay
not be done loading; use the “load” event to detect a fully-loaded page.
即该事件在文档解析完成时会触发。那么文档解析到底包括哪些操作呢？虽然暂不能给出一个完全的答案，但文档的解析至少应该包括以下操作：HTML文档分析以及DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，但是不包括图片、iframe等其它资源的加载。正因为如此，该事件触发的时机一般比window.onload要早，而且是在所有DOM元素都可以操作之时。
dom ready是页面解析完成所需的时间，包括dom树创建和脚本的执行。这个过程完后会触发事件DOMContentLoaded。所以dom创建完毕其实夹杂着脚本的下载和执行，毕竟脚本可能修改dom，所以只有脚本下载并执行完毕，才能实现真正意义上的dom
ready。。。。。再说如果js脚本不执行完，怎么注册上DOMContentLoaded事件呢？
例：
<div id="f">1</div>
<div id="ff">2</div>
document.getElementById("f").style.backgroundColor="red";
var A=function(){
console.log(1);
}
document.addEventListener("DOMContentLoaded",A,false);
console.log(2);
document.getElementById("ff").style.backgroundColor="blue";
结果先打印出2，然后打印出1。先打印出2，而且颜色都变化，说明dom树建立完成之前执行了所有的script，然后打印出1,说明dom树完成之后触发了DOMContentLoaded函数。