Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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.
. 1...
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
• 避免 HO...
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
• ...
Keep-Alive Connection
$ telnet www.baidu.com 80	
Trying 61.135.169.125...	
Connected to www.a.shifen.com.	
Escape characte...
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...
Cache-Control policy
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#...
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-...
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
• 合理的配置服务器缓存策略
• 减少传输的内容⼤大⼩小 / 压缩⽂文本 / 删除⽆无⽤用的⽂文本
• 新的协...
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 ——>	
<scri...
书写⾼高效的 CSS selectors
• Avoid a universal key selector.
• Make your rules as specific as possible.
• Remove redundant qualifi...
避免使⽤用 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,	...
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
1...
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=100100100001111110110100110100
0100101101100001001010	
  
•V=(-­‐1)^S	
  *	
  2^(...
The end
Optimization killers
• with
• debugger
• arguments
• for-in
• …
with statement
function containsWith() {	
return 3;	
with({}) {}	
}	
!
containsWith();	
%OptimizeFunctionOnNextCall(contai...
debugger
var DEBUG = false;	
function main() {	
if (DEBUG) {	
debugger;	
}	
require(“./biz1”);	
require(“./biz2”);	
requir...
arguments
function fn1(a, b) {	
b = b || 10;	
return a + b;	
}	
!
function fn2() {	
var args = [].slice.call(	
arguments);...
for-in
function nonLocalKey1() {	
var obj = {}	
for(var key in obj);	
return function() {	
return key;	
};	
}	
!
var key;	...
数据的渲染
• 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...
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/artic...
Web前端性能优化 2014
Web前端性能优化 2014
Próxima SlideShare
Cargando en…5
×

Web前端性能优化 2014

4.345 visualizaciones

Publicado el

百度的BIT课程

  • Sé el primero en comentar

Web前端性能优化 2014

  1. 1. Web前端性能优化 leeight - 2014
  2. 2. What happened? http://fex.baidu.com/blog/2014/05/what-happen/
  3. 3. What happened? • 从输⼊入 URL 到浏览器接收的过程中发⽣生了什么? • 浏览器如何向⺴⽹网卡发送数据? • 数据如何从本机⺴⽹网卡发送到服务器? • 服务器接收到数据后会进⾏行哪些处理? • 服务器返回数据后浏览器如何处理? • 浏览器如何将⻚页⾯面展现出来?
  4. 4. What happened? • 从输⼊入 URL 到浏览器接收的过程中发⽣生了什么? • 浏览器如何向⺴⽹网卡发送数据? • 数据如何从本机⺴⽹网卡发送到服务器? • 服务器接收到数据后会进⾏行哪些处理? • 服务器返回数据后浏览器如何处理? • 浏览器如何将⻚页⾯面展现出来?
  5. 5. ⼤大纲 • 数据的传输 • 带宽和延迟 • ⺴⽹网络协议 • 缓存 • 数据的渲染 • HTML & CSS • JavaScript Engine
  6. 6. 带宽和延迟 2168 * 1000 / 300000 ≈ 7ms
  7. 7. 带宽和延迟 http://chimera.labs.oreilly.com/books/1230000000545/ch01.html#SPEED_FEATURE
  8. 8. 带宽和延迟 https://www.igvita.com/slides/2012/html5devconf/#1
  9. 9. 带宽和延迟 http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#LATENCY_BOTTLENECK
  10. 10. 带宽和延迟 • 带宽 不是那么重要 • 延迟 才是影响⺴⽹网络性能的关键
  11. 11. ⺴⽹网络协议 • DNS • TCP/IP • HTTP/1.0 & 1.1 • SPDY
  12. 12. DNS • DNS查询是⽐比较耗时的⼀一个操作 • dig +trace www.baidu.com @8.8.8.8
  13. 13. 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
  14. 14. DNS • dig www.baidu.com @8.8.8.8 • dig www.baidu.com @114.114.114.114
  15. 15. DNS Cache
  16. 16. DNS Prefetch http://blog.chromium.org/2008/09/dns-prefetching-or-pre-resolving.html
  17. 17. TCP/IP • 三次握⼿手 • SYN, SYN ACK, ACK • 慢启动和流量控制
  18. 18. 三次握⼿手 http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HANDSHAKE
  19. 19. 慢启动 http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HANDSHAKE
  20. 20. Head-of-Line Blocking http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HOL
  21. 21. 扩展阅读 • TCP Fast Open • SYN 包传输数据,降低 ~15% • Building Blocks of TCP • QUIC(Quick UDP Internet Connections) • 0 - RTT • 避免 HOLB
  22. 22. HTTP 1.0 & 1.1 • 1996: RFC1945 • 1999: RFC2616 • 2014: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234, RFC7235
  23. 23. HTTP 1.1 vs 1.0 • 新增的⼀一些特性 • Keep-Alive Connection • Chunked Encoding Transfer • Byte Range Requests • Cache Mechanisms • Request Pipeline • ……
  24. 24. Keep-Alive Connection $ telnet www.baidu.com 80 Trying 61.135.169.125... Connected to www.a.shifen.com. Escape character is ‘^]'. GET / HTTP/1.0 ! HTTP/1.1 200 OK Content-Type: text/html Connection: Close ……… Connection closed by foreign host. $ telnet www.baidu.com 80 Trying 61.135.169.125... Connected to www.a.shifen.com. Escape character is ‘^]'. GET / HTTP/1.1 Host: www.baidu.com ! HTTP/1.1 200 OK … Content-Type: text/html Transfer-Encoding: chunked Connection: Keep-Alive … ! 3dd6 ……… 0
  25. 25. Keep-Alive Connection
  26. 26. Byte Range Requests wget -c http://www.baidu.com
  27. 27. Cache Mechanisms • Expires • Cache-Control • max-age, no-cache, public, private • Last-Modified • ETag
  28. 28. Cache Mechanisms • Expires 和 Cache-Control ⼆二选⼀一 • 建议使⽤用Cache-Control,避免Request Peak • 主⻚页⾯面不设置,或者设置不缓存 Expires: -1 • Last-Modified 和 ETag ⼆二选⼀一 • 建议使⽤用ETag,更准确⼀一些
  29. 29. Cache-Control policy https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#validating-cached-responses-with-etags
  30. 30. http://www.17ce.com/ http://bs.baidu.com/adtest/baidu-00c51dd5.html http://ecma.bdimg.com/adtest/baidu-00c51dd5.html CDN
  31. 31. SPDY & HTTP 2 • 主要⺫⽬目的是降低传输的延迟 • HTTP 2是基于SPDY进⾏行演化 • https://http2.github.io/http2-spec/
  32. 32. SPDY & HTTP 2 http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_STREAMS_MESSAGES_FRAMES
  33. 33. SPDY & HTTP 2 http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_STREAMS_MESSAGES_FRAMES
  34. 34. SPDY & HTTP 2 vs HTTP 1 http://stackoverflow.com/questions/10480122/difference-between-http-pipeling-and-http-multiplexing-with-spdy
  35. 35. SPDY & HTTP 2 chrome://net-internals/#events&q=id:747802
  36. 36. SPDY & HTTP 2
  37. 37. 如何⽣生效的? • bin/openssl s_client -nextprotoneg 'spdy/3.1, spdy/3, http/1.1, spdy/2' -connect google.com:443
  38. 38. 数据的传输 • 延迟很重要 • 减少DNS查询 / DNS预查询 / DNS结果缓存 • 减少HTTP请求的数 • 尽量使⽤用CDN • 合理的配置服务器缓存策略 • 减少传输的内容⼤大⼩小 / 压缩⽂文本 / 删除⽆无⽤用的⽂文本 • 新的协议 SPDY, QUIC, HTTP 2
  39. 39. HTML & CSS • PreloadScanner • 书写⾼高效的 CSS selectors • 避免使⽤用 CSS expressions • 把CSS放到⻚页⾯面顶部 • 明确图⽚片的尺⼨寸 • 明确内容的编码 • ……
  40. 40. PreloadScanner https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE
  41. 41. 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>
  42. 42. 书写⾼高效的 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
  43. 43. 避免使⽤用 CSS expressions • 如果可能的话,使⽤用标准的 CSS 属性 • 如果⽆无法避免,尽量⽤用 JavaScript 来完成所需的 功能
  44. 44. JavaScript Engine • JIT Optimization • Optimization killers
  45. 45. JIT Optimization • Small Integers • Hidden Class • Inline Cache • Type Interface • ...
  46. 46. WTF?
  47. 47. Defining JIT •Finding  a  way  to  generate  native   code   •Then  execute  the  native  code
  48. 48. Defining JIT ! •unsigned  char[]  code  =  {        0x48,  0x89,  0xf8        0x48,  0x83,  0xc0,  0x04        0xc3 };
  49. 49. Defining JIT •mov  %rdi,  %rax   •add  $4,  %rax   •ret
  50. 50. Defining JIT •mov  %rdi,  %rax   •add  $4,  %rax   •ret function add4(num) { return num + 4; }
  51. 51. Defining JIT https://hacks.mozilla.org/2009/07/tracemonkey-overview/
  52. 52. Small Integer &Value Representation
  53. 53. Value Representation • Tagged pointer • NaN Boxing Avoid Pointer Dereference
  54. 54. Tagged pointer • Pointer vs Integer
  55. 55. sizeof( void * ) • 32bit • 64bit
  56. 56. Aligned pointer • pointer  %  8  ==  0   • pointer  %  4  ==  0
  57. 57. 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
  58. 58. Tagged pointer int31 •iiiiiiii|iiiiiiii|iiiiiiii|iiiiiii1   •Range:  [0,  2^31]
  59. 59. Tagged Pointer • int32 & double will overflow
  60. 60. Tagged pointer pointer •pppppppp|pppppppp|pppppppp|ppppppT0   •Range:  [0,  2^31]
  61. 61. NaN Boxing
  62. 62. 64 vs 48
  63. 63. 64 vs 48 http://en.wikipedia.org/wiki/X86_64#Virtual_address_space_details
  64. 64. 64 vs 48
  65. 65. NaN Boxing
  66. 66. 3.1415926 •S=0   •E=10000000000   •M=100100100001111110110100110100 0100101101100001001010   •V=(-­‐1)^S  *  2^(E-­‐0x3ff)  *  1.M
  67. 67. The end
  68. 68. Optimization killers • with • debugger • arguments • for-in • …
  69. 69. with statement function containsWith() { return 3; with({}) {} } ! containsWith(); %OptimizeFunctionOnNextCall(containsWith); containsWith(); var status = %GetOptimizationStatus(containsWith); console.log(status === 2);
  70. 70. debugger var 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”); }
  71. 71. arguments function 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]; } }
  72. 72. for-in function 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); }
  73. 73. 数据的渲染 • HTML & CSS • 没有什么特殊注意的内容 • 控制代码的体积,选择合理的HTML结构 • JavaScript Engine • JS引擎的性能越来越好 • Make it happy!
  74. 74. 公司内的⼀一些平台 • http://uaq.baidu.com • http://webspeed.baidu.com • http://speedup.baidu.com • http://yunjiasu.baidu.com • http://bcs-console.bae.baidu.com
  75. 75. public-web-perf@w3.org • ⾸首屏渲染的提案
  76. 76. Q & A
  77. 77. References
  78. 78. References
  79. 79. References
  80. 80. 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 • ……

×