Web优化的14条法则之一个人看法

最新推荐文章于 2025-12-21 10:32:18 发布

转载最新推荐文章于 2025-12-21 10:32:18 发布 · 611 阅读

文章标签：

谈我对页面性能的一些看法
   Web 页面性能优化之前有所了解但是不是很在意,但是在年前我同学向我咨询了这方面的情况,凑巧老板也在这个时候对我们的首页的速度不满意,于是我就花了点时间在这方面做了一下学习和实践.
   Web 页面性能优化的14 条黄金规则,相必大家都听说过吧,具体的我就不多说网上到次都是.参见 http://www.alisdn.com/wordpress/?p=973#comment-63 在这里我对上面的连接内容补充及一些看法.
   规则一 :尽可能的减少 HTTP 的请求数
     网上基本上都提到说把多个js,css文件合成一个已减少http的请求次数.
    这里我们需要注意两点:
       1、合并要有个度,不能一味的追求减少[原因:维护代价大;大多数网站不可能达到taobao,163这些大型网站的访问量]
       2、考虑css,js的架构性.
    对于第一点：在以前的项目中如果两个页面有相同的样式,我们开发人员包括我自己也基本上会把公用的提取出来(我想这可能是我们写java代码中养成的好习惯吧)。这里我的建议是如果这段css有至少3个地方用到请公用的东西比较多的时候才考虑提取这段css，比如网站的头和尾部。从性能优化、开发/UI可维护、测试风险评估等方面考虑,我们保证一个页面尽量保持2个css文件,一个通用的头尾[可以包括整个网站风格样式]css,一个本页面的css.
一个页面一个css对开发/UI来说能比较清晰,同时不需要担心修改css会对其他页面产生影响,这样同时也减少了测试的担心和工作量.
    对于第二点:公司需要有这方面能力的UI[高要求],所幸我们公司有哈哈.前段时间和公司的UI做过一个比较简单的沟通,从他的规划中会把css/js进行分类表现,比如他们也会存在类式于java中的基类的概念,我目前比较期待,出来后看看会是怎么样的一个结构体系是否符合他们架构的同时符合web 页面优化.
    对于第二点需要评估自己是否有能力公司是否有这样的UI
   规则三: 添加 Expires 头(或者 Cache-control )
      apache配置参考如下:
       ExpiresActive On # 启用有效期控制
      ExpiresByType image/gif A2592000 #GIF有效期为1个月
      #以下的含义类似
       ExpiresByType text/css "now plus 2 month"
      ExpiresByType text/js "now plus 2 month"
      ExpiresByType image/jpeg "access plus 2 month"
      ExpiresByType image/bmp "access plus 2 month"
      ExpiresByType image/x-icon "access plus 2 month"
      ExpiresByType image/png "access plus 2 month"
      这里在页面引用时切记在url后面加上时间戳如:
      http://image2.koxiu.com/images2009/index/close.gif?t=20090212
      这样下次如果修改的话客户端能及时更新.
   规则四: Gzip 组件(压缩页面元素)
      方法如下:
        #为了压缩
          LoadModule headers_module modules/mod_headers.so
         LoadModule deflate_module modules/mod_deflate.so
         <Location "/">
          SetOutputFilter DEFLATE
          BrowserMatch ^Mozilla/4 gzip-only-text/html
          BrowserMatch ^Mozilla/4/.0[678] no-gzip
          BrowserMatch /bMSIE !no-gzip !gzip-only-text/html
          SetEnvIfNoCase Request_URI /.(?:gif|jpe?g|png)$ no-gzip dont-vary
          Header append Vary User-Agent env=!dont-vary
        </Location>
   规则五: 减少 DNS 查询
     这里有几点需要注意:
       1.和其它站点做有图片的超连时把图片放到自己的服务器上这样在减少DNS的同时降低对对方服务稳定的依赖;
      2.引用第三方统计代码时尽量用稳定且快的,还需要注意他们里面的一下小细节.如yahoo,在给我们的统计代码中有一个js,一张gif.如果我们不用这张gif的话,js会给我们打出一张来,他的js中有一段代码是用来检查你的页面是否有这张图片,但是他的js中检查的图片有会发生变化,所以需要我们隔断时间关注一下
       3.在选择那方提供的时候在考虑使用习惯时注意他们的代码结构:
        yahoo使用了3个不同的域名:这里有两点需要注意: http://js.tongji.cn.yahoo.com;http://js.tongji.yahoo.com.cn/;http://dt.tongji.cn.yahoo.com/
        google使用了一个域名:http://www.google-analytics.com/
      这里我有点想不明白,14 条规则是yahoo提出的,为什么设计出来提供给别人的东西又要违反呢?想不明白.
      4.关于引用的性能我做了一下测试:
        加上yahoo统计代码使用的时间需要额外增加30%左右的下载时间
         加上google统计代码使用的时间需要额外增加20%左右的下载时间
    规则十: 压缩 JavaScript 和 CSS
       我做了一下测试发现有奇怪的现象,但我的文件有汉字(非注释)时压缩后在由gzip压缩的文件大小比直接用gzip压缩文件还要大.我还没找到原因实在.
       javascript的压缩一般情况下直接用gzip压缩就可以了,原因有三:第一如我上面说的;第二用其他压缩后在gzip压缩时gzip还需要花一部分时间解析你那压缩过的问题,这样增加了apache的负担;第三普通的js到次可以找的到,没有必要防止别人反向工程,互联网需要的是共享.
       如果你的js包含有你很特殊的业务逻辑,有一定的商业、安全价值的话就很有必要进行混淆处理。[混淆处理时对js的写法有比较严格的要求，这以后我会介绍这方面的东西]
    规则十三: 配置ETags
       大多数网站不需要，请设置apache：
         FileETag None

url静态话,以前一直和很多人认为的一样只是为了讨好search用,但是前段时间在实践过程中逐渐体会到其它的好处:
1.讨好search
2.防止了xss攻击
3.数据库结构字段的避免泄漏
但是采用了url静态化技术的一个前提必须是你要有对url统一的规划和定义,这个要求对架构师对所有的业务实体和功能点的划分和结构的设计很高.不然的话,对apache规则的配置是一个很大的挑战.
下面是:
RewriteRule ^(.*)/category-([0-9]+)-b([0-9]+)(.*).html$ $1/category.php?id=$2&brand=$3
这里一个规则表达式表明是一个参数