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
CSC509 Lecture 01
javiergs
PRO
1
430
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
130
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
430
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
330
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
Serena MCPのすすめ
wadakatu
4
880
クラシルを支える技術と組織
rakutek
0
190
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
370
開発生産性を上げるための生成AI活用術
starfish719
1
150
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
750
Featured
See All Featured
Navigating Team Friction
lara
189
15k
Documentation Writing (for coders)
carmenintech
75
5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
4 Signs Your Business is Dying
shpigford
185
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Mobile First: as difficult as doing things right
swwweet
224
10k
The Language of Interfaces
destraynor
162
25k
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)