WEBサイトテクニック ITかあさん

ITかあさん

これは使える!国土交通省提供の市区町村取得API

公的機関が提供する市区町村取得APIはないものか!!

画像は関係ないかな

すごい探した!そして見つけた!

WordPressにしろ、自作CMSにしろ何か全国規模のポータルサイトを作りたいと思ったとき、
都道府県ならまだしも、市区町村を手動でぽちぽちしていくのは面倒!
しかも合併などで市区町村名が変わってしまったら都度情報を変更しなければなりません。

また、総務省の指定する「市区町村コード」というのがありまして、「オレ埼玉県民だから埼玉県のIDを1番にしまーす」などの「エンジニアの個人的」な主観でもってコードを決めるのはよくないです。

個人で市区町村コード提供するものもないとはいえないのですが、信頼度を考えると公的機関が提供するAPIサービスがよい!!と思ってずっと探していたら見つけました!

国土交通省 都道府県内市区町村一覧取得API

このAPIは不動産取引価格情報を提供するAPIと一緒に提供されているもので 都道府県番号を指定すると市区町村コードと市区町村名を取得することが出来ます。(シンプル)

URLの例:www.land.mlit.go.jp/webland/api/CitySearch?area=13

戻り値

{
“status”: “OK”,
“data”:[
{
“id”: “13101”,
“name”: “千代田区”
},
{
“id”: “13102”,
“name”: “中央区”
},
{
“id”: “13103”,
“name”: “港区”
},
{
“id”: “13104”,
“name”: “新宿区”
},
URLの例:www.land.mlit.go.jp/webland_english/api/CitySearch?area=13

なお、英語版も用意されています!

{
“status”: “OK”,
“data”:[
{
“id”: “13101”,
“name”: “Chiyoda Ward”
},
{
“id”: “13102”,
“name”: “Chuo ”
},Ward
{
“id”: “13103”,
“name”: “Minato Ward”
},

英語版も用意されていると、ディレクトリ名を用意しようとしたときのローマ字設定が楽なので大変ありがたい!(Wardはremoveしないといけないけども)

都道府県番号は01~42まであるので、順番にループしてあげれば全国の市区町村が取得できますね

APIのレスポンスも早く、利用に関して登録もない、シンプルで使いやすい市区町村取得にいかがでしょうか!

これが本当のDoSアタック!ITかあさんついにサービス停止に追い込まれる!

ITかあさんブログ、ついに閉鎖へ。。

終了のお知らせ

。。。うそです。

何の前触れもなくサーバーが再び停止!国外アクセスは現在停止中にも関わらず、再びITかあさんのサーバーは停止したのです

これが本当のDoSアタック!身も凍るクラウドサーバーの利用停止

クラウドの管理画面に行くと、持っている全てのサーバーが全て起動もできない、何も出来ないんですね。

Microsoft Azureからのメール

Microsoft Azure

We’ve got a little problem. Your subscription ‘Windows Azure MSDN – Visual Studio Ultimate {●●●●}’ and services were disabled on Tuesday, February 23, 2016 because you have reached your spending limit.

あなたのサブスクリプションは利用制限に達しましたので2月23日に停止しておきました。
死亡

なんと言う絶望感。。

Microsoft Azureを使い始めて2年が経過しようとしているんですが、利用制限があることは分かってはいたものの、まさか利用制限に達するとは到底思ってもみませんでしたので。。(だいたい1万/月くらいかな)
でも、なぜこんなことになってしまったかというと、先日発生したDOSアタック攻撃が激し過ぎて、サーバーを大幅に増強したことが原因でした。

サーバーの利用停止にまで追い込まれる、これが本当のDoSアタックの恐怖だ!

DDoS,Dosアタック辛い→サーバー増強→金が足りない→落ちる

なんと言う負の連鎖!!ひどい、ひどすぎる!!

Microsoft Azureにじゃぶじゃぶ課金するよ(爆

Microsoft Azureの課金の制限を解除すればまたサーバーが起動出来るってことで

これからはAzureにジャブジャブ課金するっきゃねえ!

Microsoft Azureのサブスクリプションの利用制限を解除することにしました。

利用制限解除してもなぜか起動できない、全てのサービスが停止したままのMicrosoft Azure

死亡

再び絶望。。

スクリーンショット 2016-02-23 13.58.02
制限解除しても使えないクラウドサーバー達。。

もうお手上げだ!Microsoft Azureのサポートセンターに問い合わせ

Microsoft Azureの管理画面より問い合わせ。折り返しの連絡方法を「電話」とし、送信してまつこと40分ほどすぐに折り返しの連絡がかかってきました(対応速い!)

ここからがMicrosoft Azureの神対応

・折り返し電話をくれたタイミングではすでに原因の究明は完了していた
・原因は一度停止したサブスクリプションがサービス全て再開出来るのは数時間かかること(長いと24時間とか)
・いつ復旧したかの通知サービスは無いのでサポートセンター側で都度確認をして、復旧したら電話連絡する

短くも、的確に状況を伝えてくれました。いつ復旧したか分からないのは利用者側として辛かったのですが、都度サポートセンターで確認してもらえるとのことでここはまかせて待つことにしました。

それから待つこと1時間ほど、サービスは無事利用再開

連絡の通り、待っているだけでMicrosoft Azureのサブスクリプションは利用再開が自働で行われ、サーバーは再び息を吹き返したのでした!

再びのMicrosoft Azureのサポートセンターからの電話

・復旧の連絡
・Microsoft Azure利用する上でのアンケートのような質問(電話の窓口はやはりあったほうがよいか、など

などの電話がありました。
折り返しの電話を待っている間は本当に気が気ではなかったのですが、かなりスムーズに利用再開まで進められました。最終的に完全に停止していたのは2時間半ほどだけで済み、大きなダメージはありませんでした。

まとめ

そもそもAzureの課金設定の上限があったことを認識していたにも関わらず、「どうせ超えないから」と思っていたところにDOS攻撃をしかけられたのがそもそもの原因でした。
これからはDOSアタックにそなえ、毎日CPUの状態もチェックし安定したサーバー運用を心がけたいと思います。

追記

実は今回一時的に停止された問題で一つだけメリットがあったんです。あれほどまでに激しかったDOSアタックがぴたりと泊まりました。
現在国内限定公開ではなく、海外からのアクセスもでき、さらにメモリとコアを半分に落としたにも関わらず、です。
実は停止されて再度 再開する際、IPアドレスが変わってしまったのですが(もちろんDNSも変更) その影響からかDOSの攻撃はぴたりとなくなったのです!
ただ、またいつ攻撃はしかけられるか分かりませんので、今後も監視は強化していきたいと思います。

【緊急事体発生】ITかあさんブログがDOSアタック攻撃でダウン

【緊急事体発生】ITかあさんブログがDOSアタック攻撃発生!!

スクリーンショット 2016-02-18 9.26.56

ITかあさんの運営するサーバーが突如CPU70%越えて、MySQLに繋がらない問題発生!

ITかあさんのブログはWindowsAzureというクラウドサーバーで運用されています。ちなみにITかあさんの運営されているサーバーのスペックは以下の通り。

2 コア、3.5 GB メモリ CentOS6

まあ、一端のエンジニアごとき戯れ言のブログですから、これくらいあれば十分ですね。

夜間〜朝方にかけて猛烈なDOS攻撃!落ちるMySQL、繋がらないApacheサーバー

ざっけんなー!こらー!

ざっけんなー!こらー!

スクリーンショット 2016-02-18 9.26.56
こちらのグラフが明け方から落ち着きを取り始めた現在のWindowsAzureのCPU使用率なのですが、グラフの山が盛り上がっていますね。
あまりの重たさに一時的に

3 コア、7 GB メモリ

までメモリを増しましにした状態で、CPU60%越えに振り切れているっちゅーことで半端じゃないCPUの使用率ということがお分かり頂けると思います。

まずは冷静に状況の分析

サーバーが落ちる時点でもう顔面蒼白なのですが、メモリを一時的に増大させて何とかサイトを復旧させてここで一旦冷静に状況の分析から。なんとなーく原因はDOSくらっているんだろうなあと過去の経験から分かっているのですが。。

まずは冷静に状況の分析

明らかにCPUが高過ぎるので、「何がCPUを大量に消費しているのか」を調べます。

# ps au

USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
root 1997 0.0 0.0 4060 584 tty1 Ss+ Feb17 0:00 /sbin/mingetty

root 1979 0.0 0.0 4060 584 tty5 Ss+ 00:56 0:00 /sbin/mingetty

root 1981 0.0 0.0 4060 584 tty6 Ss+ 00:56 0:00 /sbin/mingetty

apache 2056 3.1 0.5 480216 38728 ? S 00:56 1:06 /usr/sbin/httpd

apache 2258 3.2 0.5 479168 39076 ? S 00:56 1:07 /usr/sbin/httpd

apache 2272 3.3 0.5 478932 38792 ? S 00:56 1:10 /usr/sbin/httpd

apache 2509 3.3 0.5 476300 36152 ? S 01:00 1:01 /usr/sbin/httpd

apache 2615 3.4 0.5 480420 40356 ? S 01:02 1:00 /usr/sbin/httpd
。。。。。。。。

apacheが多いなあ。。

# ps aux | grep httpd

すると
USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND
apache 2056 3.1 0.5 480216 38728 ? S 00:56 1:06 /usr/sbin/httpd

apache 2258 3.2 0.5 479168 39076 ? S 00:56 1:07 /usr/sbin/httpd
以下100行ほどapacheのプロセスが大量に渡って来ます。
試しにGoogleアナリティクスでリアルタイムのアクセス状況拾ってもその時間にサイトにアクセスしているのは朝方っていうこともあって数人しかおりません。
(っつーか1回のapacheプロセスに対して、CPU3%超えるようなアクセスってなんだよ!という話であってですね。もうこれはDOSアタックしかないですね)

DOSアタックの対処。国外アクセスの禁止

いつ落ちてもおかしく無いので一時的に国外からのアクセスを禁止します。(この手のDOSは中国系のDOSアタックが多いのは経験済みなので)

こちらのサイトから国外からのアクセスを禁止できる.htaccessを入手できますので、一先ずこれをWordPressの閲覧可能ディレクトリの直下の.htaccessにコピペします。
ただしこれをそのままにしておくことは出来ません。なぜならこのままだとfacebookからサイトにアクセスすることができないのでogpの取得ができなくなるのでソーシャルに一切対応していないサイトになってしまうからです。なので対処としては一時的に。

mod_evasiveモジュールの追加

Apacheのmod_evasiveモジュールでDOSアタックに対処します。1秒間に●●回アクセスしてくるIPアドレスを●●秒アクセス禁止にする
という設定が可能な有名なモジュールですね。
epelリポジトリが追加されているサーバーであればyumコマンドでインストール出来ます。

#yum install mod_evasive
#mkdir /var/lock/mod_evasive ログディレクトリ
#chown apache:apache /var/lock/mod_evasive  ログディレクトリへのアクセス権

mod_evasive.confの設定を変更します。

# vi /etc/httpd/conf.d/mod_evasive.conf


テストコマンドは以下。バージョンによって変わるので、/usr/share/docをlsコマンドで中身確認してtestスクリプトを実行してください。

perl /usr/share/doc/mod_evasive-1.10.1/test.pl

ちなみに私はテストすら出来ませんでした。
何度やってもテストがぜーんぶ200 OKでレスポンスが返ってくるんですね。最初なんでだろう!って辛くなったんですが、冷静に考えてみればこのテストの最中もアホか!ってほどDOS喰らっていたので、テストのシェルスクリプト1行ごとの実行に1秒より多くかかっていたためにまともにテストできなかったんですよ。あるんだねー、テストすらできなくなるほどのDOSアタック。

そんなわけでまとめ

CPUが突然爆発的に消費をはじめたらpsコマンドで原因を突き止めて、サイトのアクセス数に対してhttpdに対するCPUが爆発的に消費されていたらDOSアタック対策を行うこと。
以上!

追記

mod_evasiveは正しく設定できていたはずなのに、海外からのアクセスをもう一度許可をすると再びCPUが激しく増加しました。自分のサイトへの攻撃はDOSではなくDDOS(ディードス)だったもようで、mod_evasiveだけでは防ぐことが出来ませんでした。
ゆえに自分は海外からのアクセスは完全に拒否する対策を取って、facebookでOGPキャッシュを作る時だけ海外アクセスを許可する方法を取りたいと思います。出来れば国内だけに限定させるのは自分としてはあまりいい対処だとは思ってはいないので今後もDDOSへの対策を考えたいと思います。

ITかあさんが2015年入ってから超絶お世話になっている技術書

超絶お世話になっている技術書・参考書

プログラミングには少し離れつつある今日このごろですが、プログラミングは忘れたくない!
けども設計書・ドキュメントはどんどん書く!
そんな母さんが最近超絶お世話になっている本を紹介したいと思います。

Web API: The Good Parts

WEBAPI初めて作るなら絶対読むべき一冊!

最近WEBAPIを作る機会が増えましたが、以前はめっきるAPIは利用する側で開発する側ではありませんでした。
APIの戻り値は?POST?GET?え?何 PUT?PATCHにDELETE?
知らないメソッド、URIはどうするべきか
「APIとは?」という初歩の初歩から書いてあるので、APIの良い設計とはナンなのかを生まれて初めて設計する人にも分かり易く書いてあります。
プログラミングの仕方が書いてあるわけではなく、戻り値はどうあるべきかなどの設計に関わる部分がほとんどを占めていますので、利用言語については何でも問題ないでしょう。とにかくいい本!今は暇さえあればこの本ばかりを眺めて常にAPI設計の参考にしています。

CakePHPで学ぶ継続的インテグレーション

CakePHPに限らずWEBエンジニアなら必読の今時開発環境について網羅!

そうだ、Jenkins勉強しよう!
そう思ったらなぜかCakePHP本に出会ってしまった!
私の現在の開発環境はvagrant環境に構築したCentOSにCakePHPをインストールし、バージョン管理はgit。テストにSelenium。今よく効く継続的インテグレーションのツールを網羅しているのでCakePHPユーザー以外にもぜひともオススメしたい本。既にVagrantもgitもSeleniumも使っていますが、もっと早く出会っていたかったなあ!という本。
CakePHPの入門書とは全く違う切り口なので、CakePHPの入門レベルを終えてから手にとるべき本。もちろん現在別のFWでPHPを使っているユーザーならすぐにでも読むことをオススメしたい本です

実践 Selenium WebDriver

待ってました!Selenium WebDriverの本!

先日春のJavaScript祭を行った際、私の持ちネタはSelenium WebDriver×Node.jsでした。Selenium IDEはブラウザのアドオンとしてブラウザにJavaScriptを埋め込んで動作させるものでしたが、各ブラウザごとのWebDriberをインストールすることでブラウザの細かい挙動のチェックも出来るようになります。
複数のブラウザを平行で立ち上げて処理速度をチェックしたり、正しく挙動するかのチェックが出来ますから今までテストをFirefoxのブラウザで出来ていたことがChromeでもIEでもiPhoneのスマートフォンブラウザのチェックも出来るようになります。
本書はJAVAベースでの解説になりますが、全体的な基礎知識にぜひ読んでおくのがオススメ。

オススメ本は以上になります。

プログラミングにやや離れてしまった感はありますが、やっぱり技術書開いた時のワクワク感が大好きです。
またオススメ本があったら紹介したいと思います。

WEB API利用者・開発者必須アイテムChromeアドオン DHC を使ってみたよ

WEB API利用者・開発者必須アイテムChromeアドオン DHC

DHC

マツダさん、APIツカウならコレ ツカッテ

Chromeアドオン DHCは某国のエンジニアに教えてもらったよ。

Choromeアドオン DHCとは

DHC UI

公開されているWEB APIを叩くためのツール

世の中にはたくさんのAPIが公開されていて(現在公開されているAPI一覧【2013年版】
APIの開発を開始する前にAPIからの戻り値を正確におさえるためには仕様書レベルではなくて実際にAPIを叩いて正確に理解したい。
そんな時に使えるのが今回のChromeアドオンであるDHCです。

DHCのインストール

アドオンをインストールするだけ。

設定>拡張機能>他の拡張機能を見る>DHCを検索

DHCの使い方

アプリ一覧よりアドオンのDHCを起動

APIのURIを記載して、実行するとAPIから戻り値が受け取れます

今回は図書館検索、本の貸し出し状況を確認出来るカーリルAPIっていうので試してみたよ

APIのURLを記載してsave

URIを設定APIの保存

APIのURIを設定して、一先ず保存

サイドメニューに保存されているAPI一覧

保存すると サイドバーに保存したAPIが表示されているので、再度呼び出す時に便利

DHCからAPIを叩く

sendボタンを押してAPIを叩く

sendを押すと、レスポンスが返ってきます

APIでの戻り

レスポンスヘッダと、戻りがXMLなことが分かりますね。

詳細なパラメータを追加

APIには詳細なパラメータが出来るものがあります。今回使ったカリールというAPIも様々なパラメータを付けて、より詳細なデータや、自分の欲しいデータを検索して返すことが出来ます。
それらのパラメータをDHCにセットして叩いてみます。
詳細なパラメータを渡す

戻り値はXMLとJSON形式で選べるようなのでJSONに。なおKeyは仮のデータです。もしこのAPIを使いたい場合はAPI登録の申請を行って下さい。

レスポンスがJSONデータになった

レスポンス結果がJSONになりました。戻ってきた値の詳細についてはAPIの仕様書をご確認下さい。

GET以外にもリクエストは色々

色々なリクエスト

リクエストはPOSTやGET以外にも色々あります。もちろんそのAPIが対応していなければ400のエラーステータスしか返ってきませんが、色々APIを叩く時に試してみるといいと思います。

APIを利用して開発する際いはぜひ使いたい

APIを使って開発する時はもちろん、APIの設計やテストにもぜひ活用していきたいと思います。

iPhoneでlabelが効かない時の対策まとめ

iPhoneでlabelが反応しない対策はいくつかありましてん。

labelに空のonclick

う~ん、これはちょっと

CSSでcursor:pointer;

labelをpointerにする

label {
cursor:pointer;
}

CSSでcursor:pointer;で反応しないとき

で、つまずいたのが、cursor:pointer;をCSSで指定しても反応しないとき。
jQueryでclickイベントを追加。

$(‘label’).click(function(){});

これで、cursor:pointer;で反応しなかったiPhoneでも無事反応しましたとさ。

超簡単!.htaccessで画像ファイルの404エラー対策

404エラーページ、もちろん画像のリンク切れにも対応出来ます

404エラーページ、ほとんどのサイトが設定されていることと思いますが、画像のリンク切れってどうですか?

画像のリンク切れって 超かっこ悪い!

ですよね。画像のリンク切れも所詮はリンク切れの404だから.htaccessで簡単に設置できますよ。

一番簡単な方法は対象の画像フォルダのディレクトリに以下の記述の.htaccessを設置するだけ。

ErrorDocument 404 /images/no-image.png

拡張子を指定した画像404

画像の拡張子を限定して404画像の設定も出来ます。

RewriteEngine on
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule \.(gif|jpg|png|bmp) /images/no-image.png [NC,L]

とっても簡単ですね。

毎回PHPでファイルの有り、無しを問い合わせしなくてもOKですからこれは便利かも。

404のちょっとした小技でした。

瞳に優しく!Dreamwever Colors.xmlの設定

Dreamweverでよくマークアップされる方はColors.xmlの設定を

ITかあさんは元々WEBデザイナーだったのでDreamweverを長く使ってきましたが、その癖が残る現在もPHPプログラミングをする時はDreamweverを愛用しています。

瞳に優しく!Dreamwever Colors.xmlの設定しよう!

毎日Dreamweverを何時間も使うなら、ぜひDreamweverの表示設定を目に優しくしたいところ。
ITかあさんのDreamwever設定
私のDreamweverは背景が黒、文字が蛍光色になって 見やすくしています。
プログラマー定番の配色でしょうか。

Dreamweverの環境設定→コードカラーリング から設定できるのですが、ネットで配布されているDreamwever Colors.xmlをダウンロードして設定すれば一発です。

瞳に優しく!Dreamwever Colors.xmlの設定しよう!

こちらにダーク系の見やすいDreamwever Colors.xmlが4種類配布されています。

Colors.xmlをダウンロードしたら

C:\Users\admin\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\CodeColoring

に、ファイルを上書きします。もしDreamweverが立ち上がっている状態ならDreamweverを再起動してください。また、Colors.xmlの場所はOSによって若干異なるようです。

最初は暗いDreamweverの画面はなれないうちは違和感を感じるかもしれませんが、慣れると暗い画面の方が目が疲れず、コードが読みやすいです。ぜひお試しあれ!

ネームサーバーをお名前.com以外のネームサーバーを利用する

お名前.comでドメインを利用した場合、無料でネームサーバーを貸してくれます。
特に何も気にしない場合、ちょっとしたブログレベルのサイトであればお名前.comのネームサーバーを利用するのが無難ですが、共有なのが気になる場合独自にネームサーバーを自分で設定することも出来ます。
ネームサーバーを独自に設定しようとしてちょっとつまづいたのでメモしておきます。

ネームサーバーは2つ必要

基本ですが、必ずネームサーバーは2つ必要です。プライマリーとセカンダリの2つを用意してあげます。

IPアドレスのままでは登録できない

いざ2つネームサーバー用のIPアドレスが用意出来ていてもお名前.comではIPアドレスのままではネームサーバーとして登録することは出来ません。「ホスト」の設定が必要です。

ホストの登録をする

ネームサーバーとして利用するため、ホストの登録をします。

プライマリネームサーバー設定

まずプライマリサーバーの設定を行います。

これをプライマリネームサーバーとします。

同様にns2.○○.comのホストも設定。これをセカンダリネームサーバーとします。

ネームサーバーを変更する

お名前.comのネームサーバーの変更を右メニューより選び、ネームサーバーを変更したいドメインにチェックを入れて、ラジオボタンを他のネームサーバーを利用する にチェックを入れます。

これに先ほどホストに追加したドメインを設定すれば終了です。

CSSレンダリング高速化の5つのポイント

せっかくマークアップしたサイトが表示後に妙に動きが引っかかる、なんとなく重い気がする。
それはCSSのレンダリングの問題かもしれません。
CSSセレクタから今一度サイト高速化を見直してみることにしましょう。

CSSのレンダリングの問題はどのようなものか?

PCサイトを作る上ではこれまでさほど意識してこなかったCSSのレンダリング。
いざスマートフォンサイトを作ってみるとこのレンダリングは非常に重要で、
CSSのレンダリングが遅いと

・スクロールがひっかかる
・リンクの反応が鈍い。
・CSS3のbackgroundがなかなか表示されない
・とにかく全体的に動きがカクカクしてストレスが溜まる

という問題が起こります。そこでレンダリングについて今一度学んでみるべく、海外の有名サイトより、こんな記事を紹介します。

CSSセレクタは右から左へ

ul > li a[title="home"]

このようなセレクタがあったとします。CSSセレクタでは右から解釈していくので、この場合1番最初に読まれるパーツはa[title=”home”]です。
この部分は部分は、最終的に、それが選択されている要素であるという点で “キーセレクタ”と呼ばれています。

IDは最も普遍的で、最も効率的である

セレクタのIDは最も普遍的で最も効率がよい。
確かにIDはユニーク、他とかぶらないということですから最も効率がよいはずです。
以下は4種類のセレクター(ID、class、タグ、ユニバーサルセレクタ)を、効率のよい順に並べたものです。
下から4つ目まではよく見ますが、タグレベルだったり、『*』や、属性値にあてていくのはレンダリング的には効率が悪いそうです。

#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title=’home’] /* Universal */

あまり意味のないセレクタ

これはそれほど効率的でないことは確認されています。
IDはブラウザから最初に検索されるので、その子供の要素を見つけることが容易なのでしょう。

#main-nav > li

タグにIDをあてるのは意味がない

ul#main-navigation

IDはそもそもユニークなのでタグと組み合わせても意味がない。
(ごもっともです。でもITかあさんは癖でやってしまうことがあります。)

子孫セレクタは最悪

『これはもう公害です』とまでおっしゃっています。

html body ul li a

セレクタを書く意味をもう一度考えてみる

#main-navigation li a { font-family: Georgia, Serif; }

こんなことをするなら

#main-navigation{ font-family: Georgia, Serif; }

こうしたほうがいいに決まっていますね。

CSS3は効率的か

まことに悲しいお知らせです。

”CSS3 について悲しいことは、
ページのパフォーマンスを気にする場合、
全てにおいて使用すべきではないことです”

CSS3のセレクタ(例えば、は、:nth-​​child)、マークアップをきれいに、セマンティック維持しながら、私たちがしたい要素をターゲットにするうえで非常に素晴らしいです。
(センスのないClass名やID名で悩まなくていいですからね!)
しかし、このセレクタはブラウザのリソースが集中的であることから 高速化を意識するのであれば使うべきではないということです。

結論:とにかくIDを使いまくったほうがいい

記事は最後に以下のように締めくくられています。

IDがもっとも効率のよいセレクタであることを我々は知っています。
文字通りページ上のすべての単一の要素に一意のIDを与えるだろうし、単一のIDセレクタにスタイルを適用します。 それは超高速で、またとんでもないスーパーです。
でも、効率的なCSSのセマンティクスや保守性を犠牲にすることはないと思います

なるほど、もっとも効率の悪い子孫セレクタは使わないようにし、CSS3はレンダリングを意識するなら極力使わないようにして、今より少しIDに対する意識を高めるのが良さそうです。

翻訳元:

Efficiently Rendering CSS | CSS-Tricks