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

移动的前端技术架构
&
性能优化
杨东星

11年9月13日星期二

这里我们不说代码
谈思想
• http://m.1688.com

• 触屏版 android ios

• 简单版 ucweb

• 2010国内30亿国外b2b 国际站中国制
造。。。


m.1688.com
• 3期

• 9∙1第三期上线

• 地图

• 周边搜索


涉及到的技术

• HTML5

• CSS3

• MooTools


优化思想规划

• 让网站变得更快（html5 vs mo bi le）

• 让编码变得舒服（技术选择，整体规划）


MooTools

• 从编程思想的角度和处理复杂逻辑的能力上，
MT优于现在所有的主流框架。

• 最重要的是：可以让写代码变成⼀一件简单并且
开心的事情


MooTools选择包含
• QueryElement∙slick

• class方式数据类型

• Element Event TouchEvent

• Cookie

• Request jsonp

• 20k


VM和页面的结构
2个头

• 头部

• 中间展示区
••• •••
• 尾部

2个尾


全局NS曝光

• MLoad

• serverData.MTPlusVersion

• Widget

• nPage


Mload

• 并行载入js

• 控制本地存储功能+版本控制

• 控制页面层级js的下载和渲染


缓存脚本文件

• LocalStorage js脚本

• Localstorage string

• Ajax write read version


serverData

• 服务器端模块化接口 serverData.xx

• MTPlusVersion 版本控制


Widget

• 所有的自定义的功能类都会放在这个
namespace下

• 页面的直接功能类控件级别的类自定义基类
等等的容器


nPage

• 本页面的话实例化调用接口

• window.addEvent('domready',nPage);

• 本页面调用结构的整理

• 特有的简单方法的调用


Lazyload

• Js文件的延时并行下载和渲染

• 多图页面的图片滚动高度延时下载


淘宝首页

• 5个请求/

• 31


淘宝首页 after 缓存
• First all 311k

• First dom 96k

• Second dom 11.49k

• Next dom 96k

• Next all 311k


Alibaba首页

• 15个请求/

• 19


Alibaba首页 after 缓存
• First all 79k

• First dom 39k

• Second dom 6k

• Next dom 39k

• Next all 79k


1688首页

• 4个请求/

• 11


1688首页 after 缓存
• First all 136k

• First dom 12k

• Second dom 5.69k

• Next dom 12k

• Next all 88k


400

300

200

100

0
淘宝 alibaba 1688


After 2
还有什么可以提高
速度？


浏览器加载页面
所用的时间


Quick link架构
Head
• 现在依靠之前VM的整理

• a标签+ajax

• Old nPage = null New HTML

• New nPage evaluate

Foot


还有哪些可用的？

• database:sqlite关系型数据库

• creat table insert select update delete

• 数据的分布式计算。。。。

• 把全世界的电脑都作为我们的分布式站点


或者还有更多...
canvas webworker websocket ...


ok,let's talk free.


Recomendados