梳理自己所学的浏览器工作原理

浏览器工作原理

网上有一篇已经写得很好了，浏览器工作原理。那我自己写，是为了看看自己学会多少。输入和输出还是两回事。

浏览器做了什么？

浏览器解析我们在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>

字符流拆成词，有一套状态机去实现的拆分成词。

输入字符流，浏览器某个功能模块处理字符流，输出一个词。输入、处理、输出计算机最基本模式。