手机淘宝H5容器的架构演进 - pic.huodongjia.com · 包数量 ⽆线事业部 37...

手机淘宝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

@ -

The End.xukai.xk@alibaba-inc.com