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
3
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
エンジニアと治療アプリ®
leko
0
1.2k
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
5
7.4k
React NativeアプリでE2Eテストを回してみた
leko
8
2.9k
React Nativeで医療機器作ってます
leko
4
1.8k
趣味では使っているが 仕事には使ってないツール
leko
1
220
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6.3k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
330
Other Decks in Programming
See All in Programming
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.8k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
690
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
One Enishi After Another
snoozer05
PRO
0
160
技術的負債の正体を知って向き合う
irof
0
260
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
Six and a half ridiculous things to do with Quarkus
hollycummins
0
220
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Context Engineering - Making Every Token Count
addyosmani
8
300
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
How to Ace a Technical Interview
jacobian
280
24k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
GitHub's CSS Performance
jonrohan
1032
470k
It's Worth the Effort
3n
187
28k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
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)