《高性能网站建设指南》章节试读

《高性能网站建设指南》的笔记-第57页 - 使用外部javascript和css

“如果你的网站能够为用户带来高完整缓存率，使用外部文件的收益就更大，如果不大可能产生完整缓存，则内联是更好的选择。
如果javascript和css是外部文件，浏览器就能缓存它们，html文件的大小减小，而且不会增加http请求的数量。”

《高性能网站建设指南》的笔记-第1页

例子地址：
http://stevesouders.com/hpws
1.减少http请求
2.使用内容发布网络（CDN）
3.为组建增加长久的Expires头
4.压缩脚本和样式表
5.使用link标签将样式表放在文档HEAD中
6.将脚本移到页面底部
7.避免css表达式
8.将javascript和css放到外部文件中
9.用过keep-Alive和较少的域名来减少DNS查找（http1.1可保持永久tcp连接）
10.对javascript源代码进行精简
11.寻找一种避免重定向的方法（记得最后加/）
12.确保脚本只被包含一次
13.配置或移除ETag（多台服务器时不宜用ETag）
14.确保Ajax请求遵守性能知道，尤其应具有长久的Expires头
抓包工具：IBM Page Detailer（http://alphaworks.ibm.com/tech/pagedetailer）
响应时间测量工具：（http://www.gomez.com）
页面性能工具：YSlow（http://developer.yahoo.com/yslow）

《高性能网站建设指南》的笔记-第89页 - 规则13 - 配置ETag

Expires头
浏览器下载组件时，会将他们存储到缓存中。在后续的页面查看中，如果缓存的组件是新鲜的，浏览器就会从磁盘上读取它，避免HTTP请求。如果组件没有过期，那么它就是新鲜的，这取决于Expires头的值。
--
条件GET请求
如果缓存的组件过期了（或者用户明确的重新加载了页面），浏览器在重用它之前必须首先检查它是否仍然有效。这称为一个条件GET请求（Conditional GET Requests）。不幸的是浏览器必须产生这个HTTP请求，执行有效性检查，但这仍比简单的下载所有已经过期的组件效率要高。如果浏览器缓存中的组件是有效的（即它能够和原始服务器上的组件相匹配），原始服务器不会返回整个组件，而是返回一个“304 Not Modified”状态码。
服务器在检测缓存的组件是否和原始服务器上的组件匹配时有两种方式：
1. 比较最新修改日期
2. 比较实体标签
--
最新修改日期
原始服务器通过Last-Modified响应头来返回组件的最新修改日期。在下一次请求时，浏览器会使用If-Modified-Since头将最新修改日期传回到原始服务器以进行比较。如果匹配，返回304，如果不匹配返回整个组件。
--
实体标签（ETag）
ETag提供了另外一种方式，用于检测浏览器缓存中的组件和原始服务器上的组件是否匹配。ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来。
ETag为验证实体提供了比最新修改日期更为灵活的机制。例如，如果实体依据User-Agent或Accept-Language头而改变，实体的状态可以反映在ETag中。
此后如果浏览器必须验证一个组件，会使用If-None-Match头将ETag传回原始服务器。

《高性能网站建设指南》的笔记-第20页 - 使用内容发布网络

“cdn用于发布静态内容，如图片、脚本、样式表盒flash。提供动态html页面会引入特殊的存储需求——数据库连接、状态管理、验证、硬件和os优化等。这些复杂性超越了cdn的能力范围。另一方面，静态文件更容易存储并具有较少的依赖性。这就是为什么对于地理上分散的用户人群来说，cdn能轻易地得到响应速度上的提高。”

《高性能网站建设指南》的笔记-第1页 - 1~14

