手机淘宝h5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37...
TRANSCRIPT
手机淘宝H5容器的架构演进
鬼道简介
• 2015 • H5 TL
• 2013 • Web • Pad TL
• 2011 • Symbian • Android/iOS/Web / SDK
HTTP-DNS SPDYHTTP-DNS SPDY
2015+
2013-2014 now
HTTP-DNS
SPDY
Hybrid API
架构演进
Y
N
预加载
Y
N
流程
)
mP :
t
R
(
A W)
(
(
h Rp
(
L ekD
c
C R
) A lk
A lk m
N a
jN
sU)
)
h R h R
AZ ekP
IC ekig
AZ ekP
c ek
C ekC R
( )
包数量
⽆线事业部 37
天猫事业部 24
淘宝技术部 21
聚划算事业部 3
航旅事业群 21
蚂蚁⾦服 8
阿⾥通信 3
智能⽣活事业部 9
城市⽣活事业部 1
数字娱乐事业群 3
总计 130
应用范围
1
3
4
2
资源加载时间
极致性能
Bad case
15年初
2015.11.10-11.11
到达率
86%98%
在线到达率
新建App
下载时：网络优化
2
iOS
HTTP-DNS
SPDY
Android
UCURLProtocol
Server
网络拦截
1.
2.
3.
HTTP-DNS
HTTP
SPDY
SSL
TCP
Application
Session
Presentation
Transport
SPDY
1
2
SPDY
SPDY
1.
2.
前端优化
渲染时
2
2
3
1
1
2
区块复用
JS UC
内存优化结果
遗留问题
1. Native WebView H5
1.
2.
2. H5
原理
Native(TableView)
WebView
Native(Image/Text)
内存和流畅性
H580 - 200MB
iOS80 - 100MB
- 300
TableView 内存
H5iOS
Android
覆盖多端
布局和样式
Android RenderEngine
Native Enabled
H5 RenderEngine
Y
Component
JS RuntimeWebView/JSCore
iOS RenderEngine
N
{LDomTree/data}
ComKit
{HTML/CSS/JS}
{JS}
工作流
Android RenderEngine
H5 RenderEngine
iOS RenderEngine
ComKit (DSL / HTML Parser / CSS Parser )
TableView TabBar SideBar …
TableView TabBar SideBar TabBar Animation …
SideBar SideBar
Native RenderEngine(iOS / Android) H5 RenderEngine
Windvane JSBridge
WebView
UIKit
{JS}
{LDomTree/data}
TableView TabBar …
{LDomTree/data}
ComKit
DOM JSON
Build Tree Apply Style Create View
CSS Layout Attach EventUpdate Frame
Native View
Native RenderEngine
Rendering
Light DOM
View
TableView h5
TabBar tab
Slider banner
SideBar
Animation native
Text
Image
WeexH5
Server
JS-Native Bridge
Native API
iOS/Android/…
WeexH5
Server
JS-Native Bridge
Native API
iOS/Android/…
Weex 的三种模式
1. Full Page
2. Native Component
3. H5 Component
