最近の業務ではフロントエンドの最適化もやっているのですが、そこで奇妙な現象に遭遇しました。
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が起きないので書き換えると良さそうです。
