How Browsers Work を和訳しました
先週くらいに How Browsers Work: Behind the Scenes of Modern Web Browsers という, ブラウザ内部の挙動についての文章が話題になっていました. とても面白そうなのですが長い文章で普通読むとくじけそうだったので, 翻訳しながら読むことにしました. 原文のライセンスが CC だったので, せっかくなので同じライセンスで公開させて頂きます.
以下読んでみて思ったことなど.
この文章はなに?
Tali Garsiel さんというイスラエルの開発者の方がブラウザ内部の動きについてまとめた文章がオリジナルです. それを Paul Irish さんが HTML5 Rocks で再公開しました.
入門書と言っているだけあり, 詳細を見るというよりも外観をつかむのにもってこいな文章でした. ブラウザにはだいたいどういう要素があり, それらはどういう動きをするのかということをざっくり理解することができました. ブラウザの動きを理解する最初の一歩として良いと思います.
HTML と CSS の知識さえあれば読めそうでした. (JS の話は殆ど出てこなかったので, JS はわからなくても読めそうです)
さらに深追いしたい場合は
原文の最後にある参考文献によいリソースへのリンクが沢山あります.
日本語のリソースでは tokkonoPapa さんのブログエントリが良いです.
- ブラウザ動作の理解?レンダリングツリーの構築と描画のタイミング | ゆっくりと…
- ブラウザ動作の理解?リフローとリペイント及びその最適化 | ゆっくりと…
- ブラウザ動作の理解?レンダリングの負荷を測る | ゆっくりと…
と, 偉そうなことを書いていますが, 自分も訳しながら意味がわからなかった所がいくつもあったので *1, これらのリソースから勉強させていただきたいです.
まとめ
How Browsers Works をちゃんと読むために翻訳・公開しました. ブラウザ内部の動きがわかるとても良い文章でした. ただ細かい部分をもっと説明してほしいなと感じることが多くあったので, 他のリソースにも手を出していきたいです.
2011-09-07 追記
株式会社シャノン技術ブログ さんのほうでも翻訳が出ていました.
ブラウザってどうやって動いてるの？（モダンWEBブラウザシーンの裏側） - SHANON Engineer’s Blog
こちらも見比べると良いかもしれません.
追記
シャノンさんの翻訳とともに, html5rocks から paul irish さんにリンクして頂きました!
*1：特に Gecko のルールツリー・コンテキストツリーのくだり. 訳もかなり微妙になってます…