狠狠撸

腾讯搜搜
搜搜前端架与化构优
?Moonzhang( 勇张 ) @ 2010-10-30

内容提要
? 搜搜介腾讯简
? 前端定义
? 架的演构变
? 前端演与化变优
? 展与展望发

A. 推广
B. 直区达
C. 搜索果结
D. 新闻 BOX
E. 搜索史历
F. 广告
G. 在搜还
H. 其它 ..

搜索平台部 – WEB 开发组

SUSE Linux
? 公司一部署统
? 容易维护
– 一的统 RPM 源资
? 区分 WEB 服器与务 Cache 服器务
? 安全性

MySQL
? 流行 + 完善
? 易用
? 易维护
? M/S

KW DB
? Memcached
? TT
? BDB/Redis/membase etc..

P H P
? 速度、速度、速度
– 速度快开发
– 学成本低（习 C ）变种
– 行效率好运
? 第三方成熟（库 PEAR, PECL ）
? 社区大而活庞跃
? 日成熟（趋 OOP, namespace ，包…）闭

SuperPHP / WinPHP
? PHP 框架开发
? 实现 MVC 模式，清晰结构 , 使者只注开发关业务逻辑
? 提供
Auth 、 ACL 、 DB 、 ORM 、 Cache 、 Session 、
Util 、 Page 等模块

Apache
? 定稳
? 强大
? 配置活灵
? mod_php5
? mod_rewrite

Memcached
? 用于存放存数据，供各缓 APP 使用
? 定稳
? 配置简单
? PHP 展：扩 php_memcache
– API : get,set,increment,decrement,delete…
? 高效
? 分布式

与挑问题战
? 用越来越多户
? DNS 不准？
? 用反映速度慢户访问

解决法办
? 利用自有 IP 库
? 自建智能 DNS
? 搭建速系测统

与挑问题战
? 点单
? 故障移周期？转长
? 缺少控监

解决法办
? 增加 HA
? 增加控监

与挑问题战
? 响常超应时间经过 1 秒甚至 2 秒 (server 端
）
? Memcache timeout (1s)
Memcache 扩展

解决法办
? 使用 socket+Memecache 数据协议读
? 控制 timeout 在秒以内（级 50ms)
Socket

与挑问题战
? Bingo 用越来越多：天气、股票、应 NBA 。。。
? Bingo 交互，既“美 ”又要“ ”起来变复杂观动
? 始付不来团队开应过
– 网页版本迭代
– 新的 Bingo 应用
Socket

解决方案
? 喊出敏捷口号
? 拆分业务
– 将网页搜索与直达区拆分
– 直达区作为独立的业务
? 架更构变
– bingo 作为独立的服务
– 网页并行请求搜索结果与 bingo 数据
– 控制 timeout&latency
? 小分组划
– 成立直达区 team （产物、开发、测试）

心得体会
? 用已掌握的技解决术问题 , 权衡定与激情稳 (twitter)
? 避免度（摩尔定律过设计 )
? 使用内存比使用磁来的爽的多盘
– RAM is the new disk!
? 切分（水平、按功能）
– 把工作负载分解成多个有能力驾驭的小单元，让每个单元都
能维持良好的性价比

与挑（前台）问题战
? 增业务长
– 用户
– bingo 数量
– 数据越来越多，内存吃紧
? Bingo 越来越，都要起来复杂动
? 合作成本高，范缺失团队编码规
? 脚本管理混乱，用性低，成本高复维护
? 代冲突：码 bingo vs websearch

解决方案
? 制代合作范订码规 + 包闭
? 式，区分公共式和不同样规划样 app 式样
? 代码规划 + 重用

一个脚本类选择库
? 自行开发
? Prototype
? jQuery
? YUI
? dojo
? Ext
? QZFL
? SuperJS

与挑问题战
? 前端展现时间过长
– HTML table 嵌套
– JS 混乱、堆砌
– 各 bingo app 间 CSS 冲突、低效
– ……

解决方案
? 问题： HTML table 嵌套
? 解决法办：化面优页结构
– 2009 年行第一次面大重，一个多月进页构历时

与挑问题战
? 网站面性能形峻页势严
– 需要系的行化统进优
? 一些数据：
– 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: http://webpagetest.org
? IBM Page Detailer
http://www.alphaworks.ibm.com/tech/pagedetailer
? Pingdom
http://tools.pingdom.com
? WebKit’s Web Inspector
Safari 4 Beta or WebKit nightly from http://webkit.org
? Web Debugging Proxies
http://charlesproxy.com, http://fiddlertool.com
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%
? www.google.com 11697 bytes, gzip compressed to 4886 bytes ( 58.2 % saving )
? www. 3641 bytes, gzip compressed to 1775 bytes ( 51.2 % saving )
? www.soso.com 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…
– http://www.w3.org/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=31536000
? 置期未来的某个刻设过时间为时

加速求请
? 无阻塞加载 JS
? 分段出（搜索前、中、后）输
? 加（片、式、脚本，面片）预载图样页
? 按需加脚本载
? 指定片尺寸，以免图 reflow
? Browscap / js / 条件注释 /css hack

心得体会
? 毫秒必争的心态
? 不是明就可以，要有基件支持聪础组
? 、简单务实
? 用至上户
? 用数据说话
? 有效利用工具

展望
? 利用 HTML5 、 CSS3
– 替换图片
– LocalStorage,Offline Storage
? 探索和研最适合自己的前端框架发
? 精雕琢地前端细编码
? 持化续优
? 界分享业

狠狠撸

[Baidu web frontend_conference_2010]_[soso_frontend_architecture]

More Related Content

[Baidu web frontend_conference_2010]_[soso_frontend_architecture]

Editor's Notes