浏览器工作原理
网上有一篇已经写得很好了,浏览器工作原理。那我自己写,是为了看看自己学会多少。输入和输出还是两回事。
浏览器做了什么?
浏览器解析我们在 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>
字符流拆成词,有一套状态机去实现的拆分成词。
输入字符流,浏览器某个功能模块处理字符流,输出一个词。输入、处理、输出计算机最基本模式。