企业级 PHP 高并发解决方案 0x02 减少 HTTP 请求

架构2018-01-12607 字

为什么要减少HTTP请求

只有10%~20%的最终永不响应时间花在接收请求的HTML文档上，剩下的80%~90%时间花在HTML文档所引用的所有组件（图片，script，css，flash等等）进行的HTTP请求上。

改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。

域名解析 -- TCP链接 -- 发送请求 -- 等待 -- 下载资源 -- 解析时间

图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。

我们可以通过使用五个分开的图片，然后每个图片对应一个超链接产生了5个HTTP请求，我们的目标是要减少HTTP请求。

将五个图片合并成为一张图片，然后以位置信息定位超链接。

把HTTP请求减少为一个，可以暴增设计的完整性和功能的齐全性。

<map><area></map></map>

未使用图像地图的例子：

使用图像地图的例子：

CSS Sprites 中文翻译为 CSS 精灵，通过使用合并图片，通过指定 CSS 的 backgroud-image 和backgroud-position来显示元素。

backgroud-position属性

backgroud-position:x,y; x和y可以写负值也可以写正值，我们可以想象图片的左上方为（0，0），以（0，0）坐标向右是为负数的 X 轴，以（0，0）坐标向下是为负数的 y 轴。

使用图片精灵的案例：

图片地图和 CSS Sprites 的响应时间基本相同，但比使用各自独立图片的方式要快50%以上。

使用外部的 JS 和 CSS 文件引用的方式，因为这要比直接写在页面中性能要更好一点。

独立的一个 JS 比用多个 JS 文件组成的页面载入要快38%。

把多个脚本合并为一个脚本，把多个样式表合并成为一个样式表。

采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入。

<img src="data:image/gif;base64,/9j/4AAqsKZJ.....">