前端优化分析之 javascript放在底部

李俊良

浏览: 146123 次
性别:
来自: 北京

最近访客更多访客>>

xiaojianhx

t382159355

fushengxu

jzy996492849

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端优化思考

JavaScript CSS jQuery JSP 脚本

在很多优化法则中都提到，尽量将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放在底部，这样就可以和图片几乎同时下载，让图片尽快的下载下来

查看图片附件

分享到：

百度贴吧里面的打豆豆游戏的打200分辅助程 ... | jquery 兼容性问题 IE7出错，IE6，IE8其 ...

2010-10-28 09:29
浏览 6456
评论(25)
论坛回复 / 浏览 (22 / 13410)
分类:Web前端
查看更多

5 楼 hyj1254 2010-10-29

kjj 写道

根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了

这个不说还真不知道原因~~
另外lz的图片可以合并下

4 楼 kjj 2010-10-29

根据大牛们检验，js等资源一般放在<head>中加载时最好的方案，具体原因就不说了

3 楼 lbsnd 2010-10-29

如果把js放在底部，那么图片和js谁先加载？
如果页面都出来了，就是缺几张图片，那么用户可能就不会等了，直接就会操作，那么有用到js才能操作的内容会不会就失效了呢？应该只适合一部分放到页尾

2 楼 zhxing 2010-10-28

据我所知，这个是由于解析hmtl的解析器有关。。
把js （不关键服务）放在底部--因为解析html 是顺序解析的，可以放到最后解析
把css 放在最头部--因为css早点加载有利于页面的展示，css后加载，页面排版不全都乱了。

而且，不同浏览器还有并发量限制（在同一个域名下）。ie6 2个并发，firefox3以下版本是6个（现在不知道多少了）

1 楼 lingye 2010-10-28

这跟优化有什么关系，那不是共用一个http连接，那是同时发起了两个HTTP连接呀。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论