IntersectionObserverはいいぞ

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)