Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

移动的前端技术架构和性能优化

1,268 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

移动的前端技术架构和性能优化

  1. 1. 移动的前端技术架构 & 性能优化 杨东星11年9月13日星期二
  2. 2. 这里我们不说代码 谈思想 • http://m.1688.com • 触屏版 android ios • 简单版 ucweb • 2010国内30亿 国外b2b 国际站 中国制 造 。。。11年9月13日星期二
  3. 3. m.1688.com • 3期 • 9∙1第三期上线 • 地图 • 周边搜索11年9月13日星期二
  4. 4. 涉及到的技术 • HTML5 • CSS3 • MooTools11年9月13日星期二
  5. 5. 优化思想规划 • 让网站变得更快(html5 vs mo bi le) • 让编码变得舒服(技术选择,整体规划)11年9月13日星期二
  6. 6. MooTools • 从编程思想的角度和处理复杂逻辑的能力上, MT优于现在所有的主流框架。 • 最重要的是:可以让写代码变成⼀一件简单并且 开心的事情11年9月13日星期二
  7. 7. MooTools选择包含 • QueryElement∙slick • class方式 数据类型 • Element Event TouchEvent • Cookie • Request jsonp • 20k11年9月13日星期二
  8. 8. VM和页面的结构 2个头 • 头部 • 中间展示区 ••• ••• • 尾部 2个尾11年9月13日星期二
  9. 9. 全局NS曝光 • MLoad • serverData.MTPlusVersion • Widget • nPage11年9月13日星期二
  10. 10. Mload • 并行载入js • 控制本地存储功能+版本控制 • 控制页面层级js的下载和渲染11年9月13日星期二
  11. 11. 缓存脚本文件 • LocalStorage js脚本 • Localstorage string • Ajax write read version11年9月13日星期二
  12. 12. serverData • 服务器端模块化接口 serverData.xx • MTPlusVersion 版本控制11年9月13日星期二
  13. 13. Widget • 所有的自定义的功能类都会放在这个 namespace下 • 页面的直接功能类 控件级别的类 自定义基类 等等 的容器11年9月13日星期二
  14. 14. nPage • 本页面的话实例化调用接口 • window.addEvent(domready,nPage); • 本页面调用结构的整理 • 特有的简单方法的调用11年9月13日星期二
  15. 15. Lazyload • Js文件的延时 并行下载和渲染 • 多图页面的图片滚动高度延时下载11年9月13日星期二
  16. 16. 淘宝首页 • 5个请求/ • 3111年9月13日星期二
  17. 17. 淘宝首页 after 缓存 • First all 311k • First dom 96k • Second dom 11.49k • Next dom 96k • Next all 311k11年9月13日星期二
  18. 18. Alibaba首页 • 15个请求/ • 1911年9月13日星期二
  19. 19. Alibaba首页 after 缓存 • First all 79k • First dom 39k • Second dom 6k • Next dom 39k • Next all 79k11年9月13日星期二
  20. 20. 1688首页 • 4个请求/ • 1111年9月13日星期二
  21. 21. 1688首页 after 缓存 • First all 136k • First dom 12k • Second dom 5.69k • Next dom 12k • Next all 88k11年9月13日星期二
  22. 22. 400 300 200 100 0 淘宝 alibaba 168811年9月13日星期二
  23. 23. After 2 还有什么可以提高 速度?11年9月13日星期二
  24. 24. 浏览器加载页面 所用的时间11年9月13日星期二
  25. 25. Quick link架构 Head • 现在依靠之前VM的整理 • a标签+ajax • Old nPage = null New HTML • New nPage evaluate Foot11年9月13日星期二
  26. 26. 还有哪些可用的? • database:sqlite关系型数据库 • creat table insert select update delete • 数据的分布式计算。。。。 • 把全世界的电脑都作为我们的分布式站点11年9月13日星期二
  27. 27. 或者还有更多... canvas webworker websocket ...11年9月13日星期二
  28. 28. ok,lets talk free.11年9月13日星期二

×