IntersectionObserverはいいぞ

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)