《高性能网站建设指南》笔记

一、HTTP概述
HTTP是一种客户端/服务器协议，由请求和响应构成。请求的类型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE
1.压缩 如果客户端和服务器都支持的话，可以用压缩来减小响应的大小。
浏览器使用Accept-Encoding头声明它支持压缩，服务器使用Content-Encoding头确认响应已被压缩
2.规则一——减少HTTP请求
(1).图片地图：允许在一个图片上关联多个URL，目标URL的选择取决于用户单击了图片哪个位置
分类 服务器端图片地图 将所有点击提交到同一个目标URL，传递用户点击的x，y坐标，Web应用程序将该x，y坐标映射为适当的操作
客户端图片地图 可以将用户的点击映射到一个操作，无须向后端应用程序发送请求，映射通过HTML的map标签实现
一个图片实现五点链接 示例代码：

<div style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; padding: 4px 0 4px 0;">
<img usemap="#map1" border=0 src="http://stevesouders.com/images/imagemap.gif?t=1479950006">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
<area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
<area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
<area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
</map>
</div>


(2).CSS Sprites：通过合并图片减少HTTP请求，并且比图片地图更灵活，合并后的图片比分离的图片总和要小，因为它降低了图片自身的开销(颜色表、格式信息等)
用法：使用CSS的background-position属性，可以将HTML元素放置到背景图片中期望的位置上
示例代码:<style type="text/css">
#navbar span{
width:31px;
height:31px;
float:left;
background-image: url("http://stevesouders.com/images/imagemap.gif?t=147995000");
}
.home{
background-position: 0 0;
margin:0 4px 0 4px;
}
.gifts{
background-position: -35px 0;
margin-right:4px;
}
.cart{
background-position: -69px 0;
margin-right: 4px;
}
.settings{
background-position: -106px 0;
margin-right: 4px;
}
.help{
background-position: -140px 0;
}
</style>
<div id="navbar" style="border:2px ridge #333;width:180px;height:32px;padding:4px 0 4px 0;">
<a href="javascript:alert('Home')" title="Home"><span class="home"></span> </a>
<a href="javascript:alert('Gifts')" title="Gifts"><span class="gifts"></span></a>
<a href="javascript:alert('Cart')" title="Cart"><span class="cart"></span></a>
<a href="javascript:alet('Settings')" title="Settings"><span class="settings"></span></a>
<a href="javascript:alert('Help')" title="Help"><span class="help"></span></a>
</div>
(3)内联图片
(4)合并脚本和样式表
3.规则二——使用内容发布网站 使用CDN
4.规则三——添加Expires头
5.规则四——压缩组件
6.规则五——将样式表放在顶部（避免白屏问题）
7.规则六——将脚本放在底部
8.规则七——避免CSS表达式
解决办法：(1)定义一次性表达式
示例代码：<style>
p{
background-color: expression(altBgcolor(this));
}
</style>
<script type="text/javascript">
function altBgcolor(elem)
{
elem.style.backgroundColor=(new Date()).getHours()%2?"#F08A00":"#B8D4FF"
}
</script>
CSS表达式调用altBgcolor()函数,将样式的background-color属性设置为一个明确的值，并移除了CSS表达式
(2）事件处理器
9.规则八——使用外部JavaScript和CSS
采用内联还是外部更好需要具体权衡
10.规则九——减少DNS查找
（1）DNS查找可以被缓存起来以提高性能
（2）影响DNS缓存的因素