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
3k
IntersectionObserverはいいぞ
IntersectionObserverを使っていただきたいだけの話
Leko
September 15, 2017
Tweet
Share
More Decks by Leko
See All by Leko
エンジニアと治療アプリ®
leko
0
1.1k
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
5
7k
React NativeアプリでE2Eテストを回してみた
leko
8
2.7k
React Nativeで医療機器作ってます
leko
4
1.6k
趣味では使っているが 仕事には使ってないツール
leko
1
190
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6.2k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
270
Other Decks in Programming
See All in Programming
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
qmuntal/stateless のススメ
sgash708
0
120
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
EventSourcingの理想と現実
wenas
6
2.1k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
GraphQLとの向き合い方2022年版
quramy
43
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Ruby is Unlike a Banana
tanoku
96
11k
Building Adaptive Systems
keathley
38
2.2k
The Pragmatic Product Professional
lauravandoore
31
6.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)