Performance Bootcamp - Speaker Deck

Slide 1

Slide 1 text

Performance Bootcamp 2019/4/8 @ Recruit Technologies

Slide 2

Slide 2 text

ϦΫϧʔτςΫϊϩδʔζ ITE౷ׅ෦HRྖҬΤϯδχΞϦϯά෦ASG ݹ઒ཅհʢϑϧΧϫϤ΢εέʣ 2 ■໾৬ ࣗݾ঺հ Application Solution GroupͷάϧʔϓϚωʔδϟ γχΞιϑτ΢ΣΞΤϯδχΞ ͓ࣸਅ ໌Δ͍ද৘ͷ΋ͷ ϓϥΠϕʔτ΋Մ ■GMͱͯ͠΍ͬͯΔ͜ͱ ιϑτ΢ΣΞΤϯδχΞମ੍ͮ͘Γ ࠾༻/ධՁ νʔϜϏϧσΟϯά/ίϯαϧςΟϯά ■γχΞͱͯ͠΍ͬͯΔ͜ͱ R&D - React/Redux/Node.jsΛ࢖ͬͨϘΠϥʔϓϨʔτ - Consumer Driven Contract πʔϧ agreed࡞੒ ύϑΥʔϚϯενϡʔχϯά - ࣾ಺ISUCON։͍ͨΓ - ࣾ಺Web Page SpeedϋοΧιϯ։͍ͨΓ

Slide 3

Slide 3 text

Agenda • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ύϑΥʔϚϯε

Slide 4

Slide 4 text

ඇػೳཁ݅ʹͩ͜ΘΖ͏

Slide 5

Slide 5 text

ϓϩͷϓϩάϥϚʔͱ ϓϩ͡Όͳ͍ϓϩάϥϚʔͷ ҧ͍

Slide 6

Slide 6 text

ػೳཁ݅ͱඇػೳཁ݅ • ػೳཁ݅ɿ  ࣮૷͠ͳ͖Ό͍͚ͳ͍ػೳ  Ϣʔβʔ͔ΒͷཁٻΛ׎͑ΔγεςϜͷػೳ • ඇػೳཁ݅ɿ  ඞͣ͠΋࣮૷͠ͳ͖Ό͍͚ͳ͍Θ͚Ͱ͸ͳ͍͕ɺ ϓϩδΣΫτΛ޲্ͤ͞ΔͨΊʹඞཁͳ͜ͱ

Slide 7

Slide 7 text

https://bit.ly/2WWaORN

Slide 8

Slide 8 text

ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc

Slide 9

Slide 9 text

ػೳཁ݅Λຬͨͯ͠ظ೔ʹ௥ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ

Slide 10

Slide 10 text

๻ͷ৔߹

Slide 11

Slide 11 text

ύϑΥʔϚϯενϡʔχϯά େ޷͖ͩͬͨ

Slide 12

Slide 12 text

ύϑΥʔϚϯενϡʔχϯά • όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ ෼ͷνϡʔχϯά΍ͬͯresponseͷ࣌ؒΛ୹ ͘͢Δͷ͕࢓ࣄͩͬͨɻ

Slide 13

Slide 13 text

ύϑΥʔϚϯενϡʔχϯά • όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ ෼ͷνϡʔχϯά΍ͬͯresponseͷ࣌ؒΛ୹ ͘͢Δͷ͕࢓ࣄͩͬͨɻ ͕͜͜Զͷઓ͏৔ॴ

Slide 14

Slide 14 text

Ͱ΋

Slide 15

Slide 15 text

ରԠϒϥ΢βΛ IE => Chrome ʹ֦େͨ͠ͱ͖ͷ͜ͱ

Slide 16

Slide 16 text

ര଎ʹͳͬͨ

Slide 17

Slide 17 text

ϑϩϯτΤϯυͷٕज़͕ਐา ͢Δͱ๻ͷ΍ͬͯͨ͜ͱ͸ޡ ࠩʹมΘ͍ͬͯͬͨɻɻɻ

