先来个题外话,地址栏输入后,到页面加载完成,发生了什么?
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:浏览器开始解析DOM树的时间点。
2.DOMInteractive:浏览器已经解析好DOM树了。
3.DOMContentLoaded:脚本已经执行完毕了。
也就是说defer加载的脚本文件是在DOMInteractive和DOMContentLoaded两个事件之间的时间执行的。