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

1,220 views
1,085 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,220
On SlideShare
0
From Embeds
0
Number of Embeds
168
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  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日星期二

×