要約

  • 2017年9月14日のW3C初公開作業草案は、対象の要素が容器または表示領域との交差のしきい値を越えたとき、非同期で通知する仕組みを示した。
  • 長いページは画像や内容を後回しにでき、スクロールのたびに配置を調べる必要が減る。通知後に何をするかはアプリケーションが選ぶ。

旅館の番頭が、まだ来ていない荷物を確かめるために玄関まで何度も走る。荷物は次の便だというのに、五分後にはまた見に行く。そこで配達員が「着いたらベルを鳴らします」と言う。Intersection Observerが長いウェブページにした提案も、これに近い。画面のずっと下にある画像の位置を何度も読み取る代わりに、必要な境界に届いたとき知らせてもらう。

2017年9月14日に公開されたW3Cの最初の作業草案は、古い方法の負担から話を始める。要素の位置を明示的に問い合わせると、スタイルやレイアウトの再計算が発生しうる。スクロール時に繰り返し問い合わせれば、動きが引っ掛かる原因にもなる。草案が挙げた用途は、内容の先読みと遅延読み込み、大きなリストの一部だけの描画、要素と表示領域との位置関係の把握だ。一定の性能向上率を約束した文書ではない。質問の方法を変えた文書である。

仕組みには、見張る対象と、比較するルートがある。ルートは指定した容器でもよいし、省略したときは上位の表示領域が基準になる。IntersectionObserverを作るときに通知用の関数と選択条件を渡す。observe(target)で一つの対象を見始め、unobserve(target)でその対象の監視をやめ、disconnect()で全部を終える。交差状態が定めたしきい値をまたぐと、通知の関数に記録が届く。番頭は玄関を見続ける代わりに、ベルの音を待てる。

ベルを鳴らす位置は調整できる。rootMarginは計算に使うルートの長方形を広げたり狭めたりする。画像が実際の画面に入る少し前から準備したいなら、手前に境界を置ける。thresholdは交差する割合のどの地点で通知するかを決める。記録には対象、時刻、対象の矩形、交差した矩形、intersectionRatioが含まれる。次の写真を早めに読み込む記事と、もっと近づいてから項目を描く一覧は、同じ計測器で異なる運用ができる。

通知は命令ではない。ブラウザーは「境界を越えた」と知らせるが、画像を取得するか、カードを表示するか、リストを伸ばすかはページに任される。草案は遅延読み込みでのunobserve()の意味にも触れている。一度画像が必要になり処理が済めば、その対象を追い続ける理由は薄い。届いた荷物について配達員から一生通知を受け続ける人はいない。

非同期という性質には理由がある。2017年の草案は、この種の用途に厳密な即時性は要らないと説明した。少し遅れて境界の通過を知ってもよいなら、スクロールのたびに同期的なレイアウト読み取りを強いる必要がない。また、フィルターや合成処理を経て実際に表示された全ピクセルを正確に突き止めることも設計目標から外した。APIが示すのは仕様に沿った幾何学的な交差だ。写真を人が見つめたか、気に入ったかは測っていない。

現在公開されているW3Cの草案にも、対象とルート、しきい値、非同期の通知という骨格が残る。W3Cの刊行履歴は2017年9月の初公開作業草案から、2023年10月までの作業草案を列挙している。刊行日は文書の歩みを示すもので、どのブラウザーにいつ広まったかの統計ではない。2023年の文書も履歴上はWorking Draftである。

この小さな道具は、対象が多いときほど働く。長い商品一覧は複数のカードを一つの観測器で見守り、近づいたものだけ準備できる。写真記事は次の一枚の取得を早めに始められる。役目を終えた項目は観測から外せる。それぞれのサイトがスクロール監視と位置計測の仕組みを丸ごと手作りするより、共通の合図を使うほうが仕事の境界が明瞭になる。

境界を越えた記録を、読者の関心の証明に化けさせてはならない。intersectionRatioは、決められた計算で長方形が重なる割合を表す。人はその写真を読んだかもしれないし、飛ばしたかもしれない。旅館のベルが知らせるのは荷物の到着であって、宿泊客が中身を喜んだかどうかではない。答えられる問いに絞ったから、この合図は信頼できる。

Intersection Observerの歴史は、ウェブが「まだ？」という問いを減らした歴史だ。ページは見たい距離を指定する。ブラウザーは境界が変わったときに知らせる。画像が近づくまで、番頭は目の前の客の仕事に戻れる。