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

うわっ…リスト表示重すぎ… Reactのパフォーマンス改善の処方箋/react-list-performance-improvement

E34a23c60570ce871f2ee3ea59b93ca0?s=47 pentla
August 25, 2021

うわっ…リスト表示重すぎ… Reactのパフォーマンス改善の処方箋/react-list-performance-improvement

E34a23c60570ce871f2ee3ea59b93ca0?s=128

pentla

August 25, 2021
Tweet

Transcript

  1. ͏ΘͬʜϦετදࣔॏ͗͢ʜ 3FBDUͷύϑΥʔϚϯεվળͷॲํᝦ

  2. 2,ݱঢ়෼ੳͱ໰୊఺ ࣗݾ঺հ ɾ!QFOUMB ౉ลҰً  ɾ'"45"-&35νʔϜ ɾϑϩϯτ݉όοΫΤϯυΤϯδχΞ ɾ"QFY3VTUಡॻ

  3. 2,ݱঢ়෼ੳͱ໰୊఺ 5XFFU%FDL࡞ͬͯʂ ͬͯݴΘΕͨΒɺͲ͏͠·͢ʁ ૣ଎

  4. 2,ݱঢ়෼ੳͱ໰୊఺ ͋Δఔ౓׬੒ͨ͠ͱͯ͠ ɾͱΓ͋͑ͣ3FBDUͰ ɾ"1*ͱͷܨ͗ࠐΈ΋ͳΜͱ͔׬ྃʂ ɾσʔλ͕දࣔͰ͖ΔΑ͏ʹͳΓ·ͨ͠

  5. 2,ݱঢ়෼ੳͱ໰୊఺ ͨͩ͠ɻɻɻ͜ͷΑ͏ͳཁ͕݅དྷͯ͠·͍·ͨ͠ ɾ৽͍͠λΠϜϥΠϯ͕࣍ʑͱདྷΔ͔Βදࣔͯ͠Ͷʂ ɾԼʹεΫϩʔϧ͢ΔͱաڈͷλΠϜϥΠϯΛḪΕΔΑ͏ʹͶ ɾը૾ɾಈըΛද͍ࣔͨ͠Ͷ

  6. 2,ݱঢ়෼ੳͱ໰୊఺ ॏ͘ͳΔɻ ʷ

  7. 2,ݱঢ়෼ੳͱ໰୊఺ ࠓճ͸ʮ3FBDUʯͷʮϦετදࣔʯͷ࿩Λ͠·͢

  8. 2,ݱঢ়෼ੳͱ໰୊఺ Ͳ͏͢Δ΂͖͔ɿ3FBDUͷυΩϡϝϯτ ʰΞϓϦέʔγϣϯ͕௕͍σʔλͷϦετʢ਺ඦʙ਺ઍߦʣΛϨϯμʔ͢Δ৔߹͸ɺ ʮ΢Οϯυ΢Πϯάʯͱͯ͠஌ΒΕΔςΫχοΫΛ࢖͏͜ͱΛ͓͢͢Ί͠·͢ɻ͜ͷςΫχο ΫͰ͸ɺ͋Δॠؒ͝ͱʹ͸Ϧετͷখ͞ͳ෦෼ू߹ͷΈΛඳը͢Δ͜ͱͰɺੜ੒͢Δ%0. ϊʔυͷ਺͓Αͼίϯϙʔωϯτͷ࠶ඳըʹ͔͔Δ࣌ؒΛେ෯ʹ࡟ݮ͢Δ͜ͱ͕Ͱ͖·͢ɻʱ ʰSFBDUXJOEPXͱSFBDUWJSUVBMJ[FE͸ਓؾ͕͋Δ΢Οϯυ΢ΠϯάॲཧͷϥΠϒϥϦͰ ͢ɻ͜ΕΒ͸ϦετɺάϦουɺ͓ΑͼදܗࣜͷσʔλΛදࣔ͢ΔͨΊͷɺ͍͔ͭ͘ͷ࠶ར༻ ՄೳίϯϙʔωϯτΛఏڙ͍ͯ͠·͢ɻΞϓϦέʔγϣϯͷಛఆͷϢʔεέʔεʹ߹Θͤͨ௥ ՃతͳॲཧΛ͢Δ৔߹͸ɺ5XJUUFS͕ߦͳ͍ͬͯΔΑ͏ʹɺಠࣗͷ΢Οϯυ΢Πϯάॲཧͷίϯ

    ϙʔωϯτΛ࡞੒͢Δ͜ͱ΋Ͱ͖·͢ɻʱ
  9. 2,ݱঢ়෼ੳͱ໰୊఺ ΢Οϯυ΢Πϯά XJOEPXJOH ͱ͸ ʰ͜ͷςΫχοΫͰ͸ɺ͋Δॠؒ͝ͱʹ͸Ϧετͷখ͞ͳ ෦෼ू߹ͷΈΛඳը͢Δ͜ͱͰɺੜ੒͢Δ%0.ϊʔυͷ਺ ͓Αͼίϯϙʔωϯτͷ࠶ඳըʹ͔͔Δ࣌ؒΛେ෯ʹ ࡟ݮ͢Δ͜ͱ͕Ͱ͖·͢ɻʱ ݪҼ͸Ϣʔβʔ͕Έ͍ͯͳ͍ൣғ·Ͱ ඳըͯ͠͠·͍ͬͯΔ͜ͱ

  10. 2,ݱঢ়෼ੳͱ໰୊఺ ਤʹ͢Δͱ͜͏ ɾϦετͷେ෦෼͸Կ΋ඳը͠ͳ͍ ɾσΟεϓϨΠʹө͍ͬͯΔ෦෼ͷΈ ඳը͢Δ ɾεΫϩʔϧʹ߹ΘͤͯඳըൣғΛ ௐઅ͢Δ

  11. 2,ݱঢ়෼ੳͱ໰୊఺ ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ɾશମͷߴ͞ΞΠςϜͭͷαΠζʷݸ਺ ɾඳը࢝͠ΊΔߴ͞ݱࡏͷεΫϩʔϧҐஔ ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

  12. 2,ݱঢ়෼ੳͱ໰୊఺ SFBDUXJOEPXΛ࢖͑͹ղܾʁ ϝϞ ɾSFBDUXJOEPX͸SFBDUWJSUVBMJ[FEͱಉ͡ਓ͕ॻ͍ͨϥΠϒϥϦ ɾαΠζΛݮΒ͠ɺύϑΥʔϚϯεΛ޲্ͤͨ͞ޙܧʹ౰ͨΓ·͢ ɾSFBDUXJOEPXL# SFBDUWJSUVBMJ[FE.#

  13. 2,ݱঢ়෼ੳͱ໰୊఺ ࠓճ͸؆ૉͳྫͰ࣮૷ΛݟͯΈ·͢

  14. 2,ݱঢ়෼ੳͱ໰୊఺ 6*ΛݟͯΈΔͱ ؆ૉ

  15. 2,ݱঢ়෼ੳͱ໰୊఺ ͜Ε͕

  16. 2,ݱঢ়෼ੳͱ໰୊఺ ͜͏ͳΓ·ͨ͠ ɾXJEUI IFJHIU Ϧετશମͷ௕͞ɺߴ͞ ɾJUFN$PVOU ΞΠςϜશମͷݸ਺ ɾJUFN4J[F ΞΠςϜͭͭͷߴ͞

  17. 2,ݱঢ়෼ੳͱ໰୊఺ ॻ͖ํ͕݁ߏҧ͏ ɾ3PXͬͯԿ NBQܗࣜͰهड़Ͱ͖ͳ͍  ɾIFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱμϝʁ ɾΞΠςϜͷߴ͞ʁ ݁ߏΫη͕͋ΔΑͶɺͱ͍͏ͷ͕ ࠓճͷຊ୊Ͱ͢

  18. 2,ݱঢ়෼ੳͱ໰୊఺ 6*্͸͜͏ͳΓ·͢ ͍͍ͱ͜Ζ ɾສ݅දࣔͯ͠΋ಈ࡞͕͍ܰʂ ࠷ॳͷNBQΛ࢖͏ͱສ݅͋ͨΓ͕ݶք  ඍົͳͱ͜Ζ ɾԼ͕༨ͬͯΔ ߴ͕͞ʹͰ͖͍ͯͳ͍ 

    ɾݸʑͷΞΠςϜͷߴ͞Λݻఆ͢Δඞཁ͕͋Δ
  19. ٙ໰ᶃ 23PXͬͯԿ NBQܗࣜͰ هड़Ͱ͖ͳ͍ͷʁ "*UFNΛҰݸͣͭϨϯμϦϯά͢ΔͷͰ͸ͳ ͘ɺඞཁͳݸ਺͚ͩϨϯμϦϯά͢Δɻ શ෦ϨϯμϦϯά͠ͳ͍ͷͰɺ3PX͸ྻͭ ͋ͨΓͷ಺༰Ͱ͋Δඞཁ͕͋Δɻ

  20. 2,ݱঢ়෼ੳͱ໰୊఺ ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ͓͞Β͍ ɾશମͷߴ͞ΞΠςϜͭͷαΠζʷݸ਺ ɾඳը࢝͠ΊΔߴ͞ݱࡏͷεΫϩʔϧҐஔ ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

  21. 2,ݱঢ়෼ੳͱ໰୊఺ ٙ໰ᶄ 2IFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱ μϝʁ "SFBDUWJSUVBMJ[FEBVUPTJ[FSΛ࢖͑͹ େৎ෉

  22. 2,ݱঢ়෼ੳͱ໰୊఺ ٙ໰ᶄ 2IFJHIUɺ਺஋Ͱࢦఆ͠ͳ͍ͱ μϝʁ "SFBDUWJSUVBMJ[FEBVUPTJ[FSΛ࢖͑͹ େৎ෉ ࣮૷ޙ͸ͪ͜Β

  23. 2,ݱঢ়෼ੳͱ໰୊఺ 2ΞΠςϜͷߴ͞ʁ "શମͷߴ͞Λਪఆͯ͠ɺݱࡏͷεΫϩʔϧ ҐஔΛ೺Ѳ͢ΔͨΊʹඞਢɻ ͨͩ͠ɺΞΠςϜ͕ՄมαΠζͷ࣌ʹ͸ɻɻɻ ٙ໰ᶅ

  24. 2,ݱঢ়෼ੳͱ໰୊఺ 2ΞΠςϜͷߴ͞ʁ "શମͷߴ͞Λਪఆͯ͠ɺݱࡏͷεΫϩʔϧ ҐஔΛ೺Ѳ͢ΔͨΊʹඞਢɻ ͨͩ͠ɺΞΠςϜ͕ՄมαΠζͷ࣌ʹ͸ɻɻɻ 7BSJBCMF4J[F-JTUΛར༻Ͱ͖Δ΋ͷͷɺ ͋Β͔͡Ίߴ͕͞Θ͔͍ͬͯͳ͍ͱ࡞Εͳ͍ ٙ໰ᶅ

  25. 2,ݱঢ়෼ੳͱ໰୊఺ ಉ͜͡ͱΛ͍͚ͨͩ͠ ͳͷʹʜɻ

  26. 2,ݱঢ়෼ੳͱ໰୊఺ ݁ߏ͠ΜͲ͍

  27. 2,ݱঢ়෼ੳͱ໰୊఺ ݁࿦ແཧͯ͠࢖͏͜ͱ͸ͳ͍ ɾϓϩδΣΫτͷ࠷ॳ͸ͦΕͦ͜NBQͷ࣮૷Ͱे෼ ɾগ͠ॏ͍ఔ౓Ͱ͋Ε͹ɺը૾ͷ-B[ZMPBEJOHɾඳը਺Λ ݮΒ͢ͳͲͰରԠ ɾͦΕͰ΋ඳը͕໰୊ʹͳͬͯ͠·ͬͨ৔߹ͷΞϓϩʔν

  28. 2,ݱঢ়෼ੳͱ໰୊఺ ผղSFBDUWJSUVPTP ಉ͜͡ͱ͕Ͱ͖ͯɺ ݁ߏγϯϓϧ 4UBSL 4J[F.#

  29. 2,ݱঢ়෼ੳͱ໰୊఺ ผΞϓϩʔνฤDPOUFOUWJTJCJMJUZ $44ͰͰ͖ΔͷͰൺֱత͓खܰɻ ର৅ϒϥ΢β͕$ISPNJVNܥ $ISPNF 0QFSB &EHF ʹߜͬͯ Α͚Ε͹͋Γ

  30. 2,ݱঢ়෼ੳͱ໰୊఺ ࠷ޙʹ ʰ࢒೦ͳ͕Βɺ؆୯ͳमਖ਼͸͚ͭͩͰ͸͋Γ·ͤΜɻύϑΥʔϚϯε͸ɺ վળ͢ΔྖҬΛ؂ࢹ͓Αͼଌఆ͢ΔܧଓతͳήʔϜͰ͢ɻʱ ࠓճͷ࿩Λखࡳͷͭͱͯ͠࢖͍͚ͬͯͨͩͨΒ ͱࢥ͍·͢ʂ

  31. ࢀߟจݙ ʮύϑΥʔϚϯε࠷దԽʯIUUQTKBSFBDUKTPSHEPDTPQUJNJ[JOHQFSGPSNBODFIUNMWJSUVBMJ[FMPOHMJTUT ʮ5XJUUFS-JUFBOE)JHI1FSGPSNBODF3FBDU1SPHSFTTJWF8FC"QQTBU4DBMFʯ IUUQTNFEJVNDPN!QBVMBSNTUSPOHUXJUUFSMJUFBOEIJHIQFSGPSNBODFSFBDUQSPHSFTTJWF XFCBQQTBUTDBMFEBFB ʮSFBDUXJOEPXʯIUUQTHJUIVCDPNCWBVHIOSFBDUXJOEPXIPXJTSFBDUXJOEPX EJ ff FSFOUGSPNSFBDUWJSUVBMJ[FE͔Βҙ༁ ʮSFBDUWJSUVBMJ[FEOQNʯIUUQTXXXOQNKTDPNQBDLBHFSFBDUWJSUVBMJ[FE

    ʮSFBDUXJOEPXOQNʯIUUQTXXXOQNKTDPNQBDLBHFSFBDUXJOEPX ʮ࠲ΔೣͷΠϥετʯIUUQTXXXJSBTVUPZBDPNCMPHQPTU@IUNM ʮDPOUFOUWJTJCJMJUZʯIUUQTXFCEFWDPOUFOUWJTJCJMJUZ
  32. Thank you!