前端优化

1.改善响应时间的最简单途径及时减少组件的数量，并由此减少HTTP请求的数量。
2.方法：
    一是图片地图
    二是CSS Sprites:和图片地图一样，CSS Sprites也可以合并图片。但更为灵活。
    三是内联图片
    四是合并脚本和样式表

1.内容发布网络是一组分布在多个不同地理位置的Web服务器，用于更加有效地想用户发布内容。这样就能提升他的性能，而且节省成本。在优化性能时，向特定用户发布内容的服务器的选择基于对网络可用度的测量。
2.除了缩短时间之外，CDN还可以到来其他的优势。他们的服务包括备份，扩展存储能力和进行缓存。CDN还有助于缓和Web流量峰值压力，如在获取天气或者娱乐事件时。
3.缺点：就是你的响应时间可能会受到其它网站---甚至很可能是你的竞争对手流量的影响。
4.测试影响：地理位置对结果有着很重要的影响。意思就是Web客户端离当前Web服务器很近的地方测试时响应时间通常会更快一些。

1.Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。
2.长久的Expires头应该包含任何不经常变化的组件，包含样式、脚本和flash组件。但是HTML文档不应该用长久的Expires头，因为他包含动态的内容，这些内容在每次用户请求时都将被更新。

1.gzip是目前最流行和最有效的压缩方法。另外一种deflate压缩格式，但是效果略逊且不太流行。
2.压缩的内容：
包含XML和json在内的任何文本响应，图片和PDF不应该压缩，因为他们本来就已经被压缩了。视图对他们进行压缩只会浪费CPU资源，还有可能会增加文件大小。
3.案例：
美国10个最流行的网站gzip使用情况。9个网站压缩了其HTML文档，7个网站压缩了大多数的脚本和样式表，只有5个网站压缩了所有的脚本和样式表。没有压缩任何HTML文档，样式表和脚本的网站错过了将其页面大小减少70%以上的机会。
4.配置：
配置gzip使用的模板取决于Apache的版本。
具体命令可参考：高性能网站建设指南中第4章 32页。
5.检测：
web服务器基于Accept-Encoding来检测是否对相应进行压缩。
6.注意：
浏览器是否支持压缩gzip.
为了为所有浏览器禁用代理缓存，使用Vary：。。。。。。

将样式表放在页面的底部会阻碍页面逐步呈现

1.将脚本从页面的顶部移动到底部，这样页面既可以逐步呈现，也可以提高下载的并行度。
2.对响应时间影响最大的是页面中组件的数量。

1.css表达式也会影响页面的加载时间。

1.原因：如果Javascript和CSS是外部文件，浏览器就能缓存他们，HTML文档的大小减少，而且不会增加HTTP请求的数量。
2.注意：
如果你的网站本质上能够为用户提供高完整缓存率，使用外部文件的收益就更大。如果不大可能产生完整缓存，则内联是更好的选择。
如果你的网站中每个页面都使用了相同的Javascript和CSS，使用外部文件可以提高这些组建的重用率，因为他们已经位于浏览器的缓存当中了。
但是如果重用度底的话，还是内联更有意义一些。
3.使用内联还是外链的依据：
 页面浏览量
空缓存VS完整缓存
组件的重用

1.DNS缓存和TTL
DNS查找可以被缓存起来以提高性能。在用户请求了一个主机名之后，DNS信息会留在操作系统的DNS缓存中，之后对于该主机名的请求将无需进行过多的DNS查找，至少短时间内不需求。
2.影响DNS缓存的因素
尽管操作系统缓存会考虑TTL值，但浏览器通常忽略该值，并设置他自己的时间限制。所以只要浏览器和Web服务器愉快的通信着，并保持着TCP廉洁打开的状态，就没有理由进行DNS查找。
浏览器对缓存的DNS记录的数量也有限制，而不管缓存的记录的时间。如果用户在短时间内访问了很多具有不同域名的网站，较早的DNS记录将被丢弃，必须重新查找该域名。但是虽然浏览器丢弃了DNS记录，但造作系统可能依然保留着该记录，这能扭转一下局面，因为无需通过网络发送查询，从而避免了明显的额延迟。
3.当页面有大量的组件时，建议时将这些组件分别放到至少2个，但不要超过4个主机名下，这是减少DNS查找和允许高度并行下载之间做出的很好的权衡。

