DOM操作は重たいという印象があります。そのためjQueryなどでDOMを指定する操作を繰り返すともたつきを感じることがあるでしょう。軽くするテクニックは幾つかありますが、基本はDOM操作を行わないことだと言えます。 今回はリストをフィルタリングする操作を高速に行うJets.jsを紹介します。

Jets.jsの使い方

これはデモです。右側にあるリストを指定した文字でフィルタリングしていきます。

実際に行っているところです。文字が入力されるたびにリストが絞られていきます。一番上はスタイルを使った場合、中央はクラス、そして一番下はJets.jsを使った場合です。

スタイルを使った場合にくらべて2倍近くパフォーマンスがあがっています。Jets.jsは任意のタグに対して適用できます。以下はリストタグとDIVタグで使っているところです。

Jets.jsを使うことでDOMの高速なフィルタリングができます。DOMで組んだリストをフィルタリングするのも良いですし、検索機能に使うのも面白そうです。

Jets.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Jets.js NeXTs/Jets.js