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

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が起きないので書き換えると良さそうです。