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
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
170
CSC305 Summer Lecture 12
javiergs
PRO
0
130
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
MLH State of the League: 2026 Season
theycallmeswift
0
210
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
250
Testing Trophyは叫ばない
toms74209200
0
500
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Unsuck your backbone
ammeep
671
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Statistics for Hackers
jakevdp
799
220k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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)