(点击上方公众号,可快速关注)
作者:德来
网址: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最底部:)
【今日微信公号推荐↓】