前端优化分析 之 javascript引用位置优化

在很多优化法则中都提到，尽量将Javascript放到页面底部，这是为什么呢

我通过firebug进行了下简单的分析

看下图

本页面首尾都存在javascript代码

我们分析得出

1、整个页面文档家在结束才开始加载CSS和js以及其他的数据

2、当顶部的所有js都家在结束之后才可以加载页面中的图片

3、顶部的common.css和common.js几乎是同时开始加载

4、底部的loader-min.js和离他最近的footer.jpg也是同时开始加载

由此，我们可以分析出，至少在这个版本的Firefox中

从http的角度看，整个document是使用的一个HTTP连接，并且必须将这个HTTP连接结束后才会创建新的连接。

css和js可以共用一个HTTP连接，他们不能和img图片使用同一个连接

css和js可以同时进行加载，但不能和图片同时加载。

从这里面可以得出的结论是

1、尽量减少整个document的大小和顶部css的大小，加快他们的加载，甚至在整个页面比较小的情况下可以将css放在底部。

2、javascript放在底部，这样就可以和图片几乎同时下载，让图片尽快的下载下来