Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

Web前端性能优化 2014

4,315 views

Published on

百度的BIT课程

  • Be the first to comment

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

×