读书笔记：《高性能网站建设指南》
这本书中给出了14条提升网站性能的规则，由于实践经验尚浅，这里只做读书的总结。
绪言A：前端性能的重要性
性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%的时间花在了下载页面中的所有组件上。
绪言B：HTTP概述
压缩：减小响应的大小，浏览器可以使用Accept-Encoding头来生命它支持压缩。服务器使用Content-Encoding头来确认已被压缩。
条件GET请求：基于响应中的Last-Modified头，浏览器可以知道组件最后的修改时间。会使用If-Modified-since头将最后修改时间发送给服务器。
Expires头：通过明确指出浏览器是否可以使用组件的缓存副本来消除客户端和服务器之间进行一次往返确认的必要。
Keep-Alive：持久连接解决了多对一请求服务器导致的socket连接低效性的问题。
规则一——减少HTTP请求
图片地图(Image Map)：允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片了上的哪个位置。
CSS Sprites合并图片。
内联图片：通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。
合并脚本和样式表。
规则二——使用内容发布网络
CDN：Content Delivery Network，是一组分布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。除了缩短响应时间外，服务还包括：备份、扩展存储功能和缓存。还有助于缓和web流量峰值压力。
用于发布静态内容，如图片、脚本、样式表和Flash。
原理是：实现地理位置分离，缩短距离。如果应用程序Web服务器离用户更近，则一个HTTP请求的响应时间将缩短。另一方面，如果组件Web服务器离用户更近，则多个HTTP请求的响应时间将缩短。
规则三——添加Expires头
浏览器和代理使用缓存来减少HTTP请求的数量，并减少HTTP响应的大小，使Web页面加载更快。Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前，知道指定的时间为止。
HTTP1.1引入了Cache-Control头，如：Cache-Control：max-age=315360000。
可同时指定这两个响应头，如同时出现，HTTP规范规定max-age指令将重写Expires头，然仍需考虑Expires头带来的始终同步和配置维护问题。
空缓存 VS 完整缓存。
理想情况下，不仅仅是图片，页面中的所有组件都应该具有长久的Expires头，包括脚本、样式表和Flash组件，并且后续的页面浏览中只需为HTML文档进行一各HTTP请求。
为了确保用户能获得组件的最新版本，需在所有HTML页面中修改组件的所有链接，这样，全新的请求将从原始服务器下载最新的内容。
规则四——压缩组件
从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持。如：Accept-Encoding：gzip deflate
Web服务器通过响应中的Content-Encoding头来通知Web客户端，如：Content-Encoding：gzip
压缩的成本：服务器端会花费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩。
根据经验常对大于1KB或者2KB的文件进行压缩。
代理缓存：Proxy Caching，Web服务器基于Accept-Encoding来检测是否对响应进行压缩。而不管是否压缩过，浏览器都会基于响应中的HTTP头Expires和Cache-Control来缓存响应。Web服务器的响应中添加vary头，如：vary：Accept-Encoding。可以告诉代理根据一个或多个请求头来改变缓存的响应。这将使代理缓存响应的多个版本。
边缘情形：一个安全的方式是只为已经验证过的支持压缩的浏览器提供压缩内容，这被称为浏览器的白名单方式。Browser Whitelist。
规则五——将样式表放在顶部
逐步呈现：为了提高用户的体验。
在浏览器和和用户等待位于底部的样式表时，浏览器会延迟显示任何可视化组件。即“白屏”，白屏时浏览器在尝试修改前端工程师所犯的错误。
底部引用实际下载页面所必需的组件的时间比top应用所用时间更短，但由于页面是逐步呈现的，用户感觉显示更快了。
Flash Of Unstyled Content：FOUC，无样式内容闪烁，如样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需回执任何东西。否则，在其准备好之前显示内容会遇到此问题。
规则六——将脚本放在底部
使用脚本时，对于所有位于脚本以下的内容，逐步呈现都被阻塞了。将脚本放在页面越靠下的地方，意味着越多的内容能够逐步呈现。
对响应时间影响最大的是页面中组件的数量。HTTP1.1规范建议浏览器从每个主机名并行地下载两个组件。
然而，在下载脚本时并行下载实际是被禁用的，即使使用了不同的主机名，浏览器也不会启动其他下载。其一是因为：脚本可能使用document.write()来修改页面内容，因此浏览器会等待，以确保页面能够恰当的布局。另一个原因是为了保证脚本能够按照正确的顺序执行。如并行下载多个脚本，就无法保证响应是按照特定的顺序到达浏览器的。
规则七——避免CSS表达式
表达式的问题在于对其进行求值的频率比人们期望的要高。它们不只是在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过时都要求值。有时，也会影响页面的加载时间。
如：background-color：expression（）；
规则八——使用外部JavaScript和CSS
内联快一些，但HTML文档——至少是那些包含动态内容的HTML文档——通常不会被配置为可进行缓存，每次请求HTML文档都要下载内联的JavaScript和CSS。另一方面，如JavaScript和CSS是外部文件，浏览器就能缓存它们，HTML文档的大小减少，而且不会增加HTTP请求的数量。
页面查看
空缓存 VS 完整缓存
组件重用
两全其美之法：即可获得内联的优势，也能缓存外部文件的方法。
加载后下载：注意双重定义。
动态内联：cookie做指示器。
规则九——减少DNS查找
当在浏览器中键入www.yahoo.com时，连接到浏览器的DNS解析器会返回服务器的IP地址。
DNS：domain name system，URL和实际宿主他们的服务器之间的一个间接层。
浏览器查找一个给定的主机名的IP地址要花费20~120ms。
影响ＤＮＳ缓存的因素：存活时间ＴＴＬ。
考虑并行下载，组件放到至少２个，但不超过４个主机名下。
规则十——精简JavaScript
Minification：是从代码中移除不必要的字符以减小其大小，进而改善加载时间的实践。JsMin、Dojo compressor。
Obfuscation：混淆，移除注释和空白，同时还会改写代码。
压缩 + 精简
规则十一——避免重定向
重定向：redirect，用于将用户从一个URL重新路由到另一个URL。301和302是最常用的两种。
重定向引起的延迟很严重，因为它延迟了整个HTML文档的传输。在HTML文档到达之前，页面不会呈现出任何东西，也没有任何组件会被下载。
缺少结尾的斜线是最为浪费，发生也很频繁的重定向。
将旧网站连接到新网站。
重定向经常用于跟踪用户流量的流向。
使用信标跟踪出站流量。
使用重定向的另一种动机是使URL更加美观并且易于记忆。
规则十二——移除重复脚本
确保脚本只被包含一次。导致一个脚本的重复有两个主要因素——团队大小和脚本数量。
损伤性能的方式有两种：不必要的HTTP请求和执行JavaScript所浪费的时间。
在模板系统中实现一个校本管理模块。
规则十三——配置ETag
实体标签：Entry Tag，十Web服务器和浏览器用于确认缓存组件的有效性的一种机制。
实体：是之前提到的组件的另一种称呼。
条件GET请求：如缓存的组件过期了（或用户明确地重新加载了页面），浏览器在重用它之前必须首先检查它是否仍然有效。
匹配方式：最新修改日期：Last-modified Date
比较实体标签
ETag的问题在于：常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的。对于完全相同的组件，从一台服务器到另一台，apach和IIS（因特网信息服务器）产生的ETag是不匹配的。
规则十四——是Ajax可缓存
Ajax：表示异步的JavaScript和XML（Asynchronous JavaScript and XML）。Ajax不是一个单独的、需要许可证的技术，而是一组技术，包括JavaScript、CSS、DOM和异步数据获取。它将Web体验从“浏览页面”转变为“与应用程序进行交互”。
改善Ajax请求的最重要的方式就是使响应可缓存，前面第4、9、10、11、13规则也适用于此。
确保Ajax请求遵守性能指导，尤其是具有长久的Expires头。
析构十大网站
IBM Page Detailer
Firebug
YSlow