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
2.8k
IntersectionObserverはいいぞ
IntersectionObserverを使っていただきたいだけの話
Leko
September 15, 2017
Tweet
Share
More Decks by Leko
See All by Leko
エンジニアと治療アプリ®
leko
0
910
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
5
6.7k
React NativeアプリでE2Eテストを回してみた
leko
8
2.6k
React Nativeで医療機器作ってます
leko
4
1.5k
趣味では使っているが 仕事には使ってないツール
leko
1
180
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
250
Other Decks in Programming
See All in Programming
incrementalモデルの理解を深める
ikkimiyazaki
2
640
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
Building a Smaller App Binary
kateinoigakukun
2
200
[スクリプト] Swiftの型推論を学ぼう
omochi
0
110
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
Why 1 + 1 = 2 in Swift?
1plus4
1
240
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
ONE WEDGE_Company_Information
1wedge
0
160
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Design by the Numbers
sachag
274
18k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Embracing the Ebb and Flow
colly
78
4.1k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Fireside Chat
paigeccino
19
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
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)