HTML中Javascript脚本的加载和执行

抛出问题：为什么我们建议把script标签放在</body>之前而不是head里面呢？为什么有时候我们访问DOM却访问不到呢？javascript代码是怎样的执行顺序？有没有什么操作是可以影响它的执行顺序？这一切的答案都可以从本文中获取，也就是要说的脚本的执行顺序问题。您且往下看。

理论支持：要解决上面的问题，我们需要明白在html中javascript的加载和执行顺序问题，先了解几个知识点。

在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载显示

上面这句话通俗的说：就是当一个script标签被执行，在它之前的HTML元素可以访问，之后的就不成。所以也就是为什么通常建议将script放在body结束标签之前，dom之后。

例子：

HTML中Javascript脚本的加载和执行

这里打印出获取节点的个数为0，也就是获取不到。

回答问题：所以由于javascript加载执行的特质。所以如果我们将标签放在head里面，如果javascript文件过大，就会一直解析执行，导致后面DOM没加载，页面出现空白。而且如果我们有访问DOM的操作还会出现获取不到的情况。那有什么操作可以影响javascript的执行顺序呢？

defer和async

共同点：

不同点：

defer是告诉浏览器，立即下载，延迟执行。延迟到什么时候呢，延迟到整个页面都解析完毕之后再执行。也就是遇到</html>标签后再执行。最好只包含一个延迟脚本。
async是不让页面等待脚本下载和执行，从而异步加载页面其他内容，建议异步脚本不要在加载期间修改DOM

一般defer更加适用于现实场景。

HTML中Javascript脚本的加载和执行

蓝色：代表js脚本网络加载时间

红色：代表js脚本执行时间

绿色：代表html解析。

很清楚的知道，如果我们存在的操作dom元素，那么一定确保在文档解析完成后再执行脚本，不然会获取不到。

这里比较的是脚本的正常执行和加入defer属性或者说async属性。

经常我们会看到window.onload，这个怎么个加载顺序呢？

load事件的触发就是页面完全加载完毕，通defer貌似一样呢，那谁先执行？

HTML中Javascript脚本的加载和执行

由此可以看到先执行defer属性，然后是onload

那么还有我们经常使用jquery框架的$(fucntion(){}) 完整写法就是 $(document).ready(function(){}); 意思是dom加载完成后执行。首先$(function(){})不会被覆盖，window.onload会被覆盖，这个理解函数就知道为什么。

HTML中Javascript脚本的加载和执行

结果：

HTML中Javascript脚本的加载和执行

因此可以看到，$(function(){})先执行，并且不会被覆盖。就相当于原生js的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容加载前（如图片等）执行，而window.onload是页面所有资源(图片、文件啥的)加载完成后才执行。defer都会在这两个之前。

执行顺序： defer > $(function () {}) > window.onload

DOM文档加载步骤：