高性能网站建设指南-笔记（一）

2017-11-17

总览

本书介绍了提高网站性能的14条规则：

减少HTTP请求
使用内容发布网络
添加Expires头
压缩组件
将样式表放在顶部
将脚本放在底部展示
避免CSS表达式
使用外部JavaScript和CSS
减少DNS查找
精简JavaScript
避免重定向
移除重复脚本
配置ETag
使Ajax可缓存

本书配套实例：点此访问

绪言

本书有两个绪言，记录如下：

绪言A：前端性能的重要性

性能黄金法则：从web服务器获取HTML文档，到呈现在浏览器只花费10%~20%的响应时间（后端），需要关注剩余80%~90%的响应消耗（前端，HTML文档所引用的各个组件：CSS、JS、IMAGE等）。

对网站性能来说，前端的优化成本和效果优于后端。

绪言B：HTTP概述

熟悉HTTP协议可以带来更多可优化的点。例如：

压缩

//浏览器头声明支持压缩
Accept-Encoding:gzip,deflate
//服务器头确认响应已被压缩
Content-Encoding:gzip

使用缓存：304 Not Modified

缓存有效性源自其最后修改时间。

//浏览器头。浏览器发送最后修改时间给服务器端,询问我可以继续使用这个文件么
If-Modified-Since: Fri, 17 Nov 2017 12:20:12 GMT
//服务器头。服务器确认这个文件从上次修改时间到现在是否修改过，如果没有修改，则发送304，不再发送响应体
Last-Modified: Fri, 17 Nov 2017 12:20:12 GMT

Expires

304可以让页面加载的更快，但仍然需要在客户端和服务器之间进行一次往返确认。使用Expires头可以消除这个需要。

1
2

//首次请求时，服务器头返回这个资源的过期时间。浏览器在这个过期时间之前不再重新发送请求，而是从缓存中获取资源
Expires: Sat, 18 Nov 2017 12:20:12 GMT

Keep-Alive

一个连接上进行多个请求。

//浏览器头 Connection来指出对Keep-Alive的支持
Connection: keep-alive
//服务器头 Connection来指出对Keep-Alive的支持
Connection: keep-alive
// 关闭连接时，浏览器或服务器可以发送Connection: close 头来关闭连接

规则1-减少HTTP请求

代码示例

图片地图（Image Map）

目的：减少图片的请求数。
方法：使用标签，将原先分散的多张图片合并为一张传输，通过map的方式指定不同部位不同动作。
缺点：图片必须是连续的。精确定义区域比较困难，一般定义为矩形区域。

<center>
  <img usemap="#map1" border="0" src="/images/imagemap.gif">
  <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>
</center>

CSS Sprites

目的：合并图片，减少图片请求数
方法：利用span或者div等支持背景图片的HTML元素，使用CSS的background-position属性，可以讲HTML背景放置在期望的位置上
优点：不需要地图中的图片是连续的，且合并的图片比单独的图片相加要小（虽然多了空白，但是少了图片本身的开销：颜色表、格式开销等）。

CSS:

#navbar span {
  //每个图片的长宽
  width:31px;
  height:31px;
  display:inline;
  float:left;
  background-image:url(/images/spritebg.gif);
}
.home     { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts    { background-position:-32px 0; margin-right:4px;}
.cart     { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help     { background-position:-128px 0; margin-right:0px;}

HTML:

<div id="navbar" style="background-color: #F4F5EB; 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:alert('Settings')" title="Settings"><span class="settings"></span></a>
  <a href="javascript:alert('Help')" title="Help"><span class="help"></span></a>
</div>

内联图片（Inline Image）

目的：去除图片下载
方法：利用data属性，将图片转为64位编码后写在HTML中
缺点：1.需浏览器支持；2.存在数据大小的限制；3.转为编码后会增大图片的大小；4.不会被缓存

可以放在外联样式表中，增加一个HTTP请求来换取缓存

<center>
<a href="javascript:alert('Home')" title="Home"><img border="0" src="data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGv..."></a>
<a href="javascript:alert('Gift')" title="Gift"><img border="0" src="data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAABCpTlCrVKE1lqU94y17..."></a>
...
</center>
<!-- 或者 -->
<a href="javascript:alert('Home')" title="Home"><span class="home"></span></a>
<!-- 样式可以写在外联表中 -->
<style type="text/css">
.home {
    background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGv...);
    margin-left: 4px;
</style>

合并脚本和样式表

目的: 减少http请求
方法：脚本之间合并，样式表之间合并。

需要保持JS的模块化，一组特定的模块生成一个目标文件。比如文件1需要script1,script2,script3,文件2需要script2,script3,script4,scipt5。那么合并后，产生script1，script_combine(包含script2,3)，script4，script5。