看完《高性能网站建设指南》

这本书封面写的是 前端工程师技能精髓，对前端工程师应该是本入门好书，里面介绍了14个性能黄金法则，让你有这些理念，要具体实现或源码的，没有，哈哈，很薄。这里记录一下我认为有用的，备忘。

身为一个伪ued,调试页面的工具要专业,我一般装 firefox，ie7，绿色版ie6.插件用ietab，firebug，yslow，httpwatch。基本这些就够了，平时这些就能搞定页面。

以下是读后觉得有必要记录的：

序言a：

性能黄金法则：只有10%-20%的最终用户响应时间花在下载html文档上，其余80%-90%花在下载页面的所有组件上。

这个确实，看下http请求就知道了，下载html花太多时间是不正常的，看是页面过大,或用性能工具看下哪些方法执行慢。

序言b：

http协议，请求和响应  

keep-alive ，早期http实现 每个http请求都要打开一个socket连接，效率低，因为一个页面很多http请求都指向同一个服务器。  持久连接可以使浏览器在一个单独的连接上进行多个请求，浏览器和服务器用 connection头来指出对Keep-Alive的支持。 

规则1---减少http请求

减少没用到的组件,外部js，css，图片等。多个图片可以用css sprites合并成1张，这个试过，不错。多个脚本合并成1个，多个样式表合并为1个。

 

规则2--使用cdn

一般的商业型公司都会有。

 

规则3--添加expires头

web服务器使用expire头告诉客户端可以使用组件的当前副本，直到指定时间为止。

Expire头   expires：Wed ，05 Oct 2016 19：16：20 GMT   只要没过2016就会使用缓存的副本而不发起http请求

区别ETag和 If-None-Match  这两种还需要发个请求去比较一下。

expire头缺点：1.要求服务器和客户端时钟严格同步 2.过期日期需要经常检查 3.过期了服务器还要配置一个新的过期日期

HTTP1.1引入 Cache-Control头克服expire头缺点

Cache-Control：max-age=315360000    组件被请求开始过去的秒数少于max-age就使用缓存的版本。

 

规则4--压缩组件

Accept-Encoding：gzip，deflate     客户端标识支持的压缩格式

Content-Encoding：gzip   web服务器通知客户端

压缩能使数据量减少将近70%

当有代理时，可能不支持gzip的浏览器接受到gzip的数据，使用头

Vary: Accept-Encoding

这将使代理缓存响应的多个版本。当浏览器带着Accept-Encoding为gzip访问代理时，它接收到压缩的内容。没有Accept-Encoding请求头的浏览器是未经压缩的内容。

Cache-control:private 为所有浏览器禁用代理缓存。会增加带宽开销。

 

规则5--样式表放在顶部

样式表放在底部的时候 当样式表正确地下载并解析后，已经呈现的文字和图片要用新的样式重绘。

 

规则6--将脚本放在底部

并行下载： HTTP1.1规范建议浏览器从每个主机名并行下载两个组件。只是一个建议。。ie和firefox都遵守

可以使用CNAME（dns别名）将组件放到多个主机名中。增加并行下载数量并不是没开销的，其优劣取决带宽和cpu速度

在下载脚本时并行下载实际上是禁用的---即使使用了不同主机名，浏览器也不会启用其他的下载。一个原因是 脚本可能使用document.write来修改页面内容，因此浏览器会等待，以确保页面能恰当地布局。另一个原因是为了保证脚本能够按照正确的顺序执行。

 

规则7--避免css表达式

页面变化css表达式会重新求值，频繁求值会导致css表达式低下性能。

避免css表达式带来的问题可以采用 一次性表达式和使用事件处理器

 

规则8 使用外部javaScript和css

内联vs外置

相同数据量 内联的时候页面打开速度比外置快（外置需要承担多个http请求带来的开销）

现实中还是用外部文件会产生较快的页面，因为javascript和css有机会被浏览器缓存起来。

使用内联还是外置有三种基准：

1.页面查看 用户查看的页面越少，内联就越有优势

2.空缓存vs完整缓存    根据网站类型而不同，如果能够为用户带来高完整缓存率，使用外部文件收益大。

3.组件重用  如果网站中每个页面都使用了相同的js和css，使用外部文件可以提高这些组件的重用率。

 

待续 。。