Web前端性能优化 2014
74 likes5,088 views
The document discusses various topics related to web front-end performance optimization. It begins with an overview of what happens from entering a URL to a browser receiving and rendering a page. It then covers specific topics like bandwidth and latency, network protocols like DNS, TCP/IP, HTTP/1.1, caching, and how data is rendered by the browser through HTML, CSS, and JavaScript. Specific techniques are provided for optimizing aspects like reducing DNS lookups, HTTP requests, content size, and avoiding things that hurt JavaScript engine optimization.
![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](https://image.slidesharecdn.com/web-2014-140717081956-phpapp01/85/Web-2014-24-320.jpg)
![Defining JIT
!
•unsigned
char[]
code
=
{
0x48,
0x89,
0xf8
0x48,
0x83,
0xc0,
0x04
0xc3
};](https://image.slidesharecdn.com/web-2014-140717081956-phpapp01/85/Web-2014-49-320.jpg)
![Tagged pointer int31
•iiiiiiii|iiiiiiii|iiiiiiii|iiiiiii1
•Range:
[0,
2^31]](https://image.slidesharecdn.com/web-2014-140717081956-phpapp01/85/Web-2014-59-320.jpg)
![Tagged pointer pointer
•pppppppp|pppppppp|pppppppp|ppppppT0
•Range:
[0,
2^31]](https://image.slidesharecdn.com/web-2014-140717081956-phpapp01/85/Web-2014-61-320.jpg)
![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];
}
}](https://image.slidesharecdn.com/web-2014-140717081956-phpapp01/85/Web-2014-73-320.jpg)
Web前端性能优化 2014
- 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
- 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
- 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
- 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，更准确⼀一些
- 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放到⻚页⾯面顶部 • 明确图⽚片的尺⼨寸 • 明确内容的编码 • ……
- 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; }
- 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
- 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
- 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/ • http://nikic.github.io/2012/02/02/Pointer-magic-for-efficient-dynamic-value-representations.html • ……