Web前端性能优化leeight - 2014

What happened?

http://fex.baidu.com/blog/2014/05/what-happen/

What happened?• 从输⼊入 URL 到浏览器接收的过程中发⽣生了什么？

• 浏览器如何向⺴⽹网卡发送数据？

• 数据如何从本机⺴⽹网卡发送到服务器？

• 服务器接收到数据后会进⾏行哪些处理？

• 服务器返回数据后浏览器如何处理？

• 浏览器如何将⻚页⾯面展现出来？

What happened?• 从输⼊入 URL 到浏览器接收的过程中发⽣生了什么？

• 浏览器如何向⺴⽹网卡发送数据？

• 数据如何从本机⺴⽹网卡发送到服务器？

• 服务器接收到数据后会进⾏行哪些处理？

• 服务器返回数据后浏览器如何处理？

• 浏览器如何将⻚页⾯面展现出来？

⼤大纲• 数据的传输

• 带宽和延迟

• ⺴⽹网络协议

• 缓存

• 数据的渲染

• HTML & CSS

• JavaScript Engine

带宽和延迟

2168 * 1000 / 300000 ≈ 7ms

带宽和延迟

http://chimera.labs.oreilly.com/books/1230000000545/ch01.html#SPEED_FEATURE

带宽和延迟

https://www.igvita.com/slides/2012/html5devconf/#1

带宽和延迟

http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#LATENCY_BOTTLENECK

带宽和延迟

• 带宽 不是那么重要

• 延迟 才是影响⺴⽹网络性能的关键

⺴⽹网络协议

• DNS

• TCP/IP

• HTTP/1.0 & 1.1

• SPDY

DNS

• DNS查询是⽐比较耗时的⼀一个操作

• dig +trace www.baidu.com @8.8.8.8

DNS!; <<>> DiG 9.8.3-P1 <<>> +trace www.baidu.com @8.8.8.8 ;; global options: +cmd . 18409 IN NS j.root-servers.net. . 18409 IN NS b.root-servers.net. ;; Received 228 bytes from 8.8.8.8#53(8.8.8.8) in 127 ms !com. 172800 IN NS l.gtld-servers.net. com. 172800 IN NS m.gtld-servers.net. ;; Received 491 bytes from 202.12.27.33#53(202.12.27.33) in 318 ms !baidu.com. 172800 IN NS dns.baidu.com. baidu.com. 172800 IN NS ns2.baidu.com. baidu.com. 172800 IN NS ns3.baidu.com. baidu.com. 172800 IN NS ns4.baidu.com. baidu.com. 172800 IN NS ns7.baidu.com. ;; Received 201 bytes from 192.31.80.30#53(192.31.80.30) in 409 ms !www.baidu.com. 1200 IN CNAME www.a.shifen.com. a.shifen.com. 1200 IN NS ns5.a.shifen.com. a.shifen.com. 1200 IN NS ns4.a.shifen.com. a.shifen.com. 1200 IN NS ns3.a.shifen.com. a.shifen.com. 1200 IN NS ns2.a.shifen.com. a.shifen.com. 1200 IN NS ns1.a.shifen.com. ;; Received 228 bytes from 220.181.37.10#53(220.181.37.10) in 30 ms

DNS

• dig www.baidu.com @8.8.8.8

• dig www.baidu.com @114.114.114.114

DNS Cache

DNS Prefetch

http://blog.chromium.org/2008/09/dns-prefetching-or-pre-resolving.html

TCP/IP

• 三次握⼿手

• SYN, SYN ACK, ACK

• 慢启动和流量控制

三次握⼿手

http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HANDSHAKE

慢启动

http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HANDSHAKE

Head-of-Line Blocking

http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HOL

扩展阅读• TCP Fast Open

• SYN 包传输数据，降低 ~15%

• Building Blocks of TCP

• QUIC（Quick UDP Internet Connections）

• 0 - RTT

• 避免 HOLB

HTTP 1.0 & 1.1

• 1996: RFC1945

• 1999: RFC2616

• 2014: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234, RFC7235

HTTP 1.1 vs 1.0• 新增的⼀一些特性

