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

IntersectionObserverはいいぞ

Leko
September 15, 2017

 IntersectionObserverはいいぞ

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

Leko

September 15, 2017
Tweet

More Decks by Leko

Other Decks in Programming

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