パフォーマンスという概念が存在しない初心者の世界

Shota Kubota / @kubosho_

自分が初心者の頃にしたしくじりを話します

自己紹介

kubosho_

CSS オジサン

今度の冬コミで新刊・既刊それぞれ一種類ずつ頒布

別のサークルに記事を一つ寄稿する予定

(既刊) Steins;Git 第二版

(新刊) サイト制作の START:DASH!!

毎月第三週にもくもく会やってます

W3C CSS Module 仕様書もくもく会@東京 - connpass

私と JavaScript

JavaScript を書き始めたのは 2012 年 7 月から

案件で使わざるを得ない状況になった

それまで触ろうと思っていたが触ってなかった

かなりしくじってきた

今日はしくじりを二つ紹介します

しくじりその一

for (var i = 0; i < items.length; i++) { ... }

よく言われているのは以下のようにすると早い

for (var i = 0, l = items.length; i < l; i++) { ... }

推測せずに jsPerf で測ってみる

[rev 1] array.length vs. cached · jsPerf

[rev 28] array.length vs. cached · jsPerf

コードの書き方によっては約 2 割遅くなる

しくじりその二

DOM ツリーにその都度要素を追加する

要素を逐次 DOM ツリーへ追加する例

for (var i = 0, l = hiragana.length; i < l; i++) {
  var div = document.createElement("div");
  div.textContent = hiragana[i];

  outputE.appendChild(div);
}
						

一旦 documentFragment に追加してから DOM ツリーへ追加する例

var fragment = document.createDocumentFragment();

for (var i = 0, l = hiragana.length; i < l; i++) {
  var div = document.createElement("div");
  div.textContent = hiragana[i];

  fragment.appendChild(div);
}

outputE.appendChild(fragment);
						

後者のほうが DOM ツリーへの要素追加が一回で済む分早くなりそう

やはり推測せずに実際に測ってみよう

append only vs append with documentFragment · jsPerf

Firefox だと逐次 appendChild() する方法は遅い

データ量が増えた時の挙動

[rev 2] append only vs append with documentFragment · jsPerf

逐次 DOM ツリーへ追加した時に Firefox はデータ量が増えれば増えるほど比例して遅くなる

まとめ

var i = 0, l = items.length; は書き方によっては遅くなる

逐次 DOM ツリーへ追加するのではなく、documentFragment を使ってまとめて追加する

ブラウザは進化し続けている

今後、計測結果が変わる可能性が大いにある

パフォーマンスチューニングは推測ではなく計測しよう

終わり

- ブログ: http://blog.kubosho.com
- Twitter: kubosho_
- GitHub: kubosho
- イカID: kubosh0