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

Performance Bootcamp

Performance Bootcamp

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

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