この記事は何? こんにちは。現在私は趣味でWebブラウザを実装しようとしています。 この記事にはその中で気づいたことをまとめていきたいと思います。 ブラウザがやること ブラウザは壮大で、複雑で、本当に様々なことをしています。(少なくとも、BlinkやServoのコードを見た私はそう思いました) そのためこの章ではシンプルに、ブラウザがどのように画面のレンダリングを行うのかに重点を置いて説明していこうと思います。 HTML/CSSの解析 Webページはほとんどの場合、当たり前ですがHTMLで書かれています。そんなHTML文書を、ブラウザは扱いやすくするためにツリー構造にします。これが俗に言うDOM(Document Object Model)です。 例えば、以下のようなコードがあったとしましょう。 <html> <body> hello, <span style="color:red;">w
![ヒトでもわかるWebブラウザ自作入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0c66b38522ac0875ad178904df385e366ee0419/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJTkyJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgyJTgyJUUzJTgyJThGJUUzJTgxJThCJUUzJTgyJThCV2ViJUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUU4JTg3JUFBJUU0JUJEJTlDJUU1JTg1JUE1JUU5JTk2JTgwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iYzgyMDQzOGY2MjdjMmQ3YTU2NjllN2Y0ZDhjZDI5NA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdWludDI1Nl90JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yMDc3OTllYjc5NGI1MGZmYmYwYjE3YTJlYjQzMjYzMA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D13718a36b5fc31ab494dbad22ee6e2ac)