do7be.exports

寿司の話かエンジニアリングの話

jQuery .findでreflowが発生する

最近の業務ではフロントエンドの最適化もやっているのですが、そこで奇妙な現象に遭遇しました。

jQuery.findという、DOMツリーからセレクタに該当するDOM群のjQueryオブジェクト取得関数があるのですが、これでなぜか実行するたびにreflowが発生していました。

$('.hoge').find('.fuga:not(.piyo)')

このような状況です。jQuery 1.11でも3.0でも起きていました。これがscrollのたびに走っていると、インスペクタの.hogeが点滅し続けます。

いくつかのケースでreflowが発生するかどうか試してみましたが、どうやら.find:notを使用した時のみ発生するようです。

  • $('.hoge')
    • →しない
  • $('.hoge').find('.fuga')
    • →しない
  • $('.hoge').find('.fuga:not(.piyo)')
    • →する
  • $('.hoge').find(':not(.piyo)')
    • →する
  • $(':not(.piyo)')
    • →しない

実装を読んでないので.findでreflowが発生するのが腑に落ちないのですが、このようなケースでは.filterもしくは.notでさらに絞り込めばreflowが起きないので書き換えると良さそうです。