前端页面html,css,js文件从加载到执行的过程

页面的加载过程

浏览器对于html的解析过程
当浏览器获得一个html文件时，会自上而下加载解析

解析过程

浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
将CSS解析成 CSS Rule Tree 。
根据DOM树和CSSTree合并为 Render Tree。(RenderTree记载着各个节点的CSS定义以及他们的从属关系)
浏览器已经能知道网页中有哪些节点、可以计算出每个节点在屏幕中的位置，然后遍历render树，并使用UI线层绘制每个节点(渲染步骤还会分为三个小步骤)
layout ：将渲染树上的节点，根据它的高度，宽度，位置，为节点生成盒子
paint：确定渲染树上的节点的大小和位置后，便可以对节点进行涂鸦
composite layer：合成层；当渲染树上的节点涂鸦完毕后，便生成位图（bitmap），浏览器把此位图从CPU传输到GPU

三个js文件并行下载，但是按我上面的理论中js应该是一个接一个的执行。然而在IE8，Firefox3.5和Chrome2都实现了js的并行下载，

 这是相当不错的，但是他还是会阻碍一些其他资源的下载，比如说图片。

加载和执行过程

创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = 'loading'。

遇到link外部css，创建线程加载，并继续解析文档。并发

遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。

async属性的脚本，脚本加载完成后立即执行。 defer==丢置尾部。 document.createElement('script')的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行。

遇到img等，浏览器创建线程加载，并继续解析文档。并发

当文档解析完成，document.readyState = 'interactive'。

文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同）

document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。

从此，以异步响应方式处理用户输入、网络事件等。