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. 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
  2. Forced Synchronous Layout その時点での DOM の位置を取得するために Layout 計算を行う。 この計算は同期処理であり、つまりブロックが発生する。さらにそれを onscroll

    など頻度 の高いイベントの中で行うのは、スムーズなスクロール表示のためのブラウザの最適化を 阻害してしまう。 - Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
  3. • 見えてる/見えない = entry.isIntersecting • どれくらい先読みするか = options.rootMargin • どれくらい見えてるか

    = entry.intersectionRatio • 見えてる間のイベント発生頻度 = options.threshold 正確ではないまとめ
  4. 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)