Weitere ähnliche Inhalte
Ähnlich wie 移动的前端技术架构和性能优化
Ähnlich wie 移动的前端技术架构和性能优化 (20)
移动的前端技术架构和性能优化
- 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
• MooTools
11年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
• 20k
11年9月13日星期二
- 8. VM和页面的结构
2个头
• 头部
• 中间展示区
••• •••
• 尾部
2个尾
11年9月13日星期二
- 9. 全局NS曝光
• MLoad
• serverData.MTPlusVersion
• Widget
• nPage
11年9月13日星期二
- 10. Mload
• 并行载入js
• 控制本地存储功能+版本控制
• 控制页面层级js的下载和渲染
11年9月13日星期二
- 11. 缓存脚本文件
• LocalStorage js脚本
• Localstorage string
• Ajax write read version
11年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个请求/
• 31
11年9月13日星期二
- 17. 淘宝首页 after 缓存
• First all 311k
• First dom 96k
• Second dom 11.49k
• Next dom 96k
• Next all 311k
11年9月13日星期二
- 19. Alibaba首页 after 缓存
• First all 79k
• First dom 39k
• Second dom 6k
• Next dom 39k
• Next all 79k
11年9月13日星期二
- 20. 1688首页
• 4个请求/
• 11
11年9月13日星期二
- 21. 1688首页 after 缓存
• First all 136k
• First dom 12k
• Second dom 5.69k
• Next dom 12k
• Next all 88k
11年9月13日星期二
- 22. 400
300
200
100
0
淘宝 alibaba 1688
11年9月13日星期二
- 23. After 2
还有什么可以提高
速度？
11年9月13日星期二
- 25. Quick link架构
Head
• 现在依靠之前VM的整理
• a标签+ajax
• Old nPage = null New HTML
• New nPage evaluate
Foot
11年9月13日星期二
- 26. 还有哪些可用的？
• database:sqlite关系型数据库
• creat table insert select update delete
• 数据的分布式计算。。。。
• 把全世界的电脑都作为我们的分布式站点
11年9月13日星期二
- 27. 或者还有更多...
canvas webworker websocket ...
11年9月13日星期二
