夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio

2025/08/15(金) の perf.tokyo #1 で発表した資料です

Transcript

1. ՆٳΈWebΞϓϦ ύϑΥʔϚϯε૬ஊࣨ 2025/08/15(ۚ) perf.tokyo #1 @ϢχʔΫϏδϣϯגࣜձ༷ࣾ
2. ࣗݾ঺հ • ീ୩ ӳ࣏ʢ͸ͪ΍ ͍͑͡ʣ@hachi_eiji • WebΞϓϦέʔγϣϯΤϯδχΞ • RailsΛத৺ʹAWS,ϑϩϯτΤϯυͳͲԿͰ΋΍ͬͯ·͢ • ޷෺͸σʔλϕʔε • Ͱ͖ͳ͍΋ͷ͸ωΠςΟϒΞϓϦ։ൃ • Objective-CͷຊΛങͬͨ౰೔ʹSwift͕ൃද͞Εͯͦͬดͨ͡͠
3. ϥδΦͷՆٳΈ͓೰Έ૬ஊࣨܗࣜͰ ͕࣌ؒڐ͢ݶΓ͝঺հ NHKͷࢠڙՊֶి࿩૬ஊ͸40೥ࠓ΋΍ͬͯΔΒ͍͠
4. ͦͷલͷ͓໿ଋ • ͋͘·Ͱ΋ݸਓͷܦݧஊͰ͢ • ݱࡏɾաڈʹॴଐͨ͠اۀɾஂମͱ͸ແؔ܎Ͱ͢ • Ͳ͔͜Ͱಉ͡࿩͕͋ͬͨͱͯ͠΋ͦΕ͸ۮવͰ͢ • ͜ͷޙʹग़ͯ͘ΔϥδΦωʔϜ͸ChatGPT͕࡞੒ͯ͠·͢
5. ͦΕͰ͸͍ͬͯΈ·͠ΐ͏ʂ
6. ͓೰Έᶃ N+1 ໰୊ αʔόͷಛఆͷAPIͰ଎౓͕ग़ͳ͍ΜͰ͢ɻ ౦ژ౎ 20ࡀ ੕ᷲγʔΧʔ
7. ͓೰Έᶃ N+1 ໰୊ DJɿΞϓϦέʔγϣϯͷϩάΈ·͔ͨ͠ʁ ੕ᷲɿϩάʁϩάͬͯͳΜͰ͔͢ʁ
8. ͓೰Έᶃ N+1 ໰୊ DJɿ ͋ͬ…
9. ͓೰Έᶃ N+1 ໰୊ ·ͣϩάΛݟ·͠ΐ͏
10. ͓೰Έᶃ N+1 ໰୊ • ։ൃ࣌ʹϩάΛݟ͍ͯͳ͍ਓ͸ҙ֎ʹଟ͍ • ։ൃ࣌͸σʔλྔ͕গͳ͍ͷͰϧʔϓͷதͰ SQLΛճͯ͠΋਺ճͳͷͰؾ͔ͮͳ͍ • ORMܦ༝ͩͱ࣮ߦ͞ΕΔSQL͕ΠϝʔδͰ͖ ͍ͯͳ͍ʁʢ͋͘·Ͱ΋ݸਓͷഽײͰ͢ʣ • ໰୊ʹؾ͍ͮͯ΋ຊ൪ϦϦʔε౰ॳ͸σʔλ ྔ͕গͳ͍ͷͰɺʮ࠷ॳ͸ʯ໰୊ʹͳΒͳ͍
11. ͓೰Έᶃ N+1 ໰୊ • ։ൃऀ͸·ͣϩάΛݟΔʂʂʂ • ϩάΛඪ४ग़ྗʹग़͢ͱίϯιʔϧ͕੎͍ Α͘ಈ͘ͷͰؾ͖ͮ΍͍͢ • N+1໰୊ʹݶͬͨ࿩Ͱ͸ͳ͘ৗʹݟΔ • σʔλΛ100݅ఔೖΕͯ୯ମͰAPIΛ࣮ߦ͢Δ ͱϩά͕ಈ͘ͷͰΘ͔Γ΍͍͢ • N+1໰୊Λݕग़͢ΔϥΠϒϥϦΛར༻͢Δ ղܾʂ
12. ͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ͱ͖Ͳ͖͓٬͞Μ͔ΒαΠτ͕஗͍ͱΫϨʔϜ ͕དྷ·͢ɻͻͲ͍ͱ͖͸ෳ਺୆͋Δαʔόͷ಺ 1୆͕μ΢ϯ͠·͢ɻ ෱Ԭݝ 24ࡀ ͏ʹϘʔΠ
13. ͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ DJɿΞϓϦ͸ͲͷΑ͏ͳػೳ͕͋Γ·͔͢ʁ ΢χɿސ٬͕࢖͏ػೳͱɺސ٬͕࢖͍࢝ΊΔͨΊʹ ηοτΞοϓ͢Δࣾ಺͔Β͔͠ΞΫηεͰ͖ͳ͍؅ ཧػೳͷ2͕ͭ͋Γ·͢ DJɿ؅ཧػೳͰϢʔβ࡞੒΍ϚελσʔλΛ࡞ΔΜ Ͱ͔͢ʁ ΢χɿͦ͏Ͱ͢ɻCSVΞοϓϩʔυͰҰ౓ʹ࡞Γ·͢
14. ͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ΢χɿ ͋ͬ…
15. ͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ؅ཧػೳͱސ٬͕৮͍ͬͯΔαʔό͕ಉ͡ͳͷ Ͱ؅ཧػೳͰෛՙΛ͔͚Δͱɺސ٬ଆʹ΋Өڹ ͕ग़Δ
16. ͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ • ࣾ಺؅ཧػೳͱސ٬αΠτͷΞΫηεΛ෼཭ ͢ΔʢผυϝΠϯɺύεͷϧʔςΟϯάʣ • ॏ͍ϑΝΠϧؔ܎ͷॲཧ͸ඇಉظॲཧͰߦ͏
17. ͓೰Έᶄ ࣾ಺؅ཧػೳWebΞϓϦ ղܾʂ
18. ͓೰Έᶅ େྔσʔλͷѻ͍ αʔϏεΛελʔτͯ͠5೥ʹͳΓ·͢ɻϢʔ β΁ͷ௨஌ςʔϒϧ͕਺ઍສϨίʔυʹͳΓͦ ͏ͰɺSELECTͳͲ͕஗ͯ͘ࠔ͍ͬͯ·͢ɻ index͸ద੾ʹషͬͯ·͢ɻ ಢ໦ݝ 30ࡀ φϚέϞϊͷޕޙ
19. ͓೰Έᶅ େྔσʔλͷѻ͍ DJɿͲ͏͍͏௨஌͕͋ΔͷͰ͠ΐ͏ʁ ޕޙɿӡӦ͔Βͷ͓஌Βͤ΍ɺଞϢʔβ͔Β ͷϝϯγϣϯ΍ࣗ෼΍ܨ͕͍ͬͯΔਓͷߦಈཤ ྺͳͲ༷ʑͰ͢ DJɿ௨஌σʔλ͸ͣͬͱ࢒͓͖ͯ͠·͔͢ʁ ޕޙɿ͏ʔΜ… ଟ෼1೥෼͘Β͍͸ͳ͍ͱࠔΔ ͔ͳͱࢥ͍·͢
20. ͓೰Έᶅ େྔσʔλͷѻ͍ • σʔλ͕ফͤΔͷͰ͋Ε͹࡟আ͢Δͷ͕Ұ൪Α͍ • ࡟আσʔλΛϩάͱͯ͠ετϨʔδʹอ؅͢Δͷ΋͋Γ ʢޙͰ໰͍߹Θ͕ͤ͋ͬͨͱ͖ͷରࡦʣ • ςʔϒϧͷύʔςΟγϣϯ෼ׂΛݕ౼͢Δ • ྫ͑͹ΩʔΛϢʔβID mod 10 ʹ͢Δͱ͔ • ςʔϒϧࣗମΛผ͚Δ(ྫ: ௨஌_<ϢʔβID mod 10>ͱ͔) • MySQL 5.6Ͱιγϟή࡞ͬͯͨ࣌͸࣮ࡍʹ͜ΕΛ΍ͬͯ ͍ͨ • ໨తຖͷ௨஌ςʔϒϧΛ࡞Δͷ΋৔߹ʹΑͬͯ͸͋Γ
21. ͓೰Έᶅ େྔσʔλͷѻ͍ • σʔλͷੜଘظؒ͸௕͘มߋ͕೉͍͠ • τϥϒϧΛճආ͢Δʹ͸࠷ॳͷઃܭ͕উෛ • CRUDͷλΠϛϯάͱσʔλͷϥΠϑαΠΫ ϧΛҙࣝ͢ΔͱτϥϒϧΛճආ͠΍͍͢ ղܾʂ
22. ͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ AWSͰApplication Load BalancerΛ࢖ͬͯෳ਺ ୆αʔόͷߏ੒Λऔ͍ͬͯ·͢ɻ ސ٬͔Βॲཧ͕஗͍͕࣌͋ΔͱݴΘΕ·͢ɻ ϩάΛݟΔͱΞΫηεྔ͸ଟ͘ͳ͍࣌ؒଳͰ΋ ॲཧ͕஗͍࣌ͱ଎͍͕࣌͋Γ·͢ɻ Ἒ৓ݝ 30ࡀ ͔Β͋͛෦௕
23. ͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ DJɿಉ͡APIͰ΋ॲཧ͕มΘΔΜͰ͔͢ʁ ෦௕ɿಉ͡ސ٬ͷಉ͡APIͰ΋ॲཧ͕࣌ؒେ͖͘มΘΓ·͢ DJɿͦͷ࣌ͷଞαʔό΋ؚΊͨϦιʔε͸Ͳ͏͍͏࢖ΘΕ ํΛ͍ͯ͠·͔͢ʁ ෦௕ɿ໰୊ͷαʔό͚ͩCPU࢖༻཰ͳͲ্͕͕ͬͯɺଞͷ αʔό͸ۭ͍ͯ·͢ DJɿଞͷαʔόʹΞΫηεߦͬͯ·͔͢ʁ ෦௕ɿ͸͍ɺଞαʔόʹΞΫηε͸ۉ౳ʹߦ͍ͬͯ·͢
24. ͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ ۉ౳ʹʁ ॏ͍ॲཧ΋͍ܰॲཧ΋ʁ
25. ͓೰Έᶆ ϩʔυόϥϯαʔΞϧΰϦζϜ AWS ALB (Application Load Balancer)ʹ͸ҎԼͷΞϧΰϦζϜ͕͋Δ • ϥ΢ϯυϩϏϯʢσϑΥϧτʣ • ࠷খͷະॲཧͷϦΫΤετ • ՃॏϥϯμϜ ʮϥ΢ϯυϩϏϯʯ͸ॲཧΛۉ౳ʹॱ൪௨ΓʹৼΓ෼͚Δઃఆɻ ͭ·Γɺॏ͍ॲཧΛ͍ͯ͠ΔαʔόʹϦΫΤετ͕ߦ͘ͱ଺ཹ͢Δɻ ઃఆΛʮ࠷খͷະॲཧͷϦΫΤετʯʹ͢ΔͱɺϦΫΤετͷ࠷΋গͳ͍ αʔό΁ϦΫΤετΛૹΔͷͰɺॲཧͷ଺ཹ͕ϥ΢ϯυϩϏϯͷ࣌ΑΓݮ Δɻ (ग़యɿALBϧʔςΟϯάΞϧΰϦζϜ) ղܾʂ
26. ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ SPAͰαΠτΛ࡞͍ͬͯ·͢ɻτοϓϖʔδʹ ΞΫηεͨ࣌͠ʹμ΢ϯϩʔυ͢ΔϑΝΠϧ͕ ॏͯ͘ɺදࣔʹ͕͔͔࣌ؒΔΜͰ͢ɻ େࡕ෎ 27ࡀ ϚάΧοϓ
27. ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ DJɿେ͖͍ϥΠϒϥϦͱ͔͔͍ͭͬͯΔͷͰ͔͢ʁ ϚάɿͳΜͱͳ͘ExcelΛ࡞ΔϥΠϒϥϦ͕ॏ͍ͷ͔ ͳʁͱࢥ͍ͬͯ·͢ɻͰ΋τοϓϖʔδͰ͸࢖ͬͯ ͍·ͤΜ DJɿ࢖͍ͬͯͳ͍ͷʹɺτοϓϖʔδͰμ΢ϯϩʔ υ͍ͯ͠ΔΜͰ͔͢ʁ Ϛάɿ͸͍ɻίʔυ্ͰExcelͱ͍͏จࣈ͸ݟ·ͨ͠
28. ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ • ॏ͍ϥΠϒϥϦΛಛఆ͢Δ • ಈతʹϥΠϒϥϦΛimportΛ͢Δ • ݸผʹϑΝΠϧμ΢ϯϩʔυ͢Δ
29. ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ rollup-plugin-visualizerͳͲΛ࢖ͬͯ ॏ͍ϥΠϒϥϦΛ֬ೝ͢Δ
30. ग़య: https://github.com/btd/rollup-plugin-visualizer ΛҰ෦Ճ޻ ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ
31. ͓೰Έᶇ ϑΝΠϧαΠζ͕େ͖͍JSϥΠϒϥϦͷμ΢ϯϩʔυ • ࠓճ͸τοϓϖʔδ͔Βμ΢ϯϩʔυͯ͘͠Δ JSʹExcelϑΝΠϧੜ੒ϥΠϒϥϦͱֆจࣈϥΠ ϒϥϦ͕͋ͬͨ • ͜ΕΒΛಈతʹimportͯ͠ɺvite(※1)ͷJSϑΝΠ ϧ෼ׂํ๏Ͱɺॏ͍JS͸୯ಠϑΝΠϧʹ͢Δɻ • ඞཁͳ࣌ʹͦͷϑΝΠϧ͚ͩμ΢ϯϩʔυͰ ͖Δ ※1 vite: ϑϩϯτΤϯυϏϧυπʔϧ https://ja.vite.dev/ ղܾʂ
32. ࠓճ͸͜͜·Ͱ
33. େ੾ͳͷ͸ܧଓͯ͠มԽΛܭଌ͢Δ͜ͱ • 1िؒ୯Ґɺ1ϲ݄୯ҐͳͲܧଓͯ͠มԽΛܭଌ͢Δ • ੑೳྼԽ͢Δͷ͸Ϣʔβ͕ར༻͍ͯ͠ΔূڌͰ͋Γɺܾͯ͠ѱ͍͜ͱ Ͱ͸ͳ͍ • ͦΕΛ์ஔ͍ͯ͠ΔͱΑΓ໽հͳ໰୊ʹͳΔ • νϡʔχϯάલޙͷܭଌΛ๨Εͣʹ΍Ζ͏
34. ͦͷݪҼɾमਖ਼͋ͬͯΔʁΛৗʹߟ͑Δ • मਖ਼͍ͯ͘͠ͱҶͮΔࣜʹ৭ʑग़͖ͯͯɺਅͷݪҼ͕ҧ͏͜ͱ͸͋Δ • νϡʔχϯάதʹ։ൃ͕ਐΜͰߦ͘ͱɺमਖ਼Ҋ͕มΘΔ͜ͱ͕͋Δ • मਖ਼͕όάʹͳΒͳ͍Α͏ʹςετ͕ॻ͚Δ΋ͷ͸ςετΛॻ͜͏ • मਖ਼͍ͯ͠Δ͜ͱΛυΩϡϝϯτʹͯ͠ΈΜͳʹڞ༗͠Α͏ • पΓ͔ΒͷϑΟʔυόοΫ΍εΩϧΞοϓ΋ظ଴
36. ࠷ޙʹΈͳ͞Μ