写在前面：
（1）写作目的
本篇文章作为一项长期的写作计划进行，主要用于将笔者学习到的零散的web网络知识进行梳理和整合。
（2）知识来源
- 图解TCP/TP
- 图解HTTP
- 优秀的web前端网络文章
你将会了解到：
- Chrome 浏览器原理机制
- 常见的与编译相关的知识
- Url 输入回车之后发生了什么
一、 你需要知道的浏览器知识
（1）浏览器的主要组件：
- 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
- 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
- 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
- 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
- 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
- JavaScript 解释器。用于解析和执行 JavaScript 代码。
- 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
ps:值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。
（2）浏览器架构（以 Chrome 为例）
参考：InfoQ 史上最全！图解浏览器的工作原理
Chrome 采用多进程架构，其顶层存在一个 Browser process 用以协调浏览器的其它进程。
| 进程 | 负责的工作 |
|---|---|
| Browser | 1.负责包括地址栏，书签栏，前进后退按钮等部分的工作；2.负责处理浏览器的一些不可见的底层操作，比如网络请求和文件访问； |
| Renderer | 负责一个 tab 内关于网页呈现的所有事情 |
| Plugin | 负责控制一个网页用到的所有插件，如 flash |
| GPU | 负责处理 GPU 相关的任务 |
还有其它各种各样的 Process ，大家可以在 Chrome 浏览器中，打开更多工具—> 任务管理器进行参考
Chrome多进程架构的好处
-
多进程可以使浏览器具有很好的容错性： 假如你有三个tab，你就会有三个独立的渲染进程。当其中一个tab的崩溃时，你可以随时关闭这个tab并且其他tab不受到影响。可是如果所有的tab都跑在同一个进程的话，它们就会有连带关系，一个挂全部挂。
-
提供安全性和沙盒性（sanboxing）： 更为安全，在系统层面上限定了不同进程的权限.
Chrome多进程架构的缺点
由于不同进程间的内存不共享，不同进程的内存常常需要包含相同的内容。
为了节省内存，Chrome 限制了最多的进程数，最大进程数量由设备的内存和 CPU 能力决定，当达到这一限制时，新打开的 Tab 会共用之前同一个站点的渲染进程。
二、Url 输入回车之后发生了什么
第一步：URL 解析
- 地址解析：
首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行自动完成、字符编码等操作。
第二步：DNS 查询
web前端网络知识体系梳理之一：DNS 和 https 的局限性
第三步：TCP 连接
web前端网络知识体系梳理之三：详解 “三次握手和四次挥手”
第四步：浏览器接受响应
第五步：服务器处理请求
当请求响应返回的时候，network thread 会依据 Content-Type 及 MIME Type sniffing 判断响应内容的格式。
判断响应内容的格式
如果响应内容的格式是 HTML ，下一步将会把这些数据传递给 renderer process，如果是 zip
文件或者其它文件，会把相关数据传输给下载管理器。Safe Browsing 检查也会在此时触发，如果域名或者请求内容匹配到已知的恶意站点，network thread
会展示一个警告页。此外 CORB 检测也会触发确保敏感数据不会被传递给渲染进程。
第六步：浏览器渲染
web前端网络知识体系梳理之二：客户端渲染全流程以及常见性能优化
二、知识点概念解析
（1）进程间通信 IPC (InterProcess Communication)：
每个进程各自有不同的用户地址空间，任何一个进程的全局变量在另一个进程中都看不到，所以进程之间要交换数据必须通过内核，在内核中开辟一块缓冲区，进程1把数据从用户空间拷到内核缓冲区，进程2再从内核缓冲区把数据读走，内核提供的这种机制称为进程间通信（IPC，InterProcess Communication）
（2）编译相关概念
- 标记：（token）
这里的标记是一个字串，是构成源代码的最小单位。从输入字符流中生成标记的过程叫作标记化（tokenization），在这个过程中，词法分析器还会对标记进行分类。
词法分析器通常不会关心标记之间的关系（属于语法分析的范畴），举例来说：词法分析器能够将括号识别为标记，但并不保证括号是否匹配。
例子：针对如下C语言表达式：sum=3+2;
将其标记化后可以得到下表内容：
| 语素 | 标记类型 |
|---|---|
| sum | 标识符 |
| = | 赋值操作符 |
| 3 | 数字 |
| + | 加法操作符 |
| 2 | 数字 |
| ; | 语句结束 |
ps:标记经常使用正则表达式进行定义，像lex一类的词法分析器生成器就支持使用正则表达式。语法分析器读取输入字符流、从中识别出语素、最后生成不同类型的标记。其间一旦发现无效标记，便会报错。
- 上下文无关文法：
上下文无关文法（context-free grammar, CFG），是一种用来对某种语言进行形式化的、精确的描述的工具。有了这个工具，我们就可以很方便的定义一种语言的语法了。CFG是一个四元组（N, T, P, S），CFG 的组成如下：
N 是非终结符的集合；
T 是终结符的集合；
P 是一条产生式规则；
S是（唯一的）开始符号；
- 词法分析：
词法分析（lexical analysis）是计算机科学中将字符序列转换为标记（token）序列的过程。进行词法分析的程序或者函数叫作词法分析器（lexical analyzer，简称lexer），也叫扫描器（scanner）。词法分析器一般以函数的形式存在，供语法分析器调用。
- 语法分析：
如果把词法分析看作为字母组合成单词的过程，那么语法分析就是一个把单词组合成句子的过程。正如在词法分析中使用正则表达式来描述词法的规则一样，我们在语法分析中使用一种比 RE 表达能力更强的工具 —— 上下文无关文法，来描述语言的语法规则。我们可以把某一种语言看成无数个符合语法规则的句子的集合，根据给定的上下文无关文法我们可以判断某一个 Token 串是否符合某个语法规则；如果符合，那么我们可以把此文法和对应输入的 Token 串组合起来生成一个句子。整个流程如下图所示：
推荐阅读：
聊聊编译原理（二） - 语法分析
InfoQ 史上最全！图解浏览器的工作原理
进程间通信IPC (InterProcess Communication)
web前端网络知识体系梳理之四：CDN 的作用以及原理解析（详细）
web前端网络知识体系梳理之三：详解 “三次握手和四次挥手”
web前端网络知识体系梳理之二：客户端渲染全流程以及常见性能优化
web前端网络知识体系梳理之一：DNS 域名解析和 https 的局限性
感谢阅读，欢迎批评指正，如果觉得还可以的话，麻烦点赞关注，谢谢啦！希望大家能够在追求卓越中不断进步，让优秀成为一种习惯~
3516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
