Rule 1: Make Fewer HTTP Requests
These techniques include using image maps, CSS sprites,inline images, and combined scripts and stylesheets.Using these techniques reduces response times of the example pages by as much as 50%.
疑问:image maps 可用性高吗?没有css sprites 灵活吧? inline images 用的也不多了
Rule 2: Use a Content Delivery Network
If the application web servers are closer to the user, the response time of one HTTPrequest is improved.On the other hand, if the component web servers are closer tothe user, the response times of many HTTP requests are improved.Rather than startingwith the difficult task of redesigning your application in order to disperse the application web servers, it’s better to first disperse the component web servers.This not only achieves a bigger reduction in response times, it’s also easier thanks to content delivery networks.
注解:对组建web服务器(图片)使用CDN加速
In addition to improved response times, CDNs bring other benefits.Their services include backups, extended storage capacity, and caching.A CDN can also help absorb spikes in traffic, for example, during times of peak weather or financial news,or during popular sporting or entertainment events.
注解:CDN还可以用来备份、扩展存储、缓存、缓和流量峰值
Rule 3: Add an Expires Header
A future Expires header is most often used with images, but it should be used on all components, including scripts, stylesheets, and Flash.Most
Using Cache-Control with max-age overcomes the limitations of Expires
注解:利用max-age可以重写expires
Rule 4: Gzip Components4
Many web sites gzip their HTML documents.It’s also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity (in fact, it’s worthwhile to compress any text response including XML and JSON, but the focus here is on scripts and stylesheets since they’re the most prevalent).Image and PDF files should not be gzipped because they are already compressed.
注解:压缩所有的文本如HTML、stylesheets、script,图片与PDF文件不能使用GZIP
Rule 5: Put Stylesheets at the Top 5
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers.Browsers block rendering to avoid having to redraw elements of the page if their styles change.Rule 5 has less to do
with the actual time to load the page’s components and more to do with how the browser reacts to the order of those components.In fact, the page that feels slower is ironically the page that loads the visible components faster.The browser delays showing any visible components while it and the user wait for the stylesheet at the bottom.The examples in the following section demonstrate this phenomenon,which I call the “blank white screen.”
注解:把样式表放在头部,利于页面的渲染,给用户一个良好的反馈,同时避免了内容阻塞造成“白屏”
Rule 6: Put Scripts at the Bottom
Parallel Downloads 并行下载
The explanation goes back to the HTTP/1.1 specification, which suggests that browsers download two components in parallel per hostname (http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4).Many web pages download all their
components from a single hostname.Viewing these HTTP requests reveals a stairstep pattern, as shown in Figure 6-1.
注解:HTTP1.1规范建议浏览器从每个主机名并行下载两个组建(这就是为什么很多大型网站,要使用众多独立域名来加载图片组件,但是过多的主机名反而会因为cpu和宽带原因影响到最终的性能,雅虎推荐使用两个)
Scripts Block Downloads 脚本阻塞下载
注解:脚本会阻塞对其后面内容的呈现与下载
Rule 7: Avoid CSS Expressions7
注解:不使用css表达式
background-color: expression( (new Date()).getHours( )%2 ? “#B8D4FF” : “#F08A00” );
Rule 8: Make JavaScript and CSS External
注释:如果css与js文件多出引用,应该使用外部文件,一则便于维护,二则可以使用缓存提高速度。
如果一个css与js只在短时间、小范围使用,建议使用内联速度更快
Rule 9: Reduce DNS Lookups9
Reduce DNS lookups by using Keep-Alive and fewer domains.
注释:通过使用较少的域名和keep-alive来减少DNS请求
Rule 10: Minify JavaScript &CSS
注释:使用工具对js和css我呢就进行压缩
Rule 11: Avoid Redirects
那些情况造成重定向:
1、Missing Trailing Slash 缺少结尾的斜杠
2、Tracking Outbound Traffic 跟踪外部流量
Rule 12: Remove Duplicate Scripts 12
Rule 13: Configure ETags 配置ETags
注释:现在貌似都不用ETag了
Expires Header
为logo等图片及js、css等文本文档添加Expires头部
Conditional GET Requests
如果缓存过期,浏览器发送GET
Last-Modified Date
通过对比last-modified确定是否覆盖
Rule 14: Make Ajax Cacheable 14