script放在HTML哪里比较好？

来源：互联网发布：简易海报设计软件编辑：程序博客网时间：2024/06/09 21:57

最近有在学习《Javascript DOM变成艺术》这本书，书上的很多案例在实际运行的时候没有出现预定的结果，这些error给了我很多启发，其中之一就是script在HTML摆放的位置。

长期以来，script在HTML中的位置对我而言就是一个词：随意。而这种随意性有时又造成了一些匪夷所思的问题。比如今天运行showpic.js中的代码：

Html:

<a href="http://www.osu.edu" class="popUp">click me</a>

其中我把script放在了<head>中。令人奇怪的现象发生了，本来应该是出现的弹窗，变成了href的直接显示，而直接调用onClick = "popUp(this.href); return false;"却又完全没问题。而这两者在逻辑中完全是等价的。这就有点让人疑惑了。打开chrome调试，发现点链接是时候直接用的href，根本没有用到script，原因何在？

通过查询,在stackoverflow(强大的stackoverflow!)中找到了非常满意的答案，大家可以看这个链接：http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup。解释一下就是：

当编译器遇到script的时候，会停止对html的parse，直到script下载并且执行完了才会继续parse html。因为我的script在head里面，body之前，所以执行时根本就没有任何html部件，也就谈不上对部件的操作了。

那理想的解决方案是什么呢？如果把script放在<body>的最后是不是就可以了呢？理论上来说完全是可以的，只是对于比较大型的网站，要等所有的html部件（有些部件比如图片视频加载是很慢的）都加载玩才能执行JS的话，客户会等比较长的时间，造成比较差的用户体验。所有这个并不是完美的解决方案。

最完满的解决方法是使用async和defer，像这样：

async代表在JS加载和运行的时候，Html会继续加载，所以这样子调用HTML的部件是没有问题的（其实我不知道对部件比较多的时候可不可以，可能execute的时候想要的部件还没有加载出来）。而defer和async不同就在于defer是在所有部件加载完之后才执行的。可以根据不同的需求来选择这两个属性。

不过这个解决方案虽然堪称完美，但是还有20%的浏览器是不支持这个功能的，所以还是酌情使用吧！（吐个槽，感觉做前端要考虑各种不同的浏览器真的蛮心累的，要是有个大一统的标准就好了~私心里希望大Chrome一统天下哈哈，当然Safari也不错，至于IE，请圆润的离开吧...）

0 0