建设高性能网站的构思.pptVIP

* * * * * * * * * * * * * * * 高性能网站建设 Ctrip技术开发部 潘斐斐 2012-03-08 蚂蚁winpe： 性能黄金法则 只有10%-20%的最终用户时间花在了下载HTML文档上; 其余80%-90%的时间花在了下载页面中的所有组件上。 关注前端可以很好的提高整体性能 改进前端通常只需要较少的时间和资源 预处理 RTT 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 本地 网络 本地 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 查询Cache：读取Cache 或者发送304请求 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则1 -- 减少DNS查找 DNS缓存 浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL） 使用Keep-Alive特性 减少DNS查找 当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。 较少的域名来减少DNS查找（2-4个主机） 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则2 -- 使用CDN 美国十大Internet网站和CDN服务提供商 Ctrip使用的China-Cache和网宿 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则3 -- 减少HTTP请求 合并JavaScript文件和CSS文件 Ctrip两张页面比较 Css Sprites Ctrip首页例子 规则4 -- Ajax使用Get方法 XMLHttpRequest的Post方法会涉及两步： 第一步：发送头部 第二步：发送数据 使用Get方法只是请求一次TCP的包 如果只要是获取数据，并且url不超过2k，建议使用Get方法 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则5 --避免重定向 在重定向完毕并且HTML下载完毕之前，是没有任何东西显示给用户的 Google和ctrip的重定向 涉及服务器负载、数据查询、服务器端缓存等 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则6 -- 压缩组件 HTML文档、脚本和样式表、XML和JSON的文本响应 压缩如何工作 压缩通常能将响应的数据量减少将近70% 规则7 -- 精简Javascript和Css 从代码中移除不必要的字符以减少其大小，减少加载时间。 规则8 -- favicon.ico小且可缓存 请求favicon.ico的例子 规则9 -- 减少页面中DOM数 精简HTML文档 节点数过多会造成Javascript获取节点的效率降低 document.getElementsByTagName(“*”).length 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则10 -- 添加Expire头 应用于不经常变化的组件，包括脚本、样式表、Flash组件、图片 Expires和Cache-Control 规则11 -- 配置或移除ETag 实体标签(Entity Tag)是Web服务器和浏览器用于确认缓存组件有效性的一种机制 ETag截图 ETag的问题 （只包含时间戳和大小或者移除ETag） 规则12 -- 使用外部的Js和Css文件 如果网站中的每个页面使用了相同的js和css，使用外部文件可以提高组件的重用率。 主页使用内联方法（加载后下载、动态内联[cookie]） 规则13 -- 使Ajax可缓存 被动请求 主动请求 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 不要对image和pdf等二进制文件进行gzip压缩 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取cache 处理元素 渲染元素 规则14 -- 将样式表放在顶部 为了避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。 白屏和无样式内容闪烁 Ctrip某页面CSS的位置 规则15 – 尽量将脚本放在底部 一般浏览器可以允许并行下载，取决于主机个数、带宽