フロントエンド高速化

フロントエンドの高速化は、多くのサービスにとって必須課題です。特に、最新はHTMLやCSSだけでリッチなフロントが作られるからこそ、うまく工夫しないとカクついたり、少し重くなったりといった弊害が発生します。

例えば、ブラウザでは初回のレンダリング後に、JSの処理やユーザーのアクションによる再描画が発生することがあります（Repaint, Reflow）。
こういった再描画により、サイトが重くなることがありますので、できるだけ減らすことが効率的な高速化につながります。
そのためには、発生タイミングを知り、JSやCSSの最適化により対策をうっていきましょう。

また、この記事では、CSSやJSの最適化についても、具体的な事例とともに紹介されているので、フロントエンドの高速化に取り組みたい人は参考にしてみましょう。

jQuery高速化基本

.each()をforに置き換え
ループ内でオブジェクト生成はしない
DOM操作は一度にまとめて行う

セレクタ

ユニバーサルセレクタは避ける

$( '.hoge > *' ) // Bad
$( '.hoge' ).children() // Good

$( '.hoge :text' ) // Bad
$( '.hoge *:text' ) // Bad
$( '.hoge input:text' ) // Good

findを利用する

$( '.hoge .fuga' ) // Bad
$( '.hoge' ).find( '.fuga' ) // Good

イベントハンドラ

・イベントハンドラは各要素につけるのではなく親要素につける
・できればroot

// Bad
$( "$hoge ul li" ).on( "click", function( event ) { } );

// Good
$( "$hoge ul" ).on( "click", "li", function( event ) { } );

Selectorでreflow

・contextを指定時に複数セレクターを参照Sizzleがidをつけてしまいreflowが発生する

let context = $('.piyo');
$('.hoge, .fuga', context); // reflowが起きる

$('.hoge', context); // 起きない
$('.piyo .hoge', '.piyo .fuga'); // 起きない