在浏览器渲染页面之前,它需要通过解析HTML
标记然后构建DOM
树。在这个过程中,如果解析器遇到了一个脚本(script
),它就会停下来,并且执行这个脚本,然后才会继续解析HTML
。如果遇到了一个引用外部资源的脚本(script
),它就必须停下来等待这个脚本资源的下载,而这个行为会导致一个或者多个的网络往返,并且会延迟页面的首次渲染时间。
还有一点是需要我们注意的,那就是外部引入的脚本(script
)会阻塞浏览器的并行下载
,HTTP/1.1规范表明,浏览器在每个主机下并行下载的组件不超过两个(也就是说,浏览器一次只能够同时从同一个服务器加载两个脚本);如果你网站的图片是通过多个服务器提供的,那么按道理来说,你的网站可以一次并行下载多张图片。但是,当我们网站在加载脚本的时候;浏览器不会再启动任何其它的下载,即使这些组件来自不同的服务器。
一般来说css放头部js放底部来确保用户至少能早一点看到界面,让网站看起来至少反应快一点,不过如果css稍微有点多了,会让屏幕白屏时间更长,
所以,并不是说把css都放顶部是一个完美的方法,而且有些js必须在页面加载前执行掉。
所以应该是这样,把必须的js和css放顶部,把不那么重要的css和js放底部。