Slide 18

Slide 18 text

ඇػೳཁ݅Ͱੜ͖͍ͯͨࣗ෼ ͕ॳΊͯܦݧͨ͠িܸ

Slide 19

Slide 19 text

࣮ࡍʹ͸UXΛ࠷ߴʹ͢ΔͳΒ ϑϩϯτ͔ΒόοΫΤϯυ· Ͱશ෦ࣝΔඞཁ͕͋ΔΜͩͱ ஌ͬͨ

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ϦΫΤετ͔ΒϨεϙϯε·ͰͰ͸ͳ͘ɺϖʔδ͕ಡΈ ࠐ·Ε࢝Ί͔ͯΒϢʔβʔͷظ଴ΛಘΔ·Ͱɻ

Slide 22

Slide 22 text

͔ͦ͜ΒϑϩϯτΤϯυʹڵຯ Λ࣋ͬͨ • Node.js͸JavaScriptֶ΅͏ͱͯ͠΍ͬͯͨΒ ָ͘͠ͳͬͯ΍ͬͯͨ • ϑϩϯτͰͳΜ͔ΞϓϦ΋࡞͍͕ͬͯͨɺ࣮ ࡍʹ͸స৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠ • ਺೥͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ

Slide 23

Slide 23 text

ඇػೳཁ݅ʹͩ͜ΘΖ͏ɻ

Slide 24

Slide 24 text

ύϑΥʔϚϯε

Slide 25

Slide 25 text

ύϑΥʔϚϯε • ϑϩϯτΤϯυͷύϑΥʔϚϯε • όοΫΤϯυͷύϑΥʔϚϯε • ਪଌ͢ΔͳɺܭଌͤΑ

Slide 26

Slide 26 text

ϑϩϯτΤϯυͷ  ύϑΥʔϚϯε

Slide 27

Slide 27 text

ϑϩϯτΤϯυύϑΥʔϚϯε 4FSWFS 4FTTJPO$BDIF %#"1*

Slide 28

Slide 28 text

ϑϩϯτΤϯυύϑΥʔϚϯε 4FSWFS 4FTTJPO$BDIF %#"1*

Slide 29

Slide 29 text

Performance Bible ~200X

Slide 30

Slide 30 text

Performance Bible ~200X

Slide 31

Slide 31 text

Performance Bible ~200X )551ϦΫΤετΛ࠷খݶʹ͠Α͏ $%/Λ࢖͓͏ $BDIF$POUSPMΛ࢖͓͏FUD Ϣʔβʔ͸ϑϩϯτΤϯυͰ 80 ~ 90% ͷ࣌ؒ଴ػ͍ͯ͠Δ

Slide 32

Slide 32 text

Previous Web Applications

Slide 33

Slide 33 text

Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά • ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc

Slide 34

Slide 34 text

Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά • ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc ຖճϖʔδΛඳըͭͭ͠ɺϒϥ΢β ͷجຊػೳΛଟ༻ͯ͠࡞Δ

Slide 35

Slide 35 text

Web Performance ~200X • Measuring Time from Request to Response

Slide 36

Slide 36 text

Web Performance Tools ~200X • Page Speed Insights • Apache Bench • jmeter • Requests / sec • Latency • Transfer / sec

Slide 37

Slide 37 text

• Page Speed Insights • Apache Bench • jmeter 3FRTTFD ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X

Slide 38

Slide 38 text

• Page Speed Insights • Apache Bench • jmeter 3FRTTFD ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ ඞવతʹ΍Δ͜ͱ͕ܾ·ͬͯ͘Δ Web Performance Tools ~200X

Slide 39

Slide 39 text

Web Performance ~ 200X • ΍Δ͜ͱ • ϦΫΤετճ਺ͷվળ • Ϩεϙϯε࣌ؒͷվળ • Ϩεϙϯε͢ΔόΠτ਺ͷվળ

Slide 40

Slide 40 text

