load,DOMConetntLoaded

DOMContentLoaded

1 .dom内容加载完毕,也就是html文档被加载和解析完成

2 . 746387-20170407181220066-2064922697.png
3 .在解析html的时候，是会被阻断的，js的加载和执行是会阻塞dom的解析。

4 .当解析过程遇到script标签，就会停止解析，转而去处理脚本，如果脚本是内联的，就会执行这段内敛脚本，如果是外链的，就会先去加载脚本，然后执行，执行完毕，继续解析html文档
5 .DOMContentloaded所计算的时间，当文档中没有脚本的时候，浏览器完成文档分析便能触发这个时间，如果文档当包含脚本，则脚本会阻塞文档的加载。而脚本需要等脚本全面的css加载完毕才能执行，在任何情况下，DOMContentloaded都不会等待图片等其他资源加载完成才会触发
6 .无需等待样式表，图像，子框架的完成加载
7 .遇到 script 标签时，首先阻塞后续内容的解析，同时检查该script是否已经下载下来，如果已下载，便执行代码
8 .遇到 link 标签时，不会阻塞后续内容的解析（比如 DOM 构建），检查 link 资源是否已下载，如果已下载，则构建 cssom
9 .遇到 DOM 标签时，执行 DOM 构建，将该 DOM 元素添加到文档树中
10 .在body的第一个script资源下载完成之前，浏览器会进行首次渲染，将改script标签前面的dom树和cssom合并成一颗render树，渲染到页面中，这是白屏时间点
11 .DOMContentloaded事件的触发时间是在html文档加载完毕，并且html所引用的内联js，以及外链js的同步代码都执行完毕后触发

load

1 .页面上的所有资源，图片，音频，视频都会加载以后才会触发load事件。必然会在DOMContentloaded事件之后触发
2 .(document).load() load事件触发之后
4 .video、audio、flash 不会影响 load 事件触发。

其他

1 .现在浏览器为了更好的用户体验，是不会等到所有HTML解析完毕之后才开始构建和布局渲染树。会有一次首次渲染，尽量减少白屏时间，把js脚本放在最后，其实是希望尽量缩短首次渲染的时间

DOM构建

1 .将所有的DOM元素构建成一个树型结构，dom树的构建是自上而下的，会受到js执行的干扰

css构建

1 .将文档中所有的css资源合并

HTML文档的加载与页面的首次渲染

1 .浏览器首先下载该地址对应的html页面
2 .浏览器解析html页面的dom结构
3 .开启下载线程对文档中的所有资源按照优先级进行下载
4 .开启主线程继续解析文档，head节点

1 .css外联，继续解析后面的内容
2 .js外联，停止解析后续内容，等待资源下载完毕，下载之后立马执行
3 .head中js加载都会停止后面的dom构建，但是不会影响后面资源的下载
4 .css资源不会阻碍后面的dom构建，但是会阻碍页面的首次渲染

5 .解析到body

5.1 .里面只有dom元素，dom树构建完毕，直接渲染

5.2 .有dom元素，js外链

1 .解析到js外链的时候，js之前的dom会被渲染到页面上，js会阻止后面dom的构建，然后下载js，执行js。在js执行完毕之前，页面上不会显示js后面的元素

5.3 .dom元素，外链css

1 .外链css不会影响css后面的dom构建，但是会阻碍渲染。简单的来说就是外链css加载完成之前，页面还是白屏

5.4 .dom元素，外链js，外链css

1 .body中js前面的外链css没有加载完成之前，页面还是白屏
2 .body中js之前的外链css加载完毕之后，js之前的dom树和css合并渲染树，页面渲染出该js之前的dom结构

6 .文档解析完毕，页面重新渲染，页面所有引用的js同步代码执行完毕，触发DOMContentloaded事件
7 .html文档中的图片资源，js代码中有异步加载的css，js，图片资源都加载完毕之后，load事件触发