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

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

pentla
August 25, 2021

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

pentla

August 25, 2021
Tweet

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 2,ݱঢ়෼ੳͱ໰୊఺
    ࣗݾ঺հ
    ɾ!QFOUMB ౉ลҰً

    ɾ'"45"-&35νʔϜ
    ɾϑϩϯτ݉όοΫΤϯυΤϯδχΞ
    ɾ"QFY3VTUಡॻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ඍົͳͱ͜Ζ
    ɾԼ͕༨ͬͯΔ ߴ͕͞ʹͰ͖͍ͯͳ͍

    ɾݸʑͷΞΠςϜͷߴ͞Λݻఆ͢Δඞཁ͕͋Δ

    View full-size slide

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

    View full-size slide

  20. 2,ݱঢ়෼ੳͱ໰୊఺
    ͰɺͲ͏΍࣮ͬͯ૷͢Δ͔ ͓͞Β͍

    ɾશମͷߴ͞ΞΠςϜͭͷαΠζʷݸ਺
    ɾඳը࢝͠ΊΔߴ͞ݱࡏͷεΫϩʔϧҐஔ
    ͔ΒσΟεϓϨΠͷߴ͞·Ͱ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide