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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

百度新首页性能优化

  • 5,713 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,713
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

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