最近在学习前端。遇到一个常见的问题,就是在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。
这句话不成立。
document.body.appendChild(loadTime);
这里依赖body
。输出一下
head
里的document.body
,你会得到null
。