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

iOS 通信のパフォーマンス改善

iOS 通信のパフォーマンス改善

- SDWebImageによる改善
- PonryDebugerによる通信の解析・分析

yohei sugigami

February 14, 2015
Tweet

More Decks by yohei sugigami

Other Decks in Technology

Transcript

  1. ௨৴ͷύϑΥʔϚϯεվળ
    ਿ্༸ฏ
    ΤϯδχΞ / ΢ΥϯςουϦʔגࣜձࣾ
    iOSΦʔϧελʔζษڧձ

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. ݄ؒ40ສਓར༻
    اۀ7000ࣾ
    ϝϯόʔ40ਓ͙Β͍

    View Slide

  6. View Slide

  7. J1IPOF J1BE "OEPSJE
    ̏ףୡ੒ʂ

    View Slide

  8. WHY?
    ௨৴ͷύϑΥʔϚϯεվળ

    View Slide


  9. Wantedly͸ࠓ೥ւ֎ਐग़͠·͢ʂ
    ڌ఺ͷਓ

    View Slide


  10. ڌ఺͸ΞδΞʂ

    View Slide


  11. ւ֎͸
    ௨৴ճઢ͕ ஗͍

    View Slide


  12. STARTUP ASIA 2014 ˏ JAKARTA
    ւ֎Ͱ΋ૉఢͳ
    Wantedly ɹɹ
    ମݧΛ
    WoWoW

    View Slide

  13. Period is two weeks

    Dec 2014

    View Slide

  14. Team
    ৿ాઌੜ
    ME
    Full Time
    iOS Engineer
    iOS Engineer
    મ౬ཱྀਓ
    Half Time
    ιϑΝʔͰϖΞϓϩελΠϧͳ։ൃ :)

    View Slide

  15. Analyze

    View Slide

  16. New Relic MobileͰ෼ੳ
    ͬ͘͟ΓͳϘτϧωοΫௐࠪ

    View Slide

  17. Pony DebuggerͰࡉ͔͘෼ੳ
    ϦΫΤετ୯ҐͰࡉ͔͘ௐࠪ

    View Slide

  18. Pony Debuggerͷ࢓૊Έ
    iPhone
    Server
    Client
    Python
    CocoaPods
    Chrome Developer Tool

    View Slide

  19. Θ͔ͬͨ͜ͱ
    ɾJSONͷϦΫΤετʹΑΓ΋ը૾ͷ༰ྔ͕ଟ͍

    ɾແବͳը૾ͷϦΫΤετ͕͋Δ

    ɾݟ͍ͤͨը૾ͷॱ൪ʹͳ͍ͬͯͳ͍

    View Slide

  20. PLAN
    ௨৴ྔͷେ൒Λ઎ΊΔ

    ը૾ͷ௨৴Λվળ͢Δ

    View Slide

  21. ը૾௨৴ͱݴ͑͹ SDWebImage

    View Slide

  22. SDWebImageͷίʔυΛಡΉ
    63- 63- 63- 63-
    63-
    63-
    63-
    63-
    63-
    63-
    SDWebImageDownloader

    Request Queue
    SDWebImageDownloaderOperation
    UIImageView#sd_setImageWithURL

    View Slide

  23. SDWebImageͷίʔυΛಡΉ
    63-
    SDWebImageDownloaderOperation
    Memory / Disk Cache
    SDWebImageManager

    View Slide

  24. SDWebImageͷόάΛൃݟʂ
    Ϛʔδ͞ΕͨΑʂ

    View Slide

  25. Let’s
    Kaizen

    View Slide

  26. ืूҰཡը૾ͷઌಡΈ
    ·ͩը໘্ʹදࣔ

    ͞Ε͍ͯͳ͍ը૾Λ

    ࣄલʹऔಘ

    View Slide

  27. SDWebImagePrefetcher
    @interface SDWebImagePrefetcher : NSObject

    @property (strong, readonly) SDWebImageManager *manager;
    @property (assign) NSUInteger maxConcurrentDownloads;
    - (void)prefetchURLs:(NSArray *)urls;
    63-
    63-
    63-

    View Slide

  28. ը૾Λऔಘ͢Δ༏ઌ౓෇͚
    ߴ
    ௿
    ߴ
    ௿
    ௿
    Priority

    View Slide

  29. SDWebImageOptions
    @interface UIImageView (WebCache)
    - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:
    (UIImage *)placeholder options:(SDWebImageOptions)options;
    typedef NS_OPTIONS(NSUInteger, SDWebImageOptions) {
    SDWebImageLowPriority = 1 << 1,
    SDWebImageHighPriority = 1 << 8,
    Change Priority

    View Slide

  30. ભҠݩͷը૾औಘΛΩϟϯηϧ
    ભҠݩ ભҠઌ
    ௨৴Ωϟϯηϧ
    ભҠઌͷը૾Λ༏ઌͯ͠දࣔ

    View Slide

  31. SDWebImageManager#cancelAll
    @interface UIImageView (WebCache)
    - (void)sd_cancelCurrentImageLoad;
    @interface SDWebImageManager : NSObject
    - (void)cancelAll;
    63- 63- 63- 63-
    SDWebImageDownloader

    Request Queue

    View Slide

  32. 'BDFCPPL͕ޠΔϞόΠϧŋνϡʔχϯάͷۃҙɿ͜ΕͰ్্ࠃͷΠϯλʔωοτ΋0,ʂ
    ฐࣾCTO͔Βͷࢥ͠ঌ͠
    Facebook͸90% ͷΠϝʔδͰ

    WebP ϑΥʔϚοτ͕༻͍ΒΕ͍ͯΔ

    Facebookܦ༝Ͱ஌ΔͳͲ

    ઀ଓεϐʔυ඼࣭ʹԠͯ͡

    ػೳͷৼΔ෣͍Λదਖ਼Խ͍ͯ͘͠

    View Slide

  33. ը૾ϑΥʔϚοτΛWebPʹ
    90KB
    30KB
    SDWebImage͸WebPʹରԠ͍ͯ͠Δ

    View Slide

  34. SDWebImage/WebP
    Podfile

    pod ‘SDWebImage/WebP'
    $ pod install
    @interface UIImage (WebP)
    Only Install !

    View Slide

  35. Webpʹม׵͢Δը૾αʔόͷߏ੒
    CloudFront
    S3
    EC2
    Docker
    nginx
    AWS
    iPhone
    ೚ҙʹϦαΠζ

    &

    WebPʹม׵
    ΦϦδφϧը૾
    Ωϟογϡը૾
    ʢCDN)

    View Slide

  36. wantedly/nginx-image-server
    Open Source !!

    View Slide

  37. ௨৴ଳҬʹΑΓऔಘ͢Δը૾αΠζΛมߋ
    ྑ͍
    ѱ͍
    ͘͢͝
    ѱ͍
    100KB
    25KB
    6KB
    16෼ͷ̍

    View Slide

  38. ௨৴ଳҬͷਪଌ
    63-
    ௨৴։࢝ɾऴྃͷܦա࣌ؒͱ

    डྖը૾αΠζ͔Βਪଌ
    30KB

    View Slide

  39. ௨৴ଳҬͷਪଌ
    MONITORING: kbps 108.73 [Excellent] average rtt 0.971914

    MONITORING: kbps 108.73 [Excellent] average rtt 0.971914

    MONITORING: kbps 108.73 [Excellent] average rtt 0.971914

    MONITORING: rtt 0.17s, 0KB, Cached: YES, https://e4fb0db8addb.png

    MONITORING: rtt 0.32s, 0KB, Cached: NO, https://5af9694863de.png

    MONITORING: rtt 0.35s, 1KB, Cached: NO, https://9b-80a9-37eb4c7182ea.jpeg

    MONITORING: rtt 0.41s, 9KB, Cached: NO, https://510-a619-10701876ad0c.png

    MONITORING: rtt 0.01s, 8KB, Cached: YES, https://2aa3646d.jpeg

    MONITORING: kbps 189.65 [Excellent] average rtt 0.461638

    MONITORING: rtt 0.52s, 27KB, Cached: NO, https://b5-bceda20f3034.png

    MONITORING: rtt 0.40s, 21KB, Cached: NO, https://54a-52cbe1efb0bc.jpeg

    MONITORING: rtt 0.82s, 33KB, Cached: NO, https://5b-1d537f677f61.png

    MONITORING: rtt 0.46s, 19KB, Cached: NO, https://-0461512b3080.jpeg

    MONITORING: rtt 0.26s, 36KB, Cached: NO, https://c2b-e88d33bb56dc.jpeg

    MONITORING: kbps 159.05 [Excellent] average rtt 0.515586

    MONITORING: rtt 0.98s, 45KB, Cached: NO, https://83f6512cef.jpeg

    MONITORING: kbps 160.66 [Excellent] average rtt 0.569087

    MONITORING: rtt 2.56s, 30KB, Cached: NO, https://65e-55cee3d4f2eb.jpeg

    MONITORING: kbps 130.23 [Excellent] average rtt 1.270392

    MONITORING: rtt 2.53s, 11KB, Cached: NO, https://65e-55cee3d4f2eb.jpeg

    View Slide

  40. ࠷େαΠζ͔ΒΩϟγϡը૾ΛνΣοΫ
    63-
    େ த খ
    ᶃ ᶄ ᶅ

    View Slide

  41. HOW?
    Ͳ͏΍ͬͯվળΛ֬ೝ͢Δͷʁ

    View Slide

  42. վળͷ֬ೝํ๏
    ௨৴ͷଳҬΛ੍ݶͯ͠ମݧ͕Α͘ͳ͍ͬͯΔ͔

    View Slide

  43. One More Thing

    View Slide

  44. ͞ΒͳΔվળํ๏Ҋ
    ɾMessagePackͰJSONΛѹॖ͢Δ

    ɾHTTP/2Ͱ௨৴ίωΫγϣϯΛ·ͱΊΔ

    ɾ௨৴ଳҬʹΑΔಉ࣌઀ଓ਺ͷௐ੔

    View Slide

  45. ΤϯδχΞืूͯ͠·͢ɿʣ
    ͓͠·͍

    View Slide