Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IntersectionObserverはいいぞ
Search
Leko
September 15, 2017
Programming
3
3.1k
IntersectionObserverはいいぞ
IntersectionObserverを使っていただきたいだけの話
Leko
September 15, 2017
Tweet
Share
More Decks by Leko
See All by Leko
エンジニアと治療アプリ®
leko
0
1.2k
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
5
7.3k
React NativeアプリでE2Eテストを回してみた
leko
8
2.9k
React Nativeで医療機器作ってます
leko
4
1.7k
趣味では使っているが 仕事には使ってないツール
leko
1
220
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6.3k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
330
Other Decks in Programming
See All in Programming
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
Deep Dive into Kotlin Flow
jmatsu
1
370
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
為你自己學 Python - 冷知識篇
eddie
1
350
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
KATA
mclloyd
32
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Visualization
eitanlees
148
16k
Rails Girls Zürich Keynote
gr2m
95
14k
Code Review Best Practice
trishagee
71
19k
Embracing the Ebb and Flow
colly
87
4.8k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Site-Speed That Sticks
csswizardry
10
820
Typedesign – Prime Four
hannesfritz
42
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Transcript
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)