提高网站性能的11个规则：
规则一、减少HTTP请求
方法：
1、CSS Sprites合并图片，减少HTTP请求
2、内联图片。浏览器不会缓存这种图像。dataurl节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。还有一点IE8以下都不支持这种图像,所以一般不用。
3、合并脚本和样式表，尽量减少js和css的请求数量
规则二、使用内容发布网络
内容发布网络（CDN）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。
规则三、添加Expires
页面中都包含大量的组件，通过web服务器使用一个长久的expires头，使得这些组件可以被缓存，这样在后续页面中避免不必要的HTTP请求
缺点：要求服务器和客户端的时间严格同步，过期日期需要检查，并提供新日期
换一种方式：cache-control使用max-age指令
规则四、压缩组件
方法：gzip压缩
规则五、将样式表放在顶部
规则六、将脚本放在底部，因为在下载脚本时浏览器会阻塞并行下载
规则七。避免CSS表达式。表达式的问题在于对其进行的求值【频率比人们期望的要高，它们不只在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过时都要被求值。
规则八、使用外部的JS和CSS
规则九、减少DNS查找
方法：通过使用Keep-Alive和较少的域名来减少DNS查找
规则十、精简JS，相当于压缩，且会除去注释及空格
规则十一、避免重定向。重定向会延迟整个HTML文档的传输
规则十二、移除重复脚本
规则十三、配置或移除Etag
规则十四、使用Ajax可缓存。确保ajax请求遵守性能指导，尤其应具有长久的expires头

《高性能网站建设指南》的笔记-第17页

减少HTTP请求
以前认为优化只要将后台做好，那么网站的响应速度应该自然没有问题，现在看来这种想法有点太想当然了。

《高性能网站建设指南》的笔记-第3页

这本书和进阶篇 基本上主要章节都是在讲http协议相关的前段优化技巧，还有部分程序框架上的设计指南。值得一读。

《高性能网站建设指南》的笔记-第4页 - 性能黄金法则

“所有这些网站在获取html文档时，花费的时间都不到总响应时间的20%－－－－在进行优化时，关键是剖析当前的性能，找到哪里能够获得最大的优化。
只有10%－20%的最终用户响应时间花在了下载html文档上，其余的80%－90%时间花在了下载页面中的所有组件上。”

《高性能网站建设指南》的笔记-第1页 - 绪言B:HTTP概述

压缩：浏览器使用Accept-Encoding
服务器：Content-Encoding
条件GET请求：如果浏览器在缓存中保留了组件的事个副本，但并不确定它是否还有效，就会生成一个条件GET请求.
304 Not Modified
Expires头：明确指出浏览器是否可以使用组件副本的缓存
Keep-Alive:持久连接，解决每次请求都要打开socket问题
Connection:keep-alive
Connection:close

《高性能网站建设指南》的笔记-第38页 - 逐步呈现

“进度指示器有三个主要优势——它们让用户知道系统没有奔溃，只是正在为他或她解决问题；它们指出了用户大概还需要等多久，以便用户能够在漫长的等待中做些其他事情；最后，它们能给用户提供一些可以看的东西，使得等待不再那么无聊。最后一点优势不可低估，这也是为什么推荐使用图形进度条而不是仅仅以数字形式显示预期的剩余时间。”

《高性能网站建设指南》的笔记-第1页

