IntersectionObserverはいいぞ

IntersectionObserverを使っていただきたいだけの話

Transcript

1. LT: IntersectionObserverはいいぞ
   @L_e_k_o
   

   View Slide

2. しごと
   　
   　「CureApp禁煙」という治療アプリの開発
   しゅみ
   　プログラミング、トレラン、射撃
   きになる
   　react-native-web、OpenAPI（v3）、Almin
   L_e_k_o
   Leko
   れこ
   Copyright CureApp, Inc. All Rights Reserved.
   

   View Slide

3. Scroll event
   なるべく頑張りたくない
   

   View Slide

4. ● 画像の遅延ロード
   ● 無限スクロール
   ● スクロールスパイ（例：Googleのブログ）
   ● 一定のスクロール位置からposition: fixed
   ● Adのインプレッション計測
   ● 視差効果・パララックス
   Scroll eventよくある処理
   

   View Slide

5. ● scrollイベントの負荷を減らす - Qiita
   ● Webフロントエンドに従事するお前らはいい加減高頻度イベン
   トとレイアウトとスタイリングの付き合い方を考えろ - Qiita
   ● JavaScriptでの多発するイベントの間引き処理 | 技術コラム |
   つみきブログ
   Scroll eventよくあるTips
   

   View Slide

6. $(window).on(‘scroll’,
   throttle(e => …)
   )
   IntersectionObserver
   

   View Slide

7. IntersectionObserver
   The Intersection Observer API provides a way to asynchronously
   observe changes in the intersection of a target element with an
   ancestor element or with a top-level document's viewport.
   Intersection Observer API - Web APIs | MDN
   

   View Slide

8. Forced Synchronous Layout
   その時点での DOM の位置を取得するために Layout 計算を行う。
   この計算は同期処理であり、つまりブロックが発生する。さらにそれを onscroll など頻度
   の高いイベントの中で行うのは、スムーズなスクロール表示のためのブラウザの最適化を
   阻害してしまう。
   - Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
   

   View Slide

9. やや先読み遅延ロード
   https://codepen.io/L_e_k_o/details/JroVxy
   

   View Slide

10. 56行でスター1600
    

    View Slide

11. threshold + intersectionRatio
    https://codepen.io/L_e_k_o/details/Ewazyb
    

    View Slide

12. 消えたらfixed、見えたらstatic
    https://codepen.io/L_e_k_o/details/OxPYay/
    

    View Slide

13. polyfill：w3c/IntersectionObserver
    

    View Slide

14. ● 見えてる/見えない = entry.isIntersecting
    ● どれくらい先読みするか = options.rootMargin
    ● どれくらい見えてるか = entry.intersectionRatio
    ● 見えてる間のイベント発生頻度 = options.threshold
    正確ではないまとめ
    

    View Slide

15. IntersectionObserverはいいぞ
    More details:
    Intersection Observer API - Web APIs | MDN
    IntersectionObserver/explainer.md at master · w3c/IntersectionObserver
    Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
    openfresh/viewport-observer (React) 96 line
    heavyy/vue-intersect (Vue)
    

    View Slide