《高性能网站建设指南-前端工程师技能精髓》-读书笔记1(减少 HTTP 请求 )
来源:互联网 发布:nginx 子域名过滤 编辑:程序博客网 时间:2024/05/16 15:21
一、减少HTTP请求
1、 图片地图
如果用图片做导航链接,那么用一张图片处理多个请求比用多个图片每个图片处理一个请求的响应速度快。
因为一个图片只有一次HTTP请求,而多个图片需要有多次请求。
图片地图方式处理例子:
<!-- 注意 img usemap的内容要和map name一致 -->
<img usemap=”#map1” src=”/路径/图片”>
<map name=”map1”>
<area shape=”rect” cords=”0,0,31,31” href=”链接文件名” title=”标题名”>
<area shape=”rect” cords=”0,0,31,31” href=”链接文件名” title=”标题名”>
</map>
书中的示例:
http://stevesouders.com/hpws/imagemap-no.php
http://stevesouders.com/hpws/imagemap.php
2、 CSS Sprites
原理同上,但比上面的更灵活
CSS Sprites方式处理例子:
<style>
#navbar span{
Width:31px;
Height:31px;
Display:inline;
Float:left;
Background-image:url(/路径/图片);
}
.home{background-position:00;margin-right:4px;margin-lift:4px;}
.gifts{background-position:-32px 0;margin-right:4px;}
</style>
<div id=”navbar”>
<a href=”javascript:alert(‘显示内容’)”title=”标题名”><span class=”home”></span></a>
<a href=”javascript:alert(‘显示内容’)”title=”标题名”><span class=”gifts”></span></a>
</div>
书中的示例:
http://stevesouders.com/examples/sprites.php
注:以上方法不适用于第一次访问。
- 《高性能网站建设指南-前端工程师技能精髓》-读书笔记1(减少 HTTP 请求 )
- 《高性能网站建设指南-前端工程师技能精髓》-读书笔记2(添加Expires头)
- 《高性能网站建设指南-前端工程师技能精髓》-读书笔记3(压缩组件)
- 高性能网站建设指南---前端工程师技能精髓
- <读书笔记>《高性能网站建设指南:前端工程师技能精髓》
- 《高性能网站建设指南-前端工程师技能精髓》-读书笔记4(将样式表放在顶部)
- 高性能网站建设指南---前端工程师技能精髓--小记1
- 《高性能网站建设指南》阅读笔记_规则1-减少HTTP请求
- 高性能网站建设指南-前端性能优化(一)
- 高性能网站建设指南-前端性能优化(二)
- 《高性能网站建设指南》读书笔记
- 《高性能网站建设指南》读书笔记--转
- 高性能网站建设指南(读书笔记)
- 高性能网站建设指南-读书笔记
- 高性能网站建设指南 读书笔记
- 高性能网站建设指南--前端
- 高性能网站建设之减少Http连接数
- 高性能网站建设之减少Http连接数
- March 19th Friday 2010
- JS中的splice()方法
- Javascript Date类型转换为字符串
- GridView绑定radiobutton以后实现唯一选择,互斥
- Creating a Singleton Instance
- 《高性能网站建设指南-前端工程师技能精髓》-读书笔记1(减少 HTTP 请求 )
- 操作QQWary.dat数据文件的类
- WPF中未捕获异常之处理
- vs2008
- Const,Const函数,Const变量,函数后面的Const
- 李开复:移动互联网创新机会
- 事务传播特性
- 单机模拟串口通信,一个口发送,一个口接收
- ubuntu下编译内核的方法