《High Performance Web Sites》读书笔记
http://www.cainiao8.com/web/high_performace_web_sites.html
High Performance Web Sites
http://stevesouders.com/hpws/rules.php
规则1 减少http请求
图片地图 map
Server-side image maps
Client-side image maps
内联图片 Inline Images
ie不支持
php函数 file_get_contents
对文件进行精简ch10
规则2 使用内容分发网络 CDN啦
Akamai是CDN业界的领头羊
免费CDN服务可用 如Globule，CoDeeN，CoralCDN
无论如何不要使用HTTP重定向来将用户指向到本地服务器 ch11
规则3 添加Expires头
Max-Age和mod_expires
HTTP 1.1 引入了Cache-Control头来克服Expires头的限制
mod_expires Apache模块 http://httpd.apache.org/docs/2.0/mod/mod_expires.html
空缓存vs完整缓存
Empty Cache vs Primed Cached
html文档不应该使用长久的expires头。
Caching Tutorial for Web Authors and Webmasters
http://www.mnot.net/cache_docs/
最有效的解决方法是修改其所有连接，这样全新的请求将从原始服务器下载。
规则4 压缩组件
gzip编码压缩HTTP响应包
web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持
Accept-Encoding: gzip,deflate
web服务器通过响应中的Content-Encoding头来通知Web客户端
Content-Encoding:gzip
压缩what
js,css,html,xml,json
图片&pdf nope 已经被压缩了
apache 1.3使用mod_gzip
apache 2.x使用mod_deflate
代理缓存
Proxy Caching
边缘情形 Edge Cases
默认情况下 ETag 不能反映出内容是否被压缩，因此代理可能会想浏览器提供错误的内容。 此问题在Apache的缺陷数据库http://issues.apache.org/bugzilla/show_bug.cgi?id=39727 中有所描述。 最好的解决办法是禁用ETag。 ->ch13
规则5 将样式表放在顶部 （使用link方式放在head
将css放在底部会白屏 ie
规则6 将脚本放在底部
脚本阻止下载
如果它们之间存在着依赖关系，不按顺序执行就会导致js错误。
最差情况 将脚本放在顶部；最佳情况 将脚本放在底部
正确的放置
另外一种建议： 使用延迟Defferred脚本 differ属性表明脚本不包含document.write浏览器得到这一线索就可继续进行呈现。
如果一个脚本可以延迟 那么它一定可以一到页面底部。
规则7 避免css表达式
classname: expression
(原来这才是css表达式... a js 表达式)
规则8 使用外部js和css
主页 Homepages
页面查看 ： 每月很高的页面查看数量
空缓存vs完整缓存：
组件重用： 重用率低
首页倾向于使用内联。
两全其美 the best of both worlds
1. 加载后下载 post-onload download
通过onload事件
2. 动态内联 dynamic inlining
规则9 减少DNS查找 reduce DNS lookups
通常 浏览器查找一个给定主机名的ip地址要花费20~120毫秒
DNS缓存和TTL DNS Caching and TTLs
影响DNS缓存的因素 Factors Affecting DNS Caching
TTL Time-to-live http协议中的Keep-Alive特性可以同时覆盖TTL和浏览器的时间限制
TTL 建议值一天 一般没那么高 故障转移神马的
减少DNS查找
规则10 精简JavaScript minify JS
精简 minification
Obfuscation 书上翻译是混淆 模糊处理更好吧坑爹啊
精简不会出问题 obfuscation会
The Savings
JSMin http://crockford.com/javascript/
Dojo Compressor 已经改名为ShrinkSafe http://dojotoolkit.org/docs/shrinksafe
锦上添花 Icing on the Cake
inline scripts 精简
Gzip and Minification
minifying css
规则11 避免重定向 avoid redirects
缺少斜线 发送重定向是很多web服务器的默认行为，包括apache
连接网站 connecting web sites
Alias、mod_rewrite、DirectorySlash
tracking internal traffic referer 日志
tracking outbound traffic
规则12 移除重复脚本
规则13 配置ETag
组件如何缓存和确认。。。
ETag 实体标签 实体=组件
如果ETag匹配 就会返回304状态码 not-modified，使响应减少
ETag问题
使用了服务器集群的话，浏览器在一台服务器上获取组件，之后，又从另外一台不同服务器发起条件get请求时，ETag是不会匹配的
默认情况下，对于拥有多台服务器的网站，Apache和IIS向ETag中潜入的数据都会大大地降低有效性验证的成功率
ETag用还是不用
从ETag中移除ChangeNumber或完全移除ETag可以避免当数据已经位于浏览器缓存中进行不必要的和低效的下载。
规则14 使Ajax可缓存
优化ajax请求 optimizing Ajax Requests
3 使响应可缓存!important 4 压缩组件 9 减少DNS查找 10 精简JS 11 避免重定向 13 ETag
google spreadsheets中 请求有的使用了XMLHttpRequest 也有的使用了IFrame
ch15 Deconstruction 10 Top Sites
http请求图表 IBM Page Detailer http://alphaworks.ibm.com/tech/pagedetailer
响应时间 Gomez web监视服务 http://www.gomez.com
firebug分析各个页面中的javascript 和css yslow

《高性能网站建设指南》的笔记-第18页 - 使用内容发布网络

