共计 1007 个字符，预计需要花费 3 分钟才能阅读完成。
浏览器工作原理
网上有一篇已经写得很好了，浏览器工作原理。那我自己写，是为了看看自己学会多少。输入和输出还是两回事。
浏览器做了什么？
浏览器解析我们在 html 编辑器所写的代码有 html、css、js。关键 HTML 怎么解析为 DOM、CSS 解析为 CSSOM、又是如何解析 JavaScript 的。又怎么把它们结合在一起？
浏览器到底是如何工作的？首先它长的样子，都见过比如谷歌浏览器，地址栏、工具栏、各种功能的控件、主屏展示。跟用户交互的地方不多。后退、前进、刷新、主页、地址栏、窗口页、书签这些。
我们要看到某个网站内容，只有一个输入入口，就是地址栏。在地址栏里面输入，某个网站地址，浏览器就会去处理我们输入的地址栏，解析 IP 地址、端口号，去访问某个服务器上的资源。
在地址栏输入一个地址，一个回车，瞬间一个网页出现在当前浏览器窗口的屏幕上。一个输入、瞬间输出这个过程做了什么事情？
计算机输入 - 处理 - 输出，都是这个过程。地址输入 - 浏览器处理 - 输出网页。
根据极客时间的 winter 老师所说：
1 浏览器首先使用 HTTP 或 HTTPS 协议，向服务器请求页面
2 请求回来的页面，也就是浏览器收到的 HTML 会解析成 DOM 树
3 计算 DOM 树上的 CSS 属性，怎么计算？
4 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图
5 一个可选的步骤是对位图进行合成，
6 合成后绘制到界面上。
从 HTTP 请求回来后，产生流式数据，后续的 DOM 树构建、CSS 计算、渲染、合成、绘制都是流式处理，不是说，一定等到全部 HTML 解析完毕成 DOM、CSS 计算完成后、渲染才开始、合成才开始、绘制才开始。
不是说每一个步骤的数据都要一步到位。
浏览器结构
用户界面、浏览器引擎、呈现引擎、网络调用、JavaScript 引擎、数据库、用户界面后端。
如何解析请求回来的 HTML 代码，DOM 树又是如何构建的？
服务端响应给我的 body，如何处理，也就是 HTML 如何处理？
词是如何被拆分的
看下面的一行 HTML 代码
<p class="a">text text text</p>最小标签”<p, 开始标签里面有属性，不能取 ”<p class=”a”>” 为最小单元，也就是词。那么 class=”a” 是第二个词，第三个词是 >, 第四个词是 text text text，第五个词 </p>
字符流拆成词，有一套状态机去实现的拆分成词。
输入字符流，浏览器某个功能模块处理字符流，输出一个词。输入、处理、输出计算机最基本模式。
