- 本月热门
-
ANGULAR2 vs REACT（简介及框架比较) by 500Tech -
Docker 1.10 Security Improvements（Docker安全改进) by Diogo Mónica -
Five Things You May Not Know About Bitcoin（关于比特币你可能不知道的5件事) by Brian Armstrong -
基于AWS的Python程序开发 by 费良宏 -
DynamoDB Design Patterns and Best Practices(DynamoDB设计模式和最佳实践) by Rick Houlihan -
百度HTTPS实践-安全，快速，可靠 by 陈曦洋 -
Growth Hacking for Startups（创业公司的增长黑客) by Andy Young -
HTTP2 on Go1.6 by Jxck -
Docker在点评私有云平台的应用 by 盛延敏@大众点评网 -
Golang在BFE的应用 by 陶春华@百度
加收藏
如何提前运用下一代Web技术－提升Web的性能优化和网络安全 by 陈子瞬@腾讯云
第2页
Web
Web
@
Web
@
第3页
•
• Web
•
@ @
@
SNG
• Web
•
@ @
@
SNG
第4页
• •
• Yahoo xxx • js • CSS
• •
•…
• Yahoo xxx • js • CSS
• •
•…
第5页
...
第6页
1,
Web
Web
第7页
(HCI)
Jakob Nielsen , 1994
Page 135
Jakob Nielsen , 1994
Page 135
第8页
web
1s 100ms
1s 100ms
16ms
,, 60fps
1s 100ms
1s 100ms
16ms
,, 60fps
第9页
•
• 2G, 3G, 4G, wifi
•
• CPU, GPU,
• •
• 2G, 3G, 4G, wifi
•
• CPU, GPU,
• •
第10页
<HTML>
第11页
Performance Timeline
Server Timing*
Resource Timing
<HTML>
User Timing (performance.mark) Frame Timing* (new PerformanceObserver)
WebView TCP, DNS, HTTPS
Server Timing*
Resource Timing
<HTML>
User Timing (performance.mark) Frame Timing* (new PerformanceObserver)
WebView TCP, DNS, HTTPS
第12页
2 1S
,
,
第14页
H5
•
• app
• H5 /
•
• H5
• App
••
•
• app
• H5 /
•
• H5
• App
••
第15页
5,000ms
4,377ms
3,750ms
3,614ms
2,500ms 1,250ms
0ms
507ms
2G
1,389ms
481ms
3G
434ms
wifi
85%
4,377ms
3,750ms
3,614ms
2,500ms 1,250ms
0ms
507ms
2G
1,389ms
481ms
3G
434ms
wifi
85%
第16页
•
• HTTP Cache • Web Storage
•
• Application Cache • Hybrid App • Service Worker
• HTTP Cache • Web Storage
•
• Application Cache • Hybrid App • Service Worker
第17页
•
• HTTP Cache • Web Storage
•
• Application Cache • Hybrid App • Service Worker
Alloykit
• HTTP Cache • Web Storage
•
• Application Cache • Hybrid App • Service Worker
Alloykit
第18页
Hybrid App H5
WebView WebView
/ Native App +
<HTML> Web
• • • •
• Web
WebView WebView
/ Native App +
<HTML> Web
• • • •
• Web
第19页
Hybrid App
• Service Worker — “
” Web Server
https://jakearchibald.github.io/isserviceworkerready/resources.html
• Service Worker — “
” Web Server
https://jakearchibald.github.io/isserviceworkerready/resources.html
第20页
Service Worker
register
install activated
CacheStorage Cache fetch
Response
Blob
Idle fetch
ES6 Promise
install
wait
`
register
install activated
CacheStorage Cache fetch
Response
Blob
Idle fetch
ES6 Promise
install
wait
`
第21页
Service Worker
Page
Service Worker
install
activated
CacheStorage
network
Page
Service Worker
install
activated
CacheStorage
network
第22页
3
第25页
0.8% ≈ 90w
• Qzone
0.8% 90w
• Qzone
0.8% 90w
第26页
DNS
Web
•
• HTTPS • HTTPDNS
Web
•
• HTTPS • HTTPDNS
第27页
3102w 423w
2016 1
2016 1
第28页
3102w 423w
2.69w
420w
SSL SSL 2016 1
2.69w
420w
SSL SSL 2016 1
第29页
SPDY HTTP2
• • • •
• (HTTP2)
• • • •
• (HTTP2)
第30页
SPDY HTTP2
• • • •
• (HTTP2)
2 2G 20Mbps
• • • •
• (HTTP2)
2 2G 20Mbps
第31页
SPDY HTTP2
• HSTS(HTTP Strict Transport Security)
• Http 1.x
• spdy/http2
• HTTPS Proxy+SNI
• spdy/http2
• spdy
CDN
• HSTS(HTTP Strict Transport Security)
• Http 1.x
• spdy/http2
• HTTPS Proxy+SNI
• spdy/http2
• spdy
CDN
第32页
“
–
”
–
”
第33页
Thanks