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

移动的前端技术架构&

性能优化杨东星

11年9月13日星期二

这里我们不说代码谈思想

• http://m.1688.com

•触屏版 android ios

•简单版 ucweb

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


http://m.1688.com

http://m.1688.com

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


0

100

200

300

400

淘宝 alibaba 1688


After 2还有什么可以提高

速度？


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


Quick link架构

•现在依靠之前VM的整理

• a标签+ajax

• Old nPage = null

• New nPage evaluate

Head

Foot

New HTML


还有哪些可用的？

• database:sqlite关系型数据库

• creat table insert select update delete

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

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


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


ok,let's talk free.


Education