Post on 22-Nov-2014
description
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
如何⽣生效的？
• 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
• ……