IntersectionObserverを使っていただきたいだけの話
LT: IntersectionObserverはいいぞ@L_e_k_o
View Slide
しごと 「CureApp禁煙」という治療アプリの開発しゅみ プログラミング、トレラン、射撃きになる react-native-web、OpenAPI(v3)、AlminL_e_k_oLekoれこCopyright CureApp, Inc. All Rights Reserved.
Scroll eventなるべく頑張りたくない
● 画像の遅延ロード● 無限スクロール● スクロールスパイ(例:Googleのブログ)● 一定のスクロール位置からposition: fixed● Adのインプレッション計測● 視差効果・パララックスScroll eventよくある処理
● scrollイベントの負荷を減らす - Qiita● Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita● JavaScriptでの多発するイベントの間引き処理 | 技術コラム |つみきブログScroll eventよくあるTips
$(window).on(‘scroll’,throttle(e => …))IntersectionObserver
IntersectionObserverThe Intersection Observer API provides a way to asynchronouslyobserve changes in the intersection of a target element with anancestor element or with a top-level document's viewport.Intersection Observer API - Web APIs | MDN
Forced Synchronous Layoutその時点での DOM の位置を取得するために Layout 計算を行う。この計算は同期処理であり、つまりブロックが発生する。さらにそれを onscroll など頻度の高いイベントの中で行うのは、スムーズなスクロール表示のためのブラウザの最適化を阻害してしまう。- Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
やや先読み遅延ロードhttps://codepen.io/L_e_k_o/details/JroVxy
56行でスター1600
threshold + intersectionRatiohttps://codepen.io/L_e_k_o/details/Ewazyb
消えたらfixed、見えたらstatichttps://codepen.io/L_e_k_o/details/OxPYay/
polyfill:w3c/IntersectionObserver
● 見えてる/見えない = entry.isIntersecting● どれくらい先読みするか = options.rootMargin● どれくらい見えてるか = entry.intersectionRatio● 見えてる間のイベント発生頻度 = options.threshold正確ではないまとめ
IntersectionObserverはいいぞMore details:Intersection Observer API - Web APIs | MDNIntersectionObserver/explainer.md at master · w3c/IntersectionObserverIntersection Observer を用いた要素出現検出の最適化 | blog.jxck.ioopenfresh/viewport-observer (React) 96 lineheavyy/vue-intersect (Vue)