AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

如何提前运用下一代Web技术-提升Web的性能优化和网络安全 by 陈子瞬@腾讯云

发布者 FEer   简介 前端技术
发布于 1459903675033  浏览 2322 关键词 前端, 性能, HTML5 
分享到

第2页

Web

Web



@



第3页



• Web





@ @

@



SNG



第4页

• •

• Yahoo xxx • js • CSS

• •

•…



第5页

...



第6页

1,



Web



第7页

(HCI)



Jakob Nielsen , 1994



Page 135



第8页

web

1s 100ms

1s 100ms



16ms

,, 60fps



第9页



• 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



第12页

2 1S



,



第14页

H5







• 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%



第16页



• HTTP Cache • Web Storage





• Application Cache • Hybrid App • Service Worker



第17页



• HTTP Cache • Web Storage





• Application Cache • Hybrid App • Service Worker



Alloykit



第18页

Hybrid App H5



WebView WebView



/ Native App +

<HTML> Web



• • • •

• Web



第19页

Hybrid App



• 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



`



第21页

Service Worker



Page



Service Worker



install



activated



CacheStorage



network



第22页

3



第25页

0.8% ≈ 90w



• Qzone



0.8% 90w



第26页

DNS



Web





• HTTPS • HTTPDNS



第27页

3102w 423w

2016 1



第28页

3102w 423w



2.69w

420w

SSL SSL 2016 1



第29页

SPDY HTTP2

• • • •

• (HTTP2)



第30页

SPDY HTTP2



• • • •

• (HTTP2)



2 2G 20Mbps



第31页

SPDY HTTP2



• HSTS(HTTP Strict Transport Security)





• Http 1.x



• spdy/http2



• HTTPS Proxy+SNI



• spdy/http2



• spdy



CDN



第32页











第33页

Thanks



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。