大流量高并发解决方案课题 03 减少HTTP请求次数

作者: JONE 分类: PHP/MySQL,服务器 发布时间: 2018-04-14 13:51

一、相关概念

1)为什么要减少HTTP请求

性能黄金法则:只有10%-20%的最终用户响应时间花在接收请求的html文档上,剩下的80%-90%时间花在html文档所引用的所有组件(图片,sctipt,css,flash等等)进行的http请求上。

如何改善:改善响应时间最简单途径就是减少组件的数量,并由此减少http请求的数量。

HTTP链接产生的开销:域名解析–TCP链接–发送请求–等待–下载资源–解析时间

疑问:

DNS缓存:查找DNS缓存也需要时间,多个缓存就要查找多次,有可能缓存会被清除。

Keep-Alive:HTTP1.1协议规定请求只能串行发送,也就是说一百个请求必须依次租个发送,前面的一个请求完成才能开始下一个请求。

 

2)减少HTTP请求的方式

图片地图

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

<div>
  <img usemap='#map1' src='/images/test.gif'>
  <map name='map1'>
    <area shape='rect' coords='0,0,31,31'  href='http://www.baidu.com'>
  </map>
</div>

CSS Sprites

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

性能影响

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

合并脚本和样式表

使用外部的js和css文件引用的方式,因为这要比直接写在页面中更易于页面的css和js的修改与维护。

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

图片使用Base64编码减少页面请求数

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

<img src=”data:image/gif;base64,/9j/4AAQSkZJ…”>

<?php
// 用php将图片转成base64编码
$img = 'test.jpg';
$base64_img = base64EncodeImage($img);
 
echo '<img src="' . $base64_img . '" />';
 
function base64EncodeImage ($image_file) {
 $base64_image = '';
 $image_info = getimagesize($image_file);
 $image_data = fread(fopen($image_file, 'r'), filesize($image_file));
 $base64_image = 'data:' . $image_info['mime'] . ';base64,' . chunk_split(base64_encode($image_data));
 return $base64_image;
}
?>
一条评论
  • 懿古今

    2018年4月21日 下午8:47

    那个图片使用Base64编码减少页面请求数的方法不错,毕竟升级到HTTPS之后,这些请求数都是钱啊

发表评论

电子邮件地址不会被公开。 必填项已用*标注