ϦΫΤετճ਺ͷվળ • αΠτΛߴ଎ʹ͢ΔҰ൪ͷํ๏͸  ͦ΋ͦ΋ϦΫΤετ͠ͳ͍͜ͱ • ۃྗϦΫΤετ਺ΛݮΒ͢ • ex: CSSΛ1ϑΝΠϧʹɺJS΋ಉ༷ɻ

Slide 41

Slide 41 text

ϦΫΤετճ਺ͷվળ • CSS Sprite • Inline ల։ • Cache Control

Slide 42

Slide 42 text

• CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ $BDIF$POUSPM BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPO͸Ұͭʹ·ͱΊΔ *OMJOFల։ ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ

Slide 43

Slide 43 text

• CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ $BDIF$POUSPM BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPO͸Ұͭʹ·ͱΊΔ *OMJOFల։ ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ ͳΔ΂͘ϦΫΤετ͠ͳ͍

Slide 44

Slide 44 text

Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize • Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD

Slide 45

Slide 45 text

Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize • Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD ΞϓϦέʔγϣϯαʔόͷத਎Λ վળͯ͠ɺϨεϙϯεΛྑ͘͢Δ

Slide 46

Slide 46 text

Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png, gif, jpeg • JS, css ͷ minify, gzipԽ

Slide 47

Slide 47 text

Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png, gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴

Slide 48

Slide 48 text

Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png, gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴ Ϩεϙϯε͢ΔόΠτ਺͕ݮΕ͹ଳ Ҭͷѹഭ͕ݮΔɺ࣌ؒ΋গͳ͘ͳΔ

Slide 49

Slide 49 text

Summary ~200X • Bible: • High Performance Web Sites • App: • جຊతʹϖʔδભҠ୯ҐͰ΍ΓऔΓ • Performance Techniques: • ϦΫΤετΛݮΒ͢ • JS/CSS/image Λ1ﬁleʹ͢Δɺ Inlineʹ͢ΔɺCache-ControlΛ࢖͏ • ϨεϙϯεΛվળ͢Δ • Backend ͷϨεϙϯεΛվળ͢ΔɺDBΑ͘͢Δɺద੾ͳMiddleware࢖͏ • Ϩεϙϯε͢ΔαΠζΛݮΒ͢ • ImageΛॖখ ͢ΔɺCSS/JSΛminify͢Δɺద੾ͳImage formatΛબͿɺѹॖ͢Δ

Slide 50

Slide 50 text

Web Performance 2010-2016

Slide 51

Slide 51 text

Performance Bible 2010-2016

Slide 52

Slide 52 text

Performance Bible 2010-2016

Slide 53

Slide 53 text

Performance Bible 2010-2016 ॲཧͷத৺͕αʔό͔Βϒϥ΢β΁ ϨΠςϯγΛখ͘͞ɻ ϨΠςϯγΛԼ͛Δʹ͸ɿ ઀ଓίετΛԼ͛Δ 5$1'BTU0QFO )551 ඞཁͳσʔλ͚ͩऔͬͯࠩ෼Ͱߋ৽͢Δ 9)3 +4 ࣮ࡍͷϢʔβʔͷϞχλϦϯά݁ՌΛݟΔ 36.

Slide 54

Slide 54 text

Web Applications 2010-2016 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA)

Slide 55

Slide 55 text

Web Applications 2010-2015 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA) 41"Λجຊͱͯ͠ΑΓ(6*ΞϓϦέʔ γϣϯͱͯ͠ͷଆ໘͕ڧ͘ͳͬͨɻ )551Λجຊͱͯ͠ΑΓωοτϫʔΫ ϨΠϠͰͷ࠷దԽ͕ਐΉΑ͏ʹͳͬͨ

Slide 56

Slide 56 text

Web Performance ~2016 • Network Optimization • HTTP/2 • Single Page Application • Partial Rendering • Ajax

Slide 57

