Webエンジニアのメモ | SELECT * FROM engineer

月刊「Twitter で使用されているオープンソースまとめ」

Twitter で使用されているオープンソースがまとめられています。

bootstrap

http://twitter.github.com/bootstrap/

Webアプリケーション(サイト)の開発をより簡単にスタートするために設計されたHTML、CSS、およびJSツールキットです

その他、Twitter で使用されているオープンソースまとめはこちら↓
http://twitter.github.com/

jQueryのパフォーマンス高速化Tipsまとめ

jquery-logo

jQueryのパフォーマンス高速化Tipsのヒントリストです。

セレクタのパフォーマンスのヒント

1. 常に#ID から辿る

jQueryで要素を選択する最速の方法は、IDによるものです。

$('#content').hide();
$('#content p').hide();

2. クラスの前にタグを使用

jQueryで2番目に早いセレクタは、タグセレクタ（$（’head’））です。
なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName（）だからです。
最良の方法は、接頭辞にタグ名（およびIDから派生）を持つクラスです。

var receiveNewsletter = $('#nslForm input.on');

クラスセレクタは、jQueryの最も遅いセレクタのひとつです
可能な限りそれ(タグ名とIDの接頭辞無し)を使用することは避けてください。

例えば、これは遅いです。”content”のIDを探す為に、div要素を全てループするからです。

var content = $('div#content'); // VERY SLOW, AVOID THIS

また、複数のID指定も遅いです。

var traffic_light = $('#content #traffic_light'); // VERY SLOW, AVOID THIS

3. サブクエリを使用

var header = $('#header');

var menu = header.find('.menu');
// or
var menu = $('.menu', header);

4. find()を使用

var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

5. チェーンメソッドを活用

セレクタをキャッシュするよりも、チェーンのjQueryメソッドをすると良いでしょう

$('#menu-item').click(function () {alert('test click');})
                     .css('display', 'block')
                     .css('color', 'red')
                     fadeTo(2, 0.7);

DOM操作のパフォーマンスのヒント

6. jQueryオブジェクトをキャッシュ

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

7. DOM挿入のいずれかの種類を実行するときに単一の要素のすべてをラップする

DOM操作は非常に遅いです。できるだけ少なくしてHTML構造を変更してみてください。

var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
    menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);

// 代わりにこちら:

$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
    $('#menu').append('<li>' + i + '</li>');
}

イベントのパフォーマンスのヒント

8. readyイベント

// Instead of:
$(document).ready(function (){
    // your code
});

// you can do:

$(function (){
    // your code
});

一般的なjQueryのパフォーマンスのヒント

9. jQueryの最新バージョンを使用

最新バージョンは、通常、最良のものです。ただし、jQueryのコアバージョンを変更した後、コードをテストすることを忘れないでください。時にはそれは完全な下位互換性はありません。

10. HTML 5を使用

HTML5は軽量なDOM構造の標準を念頭にしています。軽量なDOM構造は、jQueryとロードのパフォーマンスに良い結果をもたらします。
だから、可能な場合はHTML5 を使用。

11. 必要とされていないコードをロードしない

不要なJSコードとセレクタをロードしないでください。

12. Googleソースコードからフレームワークをロードする

Google CDNからjQueryをロードする – ユーザーの最寄りのキャッシュの場所からスクリプトを高速に実現します。

// Link the minified version by specific version
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Node.js パフォーマンス高速化の為の10個のヒント

nodejs-logo

Node.js を最近始めました。レスポンスが凄く早くてサクサク気持ちいいです！
リアルタイムが求められるWebアプリケーションには適していると思います。

そんなNode.js を更に高速化する為の10個のヒントを紹介します。

1. 同期コードを避ける

例えば、多くのファイルシステム操作は、非同期やWriteFileおよびwriteFileSyncなどの同期バージョンの両方を持っている。
あなた自身のコード内で同期メソッドを避ける場合であっても、それは誤ってブロッキング呼び出しを持っている外部ライブラリを使用することも可能です。
この操作を行うと、パフォーマンスへの影響は劇的です。

// Good: ファイルを非同期で書き込む
fs.writeFile('message.txt', 'Hello Node', function (err) {
  console.log("It's saved and the server remains responsive!");
});

// BAD: ファイルを同期で書き込む
fs.writeFileSync('message.txt', 'Hello Node');
console.log("It's saved, but you just blocked ALL requests!");

