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