• Keep-Alive Connection

• Chunked Encoding Transfer

• Byte Range Requests

• Cache Mechanisms

• Request Pipeline

• ……

Keep-Alive Connection$ telnet www.baidu.com 80Trying 61.135.169.125...Connected to www.a.shifen.com.Escape character is ‘^]'.GET / HTTP/1.0!HTTP/1.1 200 OKContent-Type: text/htmlConnection: Close………Connection closed by foreign host.

$ telnet www.baidu.com 80Trying 61.135.169.125...Connected to www.a.shifen.com.Escape character is ‘^]'.GET / HTTP/1.1Host: www.baidu.com!HTTP/1.1 200 OK…Content-Type: text/htmlTransfer-Encoding: chunkedConnection: Keep-Alive…!3dd6………0

Keep-Alive Connection

Byte Range Requests

wget -c http://www.baidu.com

Cache Mechanisms• Expires

• Cache-Control

• max-age, no-cache, public, private

• Last-Modified

• ETag

Cache Mechanisms• Expires 和 Cache-Control ⼆二选⼀一

• 建议使⽤用Cache-Control，避免Request Peak

• 主⻚页⾯面不设置，或者设置不缓存 Expires: -1

• Last-Modified 和 ETag ⼆二选⼀一

• 建议使⽤用ETag，更准确⼀一些

Cache-Control policy

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags

http://www.17ce.com/

http://bs.baidu.com/adtest/baidu-00c51dd5.html

http://ecma.bdimg.com/adtest/baidu-00c51dd5.html

CDN

SPDY & HTTP 2

• 主要⺫⽬目的是降低传输的延迟

• HTTP 2是基于SPDY进⾏行演化

• https://http2.github.io/http2-spec/

SPDY & HTTP 2

http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_STREAMS_MESSAGES_FRAMES

SPDY & HTTP 2

http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_STREAMS_MESSAGES_FRAMES

SPDY & HTTP 2 vs HTTP 1

http://stackoverflow.com/questions/10480122/difference-between-http-pipeling-and-http-multiplexing-with-spdy

SPDY & HTTP 2

chrome://net-internals/#events&q=id:747802

SPDY & HTTP 2

如何⽣生效的？

• bin/openssl s_client -nextprotoneg 'spdy/3.1, spdy/3, http/1.1, spdy/2' -connect google.com:443

数据的传输• 延迟很重要

• 减少DNS查询 / DNS预查询 / DNS结果缓存

• 减少HTTP请求的数

• 尽量使⽤用CDN

• 合理的配置服务器缓存策略

• 减少传输的内容⼤大⼩小 / 压缩⽂文本 / 删除⽆无⽤用的⽂文本

• 新的协议 SPDY, QUIC, HTTP 2

HTML & CSS• PreloadScanner

• 书写⾼高效的 CSS selectors

• 避免使⽤用 CSS expressions

• 把CSS放到⻚页⾯面顶部

• 明确图⽚片的尺⼨寸

• 明确内容的编码

• ……

PreloadScanner

https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE

PreloadScanner

<!—— GOOD ——><script src=“large.js”></script><script src=“ad.js” async></script>!<!—— BAD ——><script src=“large.js”></script><script>var s = document.createElement(‘script’);s.src = “ad.js”;document.head.appendChild(s);</script>

书写⾼高效的 CSS selectors• Avoid a universal key selector.

• Make your rules as specific as possible.

• Remove redundant qualifiers.

• Avoid using descendant selectors, especially those that specify redundant ancestors.

• Use class selectors instead of descendant selectors.

https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors

避免使⽤用 CSS expressions

• 如果可能的话，使⽤用标准的 CSS 属性

• 如果⽆无法避免，尽量⽤用 JavaScript 来完成所需的功能

JavaScript Engine

• JIT Optimization

• Optimization killers

JIT Optimization

• Small Integers

• Hidden Class

• Inline Cache

• Type Interface

• ...

WTF?

Defining JIT

•Finding  a  way  to  generate  native  code  

•Then  execute  the  native  code

Defining JIT

!

