电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
Yahoo给出的34条网站加速方法
Yahoo给出的34条网站加速方法
2009-9-17 12:47:24  文/网页设计   出处:电脑软硬件应用网   

  Yahoo给出的包括Yslow规则(22条)的34条 详细说明 ,通过这此规则对自己页面进行一次全面的分析优化,可以提高你网站的加载速度。

  1.Minimize HTTP Requests 减少HTTP请求

  图片、CSS、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。

  2.Use a Content Delivery Network 利用CDN技术

  CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。

  3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

  浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

  4.Gzip Components Gzip压缩

  Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到 这里 做下测试。

  5.Put Stylesheets at the Top 把CSS放顶部

  让浏览者能尽早的看到网站的完整样式。

  6.Put Scripts at the Bottom 把JS放底部

  网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。

  7.Avoid CSS Expressions 避免CSS Expressions

  CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个    IE6去死去死!~

  8.Make JavaScript and CSS External 将JS和CSS外链

  前面讲到了缓存这个事情,一些较为公用的JS和CSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~

  9.Reduce DNS Lookups 减少DNS查找

  貌似是要减少网站从外部调用资源,我的Google分析和picasa的外链图片都算在里面了。

  10.Minify JavaScript and CSS 减小JS和CSS的体积

  写JS和CSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。


  11. Avoid Redirects 避免重定向

  再写入链接时,虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

  12. Remove Duplicate Scripts 删除重复脚本

  重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费。

  13. Configure ETags 配置ETags

  搞不清楚咋回事,总之我是在. htaccess里把它删除了。

  14. Make Ajax Cacheable 缓存Ajax

  Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率。

  15. Flush the Buffer Early 尽早的释放缓冲

  当用户进行页面请求时,服务器端需要花费200到500毫秒时间来拼合HTML,将写在head与body之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率。

  16. Use GET for AJAX Requests 用GET方式进行AJAX请求

  Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。

  17. Post-load Components 延迟加载组件

  最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader 是很好的例子。

  18. Preload components 预加载组件

  提前加载以后可能用到的东西,和延迟加载并不冲突,它的目的是为后续请求提供更快的响应,参见Google首页上的CSS sprites应用。

  19. Reduce the Number of DOM Elements 减少DOM元素数量

  复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。

  20. Split Components Across Domains 跨域分离组件

  页面组件多个来源可以增大你的平行下载量,但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费。

[1] [2] 下一页

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    提高baidu关键词排名:链轮策略
    网页设计常出现8大问题
    网页设计的形象思维归纳
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号