Your SlideShare is downloading. ×
0
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
Big pipe backend2
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

Big pipe backend2

501

Published on

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

No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
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. 微博新版中的 BigPipe 技术后端实现分享 史罗丹 @Rodin 高级开发工程师 @ 新浪微博 [email_address]
  • 2. 日程
    • 概念
    • 实现
    • 实战问题
    • 展望
  • 3. 概念
    • BigPipe 是
    • 重新设计的 Web 服务处理过程
    • 利用流水线思想降低网页的用户感知延迟
    • AJAX 模块化方式的性能加强版
  • 4. 概念
  • 5. 概念
  • 6. 概念
  • 7. 概念
    • 传统页面处理过程
  • 8. 概念
    • AJAX 模块化处理过程
  • 9. 概念
    • BigPipe 处理过程
  • 10. 概念 输出示例 - 普通模式 <html> <div id=&quot;pl_left&quot;> 左侧内容 </div> <div id=&quot;pl_main&quot;> 主要内容 </div> </html>
  • 11. 概念 输出示例 - BigPipe 模式 <html> <script src=&quot;BigPipe.js&quot;></script> <div id=&quot;pl_left&quot;></div> <div id=&quot;pl_main&quot;></div> <script>bp.pagelet({'id': 'pl_left' , 'html' : ' 左侧内容 '})</script> <script>bp.pagelet({'id': 'pl_main' , 'html' : ' 主要内容 '})</script> </html>
  • 12. 概念
    • 传统模式 (BP 关闭 )
    • 流水线模式 (BP 开启 )
    248ms => 70 ms
  • 13. 概念
    • 好处
    • 用户更快看到部分内容
    • 减少 HTTP 请求
    • Pagelet 处理可并发
    • 坏处
    • 强制页面模块化
    • 数据请求层封装
    • 部分运算移动到浏览器端
    • 浏览器兼容性
  • 14. 概念
    • 伴生技术
    • Quickling
      • 将所有点击加载异步化
    • PageCache
      • 浏览器端缓存内容
  • 15. 广告
    • #Velocity China 2011#
    • 《使用 BigPipe 提升浏览速度—流水线技术在新浪微博的实践》
    • 吴侃 @v4ria
    • 前端技术经理
  • 16. 日程
    • 概念
    • 实现
    • 实战问题
    • 展望
  • 17. 实现
    • 服务器端任务
      • 组织 Pagelets
      • 管理 Pagelet 依赖
      • 获取数据
      • 判断输出模式
      • 生成 HTTP 响应
    • 前端任务
      • JS/CSS 拆分
      • JS/CSS 加载卸载
      • Dom 处理
      • Quickling
      • 历史管理
  • 18. 实现
    • 树形组织 Pagelets
    • Pagelet 储存自身依赖
    • Pagelet 提供数据获取方法
    • Pagelet 结构与处理逻辑分离
  • 19. 实现
    • 树形组织 Pagelets (Composite)
  • 20. 实现
  • 21. 实现
    • Pagelet 类
      • 依赖的 css
      • 依赖的 js 脚本
      • 所需 html 模板
      • 数据准备方法
  • 22. 实现
    • 内容处理与容器分离 (Visitor)
  • 23. 实现
    • 模板处理
    • HTML 模板中包含子 pagelet 占位符
  • 24. 实现
    • 输出模式
      • 传统 Traditonal
      • 流水线 Streamline
      • 随机流水线 Random
  • 25. 实现
    • 输出模式
      • 深度优先遍历
    传统 流水线 随机 访问次序 先子后父 先父后子 任意 输出方式 同时输出 父先输出 子后输出 父先输出 子后输出
  • 26. 实现
    • 总结
      • 树形组织 Pagelets
      • Pagelet 储存自身依赖
      • Pagelet 提供数据获取方法
      • Pagelet 容器与处理逻辑分离
      • 深度优先遍历
  • 27. 日程
    • 概念
    • 实现
    • 实战问题
    • 展望
  • 28. 问题
    • 页面区域需要单独划分成 pagelet 以便重用和调整
    • 同时又作为页面框架的一部分直接输出
    • 静态 pagelet
  • 29. 问题
    • 跨页面更新内容或仅更新部分内容
    • 不需要输出脚本框架和页面框架
    • ScriptOnly 模式
  • 30. 问题
    • 随机流水线模式输出
    • 数据并行处理
    • 异步 IO + 事件回调 (纯 PHP 实现)
    • socket_select/curl_multi_select
  • 31. 问题
    • IE6 Bug :脚本中止错误
    • 强制 IE6 用户使用传统模式
  • 32. 问题
    • Pagelet 数据获取失败
    • 单 Pagelet 失效
  • 33. 问题
    • Pagelet 的数据希望可以继承到子 Pagelet
    • 但对父 Pagelet 不可见
    • 数据“伪作用域”
  • 34. 问题
    • 其他琐碎
      • 输出模式判断
        • 浏览器检测
        • Noscript 标签跳转
        • Cookie 识别
      • gzip 模块不影响输出
      • HTTP 1.1 & 1.0 兼容
  • 35. 日程
    • 概念
    • 实现
    • 实战问题
    • 展望
  • 36. 展望
    • 全站 BigPipe
    • Pagelet 优先级
    • 随机模式输出 ( 待上线 )
    • JS/CSS 资源的全局管理
  • 37. Q&A THANKS Q?
  • 38. 讨论
    • 适用场景?
    • BigPipe 改进方案?
  • 39.  

×