読者です 読者をやめる 読者になる 読者になる

ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

PassiveEventsListenerを試験的に入れた

EventListenerOptions/explainer.md at gh-pages · WICG/EventListenerOptions · GitHub

今個人的に熱いと思っている↑を、関わっているプロジェクトに試験的に入れることにしてみた。 入れることにした理由としては、

  • スクロール時に発生するイベントが多い画面があるので、少しでも軽くしていきたいと考えた。
  • ブラウザ対応が割と進んできた。(IE11から目を逸しながら)

この辺りが大きい。ブラウザの対応状況については↓を見ると良い。 http://caniuse.com/#search=passive

Safariも10以降であれば対応しているので、iOSユーザが多めなサービスであれば、入れるメリットが大きいと思う。

polyfillを書く

少し調べたらpolyfillはちょこちょこ見つかったのだが、最小限の実装で済ませたかったので自前で簡単に書いた。 解説とサンプル説明をQiitaにも上げているので、興味のある人はご覧ください。

間違った説明とかしてたら指摘頂けると助かります。

入れた感触

「目に見えて軽くなった!」という程ではないが、スクロールの詰まりは多少改善されたように思える。 特にモバイルで、「スクロールに追従する要素」「lazyload」のコンボをキメている画面については大分マシになった印象を受けた。

更なる改善

スクロールに追従する要素については改善し切れていないので、position:stickyの先行導入を検討中。

stickyの導入でスクロール時の負荷がより減ると良いのだが、どうなるかはまだよく分からない。