该文档提供了高性能网站建设的最佳实践，强调前端优化对网站加载速度的重要性。具体建议包括减少 DNS 查找、使用 CDN、合并文件、避免重定向和压缩组件等。文档还引用了多种性能分析工具，并提供了关于缓存和加载顺序的详细指导。

1. 高性能网站建设 Ctrip 技术开发部 潘斐斐 2010-03-08 [email_address]

2. 性能黄金法则 只有 10 % -20 % 的最终用户时间花在了下载 HTML 文档 上 ; 其余 80 % -90 % 的时间花在了下载页面中的 所有组件 上。 关注前端可以很好的提高整体性能 改进前端通常只需要较少的时间和资源

3. 预处理 RTT 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 本地 网络 本地

4. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 查询 Cache ：读取 Cache 或者发送 304 请求

5. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 1 -- 减少 DNS 查找 DNS 缓存 浏览器 DNS 缓存 计算机 DNS 缓存 服务器 DNS 缓存（ TTL ） 使用 Keep-Alive 特性 减少 DNS 查找 当客户端的 DNS 缓存为空时， DNS 查找的数量与 Web 页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少 DNS 查找的数量。 较少的域名 来减少 DNS 查找 （ 2-4 个主机 ）

6. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 2 -- 使用 CDN 美国十大 Internet 网站和 CDN 服务提供商 Ctrip 使用的 China-Cache 和网宿

7. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 3 -- 减少 HTTP 请求 合并 JavaScript 文件和 CSS 文件 Ctrip 两张页面比较 Css Sprites Ctrip 首页例子 规则 4 -- Ajax 使用 Get 方法 XMLHttpRequest 的 Post 方法会涉及两步： 第一步：发送头部 第二步：发送数据 使用 Get 方法 只是 请求一次 TCP 的包 如果只要是 获取数据，并且 url 不超过 2k ，建议使用 Get 方法

8. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 5 -- 避免重定向 在重定向完毕并且 HTML 下载完毕之前，是没有任何东西显示给用户的 Google 和 ctrip 的重定向 涉及服务器负载、数据查询、服务器端缓存等

9. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 6 -- 压缩组件 HTML 文档、脚本和样式表、 XML 和 JSON 的文本响应 压缩如何工作 压缩通常能将响应的数据量减少将近 70% 规则 7 -- 精简 Javascript 和 Css 从代码中 移除不必要的字符 以减少其大小，减少加载时间。 规则 8 -- favicon.ico 小且可缓存 请求 favicon.ico 的例子 规则 9 -- 减少页面中 DOM 数 精简 HTML 文档 节点数过多会造成 Javascript 获取节点的 效率降低 document.getElementsByTagName(“*”).length

10. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 10 -- 添加 Expire 头 应用于不经常变化的组件，包括脚本、样式表、 Flash 组件、图片 Expires 和 Cache-Control 规则 11 -- 配置或移除 ETag 实体标签 (Entity Tag) 是 Web 服务器和浏览器用于确认缓存组件有效性的一种机制 ETag 截图 ETag 的问题 （ 只包含时间戳和大小或者移除 ETag ） 规则 12 -- 使用外部的 Js 和 Css 文件 如果网站中的每个页面使用了相同的 js 和 css ，使用外部文件可以提高组件的 重用率 。 主页使用内联方法（加载后下载、动态内联 [cookie] ） 规则 13 -- 使 Ajax 可缓存 被动请求 & 主动请求

11. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 不要对 image 和 pdf 等二进制文件进行 gzip 压缩

12. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 14 -- 将样式表放在顶部 为了避免当样式变化时重绘页面中的元素，浏览器会 阻塞 内容逐步呈现。 白屏和无样式内容闪烁 Ctrip 某页面 CSS 的位置 规则 15 – 尽量将脚本放在底部 一般浏览器可以允许 并行下载 ，取决于主机个数、带宽等 （默认情况下， IE 是 2 个而 FF 是 8 个） 下载脚本时并行下载实际上是被禁用的。 脚本位置截图 规则 16 -- 移除重复脚本 页面中的脚本越多，就越有可能将一个脚本包含两次。引起不必要的 HTTP 请求和执行 Javascript 所浪费的时间。 规则 17 -- 避免 CSS 表达式 规则 18 -- 减少 js 对 DOM 的读取 用脚本读取 Dom 会使页面变慢，要注意以下几点 读取了元素之后缓存起来 将节点更新好之后再加入 dom 树 避免用脚本做页面的 layout 修改

13. 分析工具 YAHOO Exceptional Performance: http://developer.yahoo.com/performance/ Google Let's make the web faster: http://code.google.com/speed/ YAHOO ySlow: http://developer.yahoo.com/yslow/ Google Page Speed: http://code.google.com/speed/page-speed/ Google Speed Tracer: http://code.google.com/webtoolkit/speedtracer/ Microsoft Fiddler 2 http://www.fiddler2.com/fiddler2/ MySpace Performance Tracker http://msfast.myspace.com/ AOL Web Page Test http://www.webpagetest.org/ More Tools: http://code.google.com/speed/downloads.html

14. 关于作者 Steve Souders (Yahoo! Chief Performance) 关于封面 Greyhound 灵缇犬 ( 世界上跑的最快的狗 )

15. 谢谢 ······

16. Ctrip 两张页面比较 Ctrip 首页 js 请求截图 Ctrip 某频道首页 js 请求截图

17. Ctrip 首页例子

18. Google 和 Ctrip 的重定向 http:// destguides.ctrip.com / http:// toolbar.google.com

19. 压缩如何工作

20. 请求 favicon.ico 的例子

21. Expires 和 Cache-Control Expires 头使用特定时间，要求服务器和客户端的时钟严格同步； Cache-Control 使用 max-age 指定组件被缓存多久，以秒为单位。可以重写 Expires 头。 Ctrip 首页某 JS 文件请求 Google 首页某 JS 文件请求

22. ETag 截图

23. Ctrip 某页面 CSS 的位置 http://stevesouders.com/hpws/css-bottom.php http://stevesouders.com/hpws/css-top.php http://stevesouders.com/hpws/css-fouc.php

24. 脚本位置截图 http://stevesouders.com/hpws/js-top.php http://stevesouders.com/hpws/js-bottom.php