Slide 57 text

Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Web Performance Tools ~2016 • Lighthouse • Real User Monitoring • Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ 4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET 9͔ΒͷมԽ ΑΓύϑΥʔϚϯεͷ౔ඨ͕ϦΞϧͳϢʔβʔΛର৅ͱ͢ΔΑ͏ ʹͳͬͨɻϖʔδϩʔυͷ͚࣌ؒͩͰ͸ͳ͘ɺΞϓϦέʔγϣϯ ͱͯ͠ͷશମͷ࣌ؒΛߟྀ͢ΔΑ͏ʹͳͬͨɻ

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Web Performance ~2016 • ΍Δ͜ͱ • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷ ޙͷૢ࡞΋࠷దԽ͢Δ • ϨΠςϯγΛ࡟Δ

Slide 63

Slide 63 text

ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ

Slide 64

Slide 64 text

ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ 9Ͱ͸+40/Ͱ͸ͳ͘)5.-Ͱ΍Γ औΓ͍ͯͨ͠ɺશ෦ͷϖʔδΛຖճϨ ϯμϦϯά͢ΔͨΊɺແବ͕ଟ͍ɻ

Slide 65

Slide 65 text

ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ 4JOHMF1BHF"QQMJDBUJPOʹ͢Δ

Slide 66

Slide 66 text

Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏

Slide 67

Slide 67 text

Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL

Slide 68

Slide 68 text

Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/

Slide 69

Slide 69 text

Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS

Slide 70

Slide 70 text

Single Page Application • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS 3JDIͳ8FC"QQMJDBUJPO͸େମ͜ ͏ͳ͖͍ͬͯͯΔɻ

Slide 71

Slide 71 text

ϨΠςϯγΛ࡟Δ • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍ • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋ ͋Δʢޙड़ʣ

Slide 72

Slide 72 text

ϨΠςϯγΛ࡟Δ • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍ • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋ ͋Δʢޙड़ʣ )551

Slide 73

Slide 73 text

HTTP2 • ଟॏԽ͞ΕͨϦΫΤετΛૹΔ • HTTP/1.1 ࣌୅ΑΓ΋1ͭͷωοτϫʔΫ઀ଓ Λ࢖ͬͨ࠷దԽ͕ߦΘΕΔΑ͏ʹɻ • Prioritization, Server Push, Early Hints ଳҬ෯͕૿͑ͯ΋ϨΠςϯγ͕ݮΒͳ ͍ͱࠓޙͷߴ଎Խ͕Ͱ͖ͳ͍

Slide 74

Slide 74 text

http/1.1 problems

Slide 75

Slide 75 text

4FSWFS GET /main.js GET /main.css GET /image0.png

Slide 76

Slide 76 text

4FSWFS #SPXTFSDBOTFOESFRVFTUT POMZ

Slide 77

Slide 77 text

4FSWFS OFFEUPXBJUUPpOJTIQSFWJPVTSFRVFTU

Slide 78

Slide 78 text

4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT

Slide 79

Slide 79 text

4FSWFS "OEJGSFRVFTUJTTMPX CSPXTFS DBOVTFPOMZSFRVFTUT )FBEPG-JOF#MPDLJOH

Slide 80

Slide 80 text

http/2 solves HoL Blocking

Slide 81

Slide 81 text

Multiplexing requests on 1 TCP connection 4FSWFS 5$1$POOFDUJPOCVUNVMUJ SFRVFTUT

Slide 82

Slide 82 text

https://github.com/yosuke-furukawa/early-hints-demo

Slide 83

Slide 83 text

https://github.com/yosuke-furukawa/early-hints-demo

Slide 84

Slide 84 text

Next: HTTP3

Slide 85

Slide 85 text

HTTP3 • HTTP2ͩͱͯ͠΋HoL Blocking Λ͢΂ͯղফ ͍ͯ͠ͳ͍ • HTTP2ͷ1 connection ͷதͰTCPϨϕϧͰ HoL Blocking͕ى͖Δ͜ͱ͸͋Δ

Slide 86

Slide 86 text

Multiplexing requests on 1 TCP connection 4FSWFS ΋͠΋ҰݸͷϦΫΤετͷதͰύέϩε͕ى͖ ͨ৔߹ɺ͜ͷύέϩεΛղফ͢Δ·Ͱ࣍ͷύ έοτΛૹड৴Ͱ͖ͳ͍

