<title>hello world!/<title>
上面页面代码中的粗体字代码导入了defer.js脚本文件，脚本文件代码如下
var tg=document.getElementById("target");
tg.innerHTML="hello world!";
tg.style.backgroundColor="#aab";
上面JavaScript脚本只有3行:先获取页面上id为target的元素，然后修改该元素的内容和背景色。这三行代码非常简单，一眼看上去似乎没有问题但如果使用浏览器浏览该页面，将可以看到页面上id为target的元素没有发生任何变化，这究竟是为什么呢？
对于HTML5以上的元素，当浏览器解析到元素时，浏览器会停止继续解析，执行HTML页面，而是执行两件事:
1根据元素的src属性下载对应的JavaScript脚本文件。
2解析，执行JavaScript脚本文件。
当浏览器执行JavaScript脚本时，此时浏览器还没有去解析HTML页面后面的内容，它还不知道后面有id为target的元素，因此脚本文件中的var tg=document.getElementById("target");代码获取的元素不存在，所以后面的代码也就跟着出错了
解决上面错误的传统做法是:将
<head...>部分的元素移动到<body...>元素的最后面且位于<body...>元素内，所以其他元素的后面，这样就可以保证元素中的JavaScript脚本能正常获取到HTML对象了。此外，使用defer属性也可以解决该问题:defer属性会告诉浏览器必须等整个页面载入之后，解析完毕才执行该元素中的脚本，因此只要将上面页面中的脚本改为:
再次使用浏览器浏览该页面，将可以看到页面中id为target的元素的内容，背景色被修改成功，这也表明该defer属性发挥了作用
注意:defer属性只能作用于外部脚本文件，它对于元素内嵌的脚本不起作用
分享到:
閱讀更多 碼農編程 的文章
