LT: IntersectionObserverはいいぞ @L_e_k_o

しごと 　 　「CureApp禁煙」という治療アプリの開発 しゅみ 　プログラミング、トレラン、射撃 きになる 　react-native-web、OpenAPI（v3）、Almin L_e_k_o Leko れこ 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

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

Forced Synchronous Layout その時点での DOM の位置を取得するために Layout 計算を行う。 この計算は同期処理であり、つまりブロックが発生する。さらにそれを onscroll など頻度 の高いイベントの中で行うのは、スムーズなスクロール表示のためのブラウザの最適化を 阻害してしまう。 - Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io

やや先読み遅延ロード https://codepen.io/L_e_k_o/details/JroVxy

56行でスター1600

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

消えたらfixed、見えたらstatic https://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 | MDN IntersectionObserver/explainer.md at master · w3c/IntersectionObserver Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io openfresh/viewport-observer (React) 96 line heavyy/vue-intersect (Vue)