Slide 87

Slide 87 text

Multiplexing requests on UDP connection 4FSWFS ͡Ό͋͜͜Λ6%1ʹ͠Α͏

Slide 88

Slide 88 text

Multiplexing requests on UDP connection 4FSWFS 6%1্Ͱ৽͍͠ηΩϡΞͳϓϩτ ίϧΛ࡞ͬͯ͠·͓͏

Slide 89

Slide 89 text

Multiplexing requests on UDP connection 4FSWFS 6%1্Ͱ৽͍͠ηΩϡΞͳϓϩτ ίϧΛ࡞ͬͯ͠·͓͏ 26*$ͱݺͿ

Slide 90

Slide 90 text

Multiplexing requests on UDP connection 4FSWFS 6%1্Ͱ৽͍͠ηΩϡΞͳϓϩτ ίϧΛ࡞ͬͯ͠·͓͏ 26*$ͱݺͿ

Slide 91

Slide 91 text

HTTP3 26*$্Ͱ)551Λ࠶࣮૷͢Δɺ ͜ΕΛ)551ͱݺͿɻ

Slide 92

Slide 92 text

Summary ~2016 • Bible: • High Performance Browser Networking • App: • Single Page Application • Performance Techniques: • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ • SPA Λ࡞ΓɺϢʔβʔϞχλϦϯά͠ͳ͕Βૢ࡞ͱॲཧΛ  ࠷దԽ͢Δ • ϨΠςϯγΛ࡟Δ • HTTP/2 Λ࢖͏ (ࠓޙ͸HTTP3ʹ)

Slide 93

Slide 93 text

όοΫΤϯυͷ  ύϑΥʔϚϯε

Slide 94

Slide 94 text

όοΫΤϯυύϑΥʔϚϯε 4FSWFS 4FTTJPO$BDIF %#"1*

Slide 95

Slide 95 text

Database Performance • SQLνϡʔχϯά • N + 1 Query Λ΍ΊΔ • Index ΛషΔ • εΩʔϚΛݟ௚͢ (ඇਖ਼نԽ) • DB ύϥϝʔλνϡʔχϯά • ΩϟογϡαΠζ • εϨουϓʔϧͷ਺

Slide 96

Slide 96 text

SQLνϡʔχϯά • N + 1 Query Λ΍ΊΔ • σʔλྔ(N) + 1ݸͷQuery͕ൃߦ͞Εͯ͠ ·͏ύϑΥʔϚϯεΠγϡʔ • ࠷ॳʹID͚ͩҾͬு͖͔ͬͯͯͦ͜Βৄࡉ ΛऔΓग़࣌͢౳͕ଟ͍ɻ

Slide 97

Slide 97 text

N+1 Query SELECT user_id FROM comments; SELECT * FROM user WHERE id = 1; SELECT * FROM user WHERE id = 2; SELECT * FROM user WHERE id = 3; SELECT * FROM user WHERE id = 4; SELECT * FROM user WHERE id = 5; SELECT * FROM user WHERE id = 6; …

Slide 98

Slide 98 text

Slide 99

Slide 99 text

SQLνϡʔχϯά • N + 1 Query Λ΍ΊΔ • JOINͯ͠1ൃͰऔΔɹɻ SELECT * FROM comments, users WHERE comments.user_id = users.id;

Slide 100

Slide 100 text

SQLνϡʔχϯά • IndexΛషΔ • ࡧҾͷ͜ͱɻ • ຊͷޙΖͰग़ͯདྷΔΞϨɻ

Slide 101

Slide 101 text

SQLνϡʔχϯά • IndexΛషΔ • ࡧҾͷछྨ͸৭ʑ͋Δ͕ɺ୅දతͳ΋ͷͱ ͯ͠B-Treeʹ͍ͭͯղઆ͢Δɻ JE OBNF BHF HFOEFS BMJDF GFNBMF CPC NBMF DIBSMJF NBMF EBWJE NBMF

