Webブラウザエンジニアリングを読んだ（写経なし）

Webブラウザエンジニアリングを読んだ。しかしPythonをほとんど書いていないため、写経なしで雰囲気でコードを読む程度にとどめた。

Webブラウザエンジニアリング - O'Reilly Japan

Webブラウザは、現代のコンピューティング環境において欠かせない存在であり、最も広く使われているプラットフォームの一つです。本書は、その仕組みを実践的に学ぶための解説書です。実際にWebブラウザを構築する過程をたどりながら、レンダリング、HTMLパーサー、CSS、JavaScript、マルチスレッド対応、セキュリティモデル、アニメーションとコンポジット処理、ブラウザAPI、アクセシビリティなど、モダンなWebブラウザの主要な要素を順を追って解説していきます。 章ごとにコードを動かしながら、ブラウザに機能が積み重なっていく過程を通じて、ソフトウェアを成長させ改善していく経験を自然に体得できます。ブラウザ技術の研究者とChrome開発者による豊富な知見をもとに、Webの進化をたどりながら、手を動かしてブラウザの内部構造を深く理解できる一冊です。

www.oreilly.co.jp

写経ありだと、1ヶ月ぐらい掛かりそうな気がしたので雰囲気でとりあえず読むことに集中した。（機会があれば写経したい）

ブラウザの気持ちを知る

ブラウザは複雑とか内部のことは分からんという認識から5ミリぐらいは理解できた。

実際にHTMLとCSSをパースすることの難しさ、フォントのレンダリング、スクロールすることの大変さ、CSSアニメーションやアクセシビリティなどなどそれぞれやっている作業を知ることができた。

最初は、簡単なHTMLとCSSやJavaScriptをブラウザでレンダリングするところから始まり、cookieなどの実装も含まれている。

当たり前だけど、我々がプログラミングするコードが曖昧なものを書くとブラウザ側の解析もできなくなる。ルールに沿っていない不適切なタグを解析することもブラウザ側が考えないといけないみたいな記述があり、謝罪の気持ちが生まれた。最近は、Linterなど各種ツールで最低限の正しさは担保できるが、受け手側になるブラウザの気持ちも知っておくことは大事。

Skia

Skiaについても触れられていた。TkinterやCanvasを使った描画だけでは厳しい。視覚効果や高度なグラフィックを表現するのには必要になる。存在は知っていたけど読んでいく中で少し興味が出てきたので、今度挙動周りを調べてみたい。

そういえばフロントエンドカンファレンス北海道2024に近い話があったなーと思ってかなるんさんの以下のスライドを読み直すなどをした。

ブラウザはどのようにしてテキストを描画しているのか？――Chromiumにみるテキスト描画の深淵 - Google Slides

ブラウザはどのようにして テキストを描画しているのか？ ―― Chromiumにみるテキスト描画の深淵

Google Docs

スクロール（コンポジット処理）

ブラウザのスクロールは難しい。スクロールするたびに再レンダリングするのは効率も悪い。スクロールの滑らかさを保つため、ブラウザはレイアウトや描画処理とは独立して、専用のスレッドでスクロールを再現している。

書籍では、複数のサーフェスを用意して重ねて表示する実装をしていく。

CSSアニメーションとかアクセシビリティ

CPUではなくGPUに切り替えてCSSアニメーションを最適化する実装もある。ここはかなり難しかったのでちょいちょい分からないことをメモだけしておき参考文献に当たってみたい。

アクセシビリティについては、ズームする機能、ダークモード、キーボードナビゲーションについてを実装する。キーボードナビゲーションについては、スクリーンリーダーの実装からアクセシビリティツリーの話も出てきてこれも実装していくことになっている。

このアクセシビリティだけは雰囲気でどういう実装になるかはイメージがかなりあったので、割と理解がある状態で読むことができた。

難しい

他にもiFrameの実装とかスレッドの実装まであるけど完全理解はできない。それはそう。手を動かしていないからだ。でも普段我々がプログラミングしたものを表現してくれるブラウザの仕組みとか大変さ、有難さを知るにはとてもいい本だと思った。

書籍の中でChromeの中身を紹介したコミックが紹介されていて読んでみたけど面白かった。（ちょっと古いかもだけど）