页面资源加载

先来个题外话，地址栏输入后，到页面加载完成，发生了什么？

1.进行域名解析  DNS域名解析系统  -》把域名解析成ip  119.75.217.109

2.查找ip对应的主机  网络供应商 移动、联通、电信

3.tcp的三次握手（浏览器带着报文请求服务器，服务器接收到后返回给它一个报文，然后浏览器再拿着服务器返回的报文去请求数据）

4.请求入口文件  index.html  index.php  index.jsp  http请求

5.解析文档，取出资源文件，同时渲染...

理想的页面加载方式：

1.解析HTML结构；

2.加载并解析外部脚本；

3.DOM树构建完成，执行脚本；//DOMInteractive –> DOMContentLoaded

4.加载图片，外部样式表等资源表；

5.页面加载完毕。//window.onload

加载外部脚本文件有两种方式：async和defer

1.没有这两种方式，浏览器会立即加载并执行指定的脚本，导致后续html结构无法加载，阻塞页面渲染。

2.async：异步加载，加载、渲染页面和加载执行脚本并行进行。js下载完后会立即执行，很可能不是按照原来的顺序执行。而且如果脚本直接有依赖的话，可能会出错。

3.defer：延迟加载，加载后续文档的过程和js的加载并行，但是会等DOM解析完成后再执行。类似于把js文件放在页面底部引入。

DOM加载与解析中会触发的事件：

1.DOMLoading：浏览器开始解析ＤＯＭ树的时间点。

２.DOMInteractive：浏览器已经解析好DOM树了。

3.DOMContentLoaded：脚本已经执行完毕了。

也就是说defer加载的脚本文件是在DOMInteractive和DOMContentLoaded两个事件之间的时间执行的。