html改变head位置,请问什么情况下script tag的位置可以是在HTML的head tag里面？

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

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

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。