张勇-搜搜前端架构.ppt

问题与挑战 网站页面性能形势严峻 需要系统的进行优化 一些数据： Amazon 慢 0.1 s - 1% 用户放弃交易 Google 慢 0.4s - 0.6% 放弃搜索 Yahoo! 慢 0.4s - 减少 5%-9% 的流量 Bing 慢 2s - 收入下降 4.3 % Baidu?? 用户速度体验的1-3-10原则 工 具 HTTPWATCH Wireshark FireBug Yahoo Yslow Google PageSpeed Fiddler ……. AOL Page Test online version: ? IBM Page Detailer /tech/pagedetailer ? Pingdom ? WebKit’s Web Inspector Safari 4 Beta or WebKit nightly from ? Web Debugging Proxies , Pagetest - AOL Fiddler - Microsoft ySlow – YAHOO! 参考书 High Performance Web sites Evan faster web sites And, learn from best practices.. 减少请求 合并 CSS合并 sprites Javascript 模块化拆分、合并 动态载入 压缩数据量 GZIP 对文本进行压缩(html/css/js etc) 对非文本不压缩(gif/png/jpeg etc) Apache: mod_gzip/mod_deflate 压缩比一般在50%－70% 11697 bytes, gzip compressed to 4886 bytes ( 58.2 % saving ) 3641 bytes, gzip compressed to 1775 bytes ( 51.2 % saving ) 4756 bytes, gzip compressed to 2134 bytes ( 55.1 % saving ) Minify:CSS JS 工具 YUICompressor Google Closure Compiler Google PageSpeed 去掉无用的样式 规划、优化cookie 依然会节省，即使有gzip Minify html 去掉注释及空白符 省略特定标签闭合 li,p,br etc… /TR/html4/sgml/dtd.html 去除 type=“text/javascript”, text/css etc.. 去掉可去除的引号 使用短样式 优化图片 去掉额外的空白区域 使用最优的文件格式 JPG, 60 quality - 32K PNG-8, 256 colors - 37K GIF, 256 colors - 42K PNG-24 - 146K 使用CSS代替图片 -moz-border-radius:4px; -webkit-border-radius: 4px; border-radius: 4px; 经优化的PNG一般要比GIF要小 使用Smush.it Cache 减少请求 浏览器检查是否是最新的 通过HTTP头控制 Expires: Sat, 1 Jan 2011 20:00:00 GMT Cache-Control: max-age设置过期时间为未来的某个时刻 Cache : 减少请求数 加速请求 无阻塞加载JS 分段输出（搜索前、中、后） 预加载（图片、样式、脚本，页面片） 按需加载脚本 指定图片尺寸，以免reflow Browscap / js / 条件注释 /css hack 架构优化 心得体会 毫秒必争的心态 不是聪明就可以，要有基础组件支持 简单、务实 用户至上 用数据说话 有效利用工具 展望 利用HTML5、CSS3 替换图片 LocalStorage,Offline Storage 探索和研发最适合自己的前端框架 精雕细琢地前端编码 持续优化 业界分享 谢 谢 * * 直达区使用独立的服务器，作为网页前台的一个appserver,网页使用socket进行请求 * * * 腾讯搜搜 搜搜前端架构与优化 Moonzhang(张勇) @ 2010-10-30 内容提要 腾讯搜搜简介 前端定义 架构的演变 前端演变与优化 发展与展望 搜搜简介 推广 直达区 搜索结果 新闻BOX 搜索历史 广告 还在搜 其它.. 直达区（Bingo）介绍 搜索平台部 – WEB开发组 SUSE Linux 公司统一部署 容易维护 统一的RPM资源 区分WEB服务器与Cache服务