由preload prefetch引出的浏览器加载资源问题

两个秀儿文章

juejin.cn/post/691447… blog.csdn.net/qq_32682137…

关于DOMContetnLoaded与load说明：
HTML解析过程与DOMContentLoaded触发时机
没有js和css的情况下，最原始的过程是 
下载HTML文件-->解析成DOM树-->触发DOMContetnLoaded-->渲染-->布局-->绘制
**一定注意DOMContetnLoaded发生在DOM解析完毕之后渲染之前
<script defer>
	脚本下载的时候会同时dom解析，下载完成后会等dom构建完成后开始执行脚本，所以不会阻塞dom加载
	下载完成后的执行时间一定是DOMContetnLoaded触发之前
	脚本执行的顺序严格按照定义的顺序执行，跟下载完成的顺序无关
<script async>
    脚本下载的时候也会同时dom解析，一旦下载完成会立即执行脚本
	如果脚本下载完了，但是dom还没有解析完成，就会阻塞解析
	多个async脚本执行顺序不一定，不按照定义的顺序，按照下载完成的顺序

<script>
    function loadScript(src) {
        let script = document.createElement('script')
        script.src = src
        document.body.append(script)
    }
    loadScript('https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js')
</script>

DOMContentLoaded onload
onload:页面的所有资源（图片，js,css,视频等）都加载完成才触发，绑定在window对象上
DOMContentLoaded:HTML解析完成，并且构建出了DOM，时间绑定的是document对象上