2. ソケットプーリングをオフにする

Node.js HTTPクライアントは、自動的にソケットプーリング使用しています。
それは深刻なボトルネックになります。これらのシナリオで、それはmaxSocketsを増やしたり、完全にソケットプーリングを無効にすることをお勧めします。

// Disable socket pooling

var http = require('http');
var options = {.....};
options.agent = false;
var req = http.request(options)

3. 静的ファイルにはNode.jsを使用しないでください

CSSや画像などの静的ファイルの場合は、Node.jsの標準的なWebサーバは使用しない。代わりに例えば、nginx等を使用します。
また、コンテンツデリバリーネットワーク（CDN）も活用する。これには2つの利点があります：
（1）Node.jsのサーバーの負荷を軽減し、
（2）CDNは、静的コンテンツが遅延を低減、ユーザーの近いサーバから配信することができます。

4. クライアント側でレンダリングする

簡単にページのサーバー側とクライアント側のレンダリングを比較してみましょう。

<!-- 簡単なWebページの例は、完全にサーバー側でのレンダリング -->

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js</title>
  </head>
  <body>
    <div class="header">
      <img src="http://example.com/images/example.png" alt=""/>
    </div>
    <div class="body">
      Hello John!
    </div>
  </body>
</html>

ユーザーの名前を除いて、静的であることに注意してください：
効率的なアプローチは、Node.jsがJSONとしてページに必要な動的データのみを返すようにすることです。

// return json data.
{"name": "John"}

ページの残りの部分 – 全て静的なHTMLマークアップは、 – JavaScriptのテンプレートに入れることができます。

<!-- クライアント側でレンダリングすることができるJavaScriptのテンプレートの例 -->

<!DOCTYPE html>
<html>
  <head>
    <title>Node.js</title>
  </head>
  <body>
    <div class="header">
      <img src="http://example.com/images/example.png" alt=""/>
    </div>
    <div class="body">
      Hello <%= name %>!
    </div>
  </body>
</html>

5. gzipを使用してください

ほとんどのサーバーとクライアントは、要求と応答の圧縮にはgzip形式をサポートしています。

6. 並列処理を活用してください

すべてのブロッキング操作を並列に実行してみてください
それは、リモートサービス、DBの呼び出し、およびファイルシステムへのアクセスへの要求です。
これはどちらかというと、シーケンス内のそれぞれの合計よりもブロック操作の遅いものまで待ち時間が削減されます。
コールバックとエラー処理を清潔に保つために、フロー制御のためのステップを使用してください。

7. Go session-free

リクエスト/レスポンスのサイクルを管理するためのフレームワークの
ほとんどの例では次の設定が含まれています。

app.use(express.session({ secret: "keyboard cat" }));

デフォルトでは、セッションデータはメモリに格納されています。
MongoDBやRedisのような外部セッションストアに切り替えることもできますが、
セッションのデータをフェッチするリモート呼び出しのオーバーヘッドが生じることになります。
可能であれば、最良のオプションは、すべてにおいて、サーバー側では状態を保存しないことです。
セッション設定上記の明示を含めないことにより自由に移動し、より良いパフォーマンスを得ることができます。

8. バイナリモジュールを使用

使用可能な場合、バイナリのモジュールを使用してください。例えば、Node.jsが付属してコンパイルされたバージョンにJavaScriptで記述されたSHAモジュールから切り替えたときに、大きなパフォーマンスの改善が見られた。

// Use built in or binary modules
var crypto = require('crypto');
var hash = crypto.createHmac("sha1",key).update(signatureBase).digest("base64");

9. クライアント側のライブラリの代わりに、標準的なV8のJavaScriptを使用

クライアント側のライブラリは通常、ブラウザの違いを克服するために非効率的なコードがたくさんある。
クライアントライブラリの代わりに直接標準的なV8の機能を使用することにより、大幅なパフォーマンス向上が表示されることがあります。

10. コードはシンプル、軽量をキープしてください

シンプル、軽量をキープするには以下のような質問をする：
“実際にこのモジュールが必要ですか？”
“なぜこのフレームワークを使用している？オーバーヘッドの価値がある？”
“単純な方法でこれを行うことはできますか？”

小型、軽量化コードは通常、より効率的で高速です。

日	月	火	水	木	金	土
« 2月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30