页面加载过程中的三个事件

页面在加载的时候会先后触发两个事件:document的DOMContentLoaded,以及window.onload事件.

DOMContentLoaded

MDN上的解释是当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。IE9及其以上版本兼容.
此时的document.readyState == ‘interactive’.

$(document).ready()
其实并不存在document.ready这样的原生事件。在jQuery中,$(function(){})和$(document).ready(function(){})相同,都是用来表示文档加载完成,但是页面的其他资源,例如<img>,<iframe>有可能未加载完成.
此时document.readyState == ‘interactive’ 或者是 ‘complete’。
原生js实现 $(document).ready() 方法，其实就是监听documnent.readyStateChange事件，查看是否document.readyState == ‘complete’。参考

window.onlaod
此时HTML文档全部解析完成，依赖的所有资源都已经解析完成。
此时,document.readyState == ‘complete’

关于document.readyState
这个只读属性用来描述html文档当前的加载状态.有效的值有:
loading:加载中
interactive:文档加载解析完毕,但是子资源可能还未加载完成.
complete:文档加载解析完毕,全部资源加载完成.

HTML 文档的解析和资源加载
浏览器对于html文档里面的所有的资源(类似于<img><link><script><iframe>)都是并行加载。主线程不会等到一个资源加载完才开始加载下一个.它会同时开启多个下载线程(可能是4-6后者N个,不同的浏览器并行下载数不一样).而对于<script>来说就有些特殊,他的下载和执行都会阻塞主线程,也就是说当HTML文档的解析遇到<script> 时候，浏览器就不会继续往下解析html 文档。后面的资源也不会开始下载。只有等到<script>加载执行完成后,主线程才会继续往下解析html 文档。

这样设计的考量是js文件有可能会修改DOM树,所以稳妥的做法是先暂停html文档的解析.在chrome 上,还有一种预解析的技术。就是在并发解析多个<script>标签里面的内容,如果发现某个<script>的内容不改变DOM树,那么主线程就会直接使用这个结果,否则就放弃,主线程自己再解析。

但是无论怎样，<script> 都是按照在页面中出现的顺序来执行的。

ps:以下内容纯属胡说
对于<style><link>的加载和解析就完全是异步的.因为除了主线程之外,每个页面还有一个渲染线程.解析html文档生成DOM树和渲染页面完全是并行的。

参考：
http://blog.****.net/talking12391239/article/details/21157263
https://www.cnblogs.com/daishuguang/p/4193432.html
https://www.cnblogs.com/Walker-lyl/p/5262075.html
http://blog.****.net/lxcao/article/details/52861953

如有纰漏，欢迎指出，反正我就是当笔记一样给自己看的。