•unsigned  char[]  code  =  {        0x48,  0x89,  0xf8        0x48,  0x83,  0xc0,  0x04        0xc3 };

Defining JIT

•mov  %rdi,  %rax  

•add  $4,  %rax  

•ret

Defining JIT

•mov  %rdi,  %rax  

•add  $4,  %rax  

•ret function add4(num) { return num + 4;}

Defining JIT

https://hacks.mozilla.org/2009/07/tracemonkey-overview/

Small Integer & Value Representation

Value Representation

• Tagged pointer

• NaN Boxing

Avoid Pointer Dereference

Tagged pointer

• Pointer vs Integer

sizeof( void * )

• 32bit

• 64bit

Aligned pointer

• pointer  %  8  ==  0  

• pointer  %  4  ==  0

Tagged pointer

• 1010 1111 0101 0011 1100 0000 0000 0000

• 1010 1111 0101 0011 1100 0000 0000 0000 1010 1111 0101 0011 1100 0000 0000 0000

Tagged pointer int31

• iiiiiiii|iiiiiiii|iiiiiiii|iiiiiii1  

•Range:  [0,  2^31]

Tagged Pointer

• int32 & double will overflow

Tagged pointer pointer

• pppppppp|pppppppp|pppppppp|ppppppT0  

•Range:  [0,  2^31]

NaN Boxing

64 vs 48

64 vs 48

http://en.wikipedia.org/wiki/X86_64#Virtual_address_space_details

64 vs 48

NaN Boxing

3.1415926

•S=0  

•E=10000000000  

•M=1001001000011111101101001101000100101101100001001010  

•V=(-­‐1)^S  *  2^(E-­‐0x3ff)  *  1.M

The end

Optimization killers• with

• debugger

• arguments

• for-in

• …

with statement

function containsWith() { return 3; with({}) {}}!containsWith();%OptimizeFunctionOnNextCall(containsWith);containsWith();var status = %GetOptimizationStatus(containsWith);console.log(status === 2);

debuggervar DEBUG = false;function main() { if (DEBUG) { debugger; } require(“./biz1”); require(“./biz2”); require(“./biz3”); require(“./biz4”);}

var DEBUG = false;function main() { require(“./biz1”); require(“./biz2”); require(“./biz3”); require(“./biz4”);}

argumentsfunction fn1(a, b) { b = b || 10; return a + b;}!function fn2() { var args = [].slice.call( arguments);}

function fn3(a, opt_b) { var b = opt_b || 10; return a + b;}!function fn4() { var args = []; for(var i = 0; i < arguments.length; i ++ ){ args[i] = arguments[i]; }}

for-infunction nonLocalKey1() { var obj = {} for(var key in obj); return function() { return key; };}!var key;function nonLocalKey2() { var obj = {} for(key in obj);}

function nonLocalKey3() { var obj = {} for(var key in obj);}

数据的渲染• HTML & CSS

• 没有什么特殊注意的内容

• 控制代码的体积，选择合理的HTML结构

• JavaScript Engine

• JS引擎的性能越来越好

• Make it happy!

公司内的⼀一些平台• http://uaq.baidu.com

• http://webspeed.baidu.com

• http://speedup.baidu.com

• http://yunjiasu.baidu.com

• http://bcs-console.bae.baidu.com

public-web-perf@w3.org

• ⾸首屏渲染的提案

Q & A

References

References

References

References• https://developers.google.com/speed/docs/best-practices/rendering

• https://developers.google.com/speed/articles/spdy-for-mobile

• https://docs.google.com/spreadsheet/ccc?key=0As3TLupYw2RedG50WW9hNldQaERDTlFHMEc2S2FBTXc#gid=4

• https://www.igvita.com/

• https://www.igvita.com/slides/2012/html5devconf/#52

• http://httparchive.org/trends.php#bytesTotal&reqTotal

• http://http2.github.io/

• https://github.com/h5bp/server-configs

• https://igrigorik.github.io/resource-hints/

• http://nikic.github.io/2012/02/02/Pointer-magic-for-efficient-dynamic-value-representations.html

• ……