Kinopyo Blog

プログラマとしてRuby, Rails, iPhone, iPad,Macなどなどと向き合う日々のログポース

Posts Tagged ‘Performance’

さくらVPSのパフォーマンスチューニング

2011年11月11日

さくらVPSでWordpressブログをやってます。そんなにアクセスがないはずなのに、さくらVPSに移行した当時は結構サーバが落ちました。topコマンドで見るとスワップが結構70%まで上がったりして、手動でapache再起動とかもやりました。。ネットでいろいろググッてそれなりにパフォーマンスチューニングした結果やっと安定して、同じサーバに2つのWordpressブログと一つのRailsアプリケーションを実行しています。

参考までにさくらVPSは一番安いの512MB、月1000円のプランで、平日だとこのブログの一日PVは大体500〜600です。

チューニングしてから結構時間が経ったのでだいぶ忘れました。Evernoteでのメモを貼ります。

効果が高い順で。

WordPress

W3 Total Cache プラグインが一押しです。インストールも設定も簡単ですし、一番効果があります。

ページのキャッシュ、cssやjavascriptのマージと圧縮など、結構やってくれます。実際これだけ入れても感じるほど早くなるはずです。

Apache

httpd.confを編集します。いろいろ修正してみましたが、結果下記の設定にしました。この辺はググったら結構出ますが、それぞれの環境に合わせて試行錯誤したほうがオススメです。


<IfModule prefork.c>

StartServers       5

MinSpareServers    5

MaxSpareServers   10

ServerLimit      64

MaxClients       64

MaxRequestsPerChild  50

MaxMemFree 2000

</IfModule>

PHP

/etc/php.ini

zlib.output_compression = On

APC

pecl install APC

jQueryセレクタのパフォーマンス:elem vs id

2010年05月17日

elem指定とID指定のjQueryセレクタパフォーマンス実験を行いました。

“先にJavascriptでelementをとってそれをjQueryの$セレクタに囲むやつ”

vs

“直接jQueryのidセレクタでとるやつ”。


コードで言うと

$(document.getElementById(“foo”))

vs

$(“#foo”)


普通前者が勝だろうと思うだろう、

どれくらいの差かを確認したくて。

結果

一万回ループでとった結果です。

  • IE8: 187 vs 344
  • IE6: 203 vs 453
  • Firefox×(3.6.3): 21 vs 63
  • Chrome(4.1.xx): 9 vs 39

サンプルコード

デモページへ

var t0 = new Date();

for (var i=0; i<10000; i++){
	$(document.getElementById("foo"));
}

var t1 = new Date();

for (var i=0; i<10000; i++){
	$("#foo");
}

var t2 = new Date();

alert("直接elementを渡す時間は:" + (t1-t0) + " , ID指定でとる時間は:"+ (t2-t1));

jQueryパフォーマンス:DOM操作について

2010年03月26日

DOM操作を避けてjQueryのパフォーマンスを改善する掟です。

こんなコードがあるとしましょう。

パフォーマンスの悪い例

var list = [....];    // 長さ100の配列とする

for (var i in list) {

    var li = document.createElement("li");

    $(li)
       .attr("id", "li" + i)
       .text(list[i]);

$("ul").append(li);

}

改善したコード

var list = [....];    // 長さ100の配列とする

var li = "";
for (var i in list) {

    li += "<li id='li" + i "'>" + list[i] + "</li>";

}

$("ul").html(li);

まとめ

  • document.createElementの代わりにHTMLの文字列を作る
  • jQueryオブジェクトに属性やテキストを設定するのではなく、直接HTML文字列に書く
  • for文内毎回appendの代わりにhtml()を使う

実際のプロジェクトでやってみたら10倍以上は速くなりました。

とは言ってもこれはIE6でのパフォーマンスで、

FirefoxやIE8だと悪い例のコードても遅いとは実感できないくらいでした。

ちなみに

$(li).attr(…).val(…).text(…)の方は読みやすいので結構気に入ったんですけど。。。

Javascriptのforループのパフォーマンスのいい書き方

2010年02月22日

面白いかと思ったのでメモしときます。

普通の書き方

var rows = document.getElementsByTagName('tr');

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

   rows[i].className = 'newclass';

   rows[i].style.color = 'red';
  ...
}

効率のいい書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0, row; row = rows[i]; i++ ) {

    row.className = 'newclass';

    row.style.color = 'red';
    ...
}

参考サイト:您的访问请求被拒绝 – ITeye技术社区