高性能网站建设总结法则1——减少http请求
最终用户响应时间中仅 10% 到 20% 用于接收所请求的 HTML 文档。剩下的 80% 到 90% 的时间用于对 HTML 文档引用的所有组件（图像、脚本、样式表等）发出 http 请求。所以提高响应最简单的方法就是减少组件的数量，从而减少http请求的数量。
图片地图
使用地图标签进行坐标定位，减少图片数量。当导航栏中使用多个图像时可以使用它。缺点较多：手动完成坐标定位困难、容易出错。定义矩形以外的形状也很困难，并且定义的图像在 IE 中尚不工作。不推荐。
CSS（精灵/精灵）
通过将多张图像合并为一张图像，然后使用 - 进行定位，比使用单独的图像快 50%。图像映射中的图像必须是连续的，但CSS没有这个限制。其他人则认为合并后的图像大于单独图像的总和，并且合并后的图像包含额外的空白。事实上，它更小，精灵图像降低了图像本身的成本。 （颜色表、格式信息等）如果页面中的背景、按钮、导航栏和链接需要使用大量图像，则可以使用它。优点 – 干净的标签、少量的图像和快速的响应时间。
缺点：后期修改麻烦，维护困难。它影响整个身体。之前换一张图片很容易。
如何制作精灵图像：
百度搜索CSS即可找到对应的制作软件！ （软件下载地址）[ ]
Gulp 和其他用于自动合成的自动化工具
ps自己做的
内嵌图像
使用 data:URL 模式将图像包含在 WEB 页面中，而无需任何其他 HTTP 请求。我们都熟悉 http: 模式 URL。其他类似的模式包括 ftp:、file: 和:
数据：url 模式
1995 年推出：允许将小块数据内联为立即数，数据位于 URL 本身中。
什么是内嵌图像
内联图像是一种新型的图像格式（在我看来，不知道我理解是否正确），正式名称为：data URI。通常我们存储的图片需要在网页中写入：
登录后复制
内联图像的写入方法是
登录后复制
内联图像语法
data - 取得数据的协定名称
登录后复制
/png - 数据类型名称
- 数据的编码方式
....-编码数据
: , ; - 数据 URI 指定的分隔符
很高兴这种图像格式不需要额外的 HTTP 请求，但同样重要的是要注意浏览器不会缓存此类图像。数据URL节省了HTTP请求，但是如果图像在网页的多个地方显示，就会增加网页的内容并延长下载时间。还有一点就是IE8及以下不支持这种图片，所以还是IE6的用户就比较惨了。并且使用图像之外的编码也会增加图像大小。导致网页整体下载量增加。 （编码图像会导致网站浏览速度变慢甚至崩溃。）不过，很多聪明人都使用背景平铺图像作为内嵌图像，这样的效果非常好。它还可以减少 HTTP 请求并加快网站速度。那么你可能会问如何获取图像的编码。网上有很多免费的基础编解码工具，但是最简单的方法就是我们自己写一个PHP文件。使用()进行编码：例如：
echo base64_encode(file_get_contents('211-11.JPG'));
登录后复制
如何解决网页下载延迟问题。最简单的方法就是用CSS写的后台来调用类名。例如，我们使用上面的例子：
.blogxmao{background:url(data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA")}
登录后复制
登录后复制
组合脚本和样式表
根据模块化原则，我们应该将代码放入多个小文件中，但这会降低性能，因为每个文件都会引起额外的http请求。理想情况下，一个页面不应使用多个脚本或样式表。世界排名前十的网站一般不超过两个脚本和样式表。
使用模块化工具（例如 ）进行优化。不然随着文件数量的增加，手动合并会很麻烦。
规则 2 - 使用内容分发网络 CDN
内容交付网络 ( ) 是分布在多个地理位置的一组 Web 服务器。可以使用CDN服务商。
CDN优势：
缩短响应时间、备份、扩展存储容量和缓存、缓解WEB流量峰值压力（获取天气、娱乐体育新闻等）
CDN 缺点：
您的响应时间将受到其他网站（甚至竞争对手）流量的影响。无法控制组件服务器带来的特殊麻烦。例如，修改 HHTP 标头必须由服务提供商完成。
如果CDN服务性能下降，您的工作也会受到影响。当然，您可以使用两个 CDN 服务提供商。
CDN用于发布静态图片（将所有静态组件转移到CDN），图片、脚本样式表、静态文件更容易存储且依赖较少。
规则 3 – 添加标头
网页包含大量组件，首次访问时间并不是唯一需要考虑的因素。首次访问该页面将发出许多 HTTP 请求，但可以使用持久的标头来允许缓存这些组件。