Twitter で使用されているオープンソースがまとめられています。
bootstrap
http://twitter.github.com/bootstrap/
Webアプリケーション(サイト)の開発をより簡単にスタートするために設計されたHTML、CSS、およびJSツールキットです
その他、Twitter で使用されているオープンソースまとめはこちら↓
http://twitter.github.com/
月刊「Twitter で使用されているオープンソースまとめ」
Reply
Author Archives: admin
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. コードはシンプル、軽量をキープしてください
シンプル、軽量をキープするには以下のような質問をする：
“実際にこのモジュールが必要ですか？”
“なぜこのフレームワークを使用している？オーバーヘッドの価値がある？”
“単純な方法でこれを行うことはできますか？”
小型、軽量化コードは通常、より効率的で高速です。
知っておきたい8つのサーバーリソース(ネットワーク)監視ツール
サーバーで何か問題が発生した場合、解決する為にこれらの監視ツールを使うと良いでしょう。
フリーおよびオープンソースのサーバーおよびネットワークの監視ツールはたくさんあります。
1.Munin
munin-graph
動作DEMO
これはCPU使用率、メモリ、ディスク容量のようなコアのシステムリソース、MySQL、Apacheのようなサーバーアプリケーションを監視することができます。
インストール方法や使い方については、
CentOS 5.4 に munin(サーバー監視ツール) をインストール MRTG/cacti
の記事を参考にしてください。
2.Cacti
cacti
これはMunin によく似ています。しかし、グラフのサイズを変更し任意の範囲で閲覧出来る事が違う点です。
Munin は1日、1週間、1ヶ月など固定の期間ですが、Cacti は直近の2時間、直近の4日間など自由な期間で表示する事が出来ます。
3.Nagios
nagios
このツールの提供元は、nagios が”ITインフラ監視の業界標準”であることを述べています。
確かにその通りかも知れません。多くのサイトで利用実績があるようです。
4.Zabbix
zabbix
機能的にはNagios と似ています。
5.observium
observium
こちらもNagios にも劣らず機能豊富です。
動作DEMO
6.ganglia
ganglia
動作DEMO
7.monit
monit
8.zenoss
zenoss
これは、Zenoss Enterpriseと呼ばれる商用サーバ監視ツールのオープンソース版です。Nagiosのプラグインフォーマットをサポートしているので、様々なNagiosのプラグインはZenossでも利用することができます。
さくらのVPS Apache+MySQL+PHPのインストール(LAMP環境構築)
さくらのVPS Apache+MySQL+PHPのインストール(LAMP環境構築)
さくらのVPS
こちらの記事の続きという位置付なので事前に読んでおくと幸せになれるかも:)
さくらのVPSに(CentOS6より良い)Scientific Linux6をインストール
さくらのVPS ログレポート(logwatch)と不正アクセス拒否(denyhosts)のインストール
まずは、最新版のMySQL やPHP を入れるために
yum リポジトリの追加
・epel
# さくらのVPS ログレポート(logwatch)と不正アクセス拒否(denyhosts)のインストール
# の記事等を実施していて
# 既に入っているのであれば必要ありません。
$ sudo rpm --import http://download.fedora.redhat.com/pub/epel/RPM-GPG-KEY-EPEL-6 $ sudo rpm -Uvh http://download.fedora.redhat.com/pub/epel/6/x86_64/epel-release-6-5.noarch.rpm
・remi
$ sudo rpm --import http://rpms.famillecollet.com/RPM-GPG-KEY-remi $ sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
・rpmforge
$ sudo rpm --import http://apt.sw.be/RPM-GPG-KEY.dag.txt $ sudo rpm -Uvh http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.2-2.el6.rf.x86_64.rpm
Apache のインストール
$ sudo yum install httpd httpd-devel
Apache の不要なモジュール読み込み停止など
下記サイトを参考に実施
参考サイト:)
ウェブ開発者のための、1時間でできるLAMP環境構築術（CentOS編）
http://tanaka.sakura.ad.jp/netservice/vps/
結果：
$ diff httpd.conf.origin httpd.conf 44c44 < ServerTokens OS --- > ServerTokens Prod 70c70 < Timeout 60 --- > Timeout 45 105c105 < MaxSpareServers 20 --- > MaxSpareServers 10 107,108c107,108 < MaxClients 256 < MaxRequestsPerChild 4000 --- > MaxClients 30 > MaxRequestsPerChild 800 119,120c119,120 < StartServers 4 < MaxClients 300 --- > StartServers 2 > MaxClients 150 151c151 < LoadModule auth_digest_module modules/mod_auth_digest.so --- > #LoadModule auth_digest_module modules/mod_auth_digest.so 153,156c153,156 < LoadModule authn_alias_module modules/mod_authn_alias.so < LoadModule authn_anon_module modules/mod_authn_anon.so < LoadModule authn_dbm_module modules/mod_authn_dbm.so < LoadModule authn_default_module modules/mod_authn_default.so --- > #LoadModule authn_alias_module modules/mod_authn_alias.so > #LoadModule authn_anon_module modules/mod_authn_anon.so > #LoadModule authn_dbm_module modules/mod_authn_dbm.so > #LoadModule authn_default_module modules/mod_authn_default.so 159,164c159,164 < LoadModule authz_owner_module modules/mod_authz_owner.so < LoadModule authz_groupfile_module modules/mod_authz_groupfile.so < LoadModule authz_dbm_module modules/mod_authz_dbm.so < LoadModule authz_default_module modules/mod_authz_default.so < LoadModule ldap_module modules/mod_ldap.so < LoadModule authnz_ldap_module modules/mod_authnz_ldap.so --- > #LoadModule authz_owner_module modules/mod_authz_owner.so > #LoadModule authz_groupfile_module modules/mod_authz_groupfile.so > #LoadModule authz_dbm_module modules/mod_authz_dbm.so > #LoadModule authz_default_module modules/mod_authz_default.so > #LoadModule ldap_module modules/mod_ldap.so > #LoadModule authnz_ldap_module modules/mod_authnz_ldap.so 167c167 < LoadModule logio_module modules/mod_logio.so --- > #LoadModule logio_module modules/mod_logio.so 169,172c169,172 < LoadModule ext_filter_module modules/mod_ext_filter.so < LoadModule mime_magic_module modules/mod_mime_magic.so < LoadModule expires_module modules/mod_expires.so < LoadModule deflate_module modules/mod_deflate.so --- > #LoadModule ext_filter_module modules/mod_ext_filter.so > #LoadModule mime_magic_module modules/mod_mime_magic.so > #LoadModule expires_module modules/mod_expires.so > #LoadModule deflate_module modules/mod_deflate.so 174c174 < LoadModule usertrack_module modules/mod_usertrack.so --- > #LoadModule usertrack_module modules/mod_usertrack.so 181c181 < LoadModule dav_fs_module modules/mod_dav_fs.so --- > #LoadModule dav_fs_module modules/mod_dav_fs.so 185,186c185,186 < LoadModule actions_module modules/mod_actions.so < LoadModule speling_module modules/mod_speling.so --- > #LoadModule actions_module modules/mod_actions.so > #LoadModule speling_module modules/mod_speling.so 189c189 < LoadModule substitute_module modules/mod_substitute.so --- > #LoadModule substitute_module modules/mod_substitute.so 193c193 < LoadModule proxy_ftp_module modules/mod_proxy_ftp.so --- > #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so 195,197c195,197 < LoadModule proxy_ajp_module modules/mod_proxy_ajp.so < LoadModule proxy_connect_module modules/mod_proxy_connect.so < LoadModule cache_module modules/mod_cache.so --- > #LoadModule proxy_ajp_module modules/mod_proxy_ajp.so > #LoadModule proxy_connect_module modules/mod_proxy_connect.so > #LoadModule cache_module modules/mod_cache.so 199c199 < LoadModule disk_cache_module modules/mod_disk_cache.so --- > #LoadModule disk_cache_module modules/mod_disk_cache.so 331c331 < Options Indexes FollowSymLinks --- > Options -Indexes FollowSymLinks 493a494,498 > # ログ記録対象外の設定 > # > SetEnvIfNoCase Request_URI "\.(gif|jpg|jpeg|css|png|js)$" nolog_object > > # 526c531 < CustomLog logs/access_log combined --- > CustomLog logs/access_log combined env=!nolog_object 536c541 < ServerSignature On --- > ServerSignature Off 759c764 < AddDefaultCharset UTF-8 --- > #AddDefaultCharset UTF-8
・自動起動ON
$ sudo /sbin/chkconfig httpd on
・httpd起動
$ sudo /etc/init.d/httpd start
MySQL のインストール
$ sudo yum --enablerepo=remi install mysql-{devel,server}
——————-
Cannot find a valid baseurl for repo: remi
※とエラーが出たので、「/etc/yum.repos.d/remi.repo」を修正します。
$ diff remi.repo.origin remi.repo 4c4 < mirrorlist=http://rpms.famillecollet.com/enterprise/$releasever/remi/mirror --- > mirrorlist=http://rpms.famillecollet.com/enterprise/6/remi/mirror
単純に$releasever(多分6.1に展開される)を6 に変えただけです
他に良い方法があるかと思うのですが。。
——————-
MySQLの設定(安全な設定やmy.cnfなど)
・自動起動ON
$ sudo /sbin/chkconfig mysqld on
・MySQL起動
$ sudo /etc/init.d/mysqld start
・安全な利用をする為に以下コマンドを実行
※root のパスワード無しや、デフォルトのtestデータベースを削除する事ができます
$ /usr/bin/mysql_secure_installation
最初はroot ユーザーで接続します(Enterをそのまま押せば良いです)
Enter current password for root (enter for none):
次に、root のパスワードを設定するか？と聞かれるのでYES
Set root password? [Y/n] y
New password: ★お好きなパスワードを入力
Re-enter new password: ★もう一度入力
Password updated successfully!
Reloading privilege tables..
... Success!
デフォルトの匿名ユーザーを削除する？YES
Remove anonymous users? [Y/n] y
リモートからのroot ログインを拒否する？YES
Disallow root login remotely? [Y/n] y
testデータベースを削除する？YES
Remove test database and access to it? [Y/n] y
上記の設定を反映させる？YES
Reload privilege tables now? [Y/n] y
All done! If you've completed all of the above steps, your MySQL
installation should now be secure.
Thanks for using MySQL!
てな感じになればOKです！
・my.cnf の設定
$ sudo mv /etc/my.cnf /etc/my.cnf.origin $ sudo cp /usr/share/doc/mysql-server-5.5.17/my-medium.cnf /etc/my.cnf $ sudo /etc/init.d/mysqld restart
PHP のインストール
$ sudo yum --enablerepo=remi install php php-{devel,gd,mbstring,mcrypt,mysql,pear}
・PHPコンパイラのapcをインストール
$ sudo yum --enablerepo=remi install php-pecl-apc
phpMyAdminのインストール
$ sudo yum --enablerepo=remi install phpMyAdmin
$ sudo cp -p /etc/phpMyAdmin/config.inc.php /etc/phpMyAdmin/config.inc.php.origin
※$cfg['blowfish_secret'] の値を適当な値に書き換えます
$ sudo vi /etc/httpd/conf.d/phpMyAdmin.conf
※allow from [IPアドレス]
・Apache 再起動
$ sudo /etc/init.d/httpd restart
参考サイト:)
ウェブ開発者のための、1時間でできるLAMP環境構築術（CentOS編）
http://tanaka.sakura.ad.jp/netservice/vps/
さくら VPS + CentOS のチューニングや高速化もっとこうすれば良かった作業まとめ
http://weble.org/2011/08/14/centos-config