【讨论】一个页面有20多个Js和Css， 怎样提高加载速度？欢迎各位前来围观！

Question

<link href="../css/public.css" rel="stylesheet" type="text/css" />
<link href="../css/blog.css" rel="stylesheet" type="text/css" />
<link href="../css/card.css" rel="stylesheet" type="text/css" />
<link href="../css/haitcut.css" rel="stylesheet" type="text/css" />
<link href="../css/pager.css" rel="stylesheet" type="text/css" />
<link href="../css/hot_hairstyle.css" rel="stylesheet" type="text/css" />
     //几个样式文件
 <script language="javascript" type="text/javascript" src="../javascript/jquery.js"></script> 
     <script src="../javascript/jquery.pager.js" type="text/javascript"></script> //分页插件
   <script type="text/javascript" src="../javascript/jsPrototype.js"></script>//一些通用的JS方法 时间处理,字符串格式化之类的.
   <script type="text/javascript" src="../javascript/calendar.js"></script> //博客日历
  <script src="../javascript/jquery.hiAlerts-min.js" type="text/javascript"></script> // 提示框
  <link href="../css/jquery.hiAlerts.css" rel="stylesheet" type="text/css" media="screen" /> 
  // 提示框
    <script src="../javascript/jquery.cookie.js" type="text/javascript"></script> //cookie插件
    <script src="../javascript/home/blog.js" type="text/javascript"></script> //获取博客内容 统计之类操作
    <script src="../javascript/home/homesser.js" type="text/javascript"></script> //加载用户基本信息和其他相关信息
    <script src="../javascript/home/homeVipHsser.js" type="text/javascript"></script>
 //加载VIP 基本信息和其他相关信息
  <script src="../javascript/Card.js"type="text/javascript"></script>
  //5中会员名片处理JS
   <script src="../javascript/datepicker.js" type="text/javascript"></script> //日历控件
      <script src="../javascript/swfobject.js"type="text/javascript"></script> 
     <script src="../javascript/nav.js" type="text/javascript"></script> 
     <link href="../css/datepicker.css" rel="Stylesheet" type="text/css"  />
     <script type="text/javascript" src="../javascript/column/strCut.js"></script> 
     <script src="../javascript/turn.js" type="text/javascript"></script>   //博客内容 图片旋转效果 处理JS
  <link href="../css/turnpic.css" rel="Stylesheet" type="text/css"  />
      <script type="text/javascript" src="../xheditor/xheditor-zh-cn.src.js"></script>  //xh 编辑器
    <script type="text/javascript" src="../cutpic/lhgcore.min.js"></script>   //弹出窗口插件
<script type="text/javascript" src="../cutpic/lhgdialog.js"></script>   //弹出窗口插件
<script type="text/javascript" src="../javascript/personalhome/share.js"></script> //分享 新浪 ,开心,校内  之类
    <link href="../css/message_content.css" rel="stylesheet" type="text/css" />  这个项目 全部都是 静态页面 通过JS请求后台方法.
  但是以上这些东西 总计估计有几百K了.   
1. 该怎么优化?保证最快显示.(有些JS也给压缩过了.)
2. 我看有些大的WEB 项目,也有很多 JS 他们有的放在页面中间.这样做的原因是?
   各位朋友 你们这些问题是怎么处理的? 

Answer 1

将js文件放在页面底部
gzip压缩
js文件合并。。

Answer 2

 没有 ,全部都是 html 页面.

Answer 3

sorry，看错了，全部是静态页面。用extjs框架不错。合并JS。

Answer 4

extjs 好像要收费.所以 暂时不用.

Answer 5

也不是免费的，他有版权声明
你可以不缴费，但是你要公开你的源码，上传到什么地方 忘了
再说了缴费也很便宜 才1000多块吧，哪个公司给不起？
再再说了，即使你用了，不给钱 不提交源码 有人会找你吗
ext是个小公司

Answer 6

to:bbs2241 谢谢提醒. 这贴不是讨论extjs收费不收费的.

Answer 7

合并 就是把每个页面上 需要的 js 或css 放在一个文件里吗?
 每个页面对应一个 JS .是这样吗?
 
这样的话 如果改了 其中一个js 就把相对应的 重新合并下吗?

Answer 8

是例如CSS 有的里面很少。就没必要单独一个了。放在一起。然后写好注释。还有名字不要重复。，

Answer 9

没有做过这么大的项目，没有同时用过这么多的js和css，看看各位高手如何解决

Answer 10

再慢，能慢过csdn？你的网站比csdn值钱？

Answer 11

 现在没有 csdn 慢. 等用户多了 就难保证了. 

Answer 12

1. 所有的js文件需要合并，这样可以减少连接数
2. 合并后的js可以用yui compress 压缩，压缩的level可以自己选择
3. 之后还可以启用gzip对文件进行压缩