DOMcontentload与load
简介：
DOMContentLoaded与load简介
DOMContentLoaded事件在页面文档加载解析完毕之后马上执行。而不会等待图片文件和子框架页面的加载
onload
load事件会在页面所有资源被加载进来之后才会触发load事件。load时间在DOMContentLoaded事件触发之后
兼容性
onload事件所有浏览器都支持，DOMContentLoaded事件，高级浏览器均支持E6、IE7仅支持onreadystatechange，更低级的ie用doscroll事件来检测
要在DOMcontentload之后进行一系列操作，那么了解每个文件的用途以及在浏览器中的表现形式至关重要。
浏览器的渲染流程简介：
解析HTML文档构建DOM树——构建渲染树——渲染树布局——绘制渲染树
CSS篇
测试方法：
引入外部css+内联css样式来测试。然后对外部的css进行不同的处理，增加响应时间或者timeout请求
测试结果：
当外部css长时间处于pending中。页面会处于白屏的状态。当请求超时之后，页面会展现内联样式或者其他浏览器自带样式
分析结论：
为了防止页面重复渲染，浏览器多次重绘页面，降低性能。所以css会素在页面的渲染，但是不会阻塞页面DOM的解析
js篇
测试方法：
页面中插入内嵌js或者引入外部js来测试。
测试结果：
js会阻塞页面解析
分析结论：
js的加载和执行都会阻塞页面
js与css篇
一个完整的页面中css和js文件都不可缺少。当一个页面中css和js出现某些情况时候浏览器又会表现怎么样的状况。
测试方法：
页面中引入内嵌js，内嵌css，外联css，外联js，并且更改不同的顺序和响应时间来解决
测试结果：
- 当内嵌js在前时，浏览器会先执行js，在按照顺序向下加载。
- 当外联css在前时，内嵌js和外联js在后，此时会等到浏览器解析完毕css之后才会执行内嵌的js和外联js
- 浏览器的css在解析完毕之前会阻塞之后js的执行
测试分析：
为了保证浏览器的性能最优，浏览器会按照脚本的顺序来执行。js必须等位于它的css样式表之前加载和解析完之后才会执行。同样js的执行也会阻塞页面。但是js不会阻塞之前已经解析dom结构的重绘
页面篇
页面中包含的内容更加丰富和多样，在浏览器对于页面是怎么解析的？
1.浏览器下载html开始对html进行解析会按照顺序进行解析。
当html过于庞大浏览器会进行边下载边解析。gzip的格式可以进行边下载边解析。减少了请求的字节数。
2.解析css
- 内联的css会进行解析同时解析dom
- 外嵌的css会进行下载，并且解析
3.解析到js
- 会先解析脚本之前的css文件，如果解析完毕会立即执行js，执行js的时候会中断dom的解析和css的解析。
- 脚本的下载优先级较高。当页面队列中有多个请求时，例如图片。脚本的下载的优先级会提高。
- css和js的优先级按照解析的顺序来计算
4.解析到图片，svg等其他资源
如果碰到js的时候浏览器会优先解析js。在执行其他操作
5.资源长时间不响应，浏览器的处理流程？
当解析被阻塞的时候。一个轻量的解析器会扫描剩余的HTML，来解析HTML中的URL
6.资源过大。浏览器解析工作？
浏览器解析文档的时候，会进行边解析边渲染。不会等待所有的解析完毕才开始渲染页面
7.如何优化页面性能？
- 减少页面的请求数量，合并css优化css响应时间。
- 将css放入头部，js放入尾部减少页面白屏时间
- 对css和js进行合理压缩
- 触发页面预检来减少请求时间
- 增加缓存来减少请求时间
回归主题DOMcontentload之后我们进行哪些操作会影响到页面
1.绑定事件
DOMcontentload之后。我们可以访问到dom元素。同时可以对元素进行绑定时间，js执行的时间会影响load时间，但是不影响页面的展示
2.加载css、js、图片
DOMcontentload之后，只是可以访问dom节点。但是并未完全加载完毕页面的资源。如果加载js和css会影响页面其他资源的加载。因为css和js的优先级较高。浏览器可以并行加载。会增加load的时间。同时加载css会使得页面重绘。加载js会阻塞其他页面。加载图片等资源会占用网络资源。
3.修改dom操作
DOMcontentload之后直接修改dom操作。会使得页面重排增加页面load时间。影响视觉和用户体验。
4.测试方式：
测试项目的地址：
https://github.com/qinchenguang/TestLoad