Your SlideShare is downloading. ×
移动的前端技术架构和性能优化
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

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

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

×