Slide 102

Slide 102 text

SQLνϡʔχϯά • IndexΛషΔ • ྫ୊   1,2,3,4,5,6,7ͱ͋ΔϦετͷத͔Β5Λ୳࣌͢Ͳ͏͢Δ͔ʁ • Bad Algorithm: શ୳ࠪઌ಄͔Βॱʹݟ͍ͯͬͯൃݟͨ͠Β OK => O(n) • Good Algorithm: ༧Ίιʔτͯ͋͠ΔͷͰɺ൒෼ʹ෼͚ͯ େখൺֱͯ͠ݟ͚ͭΔ => O(log2n)

Slide 103

Slide 103 text

• ̎෼୳ࡧ໦ SQLνϡʔχϯά

Slide 104

Slide 104 text

• B-Tree   (1ͭͷNode͕ෳ਺ͷࢠϊʔυΛ࣋ͯΔ) SQLνϡʔχϯά

Slide 105

Slide 105 text

• B+-Tree (຤୺ͷϦʔϑϊʔυ͕ྡ઀͢ΔϦʔϑ ϊʔυʹͭͳ͕͍ͬͯΔ) • B-TreeΑΓ΋ൣғݕࡧʹڧ͍ SQLνϡʔχϯά

Slide 106

Slide 106 text

• IndexΛషΔɺͱ͍͏ͷ͸(ΞϧΰϦζϜ͸ෳ਺͕͋Δ͕ओ ʹ)B+-TreeͷࡧҾΛ࡞͓ͬͯ͘ɺͱ͍͏ߦҝɻ • RDBMS͸ݕࡧ໋͕ɺIndexΛ͓࣋ͬͯ͘ͱݕࡧʹ༗ར • ͔͠͠ɺݕࡧʹ͸༗ར͔ͩΒͱݴͬͯషΓ͗͢Δͱɺࠓ ౓͸B+-TreeͷόϥϯεΛऔΔ࣌ʹϊʔυͷҾͬӽ͕͠ൃ ੜ͢ΔͷͰInsert, Update, Deleteͱ͍ͬͨߋ৽ॲཧʹෆ ར SQLνϡʔχϯά

Slide 107

Slide 107 text

• Covering Index • IndexΛҾ͚ͩ͘Ͱݕࡧ͕ऴྃ͢ΔIndexͷ ͜ͱ • ྫΛ্͛ͯղઆ SQLνϡʔχϯά

Slide 108

Slide 108 text

SQLνϡʔχϯά • Α͘ݕࡧ͢ΔΧϥϜʹ͸ΠϯσοΫεΛ෇͚Δɻ • JE OBNF BHF HFOEFS BMJDF GFNBMF CPC NBMF DIBSMJF NBMF EBWJE NBMF SELECT * FROM age < 25 AND gender = "male"

Slide 109

Slide 109 text

SQLνϡʔχϯά • Α͘ݕࡧ͢ΔΧϥϜʹ͸ΠϯσοΫεΛ෇͚Δɻ • JE OBNF BHF HFOEFS BMJDF GFNBMF CPC NBMF DIBSMJF NBMF EBWJE NBMF SELECT * FROM age < 25 AND gender = "male" ͜ͷ̎ͭʹΠϯσοΫεΛషΔ

Slide 110

Slide 110 text

SQLνϡʔχϯά • Ͳ͏షͬͨΒྑ͍͔ʁ • ALTER TABLE a ADD INDEX b (age, gender); • ALTER TABLE a ADD INDEX b (gender, age);

Slide 111

Slide 111 text

SQLνϡʔχϯά • Ͳ͏షͬͨΒྑ͍͔ʁ • ALTER TABLE a ADD INDEX b (age, gender); • ALTER TABLE a ADD INDEX b (gender, age); ࣮͸͕ͬͪ͜ਖ਼ղ

Slide 112

Slide 112 text

