高性能网站建设有哪些规则?高性能网站建站的1规则

本文根据《高性能网站建设指南》《High Performance Web Sites》，一书进行总结，加上自己的理解和新的知识点进行补充添加。这些原则大多数都非常实用，适合站点架构师、前端工程师。其中对于前端工程师的意义更大一些。

规则1——减少HTTP请求

只有10%到20%的最终用户响应时间花在接收请求的HTML文档上面。剩下80%到90%的 时间花在为HTML文档所引用的所有组件（图片，脚本，flash，样式表等）进行的HTTP请求上。因此改善响应的最简单途径就是减少组件数量，由此减少HTTP请求的数量。

图片地图

使用map标签进行坐标定位，减少图片数量。导航栏中使用了多个图片时候可以使用。

缺点很多：手工方式很难完成坐标定位，且容易出错。除了矩形之外也难以定义其他形状，通过DHTML定义的图片IE中还无法工作。不建议使用。

CSS Sprites (雪碧图/精灵图)

通过把多个图片合并到一个图片，然后利用background-position进行定位，比使用分离图片快50%。图片地图中的图片必须是连续的，而CSS Sprites则没有这个限制。也有人认为合并后的图片比分离的图片总和还要大，合并后的图片包含附加的空白区域。实际是变小的，雪碧图降低了图片自身的开销。（颜色表，格式信息，等等）

如果页面中背景，按钮，导航栏，链接需要使用很多图片，可以使用。优点——干净的标签，很少的图片和很短的响应时间。

缺点：后期修改麻烦，难以维护，牵一发动全身，没有之前改一个图片就好了容易

雪碧图制作方法:

1. 百度搜索CSS Sprites 可找到相应制作软件软件下载地址
2. gulp等自动化工具，自动合成
3. ps自己制作

内联图片

使用 data:URL的模式在WEB页面中包含图片，但无需任何额外的HTTP请求。我们都熟悉http:模式的URL。其他类似模式包括ftp:,file:和maito:

data:url模式

在1995年提出来：允许将小数据块内联为立即数，数据就在url自身中。

什么是内联图片

内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为：data URI scheme。通常我们存储的图片在网页中需要写：

<imsrc=”http://blog.xmaoseo.com/images/xmaoseo.jpg”/>

而内联图片写法会是

<imsrc=”data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA”/>

内联图片语法

<imsrc=”data:image/png;base64,iVBOR….>

data:url模式

在1995年提出来：允许将小数据块内联为立即数，数据就在url自身中。

什么是内联图片

内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为：data URI scheme。通常我们存储的图片在网页中需要写：

<imsrc=”http://blog.xmaoseo.com/images/xmaoseo.jpg”/>

而内联图片写法会是

<imsrc=”data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA”/>

内联图片语法

<imsrc=”data:image/png;base64,iVBOR….>

uote>

1. data – 取得数据的协定名称
2. image/pn– 数据类型名称
3. base64 – 数据的编码方法
4. iUANR…. – 编码后的数据
5. : , ; – data URI scheme 指定的分隔符号

这种图片格式无需额外的HTTP请求是不错，但是还有一个重要的一点，浏览器不会缓存这种图像。 data url 节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。还有一点 IE8 以下都不支持这种图像，所以还是IE6的用户就比较悲催了。并且超过 100kb 图像使用base64编码也会增大图片大小。导致网页整体下载量增加。 (BASE64编码图片导致网站浏览缓慢崩溃http://blog.xmaoseo.com/125.html) 但是很多聪明人做法是把背景平铺类图片作为内联图片使用，这样效果很不错。也减少了HTTP请求加快了网站速度。那么你可能会问到如何获取图片的base64编码呢。网络上有很多免费的base编码和解码工具，但是有个最简单方法就是我们写一个PHP文件。使用base64_encode()进行编码：比如：

echo base64_encode(file_get_contents(‘211-11.JPG’));

如何解决网页下载延迟问题。最简单一个方法就是用写成CSS里的背景去调用CLASS 类名就可以了。比如咱们用上面的例子：

.blogxmao{background:url(data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA”)}

<div>..内容…</div><div>..内容…</div>

合并脚本和样式表

根据模块化原则， 我们应该将代码放到多个小文件中，但是这样会降低性能，因为每个文件都会导致一个额外的http请求。理想情况，一个页面不应该使用多余一个的脚本和样式表。世界前十网站脚本和样式表一般不超过2个。

使用模块化工具，比如seajs,requirejs进行优化。不然随着文件的增多，手动合并将会很麻烦。

规则2——使用内容分发网络 CDN

内容分发网络（conten delivery network）是一组分布在多个不同地理位置的Web服务器。可以使用CDN服务提供商。

CDN优点：

缩短相应时间，备份扩展存储能力和进行缓存，缓和WEB流量峰值压力(获取天气，娱乐体育新闻等等)

CDN缺点：

你的响应时间会受到其他网站——甚至是竞争对手的流量的影响。无法控制组件服务器所带来的特殊麻烦。比如，修改HHTP表头必须由服务提供商来完成。

如果CDN服务性能下降了，你的工作也会受到影响。当然你可以使用两个CDN服务提供商。

CDN用于发布静态图片（将所有静态组件转移到CDN），图片，脚本样式表，Flash，静态文件更易存储，有较少的依赖性。

规则3——添加Expires头

Web页面包含大量组件，首次访问时间并不是唯一需要考虑的，页面的初访者会进行很多HTTP请求，但是可以使用一个长久的Expires头，使得这些组件被缓存。

Expires头

长久的expires经常用于图片，然而可以用于所有组件，很多顶级网站并没有做到这一点，因为添加长久的ecpires头会带来额外的开发成本。

Expires:Mon,15 Apr 2025 00:00:00 GMT

它会告诉浏览器该响应的有效性会持续到2025年。

Max-Age 和mod_expires

因为expires使用一个特定的时间，要求客户端和服务器端时钟严格同步，过期日期需要检查，还要配然你可以使用两个CDN服务提供商。

CDN用于发布静态图片（将所有静态组件转移到CDN），图片，脚本样式表，Flash，静态文件更易存储，有较少的依赖性。

规则3——添加Expires头

Web页面包含大量组件，首次访问时间并不是唯一需要考虑的，页面的初访者会进行很多HTTP请求，但是可以使用一个长久的Expires头，使得这些组件被缓存。

Expires头

长久的expires经常用于图片，然而可以用于所有组件，很多顶级网站并没有做到这一点，因为添加长久的ecpires头会带来额外的开发成本。

Expires:Mon,15 Apr 2025 00:00:00 GMT

它会告诉浏览器该响应的有效性会持续到2025年。

Max-Age 和mod_expires

因为expires使用一个特定的时间，要求客户端和服务器端时钟严格同步，过期日期需要检查，还