Yahoo!网站性能最佳体验的34条黄金守则——内容

Yahoo!网站性能最佳体验的34条黄金守则——内容

1、尽量减少HTTP请求次数

终端用户响应的时间中,有80%用于下载各项内容。

可以做以下优化:

  • 把所有 js 文件合并成为一个;
  • 把所有的 css 文件合并为一个;
  • CSS Sprites 是减少图像请求的有效方法。
  • 图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变,但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用,如导航栏。确定图片的坐标和可能会比较繁琐且容易出错,同时使用图片地图导航也不具有可读性,因此不推荐这种方法;
  • 使用 data:URL scheme 的方法把图像数据加载页面中.
  • 减少页面的HTTP请求次数是你首先要做的一步。

2、减少DNS查找次数

  • 域名系统(DNS)提供了域名和IP的对应关系,当你在浏览器地址栏中输入www.dudo.org时,DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。
  • 缓存DNS查找可以改善页面性能。
  • 减少主机名的数量可以减少DNS查找次数。

3、避免跳转

4、可缓存的AJAX

5、推迟加载内容

6、预加载

7、减少DOM元素数量

8、根据域名划分页面内容

把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如,你可以把用到的HTML内容和动态内容放在www.example.org上,而把页面各种组件(图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上。
你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the Carpool Lane找到更多相关信息。

9、使iframe的数量最小

ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它,这一点很重要。

iframe优点:

解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本

iframe的缺点:

即时内容为空,加载也需要时间
会阻止页面加载
没有语意

10、不要出现404错误