高性能网站建设

1,063 views
952 views

Published on

高性能网站建设

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,063
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

高性能网站建设

  1. 1. 高性能网站建设 Ctrip 技术开发部 潘斐斐 2010-03-08 [email_address]
  2. 2. 性能黄金法则 <ul><li>只有 10 % -20 % 的最终用户时间花在了下载 HTML 文档 上 ; </li></ul><ul><li>其余 80 % -90 % 的时间花在了下载页面中的 所有组件 上。 </li></ul><ul><li>关注前端可以很好的提高整体性能 </li></ul><ul><li>改进前端通常只需要较少的时间和资源 </li></ul>
  3. 3. 预处理 RTT 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 本地 网络 本地
  4. 4. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 查询 Cache :读取 Cache 或者发送 304 请求
  5. 5. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 <ul><li>规则 1 -- 减少 DNS 查找 </li></ul><ul><li>DNS 缓存 </li></ul><ul><li>浏览器 DNS 缓存 计算机 DNS 缓存 服务器 DNS 缓存( TTL ) </li></ul><ul><li>使用 Keep-Alive 特性 </li></ul><ul><li>减少 DNS 查找 </li></ul><ul><li>当客户端的 DNS 缓存为空时, DNS 查找的数量与 Web 页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少 DNS 查找的数量。 </li></ul><ul><li>较少的域名 来减少 DNS 查找 ( 2-4 个主机 ) </li></ul>
  6. 6. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 2 -- 使用 CDN 美国十大 Internet 网站和 CDN 服务提供商 Ctrip 使用的 China-Cache 和网宿
  7. 7. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 <ul><li>规则 3 -- 减少 HTTP 请求 </li></ul><ul><li>合并 JavaScript 文件和 CSS 文件 Ctrip 两张页面比较 </li></ul><ul><li>Css Sprites Ctrip 首页例子 </li></ul><ul><li>规则 4 -- Ajax 使用 Get 方法 </li></ul><ul><li>XMLHttpRequest 的 Post 方法会涉及两步: </li></ul><ul><li>第一步:发送头部 </li></ul><ul><li>第二步:发送数据 </li></ul><ul><li>使用 Get 方法 只是 请求一次 TCP 的包 </li></ul><ul><li>如果只要是 获取数据,并且 url 不超过 2k ,建议使用 Get 方法 </li></ul>
  8. 8. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 规则 5 -- 避免重定向 在重定向完毕并且 HTML 下载完毕之前,是没有任何东西显示给用户的 Google 和 ctrip 的重定向 涉及服务器负载、数据查询、服务器端缓存等
  9. 9. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 <ul><li>规则 6 -- 压缩组件 </li></ul><ul><li>HTML 文档、脚本和样式表、 XML 和 JSON 的文本响应 压缩如何工作 </li></ul><ul><li>压缩通常能将响应的数据量减少将近 70% </li></ul><ul><li>规则 7 -- 精简 Javascript 和 Css </li></ul><ul><li>从代码中 移除不必要的字符 以减少其大小,减少加载时间。 </li></ul><ul><li>规则 8 -- favicon.ico 小且可缓存 </li></ul><ul><li>请求 favicon.ico 的例子 </li></ul><ul><li>规则 9 -- 减少页面中 DOM 数 </li></ul><ul><li>精简 HTML 文档 </li></ul><ul><li>节点数过多会造成 Javascript 获取节点的 效率降低 </li></ul><ul><li>document.getElementsByTagName(“*”).length </li></ul>
  10. 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. 11. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 不要对 image 和 pdf 等二进制文件进行 gzip 压缩
  12. 12. 预处理 查询 DNS 建立连接 发送请求 等待响应 接收数据 读取 cache 处理元素 渲染元素 <ul><li>规则 14 -- 将样式表放在顶部 </li></ul><ul><li>为了避免当样式变化时重绘页面中的元素,浏览器会 阻塞 内容逐步呈现。 </li></ul><ul><li>白屏和无样式内容闪烁 </li></ul><ul><li>Ctrip 某页面 CSS 的位置 </li></ul><ul><li>规则 15 – 尽量将脚本放在底部 </li></ul><ul><li>一般浏览器可以允许 并行下载 ,取决于主机个数、带宽等 </li></ul><ul><li>(默认情况下, IE 是 2 个而 FF 是 8 个) </li></ul><ul><li>下载脚本时并行下载实际上是被禁用的。 脚本位置截图 </li></ul><ul><li>规则 16 -- 移除重复脚本 </li></ul><ul><li>页面中的脚本越多,就越有可能将一个脚本包含两次。引起不必要的 HTTP 请求和执行 Javascript 所浪费的时间。 </li></ul><ul><li>规则 17 -- 避免 CSS 表达式 </li></ul><ul><li>规则 18 -- 减少 js 对 DOM 的读取 </li></ul><ul><li>用脚本读取 Dom 会使页面变慢,要注意以下几点 </li></ul><ul><li>读取了元素之后缓存起来 </li></ul><ul><li>将节点更新好之后再加入 dom 树 </li></ul><ul><li>避免用脚本做页面的 layout 修改 </li></ul>
  13. 13. 分析工具 <ul><li>YAHOO Exceptional Performance: </li></ul><ul><li>http://developer.yahoo.com/performance/ </li></ul><ul><li>Google Let's make the web faster: </li></ul><ul><li>http://code.google.com/speed/ </li></ul><ul><li>YAHOO ySlow: </li></ul><ul><li>http://developer.yahoo.com/yslow/ </li></ul><ul><li>Google Page Speed: </li></ul><ul><li>http://code.google.com/speed/page-speed/ </li></ul><ul><li>Google Speed Tracer: </li></ul><ul><li>http://code.google.com/webtoolkit/speedtracer/ </li></ul><ul><li>Microsoft Fiddler 2 </li></ul><ul><li>http://www.fiddler2.com/fiddler2/ </li></ul><ul><li>MySpace Performance Tracker </li></ul><ul><li>http://msfast.myspace.com/ </li></ul><ul><li>AOL Web Page Test </li></ul><ul><li>http://www.webpagetest.org/ </li></ul><ul><li>More Tools: </li></ul><ul><li>http://code.google.com/speed/downloads.html </li></ul>
  14. 14. <ul><ul><li>关于作者 </li></ul></ul><ul><li>Steve Souders (Yahoo! Chief Performance) </li></ul><ul><ul><li>关于封面 </li></ul></ul><ul><li>Greyhound 灵缇犬 ( 世界上跑的最快的狗 ) </li></ul>
  15. 15. 谢谢 ······
  16. 16. Ctrip 两张页面比较 Ctrip 首页 js 请求截图 Ctrip 某频道首页 js 请求截图
  17. 17. Ctrip 首页例子
  18. 18. Google 和 Ctrip 的重定向 http:// destguides.ctrip.com / http:// toolbar.google.com
  19. 19. 压缩如何工作
  20. 20. 请求 favicon.ico 的例子
  21. 21. Expires 和 Cache-Control Expires 头使用特定时间,要求服务器和客户端的时钟严格同步; Cache-Control 使用 max-age 指定组件被缓存多久,以秒为单位。可以重写 Expires 头。 Ctrip 首页某 JS 文件请求 Google 首页某 JS 文件请求
  22. 22. ETag 截图
  23. 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. 24. 脚本位置截图 http://stevesouders.com/hpws/js-top.php http://stevesouders.com/hpws/js-bottom.php

×