【读书笔记】读《高性能网站建设指南》及《高性能网站建设进阶指南：Web开发者性能优化最佳实践》

　　这两本书就一块儿搞了，大多数已经理解，简单做个标记。主要对自己不太了解的地方，做一些记录。

 

一、读《高性能网站建设指南》

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

　　1> 尽量减少HTTP请求

　　2> 使用CDN

　　3> 添加Expires头

　　4> 采用Gzip压缩组件

　　5> 将样式表放在顶部

　　6> 将脚本放在底部

　　7> 避免CSS表达式

　　8> 使用外部JavaScript和CSS

　　9> 减少DNS查找

　　10> 精简JavaScript

　　11> 避免重定向

　　12> 避免重复脚本

　　13> 配置Etag

　　14> 使Ajax可缓存

 

二、读《高性能网站建设进阶指南：Web开发者性能优化最佳实践》

第一章：理解Ajax性能

1> 权衡——时间、质量和成本，三选二

2> 优化原则——降低程序的整体性能。

　　把重点放在对程序整体开销影响大的那部分。优化那些开销不大的组件收效甚微。分析应用程序和分析算法密切相关。自习观察程序的执行时间后，我们会发现其大部分时间都消耗在循环上。所以，优化那些只执行一次的代码得到的回报微不足道，但优化内部循环的好处却能达到立竿见影的效果。

　　浏览器通常在运行JavaScript上花费的时间很少。绝大部分时间消耗在DOM上。

3> 善加利用ajax技术能使应用程序运行得更快，用好它的关键是在浏览器和服务器之间建立平衡。

 

第二章：创建快速响应的web应用

　　足够快的标准：

基于Web应用的响应时间准则和所有其他应用一样。37年来这些准则毫无变化。所以它们也不太可能因新技术的出现而发生变化。

 

0.1秒：用户直接操作UI中对象的感觉极限。比如，从用户选择表格中的一列到该列高亮或向用户反馈已被选择的时间间隔。理想情况下，它也是对列进行排序的时间响应——这种情况下用户会感到他们正在给表格排序。

 

1秒：用户随意地在计算机指令空间进行操作而无需过度等待的感觉极限。0.2~1.0秒的延迟意味着会被用户注意到，因此感觉到计算机出于对指令的“处理中”，这有别于直接响应用户行为的指令。例如：如果根据被选择的列对表格进行排序无法再0.1秒内完成，那么必须在1秒内完成，否则用户将感觉到UI变得缓慢且在执行任务中失去“流畅”的体验。超过1秒的延迟要提示用户计算机正在解决这个问题。例如改变光标的形状。

 

10秒：用户专注于任务的极限。超过10秒的任何操作都需要一个百分比完成指示器。以及一个方便用户终端操作且有清晰标示的方法。假设用户遭遇超过10秒延迟后才能返回到原UI的情况，他们将需要重新适应。在用户的工作中，超过10秒的延迟尽在自然中断时可以接受。比如切换任务时。

 

第三章：拆分初始化负载

　　在初始化页面的时候只加载必要的模块（包括JavaScript和Css等），其余的按需加载。

 

第四章：无阻塞加载脚本

　　1> XHR注入

　　2> Script in Iframe

　　3> Script DOM Element

　　4> Script Defer

　　5> document.write Script Tag

 

第五章：整合异步脚本

　　对于无阻塞脚本加载的技术，需要整合行内脚本和其依赖的异步加载外部脚本的技术，解决加载顺序等问题。

 

第六章：布置行内脚本

　　理解行内脚本位置对性能的影响——行内脚本阻塞并行下载

　　a> 把行内脚本移至底部

　　b> 异步启动脚本

　　c> 使用script的defer属性

 

第七章：编写高效的JavaScript

    避免过多的DOM交互、过多的循环、过多的递归

 

第八章：可伸缩的comet

 

第九章：超越Gzip

　　最小化未压缩文件的大小等

 

第十章：图像优化

1> 合理选择图片格式

2> 自动化使用无损压缩技术尽可能削减图片大小

 

第十一章：划分主域

　　域从一个增加到两个对性能有所提高。但数量超过两个时反而对加载时间有负面影响。最终数量取决于资源的大小和数量，但划分域是个很好的经验。

 

第十二章：尽早刷新文档的输出

 

第十三章：少用iframe

1> 开销最高的DOM元素

2> 阻塞onload事件

......

 

第十四章：简化CSS选择符

    样式系统从最后边的选择符开始向左匹配规则。只要当前选择符的左边还会有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

 

三、总结

　　OK，剩余的多实践，不多说。