View
91
Download
4
Category
Preview:
Citation preview
WebWeb
@
• @
• Web @ SNG
• @
•
•
• Yahoo xxx
• js
• CSS
•
•
• …
...
, Web1
(HCI)
Page 135
Jakob Nielsen , 1994
web
1s
1s
100ms
100ms
16ms
, , 60fps
•
• 2G, 3G, 4G, wifi
•
• CPU, GPU,
•
•
<HTML>
<HTML>
TCP, DNS, HTTPS
WebViewPerformance Timeline
Resource Timing
User Timing (performance.mark)
Frame Timing* (new PerformanceObserver)
Server Timing*
1S ,2
H5
• • •
• app • H5 •
• H5 / • App
0ms
1,250ms
2,500ms
3,750ms
5,000ms
2G 3G wifi
434ms481ms507ms
1,389ms
3,614ms
4,377ms
85%
•
• HTTP Cache
• Web Storage
•
• Application Cache
• Hybrid App
• Service Worker
Alloykit
•
• HTTP Cache
• Web Storage
•
• Application Cache
• Hybrid App
• Service Worker
Hybrid App H5 •
•
•
•
• Web
WebView
/ Native App
+
<HTML>
Web
WebView
Hybrid App
• Service Worker — “ ” Web Server
https://jakearchibald.github.io/isserviceworkerready/resources.html
Service Worker
ES6 Promise
CacheStorage Cache fetch
Response Blob
install
register
activated
Idle
waitinstall
fetch
`
Service Worker
Page Service Worker install
CacheStorage network
activated
3
90w0.8% ť Qzone 0.8% 90w
•
• HTTPS
• HTTPDNS
Web
DNS
3102w 423w
2016 1
2.69w
420w
SSL SSL
3102w
423w 2016 1
SPDY HTTP2•
•
•
•
• (HTTP2)
SPDY HTTP2•
•
•
•
• (HTTP2) 2 2G 20Mbps
SPDY HTTP2• HSTS(HTTP Strict Transport Security) 302
• Http 1.x
• spdy/http2
• HTTPS Proxy+SNI CDN
• spdy/http2
• spdy
–
“ ”
Thanks
Recommended