• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

百度前端技术交流会--搜搜前端架构演变与优化

on

  • 1,424 views

百度前端技术交流会--搜搜前端架构演变与优化

百度前端技术交流会--搜搜前端架构演变与优化

Statistics

Views

Total Views
1,424
Views on SlideShare
1,336
Embed Views
88

Actions

Likes
3
Downloads
46
Comments
0

3 Embeds 88

http://angck.com 78
http://www.angck.com 9
http://cache.baidu.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 直达区使用独立的服务器,作为网页前台的一个 appserver, 网页使用 socket 进行请求

百度前端技术交流会--搜搜前端架构演变与优化 百度前端技术交流会--搜搜前端架构演变与优化 Presentation Transcript

  • 搜搜前端架构与优化
    • Moonzhang( 张勇 ) @ 2010-10-30
  • 内容提要
    • 腾讯搜搜简介
    • 前端定义
    • 架构的演变
    • 前端演变与优化
    • 发展与展望
  • 搜搜简介
    • 推广
    • 直达区
    • 搜索结果
    • 新闻 BOX
    • 搜索历史
    • 广告
    • 还在搜
    • 其它 ..
  • 直达区( Bingo )介绍
  • 搜索平台部 – 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.baidu.com 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
    • 设置过期时间为未来的某个时刻
  • Cache : 减少请求数
  • 加速请求
    • 无阻塞加载 JS
    • 分段输出(搜索前、中、后)
    • 预加载(图片、样式、脚本,页面片)
    • 按需加载脚本
    • 指定图片尺寸,以免 reflow
    • Browscap / js / 条件注释 /css hack
  • 架构优化
  • 心得体会
    • 毫秒必争的心态
    • 不是聪明就可以,要有基础组件支持
    • 简单、务实
    • 用户至上
    • 用数据说话
    • 有效利用工具
  • 展望
    • 利用 HTML5 、 CSS3
      • 替换图片
      • LocalStorage,Offline Storage
    • 探索和研发最适合自己的前端框架
    • 精雕细琢地前端编码
    • 持续优化
    • 业界分享
    • 谢 谢