Okuyama Yukihiko
A FRONT END ENGINEER FROM TOKYO, JAPAN.
TOM勉強会LT資料
奥山幸彦 / @FiNGAHOLiC
みなさんこんばんわ
今日は
自分が🐰を飼っているという事もあり
皆さんに🐰の正しい飼い方について
お話しようと思います
＿人人人人人人人人＿
＞ というのは嘘で ＜
￣ＹＹＹＹＹＹＹＹ￣
普段使用する機会が少なくて
自分も忘れてしまってたけど
覚えてるとやっぱり得する
JavaScript APIを紹介します
そんなん知ってるって人は
筋トレでもしててください💪('ω'💪)
-
IntersectionObserver
-
requestIdleCallback
IntersectionObserver
Intersection Observer APIのIntersection Observerインターフェースは、ターゲット要素と祖先要素または最上位レベルのドキュメントのビューポートとの交差における変化を非同期的に観察する方法を提供します。
要するにスクロール中に
該当する要素が画面内に表示された時に
アレコレしたい！って時に便利なAPI
IntersectionObserverなし
scroll毎に要素の位置情報を算出してるので、要素数が増えれば増えるほど処理に時間がかかり、Scroll Jankの原因になってしまう。
ちなみに改善策としてthrottleやdebounceで処理を間引いたり、リスナ内でそのイベントがキャンセルされないことを保証するPassive EventListenerの使用などがある。
IntersectionObserverあり
scroll毎に要素の位置情報を算出する必要がなく、スクリーンに交差したタイミングで初めて演算されるので、scrollを常時監視する実装に比べて負荷が格段に少ない。また、発火の条件をある程度指定出来たりもする。
交差する○px手前で発火、交差の○%毎に発火、といった指定が出来る。
ただ…
Chrome向けみたいなもんなので
その辺踏まえてつつ導入しましょう
requestIdleCallback
ブラウザーがアイドル状態の時に実行される関数をキューに登録できます。これによりアニメーションや入力への応答など遅延が問題となる処理に影響を与えることなく、優先度の低いバックグラウンド処理をメインスレッド内で実行させられます。
要するに負荷が高い処理が
一段落したタイミングで
よしなに実行して欲しい！
って時に便利なAPI
ページのランディング時にはまずATF（Above The Fold）に関係する処理のみを実行しておき、ATF外の処理をrequestIdleCallback内で実行させたりすればパフォーマンスの改善にはとても効きそう。
requestIdleCallbackなし
requestIdleCallbackあり
ただ…
これもChrome向け…
いや使っていきましょう！
ご成長ありがとうございました
Hello Tokyo Otaku Mode
By Okuyama Yukihiko
