Twitter で使用されているオープンソースがまとめられています。
bootstrap
http://twitter.github.com/bootstrap/
Webアプリケーション(サイト)の開発をより簡単にスタートするために設計されたHTML、CSS、およびJSツールキットです
その他、Twitter で使用されているオープンソースまとめはこちら↓
http://twitter.github.com/
SELECT * FROM engineer_life;
Twitter で使用されているオープンソースがまとめられています。
http://twitter.github.com/bootstrap/
Webアプリケーション(サイト)の開発をより簡単にスタートするために設計されたHTML、CSS、およびJSツールキットです
その他、Twitter で使用されているオープンソースまとめはこちら↓
http://twitter.github.com/
jQueryのパフォーマンス高速化Tipsのヒントリストです。
jQueryで要素を選択する最速の方法は、IDによるものです。
$('#content').hide(); $('#content p').hide();
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
var header = $('#header'); var menu = header.find('.menu'); // or var menu = $('.menu', header);
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
セレクタをキャッシュするよりも、チェーンのjQueryメソッドをすると良いでしょう
$('#menu-item').click(function () {alert('test click');}) .css('display', 'block') .css('color', 'red') fadeTo(2, 0.7);
var header = $('#header'); var divs = header.find('div'); var forms = header.find('form');
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>'); }
// Instead of: $(document).ready(function (){ // your code }); // you can do: $(function (){ // your code });
最新バージョンは、通常、最良のものです。ただし、jQueryのコアバージョンを変更した後、コードをテストすることを忘れないでください。時にはそれは完全な下位互換性はありません。
HTML5は軽量なDOM構造の標準を念頭にしています。軽量なDOM構造は、jQueryとロードのパフォーマンスに良い結果をもたらします。
だから、可能な場合はHTML5 を使用。
不要なJSコードとセレクタをロードしないでください。
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 を最近始めました。レスポンスが凄く早くてサクサク気持ちいいです!
リアルタイムが求められるWebアプリケーションには適していると思います。
そんなNode.js を更に高速化する為の10個のヒントを紹介します。
例えば、多くのファイルシステム操作は、非同期や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!");
Node.js HTTPクライアントは、自動的にソケットプーリング使用しています。
それは深刻なボトルネックになります。これらのシナリオで、それはmaxSocketsを増やしたり、完全にソケットプーリングを無効にすることをお勧めします。
// Disable socket pooling var http = require('http'); var options = {.....}; options.agent = false; var req = http.request(options)
CSSや画像などの静的ファイルの場合は、Node.jsの標準的なWebサーバは使用しない。代わりに例えば、nginx等を使用します。
また、コンテンツデリバリーネットワーク(CDN)も活用する。これには2つの利点があります:
(1)Node.jsのサーバーの負荷を軽減し、
(2)CDNは、静的コンテンツが遅延を低減、ユーザーの近いサーバから配信することができます。
簡単にページのサーバー側とクライアント側のレンダリングを比較してみましょう。
<!-- 簡単な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>
ほとんどのサーバーとクライアントは、要求と応答の圧縮にはgzip形式をサポートしています。
すべてのブロッキング操作を並列に実行してみてください
それは、リモートサービス、DBの呼び出し、およびファイルシステムへのアクセスへの要求です。
これはどちらかというと、シーケンス内のそれぞれの合計よりもブロック操作の遅いものまで待ち時間が削減されます。
コールバックとエラー処理を清潔に保つために、フロー制御のためのステップを使用してください。
リクエスト/レスポンスのサイクルを管理するためのフレームワークの
ほとんどの例では次の設定が含まれています。
app.use(express.session({ secret: "keyboard cat" }));
デフォルトでは、セッションデータはメモリに格納されています。
MongoDBやRedisのような外部セッションストアに切り替えることもできますが、
セッションのデータをフェッチするリモート呼び出しのオーバーヘッドが生じることになります。
可能であれば、最良のオプションは、すべてにおいて、サーバー側では状態を保存しないことです。
セッション設定上記の明示を含めないことにより自由に移動し、より良いパフォーマンスを得ることができます。
使用可能な場合、バイナリのモジュールを使用してください。例えば、Node.jsが付属してコンパイルされたバージョンにJavaScriptで記述されたSHAモジュールから切り替えたときに、大きなパフォーマンスの改善が見られた。
// Use built in or binary modules var crypto = require('crypto'); var hash = crypto.createHmac("sha1",key).update(signatureBase).digest("base64");
クライアント側のライブラリは通常、ブラウザの違いを克服するために非効率的なコードがたくさんある。
クライアントライブラリの代わりに直接標準的なV8の機能を使用することにより、大幅なパフォーマンス向上が表示されることがあります。
シンプル、軽量をキープするには以下のような質問をする:
“実際にこのモジュールが必要ですか?”
“なぜこのフレームワークを使用している?オーバーヘッドの価値がある?”
“単純な方法でこれを行うことはできますか?”
小型、軽量化コードは通常、より効率的で高速です。