1.精简是从代码中移除不必要的字符以减小其大小，进而改善加载时间的实践。在代码精简后，所以的只是以及不必要的空白字符都被移除。这样可以改善响应时间效率，因为需要下载的文件大小减少了。
2.混淆JavaScript的三大缺点：
缺陷：由于混淆耿加复杂，混淆过程中本身很有可能引入错误。
维护：由于混淆会改变JavaScript符号，因此需要对任何不能改变的符号进行标记，防止混淆其修改他们。
调试：经过混淆的代码很难阅读，这使得在产品环境中调试问题更加困难。
3.精简JavaScript代码的最流行的工具是JSMin。Dojo Compressor(已改名为ShrinkSafe并转移到http://dojotoolkit.org/docs/shrinksafe)是我见过的用的最多的。如果未来完成比较，可以同时使用两个工具。
4。注意：
对于小脚本，精简和混淆可以比一般情况快100ms-110ms(17%-19%),对于大脚本，精简和混淆可以比一般情况快331ms-341ms(30%-31%)。精简脚本可以降低响应时间，但不会到来混淆的风险。
5.通过对内容的压缩（使用gzip），也可以使大小减少70%。
精简并不是只指Javascript，也针对CSS。
精简CSS:通常CSS中的注释和空白比Javascript少。所以CSS最大的优化最大的优化：合并相同的类，移除不适用的类等。移除注释和空白，并且进行一些直观的优化，比如使用缩写和移除不必要的字符串。

1.重定向用于将用户从一个URL重新路由到另一个URL。重定向有很多种（301,302，304不是真的重定向，他是响应条件GET请求，避免下载已经存在于浏览器缓存中的数据），重定向会使页面变慢。
2.重定向引起的延迟也很严重，因为他延迟了整个HTML文档的传输，在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载。在用户和HTML文档之间插入重定向延迟了页面中的所有东西。
3.重定向是解决很多问题的简单方式，但是最好使用其他不会减慢页面加载速度的解决方案。
4.重定向之外的其他选择：
缺少结尾的斜线（URL的结尾必须出现斜线‘/’）：当缺少结尾的斜线发送重定向有着很充分的理由--它会自动索引并且能够获得与当前目录线管的URL。
5.美化URL
使url更加美观，易于记忆。

1.重复脚本损伤性能。
方式两种：不必要的HTTP请求和执行JavaScript所浪费的时间。
2.应避免重复脚本。（确保脚本只被包含一次）

十三 配置ETag
1.减少呈现页面时所必须得HTTP请求数量是加速用户体验的最佳方式。
ETag(实体标签)是Web服务器和浏览器用于确认缓存组件有效型的一种机制。
2.服务器在检测缓存的组件是否和原始服务器上的组件匹配时有两种方式：
比较最新修改日期
比较实体标签。（实体是指组件）
这些都是由浏览器的响应头中来获得。
3.ETag带来的问题
通常使用组件的某些属性来构造它，这些属性对于特定的，寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获取了原始组件，之后，又向另外一台不同的服务器发起条件GET请求时，ETag是不会匹配的--而对于使用服务器集群来处理请求的网站来说，这是很常见的一种情况。默认情况下：对于拥有很多服务器的网站，Apache和IIS向ETag中嵌入的数据都会大大的降低有效性验证的成功率。
4.实例：
如果你在多台服务器上寄宿你的网站，而且你使用的具有默认的ETag配置的Apache或IIS，即使你的组件有长久的Expires头，一旦用户点击了Reload或Refresh按钮，依然会产生条件GET请求，没有办法绕过它。
5.在Apache1.3.23版和之后版本支持FileETag指令。使用这一指令。可以将ETag中移除inode值，只留下大小和时间戳作为组建的ETag.。类似地，在IIS中可以为所有服务器设置相同的ChangeNumber，保留文件的时间戳作为ETag中仅有的另一块信息。
6.移除ETag可以减少响应和后续请求的HTTP头大小。

1.Ajax表示异步的JavaScript和XML。他不是一个单独的，需要许可证的技术，而是一组技术。包括JavaScript，CSS,DOM和异步数据获取。
2.Ajax的优点：就是向用户提供了即时反馈，因为他是异步地从后端Web服务器请求信息。
3.优化Ajax的请求：
当发起主动Ajax请求时，用户可能仍需等待。要改善性能，优化这些请求很重要。优化住的Ajax请求的技术同样适用于被动Ajax请求。
3.抓包工具：
IBM Page Detailer
4.改善这些主动Ajax请求最重要的方式就是响应缓存。
5.处理隐私的方法：
一种是使用Cache-Control:no-store.。在使用了这个头之外，响应根本就不会被写入到磁盘上，但是Http规范警告说不要依赖这一机制来确保数据的隐私性，恶心的或危险的缓存会完全忽略Cache-Control:no=store.
一种更好的办法：使用安全通信协议如安全套解字层。SSL响应是可缓存的，因此它提供了一种妥协----在确保数据隐私的同时在当前回话中缓存响应以改善用户体验。
6.确保Ajax请求遵守性能指导，尤其应具有长久的Expires.

1.与此相关：页面大小，响应时间，YSlow等级
页面大小和响应时间有着很强的正比关系。比例系数是0.94
YSlow等级是页面响应时间的强指示器。
2.如何测试：
HTTP请求图使用IBM Page Detailer生成。很好用的抓包工具。用在所有HTTP客户端上使用，使用该HTTP图表更容易指出组件下载的瓶颈。
响应时间的测量是使用Gomez的Web监视服务。这里的响应时间被定义为从请求初始化到页面的onload事件被触发所经过的时间，每个URL都在低宽带下测试了数千次，这里展示的平均值。
Firebug