Hatena::ブログ(Diary)

vivid memo このページをアンテナに追加 RSSフィード

vivid code というサイトのメモ代わりに記事を書いていました。
現在ははてなブログに移行し、「ひだまりソケットは壊れない」 というブログで記事を書いています。 はてな id も id:nobuoka に変更しました。

2011-10-02

書評: 『ハイパフォーマンス JavaScript』 Nicholas C. Zakas 著, 水野 貴明 訳

ハイパフォーマンスJavaScript

ハイパフォーマンスJavaScript

『ハイパフォーマンス JavaScript』 を読み終わりました。 簡単に内容についてと感想を書いておきます。

内容

内容としては、JavaScript そのものの処理速度を速くするというよりも、JavaScript を使った web ページの読み込みや実行の処理速度を速くする、ということを主にしています。

1 章では、web ページがブラウザに読み込まれる際の JavaScript ファイルのダウンロードから実行までの流れを説明し、以下のようなことを述べています。

  • script 要素は body タグを閉じる直前に置くのが良い
  • JavaScript ファイルの個数は出来るだけ減らすのが良い

2 章では、JavaScript のスコープチェインやプロトタイプチェインに言及し、JavaScript におけるデータアクセス時の処理速度を遅くしないようにするための注意点を述べています。 それ以降、DOM API を使う際の注意点や、アルゴリズムの選択時の注意点、文字列と正規表現に関する注意点などが続きます。 後半には、反応性の良いユーザーインターフェイスを提供するための注意点や Ajax についてなど、プログラムを書くときの実践的な手法を述べています。 最後の 2 章では、JavaScript ファイルをコンパクトにする方法やデバッグのためのツールの紹介などをしています。

感想

一通り読み終わった感想としては、JavaScript を使うならとりあえず読んでおいて損は無い と思いました。 実際のところ、この本に書いている内容を全て実践するようなことは (よほど処理速度を気にしない限りは) ないと思います。 しかし、一部の手法はあらゆる場面で使っていくべきような内容ですし、その他の内容も知識としては持っておくべきようなものばかりですので、JavaScript を使った web サイト制作を行う人は是非読んでおきましょう。

技術水準としては、JavaScript を使うのであれば当然知っていなければいけないような

  • スコープチェインの深いところにある変数やプロトタイプチェインの深いところにあるプロパティへのアクセスには時間がかかる
  • JavaScript は基本的に単一スレッドで処理されるため、JavaScript で処理に時間がかかっているとユーザーインターフェイスの反応性が悪くなる

といった内容から、

  • DOM API の呼び出しや DOM ツリーの変更はコストが高いため、できるだけ使わないようにすべき
  • JavaScript ファイルに前処理を行って文字数を減らすなどすることでパフォーマンスを上げる

というような少し高度な内容まで述べられていますので、JavaScript の経験の浅い人からある程度経験のある人まで、多くの人に役立つと思います。 アルゴリズムについてや正規表現については、JavaScript に限らず他の言語でも有用でしょう。

ただ、処理系の最適化の方法によっては、パフォーマンスを上げるつもりでちょっと変わった記述をすると逆に遅くなってしまうということもある (ダフズデバイスでループ回数を減らす など参照) ので、ほんの少しのパフォーマンス向上を求めて特殊なコードの記述をするのはいかがなものかなーとは思います。 そこら辺はバランスが大事ですね。

誤り?

読んでいるときに気づいた変なところをメモしておきます。

まずグラフがおかしいです。 ある処理を、手法 A で実現した場合の処理時間 t[A] と別の手法 B で実現した場合の処理時間 t[B] を t[A] / t[B] のような比で表しているのですが、何故か t[B] の方が大きい場合に 1 より小さい正の値として表示せずに負の値で表示しています。 分かりやすくしようとしているのかもしれませんが、ちょっと気持ち悪いです。 (P.43 の図 3-3 など)

それから、DOM ツリーを変更する際にドキュメントフラグメントを使う利点についての説明。 『フラグメントにノードを追加する際の追加がフラグメント自身ではなく、フラグメントの子ノードに行われる』 という記述は、『フラグメントをノードに追加する際、フラグメント自身が追加されるのではなく、フラグメントの子ノードが追加される』 の間違いなんじゃないかと思います。 (P.58)

トラックバック - http://d.hatena.ne.jp/vividcode/20111002/1317507304