为什么把scripts放在文档的尾部可以加快页面加载速度？

Question

bootstrap的模板页view-source:http://v3.bootcss.com/examples/starter-template/中把bootstrap核心的js放在了文档的尾部，并没有放在head里面，说是会加快加载速度，这是为啥？

Answer 1

由于页面是单线程的，当脚本的位置在head中时，且没有添加async或者defer的话，脚本就会被下载或者执行。这回阻塞页面的渲染。如果脚本的执行时间过长，或者出现错误时等情况时，都会导致页面有一段空白期，这样给用户造成页面没加载的错觉。这无疑对用户体验来说是糟糕的。当脚本放在body的最下面加载时。当脚本执行的时候，那就说明页面的dom树已经渲染完成。能程序一个较完整的页面给用户。这也就是用户感觉加载快了的原因。

Answer 2

我认为原因主要有两点。

浏览器发出请求，得到响应后，会解析HTML并识别出更多的资源（比如样式表、脚本、图片等），然后浏览器开始获取这些资源，并尽快开始渲染页面。

1、在浏览器获取更多资源的时候：HTTP规范推荐浏览器每次从同一个域名中最多只能同时下载两个文件（这大概也是很多网站把图片或者脚本单独存放在别的域名下的原因），很多现代浏览器可以同时下载更多的资源。但是尽管如此，当浏览器在下载脚本期间，不会下载其他任何文件，即使是来自不同域名的文件，所有其他资源都要等到脚本加载完毕后才能下载。当下载外链的脚本时，请求的时间、网络延迟、带宽限制都会影响速度。

2、在浏览器渲染页面的时候：如果页面中外链了CSS或脚本文件，浏览器会等这些文件加载和解析（如果是javascript代码，则还需要执行）完再渲染页面，也就是页面的渲染会被阻塞。而页面暂停渲染在用户看来就是卡顿。

另外，虽然样式表也会导致页面缓慢，但是它只需要加载并解析，而不需要执行，并且让页面内容在渲染时直接展现最终的样式也是大家认为比较友好的方式，所以一般会把样式表放在页面的头部，而把javascript放在</body>之前。

在github上有一个可以异步加载样式表的脚本也可以参考和使用：https://github.com/filamentgroup/loadCSS

Answer 3

浏览器在下载js的时候，会阻塞页面渲染，放在尾部会先显示页面再加载js，百度一下即可。

Answer 4

浏览器加载js是同步加载，如果放在head里，会阻塞其它文件的加载及dom渲染，如果dom节点还没加载完成，且js里有引用某个dom节点，会报错。

Answer 5

楼上的回答也有失偏颇，不一定所有的js都必须放在footer中，如果涉及到页面渲染方面的js还是必须放在head中，比如:

$('#main_wrapper').css({left:$(window).width()/2-480});//这种涉及到页面css渲染的js，需放在head中