读<高性能网站建设指南>

读<高性能网站建设指南>

绪言a:前端的重要性
a)跟踪Web网页性能:实现方式火狐direbug
b)时间花在哪了?
c)性能黄金法则
绪言b:HTTP概述
http是客户端(请求)/服务器(响应)协议，
请求类型:get,post,head,put,delete,options,trace
http的响应:响应码，头，响应体。
GET： 请求指定的页面信息，并返回实体主体。     
HEAD： 只请求页面的首部。
POST： 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。
PUT： 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE： 请求服务器删除指定的页面。
OPTIONS： 允许客户端查看服务器的性能。
TRACE： 请求服务器在响应中的实体主体部分返回所得到的内容。

响应码分五种类型，由它们的第一位数字表示：
1xx：信息，请求收到，继续处理
2xx：成功，行为被成功地接受、理解和采纳
3xx：重定向，为了完成请求，必须进一步执行的动作
4xx：客户端错误，请求包含语法错误或者请求无法实现
5xx：服务器错误，服务器不能实现一种明显无效的请求
下表显示每个响应码及其含义：
100 继续
101 分组交换协
200 OK
201 被创建
202 被采纳
203 非授权信息
204 无内容
205 重置内容
206 部分内容
300 多选项
301 永久地传送
302 找到
303 参见其他
304 未改动
305 使用代理
307 暂时重定向
400 错误请求
401 未授权
402 要求付费
403 禁止
404 未找到
405 不允许的方法
406 不被采纳
407 要求代理授权
408 请求超时
409 冲突
410 过期的
411 要求的长度
412 前提不成立
413 请求实例太大
414 请求URI太大
415 不支持的媒体类型
416 无法满足的请求范围
417 失败的预期
500 内部服务器错误
501 未被使用
502 网关错误
503 不可用的服务
504 网关超时
505 HTTP版本未被支持

头标由主键/值对组成。它们描述客户端或者服务器的属性、被传输的资源以及应该实现连接。
四种不同类型的头标：
1.通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关联。
2.请求头标：允许客户端传递关于自身的信息和希望的响应形式。
3.响应头标：服务器和于传递自身信息的响应。
4.实体头标：定义被传送资源的信息。即可用于请求，也可用于响应。



1.减少HTTP请求
     a)图片地图:用一个图片添加多个超链接
          1)服务端图片地图
          2)客户端图片地图
     b)CSS Sprites:支持背景图片的HTML元素
     c)内联图片Inline Images:data:URL模式(包含在页面本身＝不再需要另外请求)
     d)合并脚本和样式表
2.使用内容发布网络(CDN):减少响应时间
3.添加Expires头
Expires头用一个特定的时间，他要求服务器和客户端的时钟严格同步，过期日期需要经常检查，过期后需要在服务器配置中添加新的日期
解决办法:mod_expries-Apache模块可以相对方式设置日期
Cache-Control使用max-age指定组件缓存多久，以秒为单位定义一个更新窗.
4.压缩组件:gzip

代理缓存需要添加vary让accept-encoding保存多个缓存版本,
5.将样式表放在顶部
a)将样式表放在顶部:1.速度会慢些.
b)将样式表放在底部:1.速度会快些.2.出现白屏(新窗口打开，重新加载，当作主页)和无样式内容闪烁(取决于浏览器)
6.将脚本放在底部:阻塞
7.避免CSS表达式:多次执行
8.使用外部JavaScript和CSS:1.使用缓存.2.合理性的分割外部脚本和css达到重用.两全其美,动态加载
9.减少DNS查找:1.在并行下载和浪费寻找DNS中间权衡.2.keep-Alive重用链接
10.精简JavaScript或CSS
1.JSMin删除不必要的空白.
2.合并相同的类,移除不使用的类
11.避免重定向
a)跟踪出站浏览使用XMLHttpRequest信标:将要跳转的地址分开两个变量保存，一个是原始地址，另一个是重定向地址。在重定向成功访问后使用callback函数触发跳转.
12.移除重复脚本
13.配置ETag
14.使Ajax可缓存
15.析构十大网站
综合：减少作用域链查找，CSS选择符解析是从右往左进行的，数组的length属性放入一个局部变量

开启：

#Expires设置
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>
#Etag设置对应http:Etag
FileEtag INode Mtime Size  

INode

文件的索引节点(inode)数

MTime

文件的最后修改日期及时间

Size

文件的字节数

#keepAlive设置对应Keep-Alive+时间，Connection:Keep-Alive

KeepAlive on 启用keepalive
MaxKeepAliveRequests 100 最大超时时间
KeepAliveTimeout 15 超时时间

产生问题.
1.cdn如何切割组件，从而进行缓存
2.ajax如何重用缓存
3.HTML Collection转换数据

#异步方式
4.script defer(IE only),script dom element(create element 之后用过setAttribute再用appendChild添加上去)

#广告前端优化
http://www.slideshare.net/taobaoued/ss-4888423

#apache核心

http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/core.html

http://home.arcor.de/pangj/squid/