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

FRESH! クライアントサイドパフォーマンス改善

sutiwo
September 08, 2017

FRESH! クライアントサイドパフォーマンス改善

2017.9.8 Frontrend Vol.10 - 夏の終わりに納涼パフォーマンス話

•「FRESH!」が映像配信のタイムラグを大幅に短縮
https://www.cyberagent.co.jp/newsinfo/info/detail/id=14062
•FRESH! における Web プッシュ通知機能
https://developers.cyberagent.co.jp/blog/archives/9662/
•FRESH! Accessibility Guidelines
https://openfresh.github.io/a11y-guidelines/

結果
https://www.youtube.com/watch?v=OqHYelNAuJk

viewport-observer
https://github.com/openfresh/viewport-observer

sutiwo

September 08, 2017
Tweet

More Decks by sutiwo

Other Decks in Technology

Transcript

  1. Service Worker is • όοΫάϥ΢ϯυͰ࣮ߦ͢Δ Web Worker ͷҰछ • ϒϥ΢β

    (UI εϨου)ͱ͸ postMessage Λ࢖ͬͯ΍ΓͱΓ • ωοτϫʔΫॲཧͷϋϯυϦϯάɺϓογϡ௨஌ͷड৴ɺόοΫάϥ΢ϯυಉظ • hMps ͕ඞਢ (localhost ͸ྫ֎)
  2. Can I use... Support tables for HTML5, CSS3, etc :

    
 https://caniuse.com/#feat=serviceworkers
  3. The status of Service Worker in Microsoft Edge is In

    Development - Microsoft Edge Development : 
 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/

  4. The status of Service Worker in Microsoft Edge is In

    Development - Microsoft Edge Development : 
 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/

  5. IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG

    IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG
  6. IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG

    IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG Useless IMG
  7. viewport-observer • A React Component that observe changes in the

    intersec;on of a target element with viewport using Intersec;onObserver
  8. SVG εϓϥΠτͱHTTP2 • ͜Ε·ͰΞΠίϯ͸SVGϑΝΠϧΛ݁߹͍ͤͯͨ͞ • FRESH! Ͱར༻͍ͯ͠Δ AWS ͷ ALB

    ͸ HTTP/2 ʹରԠ͍ͯ͠Δ • HTTP/1.1 ͷͱ͖ʹ՝୊ͩͬͨϦΫΤετίετΛ௨৴ଟॏԽ΍ฒߦϦΫΤετʹΑΓ ܰݮͤ͞Δ͜ͱ͕Ͱ͖ͨ