如何让你的网站显示速度更快

1、最小化的HTTP请求（content）

因为在一个页面中所花费的时间大多数是在scripts、stylesheets、images和flashs等等，这些都是通过HTTP请求来加载的，这些大概占用了加载时间的70%到80%。因此， 减少这些加载时间可以大大优化页面的加载速度。使用下面的几种方法可以有效提高加载速度：

1. 将所有的scripts脚本代码组合成一个单独的script脚本代码，将可以合并的所有css合成为一个stylesheet.
2. CSS Sprites（国内称为：CSS精灵），是一种网页图片应用处理方式。它允许你将一个页面设计到的所有零星图片包含到一张大图片中去（要求：不高于200KB的单张图片，因为这样可以保证载入时间和未处理前的时间差不多）.
3. 图像映射（Image Maps）：就是图片分成几个区域，或者被称之为“热区”的图像；点击“热区”会显示一个网页。注意：除AltaVista、Google支持Image Maps，其他引擎不支持。当”蜘蛛“程序（即爬虫）遇到这种结构时，往往不知所措。因此在sem优化（http://baike.baidu.com/link?url=3HuwBV0Oq8OrU5tcfG6TIHjWrQsXsDqTeNHZ_BEfVbsOONRzc99ge0cYiYSxfJV6b0x0c4-ihCoCZi8AX-qvtK）中，尽量不要设置Image Map链接
4. 内嵌图像（Inline images）使用data URI scheme

举例：假设有以下图像

http URI scheme 标准形式：

data URI scheme方式：

上面标签内容解析：data-取得数据的协议名称

           image/png-数据类型

       base64-数据编码方式

   iDJJK....-编码后的数据

           :,;-data URI scheme指定分隔符

这样，我们就将一张图片数据内置到http中，节省了一个HTTP区别请求。

在css中使用data URI scheme：body{background-image:url("data:image/png;base64,iDDJJ....");}

注意：浏览器不会缓存这种图像，若该图像在网页很多地方使用，会加大网页内容，延长下载时间。

解决办法：在一个css class中加入data URL，在需要显示图像的区块调用这个class

例如：.logobg{background:url(data....)}

..hello..

....

IE8之前不支持data URI scheme

解决办法：使用XHTML解决data URI  scheme 浏览器兼容问题

2、使用CDN（Content Delivery Network）内容分发网络（服务器server）

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

3、添加缓存字段（Expires）或一个缓存控制头（Cache-control）（服务器server）

在这个规则中有两个方面的内容

1. 对于静态的组件，例如不经常变化的css、js等，可适当设置缓存时间，使得浏览器下次只拿对应缓存的文件，而不用想服务器发出请求。（注意服务器的最长缓存时间）
2. 对于动态的组件，即经常变化的，例如：一些图片等。利用Cache-Control头可以控制浏览器不要拿缓存，而是向服务器发出请求

4、压缩技术（Gzip Components）（服务器server）

将scripts、stylesheet、images和flash等等压缩为一个zip文件，之后将zip文件链接进页面来减少http request回调来加快加载速度。通过HTTP 头的Accept-Encoding为gzip，deflate之后再response头设置Content-Encoding：gzip来解压压缩包文件，就可以将这些文件导入到页面的对应部分。 注意：当上述文件数量比较少时，不建议使用上述方法，因为压缩后有可能比未压缩前还大，形成相反效果。

5、将样式（stylesheet）放在顶部，将脚本（scripts）放在底部（CSS\javascript）

将css放在顶部，可以先加载，然用户先看到网页的整体样式，将脚本放在底部，可以在用户看到整体样式之后显示功能设置，当然这些脚本前提是不影响到样式显示效果。

6、避免使用css表达式（CSS）

css表达式会 增加运算量，影响网页加载速度。

7、通过外联方式加载css和javascript到页面（javascript、CSS）

这个不会与减少HTTP request请求加载组件冲突。因为：如果不用外联方式加载文件，则每次加载页面的时候，都需要去加载内联的javascript和css内容，这样使得HTML容量变大，从而引起下载速度变慢。而使用外联方式的好处在于浏览器会缓存这些文件，第二次加载页面的时候浏览器可以拿这些文件的缓存，从而使HTML页面“变小”。因此，需要看具体情况，再采取对应的最有效的措施。

