百度的BIT课程

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/
• http://nikic.github.io/2012/02/02/Pointer-magic-for-efficient-dynamic-value-representations.html
• ……