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

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

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