现在的位置: 首页 > 综合 > 正文

如何加快页面加载速度?

2013年12月07日 ⁄ 综合 ⁄ 共 3404字 ⁄ 字号 评论关闭

如何如何咧?yahoo在这方面给出的参考。

1. 减少HTTP请求次数 

80%的反应时间是在前端(浏览器)需要下载页面中包含的元素,比如图片,样式表,Flash动画等等。减少这些页面的请求是加速的关键

图片:可以把很多小图片合成一张单独的图片。总大小差不多,但是可以减少HTTP请求的次数,CSS Sprites 是一个很好的减少图片请求的方法,方法是把很多张图片合成一张大图,然后用CSS里面的background-image 和 background-position 属性来显示用来被显示的图片

合成文件: 减少HTTP请求的另一个好方法是合成文件,比如把所有的样式表合成一个大的样式表,把Script合成一个大的Script。不过当一个网站的样式或者Script在每个页面都不一样的时候,合成工作就变成一个巨大的挑战。

 

2. 使用CDN (内容分发网络)

    其基本思路就是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,cdn系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

 

3.指定过期时间

浏览器(或者Proxies)可以用Cache来减少HTTP请求的次数和大小,从而加速页面的加载速度。页面中如果加了过期时间的头,就可以告诉浏览器什么元素可以被放在缓存里面,比如【Expires:Thu, 15 Apr 2010 20:00:00 GMT】就可以用来告诉浏览器,这个养的结果可以一直被保存到2010年的4月15号

用过你的服务器用的是Apache,可以用 ExiresDefault来从当前时间设置过期时间,比如【ExpiresDefault "access plus 10 years"】可以用来告诉浏览器从现在开始这个文件可以保存10年

但是问题是,如果你用了Cache,那么当你的网站的Script等文件更新的时候,就需要另外起名字否则这样的文件也将从Cache里面读取,就会出问题。

4.压缩结构(GZIP)

拿HTTP/1.1来说,浏览器可以在HTTP 请求中指定压缩的方式,比如【Accept-Encoding:gzip,deflate】,那么服务器就就知道浏览器可以通过【Content-Encoding:gzip】压缩。

Gzip可以减少回应的数据到70%,而且今天通过浏览器的网络传输,有90%支持Gzip,你可以用Gzip来搞HTML文档,样式表,XML,JSON等等。然而图片和PDF不可以用GZip,他们已经被压缩了

5.样式表文件放在顶部
6.脚本放在底部

    5和6实际是想说优化页面元素的显示顺序。

    首先加载页面最初显示的内容和与之相关的JavaScript和CSS
    然后加载DHTML相关的东西
    像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载

7.不在css中使用表达式

比如【background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );】

这样的语句被调用的次数远远超过用户的想象,它不仅仅在页面加载和Resize的时候被调用,而且当滚动条滚动,甚至鼠标在页面上移动的时候,都会被调用,这样会产生上万次调用造成性能下降

另外

使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片
      使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥

8.将javascript和css文件分离到单独的文件

    在HTML里面写的JavaScript和CSS在每次请求页面的时候都会被下载,而分离的JavaScript将被浏览器Cache住,这样的好处就是不会重复下载而减少HTTP请求的次数

9.减少dns查询

    DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好

10.精简javascript代码

    可以使用工具JSMin和YUI Compressor来进行JS压缩

11.避免重定向

Redirect通常使用301和302状态码,下面是一个301回应的例子

      HTTP/1.1 301 Moved Permanently

      Location: http://example.com/newuri

      Content-Type: text/html

浏览器将自动把用户带到对应的页面去

主要的问题是Redirects减慢用户体验的速度。在HTML文档中加入Redirect,那样的页面在得到新的HTML之前什么也不会做

12.去掉多余的脚本

不要在页面中使用两次<script src="example.js"></script>两次,它将增加页面结果奇怪的风险。

在IE中同样的JS请求将被请求两次,而在Firefox中,第一次请求的时候,它已经被Cache住,所以只被请求了一次。

13.配置实体标签

Entity Tags(ETags)是一种服务器和浏览器检查元素是不是在浏览器的Cache中的一种机制,它是通过last-modified data来验证的。一个ETage是唯一标识元素Version的字符串,比如下面的回应头

      HTTP/1.1 200 OK

      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

      ETag: "10c24bc-4ab-457e1c1f"

      Content-Length: 12195

以后,如果浏览器必须验证这个元素,它可以用IF-NONE-Match传递到这个服务器,如果匹配,一个304的状态码被返回从而减少了12195个字节的传输

      GET /i/yahoo.gif HTTP/1.1

      Host: us.yimg.com

      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

      If-None-Match: "10c24bc-4ab-457e1c1f"

      HTTP/1.1 304 Not Modified

问题是ETags必须用一个服务器来处理所有的服务,如果一台服务器给的Etag需要在另一台服务器上验证,那么将通不过

所以,当你的ETags不匹配的时候,你的客户将得不到304的状态码而是必须从新返回 200字节左右的回应,然后问题还不仅仅与此,如果你的服务不是建立在一台服务器而是多台,那么,你的用户将得到相当慢的反应,你的服务症消耗恨道的贷款,Proxies也不能有效的Cache你的上下文。不管你的元素是不是有个Expires Header,不管你的用户是Reload还是Refresh,Get请求还是被发了出去

所以你不能享受ETags带来的方便,那么就把他们统统移开,在Apache中,你可以这样配置【FileETag none】

14.可缓存的ajax

    比如用户的地址这些很长时间都不将被改变的信息,可以被Cache住,这样的好处是,和上面所说的差不多,减少请求的次数,但是当Email信息的时候,就不能这么做了,因为实时更新Email的内容将非常重要

 

15. HTML的技巧

    1)不要使用嵌套table,而使用非嵌套tables或者div,将基于大块嵌套的tables的layout分解成小tables,这样显示时不用加载整个页面(或大table)的内容;

    2)指定图像和table的大小

    如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作
    这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变
    image使用height和width
   table使用table-layout: fixed并使用col和colgroup标签指定columns的width

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/grace_qian_bj/archive/2009/12/01/4916868.aspx

抱歉!评论已关闭.