8、减少DNS查找次数（content）

9、压缩javascript和css（javascript、CSS）

压缩javascript和css，使得文件变小，因而在加载中速度加快。这里有两个js的压缩工具：JSMin和YUI。

10、尽量避免重定向（content）

重定向时会使得浏览器地址栏发生变化。HTTP头里包含了重定向所需的信息。响应的主体一般都是空的。301或者302响应都不会被实际缓存，除非添加额外的头部，比如Expires或者Cache-Control指明需要将这些缓存。meta refresh标签和javascript也可以将用户重定向到不同的URL，但如果你必须使用重定向， 最好的办法是使用标准3XX HTTP状态代码，以便使后退按钮能够工作正常。

有一种情况需要注意的：那就是当地址中应当有一个左斜线的时候却没有。例如：http://www.baidu.com/ test会导致一个301效应并重定向到http://www.baidu.com/ test/。

使用重定向的常见场景：

1、当 注册或者登陆成功的时候需要让用户知道页面的跳转

2、当连接 旧网站和新网站时

11、移除重复的脚本代码（javascript）

12、配置ETag（实体标签Entity Tag）（server）

ETag是属于HTTP协议的一部分，也是所有Web服务器都应该支持这个特性。它的作用是用一个 特殊的字符串来表示某个资源的“版本”，当浏览器来请求时，可以比较，如果ETag一致，则表示该资源没有修改过，浏览器可以使用自己缓存的版本。

13、使AJAX可以缓存（content）

AJAX是用于服务器异步传输数据的，每一步都需要新的数据。但是，在某些情况下，我们需要认识到AJAX缓存同样也很重要。例如：当我们搜索的内容是通过AJAX形式得到结果的时候，当用户搜索同一个内容而且Last modified没有修改的情况下，可以使用上次的缓存。一些原则也适用于这里，例如：压缩组件、减少DNS次数、最小化javascript、避免重定向和配置ETag等。

14、尽早刷新缓冲（server）

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

15、用get方式进行AJAX请求（server）

get方法和服务器只有 一次发送数据，而post要 两次，一次是发送头部，另外一次是发送数据。

16、延迟加载组件（content）

最先加载必须的组件进行页面的初始化工作，然后再加载其他。

17、提前加载组件（content）

提前加载以后可能用到的东西，目的是为后序请求提供更快的响应。

18、减少DOM元素数量（content）

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

19、跨域分离组件（content）

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

20、减少iframe数量（content）

需要有效的利用iframes。iframe优点：有利于下载缓慢的第三方内容；缺点：即使为空也要消耗较大的资源，会阻止页面的onload。

21、不要出现404页面（content）

无意义的404页面会影响用户的体验还有资源的浪费。

22、缩小cookie的大小（cookie）

cookie在服务器及浏览器之间通过文件头进行交换，尽可能缩小cookie体积，设置合理的过期时间能够有效提高效率。

23、针对web组件使用域名无关性的cookie（cookie）

这里的组件多指静态文件，例如：图片css等。yahoo!的静态文件都在yimg.com上，客户端请求静态文件的时候，减少了cookie的反复传输对主域名（yahoo.com）的影响

24、减少DOM的访问（javascript）

有一下三条建议：

1、缓存已经访问过的元素。

2、离线更新节点，然后将它们添加到树。

3、避免javascript输出页面布局。

25、开发智能的事件处理程序（javascript）

26、选择而不是@import（CSS）

27、避免使用过滤器（Filter）（CSS）

28、优化图像（images）

尽可能使用PNG格式图片，因为与GIF和JPG图片相比，PNG有更多的功能和更小的尺寸。可使用工具对PNG进行优化。

29、不要在页面中使用缩放的图片（images）

有时候没有找到适合大小的图片，会对图片进行拉伸等处理，这样做会使图片很难看，进而使页面难看，影响用户体验。

30、使用更小及可以缓存的favicon.ico（images）

31、保持组件在25K以下（mobile）

32、将页面组件打包成一个多部分组成的文档

将页面组件打包成一个多部分组成的文档目的是减少HTTP请求。注意：当你使用这条原则的时候，必须检查是否支持。

33、避免空的图片路径（src）（server）

避免空的图片路径，因为这样会产生一次请求。