SQLνϡʔχϯά • ΠϯσοΫε͸ΧʔσΟφϦςΟ͕ߴ͍ॱʹషΔ΂͠ɻ • age ͸ଟ༷ɺ gender ͸2छྨ • age Ͱݕࡧ͔ͯ͠ΒgenderͰݕࡧ͢Δ΄͏͕indexޮ͖ ΍͍͢ɻ • genderͰݕࡧ͔ͯ͠ΒageͰݕࡧ͢Δͱ࠷ॳʹ50%ʹ ߜ͔ͬͯΒΑΓখ͍͞ݕࡧʹͳΔ

Slide 113

Slide 113 text

SQLνϡʔχϯά • ඇਖ਼نԽΛݕ౼͢Δɻ • ਖ਼نԽ͢Δͷ͸ॏཁ͕ͩɺਖ਼نԽͯ͠ΔͱJOIN͕ සൃ͢Δɻ • ຖճJOIN͢ΔΑΓ͸Ή͠ΖҰݸͷςʔϒϧʹ͠ ͪΌ͏ͷ΋༗Γɻ

Slide 114

Slide 114 text

SQLνϡʔχϯά • ݕࡧʹΑͬͯ͸JOIN͢ΔΑΓ΋Ұݸͷςʔϒϧʹ ·ͱΊͨ΄͏͕ྑ͍͕࣌͋Δ(ඇਖ਼نԽ) JE OBNF BHF HFOEFS BMJDF GFNBMF CPC NBMF DIBSMJF NBMF EBWJE NBMF VTFS@JE SPMF BENJO NFNCFS PXOFS OFXCJF JE OBNF BHF HFOEFS SPMF BMJDF GFNBMF BENJO CPC NBMF NFNCFS DIBSMJF NBMF PXOFS EBWJE NBMF OFXCJF

Slide 115

Slide 115 text

DBύϥϝʔλνϡʔχϯά • https://yakst.com/ja/posts/65 • innodb_buffer_pool_size • σʔλͱIndexΛϝϞϦ্ʹࡌͤΔαΠζ • innodb_buffer_pool_instance • όοϑΝϓʔϧΛԿݸ͔࣋ͭ

Slide 116

Slide 116 text

DBύϥϝʔλνϡʔχϯά • ͜ͷล͸࣮͸DBʹΑͬͯνϡʔχϯάϙΠϯτ͕มΘ Δɻ • MySQLͳΒ͜ͷຊΦεεϝ • OracleͳΒύϑΥʔϚϯενϡʔχϯάΨΠυ͕Web ͰಡΊΔͷͰΦεεϝ • PostgreSQL͸͋·Γ஌Βͳ͍

Slide 117

Slide 117 text

Use Proper Middleware • Ͳ͏ʹ΋ͳΒͳ͍࣌͸RDBMSΛ΍ΊΔ • RDBMSͰ஗͍ͱࢥ͏Α͏ͳॲཧ͸ࢥ͍੾ͬͯRDBMS ͡Όͳͯ͘΋ͬͱద੾ͳϛυϧ΢ΣΞΛ࢖͏ • ྫ: શจݕࡧͳΒElasticsearch • ྫ: ηογϣϯ؅ཧɺΩϟογϡͳΒRedis, Memcached

Slide 118

Slide 118 text

Use Proper Middleware • શจݕࡧͷػೳΛ࣋ͬͯΔRDBMS΋͋Δ͕ɺ جຊ͸Elasticsearch౳ͷશจݕࡧΤϯδϯΛ ࡞ͬͯӡ༻͢Δࣄ͕ଟ͍ʢϦΫϧʔτͰ͸ʣ • Ϣʔβʔηογϣϯ౳ͷߴΞΫηε͞ΕΔྖ Ҭ͸Redisʹஔ͘͜ͱ͕ଟ͍(ϦΫϧʔτͰ͸)

Slide 119

Slide 119 text

