JavaScript在浏览器中如何加载

JavaScript加载是从他开始那一刻一直到浏览器按照事情顺序完成所有的事为止，大概步骤可以分为创建 document 对象==>文档解析完成==>文档加载完并执行完，接下来在文章中将和大家详细介绍。

加载过程

（1）解析 web 页面也就是解析 HTML 元素和他们的文本内容，将对像和文本添加到文档中，document处于加载中

文档解析

（2）通过link引入 外部 css，创建线程，进行异步加载。

（3）通过 script 引入外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞等

（4）等待js加载后为其设置有async、defer，浏览器创建线程异步加载，其中 async在脚本加载完成后立即执行（注意 ：异步加载应禁止使用 document.write()）

（5）遇到 img 等带有 src的属性，应该先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档，如果 看到标签就直接生产 dom 树，不需要等着 img 加载完 scr。

（6）文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不同，但同样禁止使用 document.write()）;

（7）document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

（8）当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执行加载完之后），document.readyState = 'complete'，window 对象触发 load 事件。

（9）从此，以异步响应方式处理用户输入、网络事件等

注意

我们在写程序的时候最好将script标签写在下面，虽然写在上面不仅可以操作div，又可以在dom解析完就立刻处理，这样使效率更高，但是最好还是写在最下面

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

总结：