js放在body里面还是html外面,JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制...

(点击上方公众号，可快速关注)

作者：德来

网址：http://segmentfault.com/a/1190000004292479

一、从一个面试题说起

面试前端的时候我喜欢问一些看上去是常识的问题。比如：为什么大家普遍把 放到导航栏的下面，结果是这样的：

从上面的Timeline我们可以看出：

首屏时间和DomContentLoad事件没有必然的先后关系

所有CSS尽早加载是减少首屏时间的最关键

js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新)，所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

普通script标签放在body底部，做与不做async或者defer处理，都不会影响首屏时间，但影响DomContentLoad和load的时间，进而影响依赖他们的代码的执行的开始时间。

三、问题的答案

回到前面的问题：

script标签的位置会影响首屏时间么？

答案是：不影响(如果这里里的首屏指的是页面从白板变成网页画面——也就是第一次Painting)，但有可能截断首屏的内容，使其只显示上面一部分。

四、再进一步

所以，总算弄清楚这个众所周知的常识了。但设计开发中可能会遇到难以把所有的js放到页面最底部的情形。比如：你的页面是分模块来写的，每一个模块都有自己的html、js甚至css，当把这些模块凑到一个页面中的时候就会出现js自然而然地出现在HTML中间部分。

我们也遇到了这样的问题，所以就做了一个开源项目：Tiny-Loader —— A small loader that load CSS/JS in best way for page performance 简单好用。

回答下题目中所提到的问题，JS一定要放在Body的最底部么？如果用了Tiny-Loader，JS可以不放在Body最底部：)

【今日微信公号推荐↓】