“如果应用程序web服务器（application web server）离用户更近，则一个http请求的响应时间将缩短。另一方面，如果组件web服务器（component web server）离用户更近，则多个http请求的响应时间将缩短。与其开始重新应用程序这一艰难任务，以便将应用程序web服务器，不如首先将组件web服务器分散开。这不仅能达到响应时间大幅减少的目的，还很容易实现。”

《高性能网站建设指南》的笔记-第10页 - 规则1:减少Http请求

改善响应时间的最简单途径就是减少组件（图片，脚本，样式表，flash等）的数量，并由此减少HTTP请求的数量
从页面中移除组件的想法会引发性能和产品设计之间的矛盾，解决办法：
图片地图：
允许在图片上放置多个url,目标url的选择取决于用户点击了图片的哪一块。
Css Sprites:
使用Css 整合图片
#navbar span {
width:31px;
height:31px;
display:inline;
float:left;
background-image:url(/images/spritebg.gif?t=1389780616);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
内联图片：
内联用法可能有些浏览器不支持
data:[<mediatype>][;base64],<data>
<img border=0 src="data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGvc7OxtZ7ANbWztbW1tbe1t7e1uelMefn1ufn3ufn5+fv3u+MAO/v5+/v7/fGCPf35/f37//nY////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEAAAAALAAAAAAfAB8AAAj+AAEIHEhQAoICAxImLIBAAsGHEAc6KEDAgAIJGCU4UGCgooOIESUYYJjxgQSTGE0eNOAQpMCJBhycnGmyJs2RH0E6INAQpc2ZNDEiIJDzoQSSP5MCrXmwJUEDMWs6eCDTQYQDWKdOPTkV6sOdD8KKFRvhAlYKBx4IOCBA7M6iRxE4mEt3btkDDBgcQLtWQN2hLd8uWOBgcOG7DChQ0IuWrYLChAk8AGCwwODLgxErVsyYrYMEl0nGVUC6tObNnPceSFBaQVMJAxC4lo3gNOrUaFnTHoAxNm3XVxPfRq139e8BEGAjWD5bgIALw287T8AcAXLly2kjOACdc17higXSIKDO/Lpv7Qq4bw7APgBq8eOzX69InrZ6xe3dbxZffyTGkb8tdx8F+b0Xn2sFsCSBAgTM5lp63RHYnoHUudZgRgkGOGCB+43nGk4OGcQTabKx5dyJKJ7ImoUNCaRRAZYN1ppsrT3Y2gIwyjSQBAtUpABml/0IJGYd6VjQUDH9uBFkGxGm5I8dPQaRUAQUMBdhhBV25ZYUJZBcSAtSJBddWZZ5UAGPOTXlgkNVOSZdBxEwIkYu7VhYnAol5GaadRqF0Uaz0TgXnX2umVFyGakJUUAAADs=">
合并脚本和样式表：
引用分块的样式表和脚本文件会产生http请求
可将多个样式表合成一个
规则2:使用内容发布网络(CDN)
如果http服务器与用户越近，响应越快，同样，组件服务器距离用户越近，响应也越快。

《高性能网站建设指南》的笔记-第1页

记录下这边书

《高性能网站建设指南》的笔记-第1页

这个价格的书，这些内容，确实性价比不怎么样，很多东西日常都在用到，只是没有归类整理罢了，而且其中很多的翻译感觉也欠缺水平。
文章最后提出的使用IBM page detailer，仅支持IE，专业点的还是用Wireshark NB些，Yslow这个工具集成到Firebug中确实不错。
个人感觉影响性能的最大的包括三个方面：
1. 连接资源消耗，包括HTTP请求，组件大小；
2. 本地缓存；
以上两个方面算是硬性指标，第三个，也就是css、js的位置， ajax cache 这些，对页面访问时间影响基本不大，但是对用户体验是有影响的。
等有时间了把这些个东西整理下。

《高性能网站建设指南》的笔记-第1页

重温yslow的13条建议（目前已与时俱进到34条），受益仍旧匪浅，特别是涉及到etag的部分，“etag在某些情况下会损坏性能”

《高性能网站建设指南》的笔记-第33页 - 代理缓存

