web前端网络知识体系梳理之五:深入分析浏览器原理(快乐学英语~)

在这里插入图片描述
写在前面:

(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 用以协调浏览器的其它进程。
在这里插入图片描述

进程负责的工作
Browser1.负责包括地址栏,书签栏,前进后退按钮等部分的工作;2.负责处理浏览器的一些不可见的底层操作,比如网络请求和文件访问;
Renderer负责一个 tab 内关于网页呈现的所有事情
Plugin负责控制一个网页用到的所有插件,如 flash
GPU负责处理 GPU 相关的任务

不同进程负责的浏览器区域示意图
还有其它各种各样的 Process ,大家可以在 Chrome 浏览器中,打开更多工具—> 任务管理器进行参考
在这里插入图片描述

Chrome多进程架构的好处

  1. 多进程可以使浏览器具有很好的容错性: 假如你有三个tab,你就会有三个独立的渲染进程。当其中一个tab的崩溃时,你可以随时关闭这个tab并且其他tab不受到影响。可是如果所有的tab都跑在同一个进程的话,它们就会有连带关系,一个挂全部挂。
    在这里插入图片描述

  2. 提供安全性和沙盒性(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 的局限性


感谢阅读,欢迎批评指正,如果觉得还可以的话,麻烦点赞关注,谢谢啦!希望大家能够在追求卓越中不断进步,让优秀成为一种习惯~

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页