High Performance Web Frontend 2013 秋

Transcript

1. High Performance Web Frontend *5B51D?BMC#1>C19B?>DB5>49>'C1;1 18?=E I25B75>D!>3

2. ×Ūķ๑NᴗO๑ 8DD@ 18?=E

3. Frontend Engineer ,%$ ++ "1F1+3B9@D B?GC5B

4. Ɨ sIy†P‹Q bgh_[h`KBX .%;U" NM u_fh`Oqt

   r|mP ab\idh^LQŒ

5. ¯ÂĨw­¯”ƶğ ůø  &5DG?B; # ?=@ED5  *5>45B

6. ijŷ4)5*1%77)56 ƀÚ)7:35/ ħō!)2()5 ŲŚ31487) Ţŷ32'086-32 ŵwŁŠ

7. Î÷wßĊx |}.52#9D{ÆŸ 8B?=5'@5B19/<:4/',1,<4 ℹ …~€PHSP$)&-7>$)&-7*35)9)034)56?w{ƒ‚ ,7741<%/85%+-7,8&-32:)&/-7 ()96,710

8. #perfmatters (5B6?B=1>35%1DD5BC

9. īÎw­¯”ƶğr jwƅůĘ ❓ =3314*'31&03+ :)&4)5*351%2')&%6-'6*357,)1%5/)7-2+7)%1

