Your SlideShare is downloading. ×
0
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
百度新首页性能优化
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

百度新首页性能优化

5,791

Published on

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,791
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. 新首页性能优化 李成银 2011-12-22
  2. 性能的重要性 <ul><li>百度的首页 </li></ul><ul><li>互联网用户的入口 </li></ul><ul><li>传统首页非常快 (560ms) </li></ul><ul><li>性能对产品的影响 </li></ul>
  3. 性能对产品的影响
  4. 性能优化的前提 <ul><li>监控 </li></ul><ul><ul><li>性能监控平台 (http://fe.baidu.com/wpo) </li></ul></ul>
  5. 性能监控平台 <ul><li>通过 JS 在页面埋点,收集页面在 head 、 tti 、 dom 、 load 等时段的时间情况 </li></ul><ul><li>发送到 og 平台,运算后在性能监控平台进行多维度的展现 </li></ul><ul><li>包括:平均时间、时间段、浏览器、省份、运营商、耗时、趋势等 </li></ul>
  6. 性能监控平台
  7. 性能监控平台
  8. 性能监控平台
  9. 优化的目标
  10. 优化手段 <ul><li>常规优化手段 </li></ul><ul><li>增强型优化手段 </li></ul><ul><li>基于用户行为分析的优化手段 </li></ul>
  11. 常规优化手段 <ul><li>静态资源外链、合并、压缩 </li></ul><ul><li>背景图片优化 </li></ul><ul><ul><li>Png 使用 pngcrush </li></ul></ul><ul><ul><li>Gif 使用 gifsicle </li></ul></ul><ul><ul><li>Jpeg 使用 jpegtran </li></ul></ul><ul><li>静态资源上 CDN </li></ul><ul><li> - 可以提速 20% 左右 </li></ul>
  12. 常规优化手段 <ul><li>静态资源设置强缓存 </li></ul><ul><li> - 命中强缓存 82.4% </li></ul><ul><li> - 命中弱缓存 3.4% </li></ul><ul><li> - 未命中缓存 14.2% </li></ul><ul><li>使用 css sprites </li></ul><ul><li>… . </li></ul>
  13. 结果 Tti 时间放在 script 之后 Tti 时间放在 script 之前
  14. 结论 <ul><li>性能的主要瓶颈在 网络传输 </li></ul>
  15. 增强型优化手段 <ul><li>支持 Smarty 的 HTML 压缩 </li></ul><ul><li>图片延时加载 </li></ul><ul><li>tangram 最优定制 </li></ul><ul><li>CSS 极限压缩 </li></ul>
  16. 支持 Smarty 的 HTML 压缩 <ul><li>Fl </li></ul><ul><li> - 支持模版语法的 html/css/js 检测,美化,压缩等工具 </li></ul><ul><li> - https://github.com/welefen/fl </li></ul><ul><li>上线前编译时进行 </li></ul><ul><li> - 不影响开发方式 </li></ul><ul><li>gzip 后减少 5% </li></ul>
  17. 支持 Smarty 的 HTML 压缩
  18. 图片延时加载 1 、导航 icon 2 、 app 的 icon 3 、 feed 用户头像 4 、 feed 中图片
  19. Tangram 最优定制 <ul><li>开发时使用全部的 tangram </li></ul><ul><li>上线前通过最优定制工具分析 JS 代码中用到的 tangram 方法 </li></ul><ul><li>将这些方法打包,替换全部的 tangram </li></ul><ul><li>YUI 压缩后由 76k -> 29K, 减小 62% </li></ul><ul><li>Gzip 后由 25K -> 9.8K, 减小 61% </li></ul>
  20. Tangram 最优定制 http://fe.baidu.com/welefen/tangram-codesearch/codesearch.html
  21. CSS 极限压缩 <ul><li>CSS 文件下载过程中页面空白 </li></ul><ul><li>CSS 文件大小直接影响页面白页的时间 </li></ul><ul><li>CSS 中的 class 名字一般都是语义话,比较长 </li></ul><ul><li>同时 HTML 和 JS 中引用的地方也要将长名字写一份 </li></ul>
  22. CSS 极限压缩 <ul><li>通过工具分析 HTML 里用到的 CSS </li></ul><ul><li>JS 使用 data-class=“cls1 cls2” 的方式 </li></ul><ul><li>建立压缩字典 </li></ul><ul><li>压缩 HTML 和 CSS 对应的 class </li></ul><ul><li>同时可以去除冗余的 css </li></ul>
  23. CSS 极限压缩
  24. CSS 极限压缩带来的问题 <ul><li>对于无跨模块引用 css 的有效 </li></ul><ul><li>目前很多 css 在 js 里用到,之前没有使用 data-class 的方式,所以该功能暂时没有开启 </li></ul><ul><li>不过去除了冗余的 css 达 2K 多 (gzip 前 ) </li></ul>
  25. 基于用户行为的分析优化 <ul><li>鼠标移动行为 </li></ul><ul><li>鼠标点击行为 </li></ul><ul><li>交互行为 </li></ul><ul><li>数据分析的加载方式 </li></ul>
  26. 鼠标移动行为 <ul><li>鼠标移动行为 </li></ul><ul><li>- 用户鼠标移动到模块内,加载模块扩展的 js 和 css </li></ul>
  27. 鼠标点击行为
  28. 交互行为 – 编辑模式
  29. 数据分析的加载方法 <ul><li>Feed 在首屏占有 feed 的用户只有 13% </li></ul><ul><li>首次只加载发送 feed ajax 请求的 js </li></ul><ul><li>用户滚屏到 feed 时并行加载异步数据、 JS 文件、 CSS 文件 </li></ul>
  30. 优化历程
  31. 当前状态
  32. 当前状态
  33. 更多的优化 <ul><li>用户网速测试 </li></ul>
  34. 更多的优化 <ul><li>监控平台支持 abtest 模式性能监控 </li></ul><ul><li>考虑对慢网速的用户将外链的 css 放在搜索框后面 </li></ul><ul><li>考虑继续拆解 JS 基础库,减少初始化加载文件大小 </li></ul><ul><li>考虑使用 performance api 拿到更多的性能数据 </li></ul><ul><li>… </li></ul>
  35. 优化 <ul><li>性能优化,永无止境 </li></ul>
  36. Q&A <ul><li>Q&A </li></ul>

×