以前开发前端页面,经常发现html文件中js文件引入的位置改变有时会引起界面bug,某些效果出问题。这其实是浏览器对js文件加载和执行的机制所致。
浏览器顺序读取到html中的script标签,就从服务端加载js文件,每载入一个文件就立刻执行并且不是异步的——会阻塞后面页面的后续内容,这意味着浏览器会按顺序串行的加载并执行js文件,且此时后续dom对象的创建渲染以及其他资源的下载都无法执行。如果引入的js文件试图操作后面才出现的dom元素,浏览器是找不到该元素的,于是报错。
所以,保险起见,我们可以将script放到最后引入。
当然,如果使用script标签的async属性或defer属性,那么:
- 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
- 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本