10. šÄ¬Æž½Äň[õÈf‰ ":D477,ciI¤´Ž±´˜hńêR ĝŔńÌY]Vdc ‘€²±´˜øR ÓµY]  -7:28:D477,:<2 80><4.=

    ŕ<01:B;,207:,/=;00/ ;,<>44

11. ??7<5uą‹ŠtVku ¤´ŽŸƒ´¥²R ÕV‹—i Āħ­²†²ˆg ęVĕƌRLx ' 2::270A0-8,=>0<.09><,7-7:2=;:>5; ?=492=4>0=;00/49A0-=0,<.3<,964923>87

12. äŐuĕƌŒÉX‰ ::270d"4.<:=:1>i ¤´Ž±´˜R ĝņUfx]k ‹´žgd`b hčęg afRxĚĢ{ĜY]  3>>;

    <,/,<:<0477C.:8 -492,9/2::270,2<00=7:A;,23>87

13. .52wĀëu†np ƅůĘ[ĭuÿdpV‰ ℹ

14. ĉūŊþwĂĴë  #  +

15. ůÑwŮƊë   - 

16. (175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492

    7:=0 94>4,7

17. (175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492

    7:=0 94>4,7 2 D¨Á¼ª ]V^±f·T 

18. (175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492

    7:=0 94>4,7 2 D†§•] “»R€¢eL ♥

19. Network &+$??;E@ ,(?>>53D9?> +5>4 ,,(*5AE5CD *5359F5 ,,(*5@?>C5 «¥¨ÃÆ—ÅƀÚ

20.  0 + -  ␡ $?14 4=;7,C )=492 7:=0

    94>4,7

21. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

22. #w¿¡ÆŸŒï`î‰ ,,(¿—“Ÿ¨w&5DG?B; ‡­}²—R‹´œ´h rwÐw’îðÆgQQxúŊ{ #5:4-%716%13.dÕkmZ ýĩĘg»îðZxcYtNQŚ '

23. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

24.  + &+ <95>D SGGG5H1=@<53?=npôæw +5BF5BwÖĠxsaƗT 21.49 ¯”ÃÆ©À¥—Ž¥±

25.  + &+ <95>D ¯”ÃÆ©À¥—Ž¥± SUÆQYŠœ‡tV`s œnpjWtÐw&+uŧVp‰‹T !$ &+űĽ

26.  + &+ <95>D ¯”ÃÆ©À¥—Ž¥± S

    lnpcT !$ &+űĽ

27. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

28.  + +5BF5B <95>D Sb^lcÆVT 21.49 ĦŤwƆĄ

29.  + +5BF5B <95>D StwŌqfZÆƗT $.7;.7 ĦŤwƆĄ

30.  + +5BF5B <95>D Saumxƒ ¿¡ÆŸ^lcÆVT 21.49 ĦŤwƆĄ ,,(¿—“Ÿ¨

31.  + +5BF5B <95>D ĦŤwƆĄ ,,(¿—“Ÿ¨ ,( G1I 81>4C81;5

32. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

33.  + +5BF5B <95>D S¿¡ÆŸ^lcÆVT 21.49 ĦŤwƆĄ Sm…nr~npvT $.7;.7 ,,(¿—“Ÿ¨

    ¿—“Ÿ¨wáʼnĬƇ

34.  + +5BF5B <95>D SrˆUXg #ſ‰vT $.7;.7 ,,(ÁŸµÄŸ #

35.  + +5BF5B <95>D SUˆ[rWƒ ‚nrľčſnpVV†ƒT 21.49 ÁŸµÄŸïÚÊ ,,(ÁŸµÄŸ #

36.  + +5BF5B <95>D ÁŸµÄŸïÚÊ SeƒU #ſ‰†T $.7;.7 ,,(ÁŸµÄŸ

    #

37.  + +5BF5B <95>D ,,(ÁŸµÄŸ # ÁŸµÄŸïÚćË F‡½JP[WVÂG 21.49

38.  + +5BF5B <95>D ,,(ÁŸµÄŸ # ÁŸµÄŸïÚćË ,( +<?G+D1BD

39. •Æ¬Æ²¥©[â„fV ĺ×h&:?9/(<4;RLwmY] ®‡‚—dĹOeq ø×h&:?9/(<4;{ĭwŁYbMx Ń¿R·âãfĔÜ^d&:?9/(<4;h ×øgć¼Yb„´œ´¢“˜RđgQXo 

40. 978(5B6?B=1>35 B?GC5B&5DG?B;9>7 .3480<,7,-=:<0477C.:8 -::6=

41. m…nrƋdVqf†v 

42. xewŽ—½Äx ­¯”ƶğwĤĵë ✓

43. ÙXyšÄ§Ä¦›¨wƁĐ AAA2::270.:8 ,9,7C>4.=

44. ĤĵrdpőĵÛŒĈ ţŤdpžźf‰ ::

45. šÄ§Ä¦›¨wƁĐƁĐwĨı AAA2::270.:8 ,9,7C>4.=

46. ƁĐwĨıƓÇƃƔ ­€Œ†ª“¬{ĊĕZx ®‘°‡—h×ø{čvZ ®´{ÙĬZx ''¡­—{ÇĕZx ''d 'hĻnŀnŐ{ýňÌZx HHHHHHHHHHHHHHHH0>. ℹ

47. (175+@554!>C978DC /0@07:;0<=2::270.:8 =;00/ ;,20=;00/ 49=423>=

48. None

49. (175+@554!>C978DC*E<5C /0@07:;0<=2::270.:8 =;00/ /:.= 49=423>= <?70=

50. .52­¯”ƶ𳟨±¾—§Ÿ 24>3?-.:8 > 6 =;00/ -7:- 8,=>0< /:.= -0=>;<,.>4.0=<?70=+49><:8/

51. o]wŽ—½Äx &5DG?B;śŝwûįċŘ ✓

52. ¿—“Ÿ¨wĪŒł‡f ;  Reduce number of HTTP requests ⬅ ⬅

    ⬅ ⬅ ⬅ ⬅ ⬅ ?>31D5>1D5 +++@B9D5C 1D1-*!

53. ¿¡ÆŸw› Œł‡f - Image - Optimized Minified, Gzipped = Text

    = % $$€$ ▻ ▻▻ ▻ ▻▻

54. ~gxšŸ­wŨV ċŘŒűĽdpV^ ?

55.  0 + -  ␡ !:,/ 4=;7,C -C9>7 7:=0

    94>4,7

56. 16.666... =C (+

57. (+r¿¯Á¥¼Áƨ ©œ¯ÔpbÞUhĖŏi ĝg ×®Ÿ°“¬Zx D %'{¾a]pgi Ÿ°´§hÄē{ 8=cČm[x #

    %'1<,80;0<=0.:9/

58. °¾‘œw ¯ÁÆ·ux ĴRtáʼn[Ŵ~npV‰ $?14 +3B9@D $1I?ED (19>D F5>D =C

    '! '!

59. ¯ÁÆ·áʼnwŇĜŒ ,9=5<9>5qŔŶf‰ ' (4807490<,80=

60. DEMO

61. ?=@1B56B1=5C@5BC53?>4 1<,80=;0<=0.:9/,;;=;:>.:8

62. Render (19>D $1I?ED (- ħōáʼnuoVp

63. ??7<58B?=51>1BI ýùhăįR’ńUõĿXyx ʼnėĮ”´¯hŅÌqńM Mzsx#423>7C?47/ŗĆûüùŘ ŠL\IšMHWYcŸL\I

64. Heavy Painting ƅV´Ä¨

65. ´Ä¨šŸ¨w ůø -  Big Image Heavy CSS ",) #%2(

    #,)%76,))7 )5*351%2'),)'/0-67*357,)3&-0)$)&

66. ă\VōÝr¿› -

67. *.u‰ōÝ¿› wšŸ¨ # + ▻ 3*=<1-90

68. éÒh†ˆx›Æ¬Æ›©qŸ^ # ⬅  + ⬇ +5BF5B

69. ƏűÝĐëu†‰› ÿ  ▪ ▻ īĂ ÀcIŏġiÀgfx

70. įĔuŜşc[ėůt¿¡ÆŸƗ  ▪ •†—ĦĖÁ ‹§›¯ †´žŽ¬}¯ H H H

    )´” ífehIJœ ▪

71. ƅV++wƂçäŌ 

72. sŠ[ƅV±Â­§Z ŔŶdt[‡Œf '

73. , !&+.$,'&, %''& .== 0B;.:8 8::9

74. DEMO

75. 2 C57,.*,,.2.7*9.- D,536581914/ C4*+2.,54914:5:8 D6*/.7.6*14914/

76. 2 +5=80*-5<kŽTQ[Z "*/.6*149913.M£¡

77. ++šŸ¨wIJųG9D8va ì

78. +;9152E775B ôĖçąhŋĶrIĸÿŗ¡±Ÿ|¯ŘRıOx

79. 454. 38 +5=80*-5< 38 +57-.77*-1:8 38 -599.-+57-.7 38

    80*-5<-599.- 38 80*-5<7*-1:8 38 7*-1:8-599.- 38 *2231= 38 @BDRK)&8++)5jPvoKBWAp‡PceZ]KQTJLxDl}FYRG

80. 454. +5=80*-5< +57-.77*-1:8 -599.-+57-.7 80*-5<-599.-

    80*-5<7*-1:8 7*-1:8-599.- *2231= ⬅ ⬅ ⬅ 3,@07:2,C?8?=,>:.:8 /0@07:; ;0<1:<8,9.0 0 .==+<09/0<492+A4>3+=64,+/0-?220<3>87

81. ¹¬ÀxņuítV ª˜€řķ¸dQŒÅYR_ ?¿I@–Œ²iěQgáÚZx íiÑįcLyjIM`\ĖÁgZx ëďI#0>A:<6‰—dàĞ ":-470/[email protected]=,<07:A=;0. +

82. ++wbäŌxŲōŏu D

83. Layout Thrashing ěùdtVÁŽ‘¨áʼnwťˆŽd

84. ­¾¾¥—ŸqUˆ[mt ÁŽ‘¨áʼnwöƍ ⚠ :9E>C:?>,76,-:?>4>

85. ůŞwÁŽ‘¨ƓàƄŦÅ¿¯ÂÆr‚Ɣ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ 2 ¶¬SY ³®k¾²SaTÂ

86. 917>?C9>76?B354CI>38B?>?EC<1I?EDC ()9)034)56+33+0)'31',531)()9)034)573306(3'6()13673318',0%<387

87. DEMO

88. 2 DDMº°SY ‹À\¤– ⚠

89. öƍwÀƱwÊq ŹanpV‰ar ❓ :<.0/'C9.3<:9:?=7,C:?>

90. ÁÄ£¿Ä˜w¯ÂÆ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻

91. đĵĚüwůļ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ 2 ‘”Œ[L `SI\

92. àŲŚuÔWÁŽ‘¨ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ 2 ƒ_Yb\I[ jLelj

93. ēåÁŽ‘¨awƇQŸ—¿±¨x°Â¥— "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ ƘÍÍÍÍÍÍÍÍÍƘ ƖP?B354$1I?EDPƕ ƙ/0/0/0/0/0/0/0ƙ

94. Ÿ¾¥Ä˜ÁŽ‘¨wŎŋ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ 2 Oh 2 Oh 2 Oh 2 Oh 2 OhÂ

95. ņĈw±Â­§zw *514 .B9D5qŎŋ ⚠

96. 2 ©¦«—k ¸Kg

97. JK öƍwÀƱ // animation loop function update(timestamp) { for (var

    m = 0; m < movers.length; m++) { // Layout invalidated movers[m].style.left = ( (Math.sin( // Layout forced movers[m].offsetTop + timestamp / 1000 ) + 1) * 500 ) +'px'; } raf = window.requestAnimationFrame(update); }

98. JK Ćāu¶¸táʼn --- 1st loop --- R offsetTop up to

    date W style.left dirty flag on --- 2nd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 3rd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 4rd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 5th loop --- ... .. 2 œHWVLe žkXPid 2 UJLEˆ¶¬ S\I[ :::<3878&)'31:%7',9#$-

99. Ÿ¾¥Ä˜ÁŽ‘¨à "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ 2 Oh 2 Oh 2 Oh 2 Oh 2 OhÂ

100. JK öƍut‰±Â­§Å¸¡¥© Element clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft offsetTop

     offsetWidth scrollHeight scrollLeft scrollTop scrollWidth innertText outerText getBoundingClientRects etc... MouseEvent layerX layerY offsetX offsetY Window scrollBy scrollTo scrollX scrollY getComputedStyle Frame, Document & Image height widh /)00)+386'31. 0%<3874)5*351%2')

101. GPU ƐĿwšŸ¨

102. B1@893C(B?35CC9>7->9D 5,A464;0/4,:<2 A464 <,;34.=+%<:.0==492+)94>

103. aaxņu.52#9D 8B?=9E=µÆ¨wŵ ℹ

104. Žª¸Æ½Är ´Ä¨u‰(- ❓

105. µž½Äwŗê

106. řĠãw´Ä¨

107. ¢¶ÆŽª¸Æ½Äwýó

108. ĺ¯ÁÆ·bruŽ¬¬¬u

109. ++>9=1D9?>Cx tiń‡Zuê^wZ  948,>4:9-,=0/7,C0<;<:8:>4:9

110. óĞÁ»Æu§—Ÿ¤ºŒwh‰ ()9)034)56+33+0)'31)9)276-36)66-326 9)03'-7<'32*'319)03'-7< 48&0-'6',)(80)()7%-0

111. óĞÁ»ÆÈq§—Ÿ¤ºŒêZf 2 qxrB ◅ ◅ ◅ ()9)034)56+33+0)'31)9)276-36)66-326 9)03'-7<'32*'319)03'-7<

     48&0-'6',)(80)()7%-0

112. (-u§—Ÿ¤ºŒ Żſdpáʼn 2 mv~]¯M tnqs{ "&]­¥‚ "&]­¥‚ ▻ - ▻

     wpo| NR ´ ¹› EYVPnzQ #kK ˆ„Ol}KCXŠ

113. „ˆf]‰rżV ⚠ —®…´gfx¡±•~{ňĕZxd ôĖĦh·ÂÒRÉĄĘgöÖZxVdRLx RILmwéMĤØgňĕZxd %)lhŇľłRĽVw Ÿƒ´¥²º¶gafRx ==429>4807,C0<;<:8:>4:9

114. óĞÁ»Æ[ěùhg ŋĞcŠ‰ÌĩrċŘ  ..4/09>,77,C0<.<0,>4:9

115. DEMO

116. DEMO

117. Compute "1F1+3B9@D 1B2175?<<53D9?> %5=?BI$51; ŅŚÅ¿¡ÆŸ

118.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶

119.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶

120. "1F1+3B9@D (-(B?Ƒ<5B ' ÄēhäıgQQ`]úŊ

121. DEMO

122.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶

123. ,9=5<9>5%5=?BI '2:53D?E>D5BC ' ¨©®r„ Ž‡—øhóğ

124. DEMO

125. ÞúŏuöƍwU‰ ­¢ÆÄwŠÏ ' (4807490hĈì{ĉòċUĵx

126. wa]ˆĸ­¢ÆÄ hŒêRŔZTx 49.0;>4:90B;7,490/.:8

