为什么css在页面head，js在body尾部

这与html页面渲染有关。
1.解析html生成DOM树
2.解析css生成CSSOM
3.合并DOM和CSSOM生成渲染树
4.计算节点在页面中的位置和大小，生成布局树
5.对布局树进行分层，生成分层树
6.而后将分层树进行渲染，生成页面。

CSS在加载过程中，不影响HTML的解析。但影响HTML渲染。
假如将css放在body的尾部，会产生一种情况。解析html生成DOM树，而后没有css。所以直接生成渲染树，然后生成布局树渲染网页。直到解析到css时，生成CSSOM。CSSOM与DOM树合并生成渲染树，然后再一次生成布局树渲染网页。
这样会渲染树多生成了一次，并且页面也多渲染了一次。造成性能损耗。
JS在加载时，HTML会暂停解析。
如果JS在页面的首部，那么会造成一种情况。长时间加载JS导致HTML无法解析，页面长时间无法响应。所以JS放在body尾部。
或者给JS添加defer/async
defer和async都是异步加载JS的方法：
不同：defer脚本加载完后立即执行。
async脚本是html完全解析生成DOM树后立即执行。
如果多个JS脚本添加defer 执行顺序是无序的。而async是按加载顺序执行的。