通过 Server 向 ToyBrowser 发送一个 HTTP 响应报文，body 中带有 HTML 代码。那么 ToyBrowser 就可以解析此响应报文并将 body 中的 HTML 代码解析并渲染到一张图片上。
ToyBrowser 是一个玩具版的浏览器，它以 Toy 版的方式实现了浏览器中如下功能：
- HTTP 解析
- HTML 的解析
- DOM 树的生成
- CSS 的计算
- Flex 布局
server.js 的功能是向 client 发送响应报文。在 server.js 中有一个响应报文，响应报文的 body 中有一段 HTML 代码。
client.js 是入口文件，它接受 server 发送的响应，并且完成 ToyBrowser 的一系列操作，最终将输出一张响应内容中 HTML 渲染后的图片。
httpParser.js 的功能是解析 HTTP。解析的方式是使用状态机，并根据 HTTP 标准逐个解析报文中的 statusLine、headers 和 body，并将解析的结果封装成对象返回。
htmlParser.js 的功能是解析 HTML 代码并生成 DOM 数。原理和 httpParser 相同，使用状态机并根据 HTML 标准生成 DOM 树。
cssParser.js 中实现了 CSS 规则收集和计算。通过 css 这个库解析收集的 CSS 规则，得到 CSS 规则的 AST 对象。然后经过匹配选择器、权重计算等操作后得出 ComputedStyle，并生成 LayoutTree 。
layout.js 实现了基本的 Flex 布局功能。flex-grow、flex-shrink、flex-basis 等特性还未实现。
render.js 是将解析后生成的 LayoutTree 通过 images 这个库绘制到图片上。
viewport.jpg 是渲染后输出的图片。
- css: 将 CSS 字符串解析成 AST 对象
- images: 通过指令可画出图形并输出成图片
下面链接中的文章是浏览器相关的总结 https://huyinglin.github.io/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/#board