HTML中Javascript脚本的加载和执行

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

---

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

• 在html中嵌入javascript代码，两种形式：直接在页面嵌入JavaScript代码和包含外部的javascript文件（通过src属性）
• 脚本执行顺序从上到下，从左到右
• 带有src属性的script标签里面，不应该在包含代码，否则会被忽略

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

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

例子：

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

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

defer和async

共同点：

• 都对javascript的执行顺序有影响
• 是对外部文件有效

不同点：

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

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

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

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

绿色：代表html解析。

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

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

window.onload以及query的DOM加载函数

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

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

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

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

结果：

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

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

DOM文档加载

DOM文档加载步骤： 

1. 解析HTML结构 
2. 加载外部的脚本和样式文件 
3. 解析并执行脚本代码 
4. 执行$(function(){})内对应代码 
5. 加载图片等二进制资源 
6. 页面加载完毕，执行window.onload

script在html4.01加入了6个属性：http://www.w3school.com.cn/tags/tag_script.asp

参考资料

    http://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html

    https://www.cnblogs.com/lizonghui/archive/2012/09/13/2683706.html

    http://blog.csdn.net/zp1996323/article/details/50281397