先来个题外话，地址栏输入后，到页面加载完成，发生了什么？
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两个事件之间的时间执行的。
网友评论