Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance Bootcamp

Performance Bootcamp

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

Avatar for Recruit Technologies

Recruit Technologies

August 21, 2020
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. ϦΫϧʔτ ΤϯδχΞϦϯάࣨ PE෦ ASG ݹ઒ཅհʢϑϧΧϫϤ΢εέʣ 2 ▪໾৬ ࣗݾ঺հ Application Solution

    GroupͷάϧʔϓϚωʔδϟ γχΞιϑτ΢ΣΞΤϯδχΞ ͓ࣸਅ ໌Δ͍ද৘ͷ΋ͷ ϓϥΠϕʔτ΋Մ ▪GMͱͯ͠΍ͬͯΔ͜ͱ ιϑτ΢ΣΞΤϯδχΞମ੍ͮ͘Γ ࠾༻/ධՁ νʔϜϏϧσΟϯά/ίϯαϧςΟϯά ▪γχΞͱͯ͠΍ͬͯΔ͜ͱ R&D - React/Redux/Node.jsΛ࢖ͬͨϘΠϥʔϓϨʔτ - Consumer Driven Contract πʔϧ agreed࡞੒ ύϑΥʔϚϯενϡʔχϯά - ࣾ಺ISUCON։͍ͨΓ - ࣾ಺Web Page SpeedϋοΧιϯ։͍ͨΓ
  2. ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP

    etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc
  3. Previous Web Applications • جຊతʹϖʔδભҠͰͷॲཧ͕ϝΠϯ • SNS • ϒϩά •

    ཱྀߦαΠτ • Ϩετϥϯݕࡧ etc ຖճϖʔδΛඳըͭͭ͠ɺϒϥ΢β ͷجຊػೳΛଟ༻ͯ͠࡞Δ
  4. Web Performance Tools ~200X • Page Speed Insights • Apache

    Bench • jmeter • Requests / sec • Latency • Transfer / sec
  5. • Page Speed Insights • Apache Bench • jmeter 3FRTTFD

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

    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ ඞવతʹ΍Δ͜ͱ͕ܾ·ͬͯ͘Δ Web Performance Tools ~200X
  7. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ

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

    $BDIF$POUSPM BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPO͸Ұͭʹ·ͱΊΔ *OMJOFల։ ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ ͳΔ΂͘ϦΫΤετ͠ͳ͍
  9. Ϩεϙϯε࣌ؒͷվળ • Improve Backend Performance • Indexing, Join, denomalize •

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

    Proper Middleware ΑΓྑ͍ϛυϧ΢ΣΞΛ࢖͏ 3FEJT  NFNDBDIF %BUBCBTFͷ*OEFYΛషΔɺςʔϒϧΛ δϣΠϯ͢Δɺඇਖ਼نԽ͢ΔFUD ΞϓϦέʔγϣϯαʔόͷத਎Λ վળͯ͠ɺϨεϙϯεΛྑ͘͢Δ
  11. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png,

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

    gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴ Ϩεϙϯε͢ΔόΠτ਺͕ݮΕ͹ଳ Ҭͷѹഭ͕ݮΔɺ࣌ؒ΋গͳ͘ͳΔ
  13. Summary ~200X • Bible: • High Performance Web Sites •

    App: • جຊతʹϖʔδભҠ୯ҐͰ΍ΓऔΓ • Performance Techniques: • ϦΫΤετΛݮΒ͢ • JS/CSS/image Λ1fileʹ͢Δɺ Inlineʹ͢ΔɺCache-ControlΛ࢖͏ • ϨεϙϯεΛվળ͢Δ • Backend ͷϨεϙϯεΛվળ͢ΔɺDBΑ͘͢Δɺద੾ͳMiddleware࢖͏ • Ϩεϙϯε͢ΔαΠζΛݮΒ͢ • ImageΛॖখ ͢ΔɺCSS/JSΛminify͢Δɺద੾ͳImage formatΛબͿɺѹॖ͢Δ
  14. Web Applications 2010-2015 • NetworkϨΠϠͰͷ࠷దԽ (HTTP/2) • Ajax௨৴ͱ෦෼ϨϯμϦϯά (SPA) 41"Λجຊͱͯ͠ΑΓ(6*ΞϓϦέʔ

    γϣϯͱͯ͠ͷଆ໘͕ڧ͘ͳͬͨɻ )551Λجຊͱͯ͠ΑΓωοτϫʔΫ ϨΠϠͰͷ࠷దԽ͕ਐΉΑ͏ʹͳͬͨ
  15. Web Performance ~2016 • Network Optimization • HTTP/2 • Single

    Page Application • Partial Rendering • Ajax
  16. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring

    • Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ ఺਺Ͱදࣔͯ͘͠ΕΔ
  17. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring

    • Navigation Timing • Resource Timing -JHIUIPVTF ύϑΥʔϚϯε͸΋ͪΖΜͷ͜ͱɺϕετϓϥΫςΟεʹ࢖ΘΕ ΔςΫχοΫ͕ೖͬͯΔ͔Ͳ͏͔ɺϖʔδશମͷධՁΛ ఺਺Ͱදࣔͯ͘͠ΕΔ 3FBM6TFS.POJUPSJOH ࣮ࡍͷϢʔβʔମݧΛ਺஋Խͯ͠ܭଌ͢Δɻ  4QFFE$VSWF /FX3FMJD#SPXTFS 6Q5SFOET
  18. Web Performance Tools ~2016 • Lighthouse • Real User Monitoring

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

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

    App: • Single Page Application • Performance Techniques: • ॳճͷϖʔδΞΫηε͚ͩ͡Όͳ͘ɺͦͷޙͷૢ࡞΋࠷దԽ͢Δ • SPA Λ࡞ΓɺϢʔβʔϞχλϦϯά͠ͳ͕Βૢ࡞ͱॲཧΛ ࠷దԽ͢Δ • ϨΠςϯγΛ࡟Δ • HTTP/2 Λ࢖͏ (ࠓޙ͸HTTP3ʹ)
  21. Database Performance • SQLνϡʔχϯά • N + 1 Query Λ΍ΊΔ

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

    1ݸͷQuery͕ൃߦ͞Εͯ͠ ·͏ύϑΥʔϚϯεΠγϡʔ • ࠷ॳʹID͚ͩҾͬு͖͔ͬͯͯͦ͜Βৄࡉ ΛऔΓग़࣌͢౳͕ଟ͍ɻ
  23. 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; …
  24. 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; … σʔλྔ / 
  25. 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; …
 
 # JOIN 1 query
 SELECT * FROM comments, users WHERE comments.user_id = users.id; 
 # 2 query
 SELECT user_id FROM comments; SELECT * FROM users WHERE users.id IN [1, 2, 3, 4, 5, 6];
  26. SQLνϡʔχϯά • N + 1 Query Λ΍ΊΔ • JOINͯ͠1ൃͰऔΔɹɻ SELECT

    * FROM comments, users WHERE comments.user_id = users.id;
  27. SQLνϡʔχϯά • Α͘ݕࡧ͢ΔΧϥϜʹ͸ΠϯσοΫεΛ෇͚Δɻ • JE OBNF BHF HFOEFS  BMJDF

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

     GFNBMF  CPC  NBMF  DIBSMJF  NBMF  EBWJE  NBMF SELECT * FROM age < 25 AND gender = "male" ͜ͷ̎ͭʹΠϯσοΫεΛషΔ
  29. SQLνϡʔχϯά • Ͳ͏షͬͨΒྑ͍͔ʁ • ALTER TABLE a ADD INDEX b

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

    (age, gender); • ALTER TABLE a ADD INDEX b (gender, age); ࣮͸͕ͬͪ͜ਖ਼ղ
  31. SQLνϡʔχϯά • ΠϯσοΫε͸ΧʔσΟφϦςΟ͕ߴ͍ॱʹషΔ΂͠ɻ • age ͸ଟ༷ɺ gender ͸2छྨ • age

    Ͱݕࡧ͔ͯ͠ΒgenderͰݕࡧ͢Δ΄͏͕indexޮ͖ ΍͍͢ɻ • genderͰݕࡧ͔ͯ͠ΒageͰݕࡧ͢Δͱ࠷ॳʹ50%ʹ ߜ͔ͬͯΒΑΓখ͍͞ݕࡧʹͳΔ
  32. 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
  33. Redis • Key Value Store ͱݺ͹ΕΔ୯७ͳߏ଄Λ࣋ͭσʔ λετΞͷҰछ • جຊతʹΠϯϝϞϦͰશͯϝϞϦதʹ৐ͤͯղܾ ͢Δ͜ͱ͕ଟ͍

    • ൣғݕࡧ౳͸ͦ͜·ͰಘҙͰ͸ͳ͍͠ɺ·ͯ͠΍ τϥϯβΫγϣϯ౳ͷػೳ͸ͳ͍͕ɺΩʔΛࢦఆ ͯ͠όϦϡʔΛҰൃͰऔΔͱ͖ʹ͸Α͘࢖͏ɻ
  34. ΞϓϦέʔγϣϯαʔόͷϓϩ ϑΝΠϥ • Golang pprof • Node.js see my blog

    • http://yosuke-furukawa.hatenablog.com/ entry/2017/12/05/125517 • Java profiler