请问什么情况下script tag的位置可以是在HTML的head tag里面?

zhenghaohe
  • 48

最近在学习前端。遇到一个常见的问题,就是在script tag在HTML中的位置应该放哪。

有一个例子, HTML markups是这样的

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src='js.js'>
    </script>
  </head>
  <body>
  </body>
</html>

JS file是这样的

var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);

我一开始认为这个JS里面没有依赖任何目前HTML里的DOM元素,所以我放在HTML的任何位置效果都是一样的。但是运行之后发现,放在head里面是不行的,还得放在body closing tag之前。

这让我产生了一个疑问,如果这样的script都不能放在head里面的话,那什么样的script才能放在head里面?

另外我知道现在script tag有两个attribute async and defer 可以让浏览器在渲染HTML的时候,遇到了script不阻塞。而且http://caniuse.com/#feat=scri... 上面说也有94.59%的浏览器现在支持这个attr。但是我在网上看了一圈,从来没有看到有哪个网站用过这个attr。

回复
阅读 1.1k
4 个回答
✓ 已被采纳
我一开始认为这个JS里面没有依赖任何目前HTML里的DOM元素

这句话不成立。

document.body.appendChild(loadTime);这里依赖body

输出一下head里的document.body,你会得到null

但是运行之后发现,放在head里面是不行的

我测试了,是可以了,但js代码必须放到.js文件中,而不能直接放到head里。

但是我在网上看了一圈,从来没有看到有哪个网站用过这个attr

看一个浏览器兼容性就知道了,IE11以下都不支持,加上使用这个属性也没有很大的必要,把js放到最后不就行了,为什么一定要放到head中呢?

js可以放到文档的任何位置,这和文档结构本身并没有任何关系,不信你就放歌alert弹出来某个数字 ,就可以验证!

如果你的js里面有一些dom操作的话就要放到下面 正常为了不影响html的页面渲染速度 都是放在下面的

你知道吗?

宣传栏