html中引入javascript文件的加载和执行

以前开发前端页面，经常发现html文件中js文件引入的位置改变有时会引起界面bug，某些效果出问题。这其实是浏览器对js文件加载和执行的机制所致。

浏览器顺序读取到html中的script标签，就从服务端加载js文件，每载入一个文件就立刻执行并且不是异步的——会阻塞后面页面的后续内容，这意味着浏览器会按顺序串行的加载并执行js文件，且此时后续dom对象的创建渲染以及其他资源的下载都无法执行。如果引入的js文件试图操作后面才出现的dom元素，浏览器是找不到该元素的，于是报错。

所以，保险起见，我们可以将script放到最后引入。

当然，如果使用script标签的async属性或defer属性，那么：

• 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
• 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
• 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

而且现在Opera浏览器还不支持这两个属性。