手机淘宝h5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37...
TRANSCRIPT
![Page 1: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/1.jpg)
手机淘宝H5容器的架构演进
![Page 2: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/2.jpg)
鬼道简介
• 2015 • H5 TL
• 2013 • Web • Pad TL
• 2011 • Symbian • Android/iOS/Web / SDK
![Page 3: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/3.jpg)
HTTP-DNS SPDYHTTP-DNS SPDY
![Page 4: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/4.jpg)
2015+
2013-2014 now
HTTP-DNS
SPDY
Hybrid API
架构演进
![Page 5: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/5.jpg)
Y
N
预加载
![Page 6: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/6.jpg)
Y
N
流程
![Page 7: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/7.jpg)
)
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
( )
![Page 8: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/8.jpg)
包数量
⽆线事业部 37
天猫事业部 24
淘宝技术部 21
聚划算事业部 3
航旅事业群 21
蚂蚁⾦服 8
阿⾥通信 3
智能⽣活事业部 9
城市⽣活事业部 1
数字娱乐事业群 3
总计 130
应用范围
![Page 9: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/9.jpg)
1
3
4
2
![Page 10: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/10.jpg)
资源加载时间
![Page 11: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/11.jpg)
极致性能
![Page 12: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/12.jpg)
Bad case
![Page 13: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/13.jpg)
15年初
![Page 14: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/14.jpg)
2015.11.10-11.11
到达率
![Page 15: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/15.jpg)
86%98%
在线到达率
![Page 16: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/16.jpg)
新建App
![Page 17: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/17.jpg)
![Page 18: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/18.jpg)
![Page 19: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/19.jpg)
下载时:网络优化
2
![Page 20: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/20.jpg)
iOS
HTTP-DNS
SPDY
Android
UCURLProtocol
Server
网络拦截
![Page 21: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/21.jpg)
1.
2.
3.
HTTP-DNS
![Page 22: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/22.jpg)
HTTP
SPDY
SSL
TCP
Application
Session
Presentation
Transport
SPDY
![Page 23: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/23.jpg)
1
2
SPDY
![Page 24: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/24.jpg)
SPDY
![Page 25: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/25.jpg)
1.
2.
前端优化
![Page 26: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/26.jpg)
渲染时
2
![Page 27: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/27.jpg)
2
3
1
1
2
区块复用
![Page 28: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/28.jpg)
JS UC
内存优化结果
![Page 29: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/29.jpg)
遗留问题
![Page 30: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/30.jpg)
1. Native WebView H5
1.
2.
2. H5
![Page 31: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/31.jpg)
原理
Native(TableView)
WebView
Native(Image/Text)
![Page 32: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/32.jpg)
![Page 33: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/33.jpg)
![Page 34: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/34.jpg)
内存和流畅性
![Page 35: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/35.jpg)
H580 - 200MB
iOS80 - 100MB
- 300
TableView 内存
![Page 36: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/36.jpg)
H5iOS
Android
覆盖多端
![Page 37: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/37.jpg)
布局和样式
![Page 38: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/38.jpg)
Android RenderEngine
Native Enabled
H5 RenderEngine
Y
Component
JS RuntimeWebView/JSCore
iOS RenderEngine
N
{LDomTree/data}
ComKit
{HTML/CSS/JS}
{JS}
工作流
![Page 39: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/39.jpg)
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
![Page 40: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/40.jpg)
DOM JSON
Build Tree Apply Style Create View
CSS Layout Attach EventUpdate Frame
Native View
Native RenderEngine
Rendering
![Page 41: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/41.jpg)
Light DOM
![Page 42: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/42.jpg)
View
TableView h5
TabBar tab
Slider banner
SideBar
Animation native
Text
Image
![Page 43: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/43.jpg)
WeexH5
Server
JS-Native Bridge
Native API
iOS/Android/…
![Page 44: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/44.jpg)
WeexH5
Server
JS-Native Bridge
Native API
iOS/Android/…
![Page 45: 手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37 天猫事业部 24 淘宝技术部 21 聚划算事业部 3 航旅事业群 21 蚂蚁⾦服](https://reader030.vdocuments.site/reader030/viewer/2022033120/5e046fc6fc79507fe477d112/html5/thumbnails/45.jpg)
Weex 的三种模式
1. Full Page
2. Native Component
3. H5 Component