Web服务器可以告诉代理服务器根据一个或多个请求头来改变代理缓存的响应。由于压缩的决定是基于Accept-Encoding请求头的，因此需要在服务器的Vary响应头中包含Accept-Encoding。

《高性能网站建设指南》的笔记-第21页

规则3添加Expires头：
使用Expires 头来缓存组件
Cache-Control:public,max-age=172800
动态修改文件名
规则4:压缩组件
Accept-Encoding:gzip
压缩可减少文件传输体积，加快响应
压缩什么：xml,json,脚本，样式表等文本内容，不包括图片，pdf
压缩成本：服务器花cpu资源，客户端解压缩
配置apache 压缩
规则5：用link将样式表放在顶部<head><link rel="" href></head>
方式1：<link rel="stylesheet" href="style.css"/>
建议使用link方式
方式2：<style>
@import url('style.css')
@import url('style.css')
@import url('style.css')
....
</style>
必须放在其它规则之间，且容易产生白屏
白屏和无样式内容的css闪烁
规则6：脚本移动到页面底部
脚本放在顶部，脚本阻塞：会阻塞对其后面的内容的呈现及后面的组件的下载
移动脚本要注意的问题：例如存在document.write在页面写内容，就不能移到底部
规则7：避免CSS表达式
一次性表达式和事件处事器
规则8：使用外部javascritp和css
从几个方面考虑是使用内联还是外联:
页面查看数量，缓存，组件重用
规则9：减少DNS查找
DNS缓存,TTL
使用keep-alive和较少的域名来减少DNS查找
规则10：精简javascript
精简：去掉注释和空白，换行特等..
规则11：避免重定向
寻找一种避免重定向的方法
规则12：移除重复脚本
重复的脚本，重复的http请求和重复的响应时间
规则13：配置Etag
实体标签ETag:浏览器和服务器之间确认缓存组件的一种机制
检测缓存组件是否匹配：
比较最新修改日期，比较实例标签
规则14：使用AJAX可缓存
确保Ajax请求遵循性能指导，尤其应当具有长期Expires头

《高性能网站建设指南》的笔记-第1页 - 前端性能的重要性

为何要关注前端性能：1.如果将后端响应时间缩短一半，则整体响应时间只能减少5%-10%
而关注前端，同样缩短一半，则整体响应时间可减少40%-45%
2.改进前段只需要较少的时间和资源。 性能黄金法则：
只有10%～20%的最终用户响应时间花在了下载HTML文档上，其余80%～90%时间花在了下载页面的组件上

《高性能网站建设指南》的笔记-第21页

使用内容发布网络
实际情况是，我测试书中给的URL，没有使用CDN的比使用CDN的速度快……
应该是网络问题吧，哈哈。

《高性能网站建设指南》的笔记-1-14 - 1-14

1. 减少HTTP请求(使用CSS Sprite,CSS样式表中以data:image/gif;base64,xxxx)的方式内联图片
2. 使用CDN实现地理位置上离用户更近
3. 添加Expires头，添加Cache-Control中的max-age 利用缓存
4. gzip压缩文档、样式表、脚本(Accept-Encoding:gzip)
对代理缓存设置Vary:Accept-Encoding,User-Agent
5. 使用link标签将样式表放在顶部，使得内容逐步呈现。避免IE中的白屏、其他浏览器的闪烁
6. 脚本文件尽量放在底部，以免阻塞其他组件的预先下载
7. 避免CSS expression，使用one-time expression或者window.onresize等事件
例子：http://stevesouders.com/hpws/onetime-expressions.php
8. 外链js和css得到缓存的机会
9. 减少DNS查找（修改TTL值，使用keep-alive）
10. 精简JS
11. 避免重定向(301 moved permanently,302 moved temporarily,304 not modified )
避免缺少斜线的链接结尾
12. 移除重复脚本
13. 配置/移除ETag减少对服务器性能的影响。（因为不同服务器上ETag不同，导致对缓存的使用率下降）
14. 优化Ajax（可以用时间戳哦~~）
综合来讲，就是减少HTTP请求、减小被请求内容的大小。使用缓存、注意组件(CSS/JS)的位置对页面呈现的影响。