IntersectionObserverはいいぞ

13fbd31a4503c352369aab017e3edef7?s=47 Leko
September 15, 2017

 IntersectionObserverはいいぞ

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

13fbd31a4503c352369aab017e3edef7?s=128

Leko

September 15, 2017
Tweet

Transcript

  1. LT: IntersectionObserverはいいぞ @L_e_k_o

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

    Copyright CureApp, Inc. All Rights Reserved.
  3. Scroll event なるべく頑張りたくない

  4. • 画像の遅延ロード • 無限スクロール • スクロールスパイ(例:Googleのブログ) • 一定のスクロール位置からposition: fixed •

    Adのインプレッション計測 • 視差効果・パララックス Scroll eventよくある処理
  5. • scrollイベントの負荷を減らす - Qiita • Webフロントエンドに従事するお前らはいい加減高頻度イベン トとレイアウトとスタイリングの付き合い方を考えろ - Qiita •

    JavaScriptでの多発するイベントの間引き処理 | 技術コラム | つみきブログ Scroll eventよくあるTips
  6. $(window).on(‘scroll’, throttle(e => …) ) IntersectionObserver

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

    など頻度 の高いイベントの中で行うのは、スムーズなスクロール表示のためのブラウザの最適化を 阻害してしまう。 - Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
  9. やや先読み遅延ロード https://codepen.io/L_e_k_o/details/JroVxy

  10. 56行でスター1600

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

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

  13. polyfill:w3c/IntersectionObserver

  14. • 見えてる/見えない = entry.isIntersecting • どれくらい先読みするか = options.rootMargin • どれくらい見えてるか

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