Web前端性能优化-2014

百度BIT课程

Transcript

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