TOM勉強会LT資料

奥山幸彦 / @FiNGAHOLiC

みなさんこんばんわ

今日は

自分が🐰を飼っているという事もあり

皆さんに🐰の正しい飼い方について

お話しようと思います

_人人人人人人人人_
> というのは嘘で <
 ̄YYYYYYYY ̄

普段使用する機会が少なくて

自分も忘れてしまってたけど

覚えてるとやっぱり得する

JavaScript APIを紹介します

そんなん知ってるって人は

筋トレでもしててください💪('ω'💪)

  • IntersectionObserver

  • requestIdleCallback

IntersectionObserver

Intersection Observer APIのIntersection Observerインターフェースは、ターゲット要素と祖先要素または最上位レベルのドキュメントのビューポートとの交差における変化を非同期的に観察する方法を提供します。

要するにスクロール中に

該当する要素が画面内に表示された時に

アレコレしたい!って時に便利なAPI

IntersectionObserverなし

scroll毎に要素の位置情報を算出してるので、要素数が増えれば増えるほど処理に時間がかかり、Scroll Jankの原因になってしまう。

ちなみに改善策としてthrottledebounceで処理を間引いたり、リスナ内でそのイベントがキャンセルされないことを保証するPassive EventListenerの使用などがある。

IntersectionObserverあり

scroll毎に要素の位置情報を算出する必要がなく、スクリーンに交差したタイミングで初めて演算されるので、scrollを常時監視する実装に比べて負荷が格段に少ない。また、発火の条件をある程度指定出来たりもする。

交差する○px手前で発火、交差の○%毎に発火、といった指定が出来る。

ただ…

Chrome向けみたいなもんなので

その辺踏まえてつつ導入しましょう

requestIdleCallback

ブラウザーがアイドル状態の時に実行される関数をキューに登録できます。これによりアニメーションや入力への応答など遅延が問題となる処理に影響を与えることなく、優先度の低いバックグラウンド処理をメインスレッド内で実行させられます。 

要するに負荷が高い処理が

一段落したタイミングで

よしなに実行して欲しい!

って時に便利なAPI

ページのランディング時にはまずATF(Above The Fold)に関係する処理のみを実行しておき、ATF外の処理をrequestIdleCallback内で実行させたりすればパフォーマンスの改善にはとても効きそう。

requestIdleCallbackなし

requestIdleCallbackあり

ただ…

これもChrome向け…

いや使っていきましょう!

ご成長ありがとうございました

Made with Slides.com