127. –³ÆžšÁ—½Ä rx „ Ž‡—h·ĴfÎĐQv ¨©®őÛ{ĸ÷Zxăā F¯²œhuNgåÃhŠ¦{ HİËcÏōYbUyx«”  ,<-,20:770.>4:9

128. [ĉūcŠpV‰Ƈ ÐwáʼnxÜĶf‰ ⚠

129. [ =CwÊwĪèŒ ģnpVnpd~W $,7169 *>5:9 "*149 =C?F5B CD1BD

130. (B5<<?31D5~kx '2:53D(??<tswċŘ &8-0(2):+%1)6'31+%5&%+)'300)'735*5-)2(0<'3() :::,710 53'/6'31)278735-%0664))(67%7-'1)143306 ℹ

131. ƉĹ­¢ÆÄ Š¦R×ÏXyfM -7:290A<074..:8 ?=492.3<:80/0@07:;0<>::7=>:ŕ9/808:<C70,6=

132. ¸¹¿¿Æ—rx ĸ÷XyfM¨©®őÛRĎmw ïJgģSőÛRčxĒļ F 'gPMbiLxĠhİďĒļ HŠ¦ißfwæfwĎmxqh "08:<C!0,6= ℹ

133. ✓Ýø‰´¡hijŎfĪnÒM ✓ÈŌČn$"h£²—®™´ ✓„ Ž‡—ŊhñĔÎĐ ✓.:9=:707:2feguxÅÊ .:/492=8,=34928,2,D490.:8 A<4>4921,=>808:<C0Ŗ.409>5,@,=.<4;> 0>.

134. *53?B4 51@ <<?31D9?>C ' ½Ç”´¯{ĥÍgWĨ¹

135. DEMO

136. 2 °ÀÆyz}‰f’Y„ ˜ÁƉf’Yµ™ b

137. Conclusion ~r

138. ŠÏdkòůŞuoVp ă~ZuĥˆŽˆ 

139. .52­¯”ƶğŒñ‰ ůŞ  &5DG?B; # ?=@ED5  *5>45B

140.  &5DG?B; AţŤŏuŲŃf{d AûįwċŘŒĖďf‰

141.  *5>45B A++wƂŭƎuŀě AÁŽ‘¨wŎŋ‚ŀě A(-áʼnxĝƅuġW

142. # ?=@ED5 AĻudf]t^p'# A¦ÆÀŒØXyŰp A™Æ·rZx®Žtöƍ

143. ,9=5<9>5xŖ¦ÆÀ ũRtöƍŒŎŰq\‰ M

144. (0(534&3;86)5'327)27'318 7%0/6()973306 -2();,710 2 "$ 2 "& 2

     ˜¨ 2 2 yz}

145. A.52ĢŬwŻŌ[Ď[‰ AĉūŊþwĂĴë Aåƈr­¯”ƶğ + >F #

146. .52ĢŬqğVŤ`‰t‡ f_u€{\ƒ ?

147. )E5CD9?>C 8DD@ 18?=E 18?=E 79D8E23?= 18?=E ⌂

148. ,774:::‰-'/5'314,37367&-6%%'6 ,774:::‰-'/5'314,373667)9)2()4303

     ,774:::‰-'/5'314,3736)4636 ,774:::‰-'/5'314,3736.3,22-):%0/)5 ,774:::‰-'/5'314,3736%0)6/ ,774:::‰-'/5'314,3736 ,774:::‰-'/5'314,37360%',0%2,%5(< ,774:::‰-'/5'314,3736169+ ,774:::‰-'/5'314,3736861-66-32 ,774:::‰-'/5'314,3736.(,%2'3'/ ,774:::‰-'/5'314,37367,6/<7 ,774:::‰-'/5'314,3736,%26)0 %3:>:<0/4>=G