Submit Search
Upload
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
•
Download as PPT, PDF
•
4 likes
•
1,272 views
思念 青青
Follow
2010.30,在百度大厦成功举办了百度前端技术交流会。这是腾讯的张勇关于搜搜前端架构的分享。 This is the frontend architecture of soso.
Read less
Read more
Report
Share
Report
Share
1 of 46
Download now
Recommended
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
新浪微博Feed服务架构
新浪微博Feed服务架构
XiaoJun Hong
在厦门爱特咖啡分享的新浪微博Feed服务架构
大型互联网站性能优化
大型互联网站性能优化
丁 宇
高性能队列Fqueue的设计和使用实践
高性能队列Fqueue的设计和使用实践
孙立
主要介绍Fqueue的设计实现和常见的队列使用场景,并讲解一个Fqueue的真实使用场景
redis 适用场景与实现
redis 适用场景与实现
iammutex
redis 适用场景与实现
Feed服务架构-新浪微博新员工培训议题
Feed服务架构-新浪微博新员工培训议题
XiaoJun Hong
2013年8月新员工培训topic-Feed服务架构
NoSQL误用和常见陷阱分析
NoSQL误用和常见陷阱分析
iammutex
NoSQL误用和常见陷阱分析(孙立)
阿里CDN技术揭秘
阿里CDN技术揭秘
Joshua Zhu
Alibaba CDN Architecture
Recommended
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
新浪微博Feed服务架构
新浪微博Feed服务架构
XiaoJun Hong
在厦门爱特咖啡分享的新浪微博Feed服务架构
大型互联网站性能优化
大型互联网站性能优化
丁 宇
高性能队列Fqueue的设计和使用实践
高性能队列Fqueue的设计和使用实践
孙立
主要介绍Fqueue的设计实现和常见的队列使用场景,并讲解一个Fqueue的真实使用场景
redis 适用场景与实现
redis 适用场景与实现
iammutex
redis 适用场景与实现
Feed服务架构-新浪微博新员工培训议题
Feed服务架构-新浪微博新员工培训议题
XiaoJun Hong
2013年8月新员工培训topic-Feed服务架构
NoSQL误用和常见陷阱分析
NoSQL误用和常见陷阱分析
iammutex
NoSQL误用和常见陷阱分析(孙立)
阿里CDN技术揭秘
阿里CDN技术揭秘
Joshua Zhu
Alibaba CDN Architecture
分布式存储的元数据设计
分布式存储的元数据设计
LI Daobing
分布式存储的元数据设计
分布式Key Value Store漫谈
分布式Key Value Store漫谈
Tim Y
Distributed key value store, memcachedb, tokyo tyrant, redis performance, dynamo. 分布式key value store漫谈, memcachedb, tokyo tyrant, redis性能比较
豆瓣数据架构实践
豆瓣数据架构实践
Xupeng Yun
2014-04-19 在 ACOUG 活动上的分享,介绍了豆瓣数据架构的演进过程,以及过程中遇到的问题、目前正在面临的挑战等。
Php study.20130110
Php study.20130110
bngoogle
ABOUT php study.
1.4 go在数据存储上面的应用—毛剑
1.4 go在数据存储上面的应用—毛剑
Leo Zhou
Gopher China 2016
Q con shanghai2013-[刘海锋]-[京东文件系统简介]
Q con shanghai2013-[刘海锋]-[京东文件系统简介]
Michael Zhang
Nginx深度開發與客制化
Nginx深度開發與客制化
Joshua Zhu
在阿里巴巴集團,Tengine(阿里定製開源版本Nginx)在淘寶、天貓、阿里雲等眾多大流量網站上運行,每天服務數十億page views。在本次演講裏,我們將分享我們是如何深度定制與開發Nginx,以增強其性能、安全、可運營性等方面。如: * 動態模塊加載(DSO)支援、syslog和pipe支援等; * 更多實用的load balancing算法,如session_sticky,consistent_hash等; * 性能提升改進,如timer的優化; * 安全增強,如防DDoS,慢攻擊防禦,traffic control措施等; * 自動前端性能優化,如組合CSS/JavaScript,頁面trim等; * 動態scripting語言支援(Lua); Tengine是開放原始碼項目,主頁在:http://tengine.taobao.org/
张铁安:Feed系统架构浅析
张铁安:Feed系统架构浅析
Leechael
Downloaded from CSDN download channel.
基于MySQL的分布式数据库实践
基于MySQL的分布式数据库实践
jackbillow
基于MySQL的分布式数据库实践
云梯的多Namenode和跨机房之路
云梯的多Namenode和跨机房之路
li luo
How to build a hadoop cluster which cross datacenters
浅析分布式存储架构—设计自己的存储- 58同城徐振华
浅析分布式存储架构—设计自己的存储- 58同城徐振华
zhuozhe
高并发服务端架构 常用分布式存储比较 分析需求,做好平衡 如何做到RAS(可靠,可用,可扩展); 利用硬件,分级存储
豆瓣网技术架构变迁
豆瓣网技术架构变迁
reinhardx
有几张图尚未 加入,所以暂不提供下载,待我重看录像修订之后放出。 罗马不是一天建成的,豆瓣的技术架构也是随着用户规模的增长一直在持续变化中。在本次演讲中,豆瓣的首席架构师洪强宁将与大家一起分享从上线时的单台服务器架构开始一直到现在的豆瓣架构变迁历程。 个人简介 洪强宁,2002年毕业于清华大学,现任北京豆瓣互动科技有限公司首席架构师。洪强宁和他带领的技术团队致力于用技术改善人们的文化和生活品质,在网站架构、性能、可伸缩性上进行深入研究。豆瓣网曾获软件中国2006年度最佳技术应用网站。
大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化
XiaoJun Hong
在新浪微博平台技术开放日分享的议题
分布式缓存与队列
分布式缓存与队列
XiaoJun Hong
新浪微博新员工培训及其技术交流活动topic,主要阐述从中小系统发展到大型系统的技术演化过程
服务器基准测试-叶金荣@CYOU-20121130
服务器基准测试-叶金荣@CYOU-20121130
Jinrong Ye
服务器基准测试文档,非专业人士整理,欢迎拍砖 :)
Ceph中国社区9.19 Some Ceph Story-朱荣泽03
Ceph中国社区9.19 Some Ceph Story-朱荣泽03
Hang Geng
Ceph 中国社区首次北京站沙龙技术演讲活动PPT
如何针对业务做DB优化
如何针对业务做DB优化
Jinrong Ye
如何根据业务特点进行MySQL DB优化
淘宝搜索前端优化
淘宝搜索前端优化
Frank Xu
阿里自研数据库 Ocean base实践
阿里自研数据库 Ocean base实践
drewz lin
驚!台灣中小企業平均存活率僅三年!
驚!台灣中小企業平均存活率僅三年!
社群贏家
Laamubrochuresep10
Laamubrochuresep10
antmelon
SixSensesLaamu opening April 2001
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
思念 青青
2010.10.30,在百度大厦成功举办了百度前端技术交流会。这是新浪的杨皓关于新浪博客前端架构分享。 the frontend of sina blog.
More Related Content
What's hot
分布式存储的元数据设计
分布式存储的元数据设计
LI Daobing
分布式存储的元数据设计
分布式Key Value Store漫谈
分布式Key Value Store漫谈
Tim Y
Distributed key value store, memcachedb, tokyo tyrant, redis performance, dynamo. 分布式key value store漫谈, memcachedb, tokyo tyrant, redis性能比较
豆瓣数据架构实践
豆瓣数据架构实践
Xupeng Yun
2014-04-19 在 ACOUG 活动上的分享,介绍了豆瓣数据架构的演进过程,以及过程中遇到的问题、目前正在面临的挑战等。
Php study.20130110
Php study.20130110
bngoogle
ABOUT php study.
1.4 go在数据存储上面的应用—毛剑
1.4 go在数据存储上面的应用—毛剑
Leo Zhou
Gopher China 2016
Q con shanghai2013-[刘海锋]-[京东文件系统简介]
Q con shanghai2013-[刘海锋]-[京东文件系统简介]
Michael Zhang
Nginx深度開發與客制化
Nginx深度開發與客制化
Joshua Zhu
在阿里巴巴集團,Tengine(阿里定製開源版本Nginx)在淘寶、天貓、阿里雲等眾多大流量網站上運行,每天服務數十億page views。在本次演講裏,我們將分享我們是如何深度定制與開發Nginx,以增強其性能、安全、可運營性等方面。如: * 動態模塊加載(DSO)支援、syslog和pipe支援等; * 更多實用的load balancing算法,如session_sticky,consistent_hash等; * 性能提升改進,如timer的優化; * 安全增強,如防DDoS,慢攻擊防禦,traffic control措施等; * 自動前端性能優化,如組合CSS/JavaScript,頁面trim等; * 動態scripting語言支援(Lua); Tengine是開放原始碼項目,主頁在:http://tengine.taobao.org/
张铁安:Feed系统架构浅析
张铁安:Feed系统架构浅析
Leechael
Downloaded from CSDN download channel.
基于MySQL的分布式数据库实践
基于MySQL的分布式数据库实践
jackbillow
基于MySQL的分布式数据库实践
云梯的多Namenode和跨机房之路
云梯的多Namenode和跨机房之路
li luo
How to build a hadoop cluster which cross datacenters
浅析分布式存储架构—设计自己的存储- 58同城徐振华
浅析分布式存储架构—设计自己的存储- 58同城徐振华
zhuozhe
高并发服务端架构 常用分布式存储比较 分析需求,做好平衡 如何做到RAS(可靠,可用,可扩展); 利用硬件,分级存储
豆瓣网技术架构变迁
豆瓣网技术架构变迁
reinhardx
有几张图尚未 加入,所以暂不提供下载,待我重看录像修订之后放出。 罗马不是一天建成的,豆瓣的技术架构也是随着用户规模的增长一直在持续变化中。在本次演讲中,豆瓣的首席架构师洪强宁将与大家一起分享从上线时的单台服务器架构开始一直到现在的豆瓣架构变迁历程。 个人简介 洪强宁,2002年毕业于清华大学,现任北京豆瓣互动科技有限公司首席架构师。洪强宁和他带领的技术团队致力于用技术改善人们的文化和生活品质,在网站架构、性能、可伸缩性上进行深入研究。豆瓣网曾获软件中国2006年度最佳技术应用网站。
大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化
XiaoJun Hong
在新浪微博平台技术开放日分享的议题
分布式缓存与队列
分布式缓存与队列
XiaoJun Hong
新浪微博新员工培训及其技术交流活动topic,主要阐述从中小系统发展到大型系统的技术演化过程
服务器基准测试-叶金荣@CYOU-20121130
服务器基准测试-叶金荣@CYOU-20121130
Jinrong Ye
服务器基准测试文档,非专业人士整理,欢迎拍砖 :)
Ceph中国社区9.19 Some Ceph Story-朱荣泽03
Ceph中国社区9.19 Some Ceph Story-朱荣泽03
Hang Geng
Ceph 中国社区首次北京站沙龙技术演讲活动PPT
如何针对业务做DB优化
如何针对业务做DB优化
Jinrong Ye
如何根据业务特点进行MySQL DB优化
淘宝搜索前端优化
淘宝搜索前端优化
Frank Xu
阿里自研数据库 Ocean base实践
阿里自研数据库 Ocean base实践
drewz lin
What's hot
(19)
分布式存储的元数据设计
分布式存储的元数据设计
分布式Key Value Store漫谈
分布式Key Value Store漫谈
豆瓣数据架构实践
豆瓣数据架构实践
Php study.20130110
Php study.20130110
1.4 go在数据存储上面的应用—毛剑
1.4 go在数据存储上面的应用—毛剑
Q con shanghai2013-[刘海锋]-[京东文件系统简介]
Q con shanghai2013-[刘海锋]-[京东文件系统简介]
Nginx深度開發與客制化
Nginx深度開發與客制化
张铁安:Feed系统架构浅析
张铁安:Feed系统架构浅析
基于MySQL的分布式数据库实践
基于MySQL的分布式数据库实践
云梯的多Namenode和跨机房之路
云梯的多Namenode和跨机房之路
浅析分布式存储架构—设计自己的存储- 58同城徐振华
浅析分布式存储架构—设计自己的存储- 58同城徐振华
豆瓣网技术架构变迁
豆瓣网技术架构变迁
大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化
分布式缓存与队列
分布式缓存与队列
服务器基准测试-叶金荣@CYOU-20121130
服务器基准测试-叶金荣@CYOU-20121130
Ceph中国社区9.19 Some Ceph Story-朱荣泽03
Ceph中国社区9.19 Some Ceph Story-朱荣泽03
如何针对业务做DB优化
如何针对业务做DB优化
淘宝搜索前端优化
淘宝搜索前端优化
阿里自研数据库 Ocean base实践
阿里自研数据库 Ocean base实践
Viewers also liked
驚!台灣中小企業平均存活率僅三年!
驚!台灣中小企業平均存活率僅三年!
社群贏家
Laamubrochuresep10
Laamubrochuresep10
antmelon
SixSensesLaamu opening April 2001
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
思念 青青
2010.10.30,在百度大厦成功举办了百度前端技术交流会。这是新浪的杨皓关于新浪博客前端架构分享。 the frontend of sina blog.
中小企業如何利用社群媒體經營品牌 案例分享
中小企業如何利用社群媒體經營品牌 案例分享
社群贏家
社群媒體行銷數據2011 10 (http://fbwinner.blogspot.com)
社群媒體行銷數據2011 10 (http://fbwinner.blogspot.com)
社群贏家
OAuth_2 101
OAuth_2 101
Gaurav Gupta
Introduction to OAuth
Viewers also liked
(6)
驚!台灣中小企業平均存活率僅三年!
驚!台灣中小企業平均存活率僅三年!
Laamubrochuresep10
Laamubrochuresep10
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
中小企業如何利用社群媒體經營品牌 案例分享
中小企業如何利用社群媒體經營品牌 案例分享
社群媒體行銷數據2011 10 (http://fbwinner.blogspot.com)
社群媒體行銷數據2011 10 (http://fbwinner.blogspot.com)
OAuth_2 101
OAuth_2 101
Similar to [Baidu web frontend_conference_2010]_[soso_frontend_architecture]
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
丁 宇
美团前端架构简介
美团前端架构简介
pan weizeng
Hacking Nginx at Taobao
Hacking Nginx at Taobao
Joshua Zhu
Hacking Nginx at Taobao
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Chieh (Jack) Yu
COSCUP 2016 Keynote speech - Talking about how to write high performance application and service from hardware, operation system to application level.
美团技术团队 - KVM性能优化
美团技术团队 - KVM性能优化
美团点评技术团队
淘宝双11双12案例分享
淘宝双11双12案例分享
vanadies10
淘宝双11双12案例分享
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
丁 宇
Taobao casestudy-yufeng-qcon
Taobao casestudy-yufeng-qcon
Yiwei Ma
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
2015-05-20 製造業生產歷程全方位整合查詢與探勘的規劃心法
2015-05-20 製造業生產歷程全方位整合查詢與探勘的規劃心法
Jazz Yao-Tsung Wang
Kvmopt osforce
Kvmopt osforce
meecheng
大规模网站架构
大规模网站架构
drewz lin
排行榜V3项目总结
排行榜V3项目总结
Frank Xu
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
涛 吴
This slide delivered by Zuoyan Qin, Chief engineer from XiaoMi Cloud Storage Team, was for talk at Arch summit Beijing-2016 regarding how Pegasus was designed.
Distributed Data Analytics at Taobao
Distributed Data Analytics at Taobao
Min Zhou
Distributed Data Analytics at Taobao
Nosql三步曲
Nosql三步曲
84zhu
从NoSQL产品的选型,到对选出来的产品(Redis)进行了解,最后使用该产品(Redis),就好像“海选”-->“相亲"-->“结婚”的过程。
Google LevelDB Study Discuss
Google LevelDB Study Discuss
everestsun
美团技术沙龙04 美团下一代分布式存储系统
美团技术沙龙04 美团下一代分布式存储系统
美团点评技术团队
介绍美团云分布式存储系统的现状、运维与测试经验,介绍美团正在自主研发的下一代统一分布式存储系统架构、成本控制和技术选型的思考,分享高性能存储节点、并发网络框架、跨机房部署、高可用与强一致模型、元数据管理、纠删码、碎片整理等关键模块设计思路,以及统一存储系统在冷数据存储方面的思考。
Mysql调优
Mysql调优
ken shin
mysql tunning step by step
Qcon2013 罗李 - hadoop在阿里
Qcon2013 罗李 - hadoop在阿里
li luo
yunti hadoop cluster at alibaba 2012
Similar to [Baidu web frontend_conference_2010]_[soso_frontend_architecture]
(20)
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
美团前端架构简介
美团前端架构简介
Hacking Nginx at Taobao
Hacking Nginx at Taobao
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
美团技术团队 - KVM性能优化
美团技术团队 - KVM性能优化
淘宝双11双12案例分享
淘宝双11双12案例分享
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
Taobao casestudy-yufeng-qcon
Taobao casestudy-yufeng-qcon
2011新版首页总结 技术篇
2011新版首页总结 技术篇
2015-05-20 製造業生產歷程全方位整合查詢與探勘的規劃心法
2015-05-20 製造業生產歷程全方位整合查詢與探勘的規劃心法
Kvmopt osforce
Kvmopt osforce
大规模网站架构
大规模网站架构
排行榜V3项目总结
排行榜V3项目总结
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
Distributed Data Analytics at Taobao
Distributed Data Analytics at Taobao
Nosql三步曲
Nosql三步曲
Google LevelDB Study Discuss
Google LevelDB Study Discuss
美团技术沙龙04 美团下一代分布式存储系统
美团技术沙龙04 美团下一代分布式存储系统
Mysql调优
Mysql调优
Qcon2013 罗李 - hadoop在阿里
Qcon2013 罗李 - hadoop在阿里
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
1.
腾讯搜搜 搜搜前端架 与 化构
优 •Moonzhang( 勇张 ) @ 2010-10-30
2.
内容提要 搜搜 介腾讯
简 前端定义 架 的演构 变 前端演 与 化变 优 展与展望发
3.
搜搜 介简
4.
A. 推广 B. 直
区达 C. 搜索 果结 D. 新闻 BOX E. 搜索 史历 F. 广告 G. 在搜还 H. 其它 ..
5.
直 区(达 Bingo
)介绍
6.
搜索平台部 – WEB
开发组
7.
SUSE Linux • 公司
一部署统 • 容易维护 – 一的统 RPM 源资 • 区分 WEB 服 器与务 Cache 服 器务 • 安全性
8.
MySQL • 流行 +
完善 • 易用 • 易维护 • M/S
9.
KW DB • Memcached •
TT • BDB/Redis/membase etc..
10.
P H P •
速度、速度、速度 – 速度快开发 – 学 成本低(习 C )变种 – 行效率好运 • 第三方 成熟(库 PEAR, PECL ) • 社区 大而活庞 跃 • 日 成熟(趋 OOP, namespace , 包…)闭
11.
SuperPHP / WinPHP •
PHP 框架开发 • 实现 MVC 模式, 清晰结构 , 使 者只 注开发 关 业务逻辑 • 提供 Auth 、 ACL 、 DB 、 ORM 、 Cache 、 Session 、 Util 、 Page 等模块
12.
Apache • 定稳 • 强大 •
配置 活灵 • mod_php5 • mod_rewrite
13.
Memcached • 用于存放 存数据,供各缓
APP 使用 • 定稳 • 配置简单 • PHP 展:扩 php_memcache – API : get,set,increment,decrement,delete… • 高效 • 分布式
14.
接入示意图
15.
与挑问题 战 • 用
越来越多户 • DNS 不准? • 用 反映 速度慢户 访问
16.
解决 法办 • 利用自有
IP 库 • 自建智能 DNS • 搭建 速系测 统
17.
与挑问题 战 • 点单 •
故障 移周期 ?转 长 • 缺少 控监
18.
解决 法办 • 增加
HA • 增加 控监
19.
搜索 求请
20.
与挑问题 战 • 响
常超应时间经 过 1 秒甚至 2 秒 (server 端 ) • Memcache timeout (1s) Memcache 扩展
21.
解决 法办 • 使用
socket+Memecache 数据协议读 • 控制 timeout 在秒 以内(级 50ms) Socket
22.
与挑问题 战 • Bingo
用越来越多:天气、股票、应 NBA 。。。 • Bingo 交互 ,既“美 ”又要“ ”起来变复杂 观 动 • 始 付不 来团队开 应 过 – 网页版本迭代 – 新的 Bingo 应用 Socket
23.
解决方案 • 喊出敏捷口号 • 拆分业务 –
将网页搜索与直达区拆分 – 直达区作为独立的业务 • 架 更构变 – bingo 作为独立的服务 – 网页并行请求搜索结果与 bingo 数据 – 控制 timeout&latency • 小 分组划 – 成立直达区 team (产品、开发、测试)
24.
架 更构变
25.
心得体会 • 用已掌握的技 解决术
问题 , 权衡 定与激情稳 (twitter) • 避免 度 (摩尔定律过 设计 ) • 使用内存比使用磁 来的爽的多盘 – RAM is the new disk! • 切分(水平、按功能) – 把工作负载分解成多个有能力驾驭的小单元,让每个单元都 能维持良好的性价比
26.
与挑 (前台)问题 战 •
增业务 长 – 用户 – bingo 数量 – 数据越来越多,内存吃紧 • Bingo 越来越 ,都要 起来复杂 动 • 合作成本高, 范缺失团队 编码规 • 脚本管理混乱, 用性低, 成本高复 维护 • 代 冲突:码 bingo vs websearch
27.
解决方案 • 制 代
合作 范订 码 规 + 包闭 • 式 ,区分公共 式和不同样 规划 样 app 式样 • 代码规划 + 重用
28.
一个脚本类选择 库 • 自行开发 •
Prototype • jQuery • YUI • dojo • Ext • QZFL • SuperJS
29.
与挑问题 战 • 前端展现时间过长 –
HTML table 嵌套 – JS 混乱、堆砌 – 各 bingo app 间 CSS 冲突、低效 – ……
30.
解决方案 • 问题: HTML
table 嵌套 • 解决 法办 : 化 面优 页 结构 – 2009 年 行第一次 面大重 , 一个多月进 页 构 历时
31.
与挑问题 战 • 网站
面性能形 峻页 势严 – 需要系 的 行 化统 进 优 • 一些数据: – Amazon 慢 0.1 s -> 1% 用 放弃交易户 – Google 慢 0.4s -> 0.6% 放弃搜索 – Yahoo! 慢 0.4s -> 少减 5%-9% 的流量 – Bing 慢 2s -> 收入下降 4.3 % – Baidu??
32.
用 速度体 的户
验 1-3-10 原则
33.
工 具 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!
34.
参考书 – High Performance
Web sites – Evan faster web sites – And, learn from best practices..
35.
少 求减 请 •
合并 – CSS 合并 – sprites – Javascript • 模块化拆分、合并 • 动态载入
36.
数据量压缩 • 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 )
37.
Minify:CSS & JS •
工具 – YUICompressor – Google Closure Compiler – Google PageSpeed • 去掉无用的 式样 • 、 化规划 优 cookie • 依然会 省,即使有节 gzip
38.
Minify html • 去掉注
及空白符释 • 省略特定 合标签闭 – li,p,br etc… – http://www.w3.org/TR/html4/sgml/dtd.html • 去除 type=“text/javascript”, text/css etc.. • 去掉可去除的引号 • 使用短 式样
39.
化 片优 图 •
去掉 外的空白区域额 • 使用最 的文件格式优 – 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
40.
Cache • 少 求减
请 • 器 是否是最新的浏览 检查 • 通过 HTTP 控制头 – Expires: Sat, 1 Jan 2011 20:00:00 GMT – Cache-Control: max-age=31536000 • 置 期 未来的某个 刻设 过 时间为 时
41.
Cache : 少
求数减 请
42.
加速 求请 • 无阻塞加载
JS • 分段 出(搜索前、中、后)输 • 加 ( 片、 式、脚本, 面片)预 载 图 样 页 • 按需加 脚本载 • 指定 片尺寸,以免图 reflow • Browscap / js / 条件注释 /css hack
43.
架 化构优
44.
心得体会 • 毫秒必争的心态 • 不是
明就可以,要有基 件支持聪 础组 • 、简单 务实 • 用 至上户 • 用数据说话 • 有效利用工具
45.
展望 • 利用 HTML5
、 CSS3 – 替换图片 – LocalStorage,Offline Storage • 探索和研 最适合自己的前端框架发 • 精雕 琢地前端细 编码 • 持 化续优 • 界分享业
46.
谢 谢
Editor's Notes
直达区使用独立的服务器,作为网页前台的一个appserver,网页使用socket进行请求
Download now