ElasticSeach • શจݕࡧΤϯδϯ • RDBMS͸B+TreeΛجຊͱ͢ΔΠϯσΩγϯά Λ͢Δ͕ɺͪ͜Β͸సஔߦྻΛجຊͱͨ͠Π ϯσοΫεΛ࣋ͭ • จॻͷத͔ΒͲͷ୯ޠΛ͍࣋ͬͯΔ͔Λݟͭ ͚Δࡍʹ༗ޮͳΠϯσοΫε

Slide 120

Slide 120 text

Redis • Key Value Store ͱݺ͹ΕΔ୯७ͳߏ଄Λ࣋ͭσʔ λετΞͷҰछ • جຊతʹΠϯϝϞϦͰશͯϝϞϦதʹ৐ͤͯղܾ ͢Δ͜ͱ͕ଟ͍ • ൣғݕࡧ౳͸ͦ͜·ͰಘҙͰ͸ͳ͍͠ɺ·ͯ͠΍ τϥϯβΫγϣϯ౳ͷػೳ͸ͳ͍͕ɺΩʔΛࢦఆ ͯ͠όϦϡʔΛҰൃͰऔΔͱ͖ʹ͸Α͘࢖͏ɻ

Slide 121

Slide 121 text

όοΫΤϯυύϑΥʔϚϯε· ͱΊ • DBνϡʔχϯά • ద੾ͳϛυϧ΢ΣΞΛ࢖͓͏ • ΋ͬͱݴ͍͍ͨ͜ͱ͸৭ʑ͋Δ͕ɺ࢒Γ͸࣮ ફͰ΍Ζ͏

Slide 122

Slide 122 text

ਪଌ͢ΔͳܭଌͤΑ

Slide 123

Slide 123 text

ਪଌ͢ΔͳܭଌͤΑ • ૣ͗͢Δ࠷దԽʢࢥ͍ࠐΈͱצͰ΍Δ࠷ద Խʣ͸ॾѱͷࠜݯͰ͋Δ by Donald Knuth • ͪΌΜͱܭଌ͢Δඞཁ͕͋Δ • ϘτϧωοΫΛݟ͚ͭͯղফ͢Δͷ͕࠷దԽ ͷجຊ

Slide 124

Slide 124 text

ਪଌ͢ΔͳܭଌͤΑ • ܭଌํ๏ • WebαʔόͷΞΫηεϩά • OSͷϦιʔεϩά • DBͷϓϩϑΝΠϥ • ΞϓϦέʔγϣϯαʔόͷϓϩϑΝΠϥ

Slide 125

Slide 125 text

WebαʔόΞΫηεϩά • nginx, apacheͷΞΫηεϩάΛݟΔ • ͨͩ͠ී௨ʹݟͯ΋ζϥοͱग़͖ͯͯਏ͍ͷͰαϚϥ Πζͯ͠ݟΔ͔ݕࡧͰ͖ΔΑ͏ʹ͢Δඞཁ͕͋Δɻ • new relic • kataribe • alp

Slide 126

Slide 126 text

OSͷϦιʔεϩά • ݪ࢝తʹ͸top • xxstatܥ͕ศར͕ͩɺશ෦ݟͯΔͷ͸ਏ͍ • ݸਓతͳΦεεϝ͸netdata, newrelic΋ྑ͍ ͔΋ɻ

Slide 127

Slide 127 text

DBͷϓϩϑΝΠϥ • SQLʹ͸EXPLAINͱ͍͏தͰDB͕Ͳ͏΍ͬͯͦͷΫ ΤϦΛ࣮ߦ͔ͨ͠ΛݟΔ͜ͱ͕Ͱ͖ΔίϚϯυ͕͋ ΔɺͦΕΛ࢖͏ • slow_query_logͳͲͷΫΤϦ͕஗͍͔ΛϞχλ͢Δ • performance_schemaΛ࢖ͬͯϓϩϑΝΠϧ͢Δͳ Ͳ

Slide 128

Slide 128 text

ΞϓϦέʔγϣϯαʔόͷϓϩ ϑΝΠϥ • Golang pprof • Node.js see my blog • http://yosuke-furukawa.hatenablog.com/ entry/2017/12/05/125517 • Java proﬁler