Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
IntersectionObserverはいいぞ
Leko
September 15, 2017
Programming
3
2.4k
IntersectionObserverはいいぞ
IntersectionObserverを使っていただきたいだけの話
Leko
September 15, 2017
Tweet
Share
More Decks by Leko
See All by Leko
エンジニアと治療アプリ®
leko
0
550
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
4
5.9k
React NativeアプリでE2Eテストを回してみた
leko
8
2.3k
React Nativeで医療機器作ってます
leko
3
1.3k
趣味では使っているが 仕事には使ってないツール
leko
1
150
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
5.7k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
210
Other Decks in Programming
See All in Programming
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
130
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
1.6k
How to start contributing to Kubernetes Projects
ydfu
0
150
ExplainableAIの概要とAmazon SageMaker Clarifyでの実装例
hacarus
0
110
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
340
リーダブルテストコード / #vstat
jnchito
48
37k
Rust、何もわからない...#3
estie
0
170
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
100
Automating Gradle benchmarks at N26
ubiratansoares
PRO
2
150
Getting Started With Data Structures
adoranwodo
1
270
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
520
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
110
Featured
See All Featured
Building an army of robots
kneath
299
40k
Infographics Made Easy
chrislema
233
17k
A Tale of Four Properties
chriscoyier
149
21k
The Mythical Team-Month
searls
210
39k
Documentation Writing (for coders)
carmenintech
48
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Thoughts on Productivity
jonyablonski
44
2.4k
Atom: Resistance is Futile
akmur
255
20k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
The Language of Interfaces
destraynor
148
21k
What's new in Ruby 2.0
geeforr
335
30k
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)