playwright之浏览器基础浅识-第二篇

浏览器是做前端或者自动化测试开发都要接触到的工具，跟我们工作息息相关，所以有必要了解下浏览器的基本知识，可以提高我们的认知水平。

一、浏览器的发展史

1991年, Berners Lee建立了第一代浏览器world wide web，只支持文本图片显示

1993年，Mosaic发布

1994年，网景公司发布了网景浏览器，大受欢迎

1995年，微软发布了万恶的IE1.0和IE2.0, 第一次浏览器大战正式打响

1996年，window集成了IE3.0，网景市场份额占86%

1998年，网景成立了Mozilla基金会，在该基金会推动下，开发Firefox迎击IE

1999年，在windows操作系统帮下IE占领市场99%

 2003年，苹果推出了safari浏览器

2004年，网景公司发布了Firefox1.0，来应对IE，第二次浏览器大战正式打响

2005年，苹果开源了safari浏览器的内核Webkit内核

2008年，谷歌以webkit为内核创建了新的项目chromium, 在该项目基础上发布了Chrome浏览器。

2015年，微软放弃了IE浏览器，推出了Edge浏览器作为替代品，但为时已晚

 

正如我们现在所见到的，IE由于其兼容性及极差的体验，慢慢被用户遗弃。Chrome凭借其良好的用户体验和强大的功能，成为了后来者居上，占领了大部分市场。

 

二、浏览器的组成

• 用户界面：包括地址栏、 前进/后退按钮、 书签菜单等
• 浏览器引擎：在用户界面和渲染引擎之间传送指令
• 渲染引擎（内核）：负责显示请求的内容。 如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。也是我们常说的浏览器内核。
• UI 后端 ： 用于绘制基本的窗口部件，比如组合框和窗口等。
• 网络部分 - 主要用于网络调用，例如：HTTP 请求，其接口与平台无关，并为所有的平台提供底层实现。
• JS 解释器 - 也可以称为 JS 内核，主要负责处理 JavaScript 脚本程序，一般都会附带在浏览器之中，例如 chrome 的 V8 引擎；
• 数据存储 - 保存类似于 cookie、storage 等数据部分，HTML5 新增了 web database 技术，一种完整的轻量级客户端存储技术。

 

 

 

常用的浏览器及对应的引擎如下：

       

 

 

三、浏览器进程

浏览器进程 Browser Process

网络进程 Network Process

GPU进程 GPU Process（图形处理进程）

插件进程 Plugin Process

渲染器进程 Renderer Process

缓存进程 Cache Process

 

• 浏览器进程 Browser Process

UI thread ： 控制浏览器上的按钮及输入框；

network thread: 处理网络请求，从网上获取数据；

storage thread（存储线程）: 控制文件等的访问；

 

• 渲染器进程 Renderer Process

1.主线程 Main thread

2.工作线程 Worker thread

3.排版（合成）线程 Compositor thread

4.光栅线程 Raster thread

 

四、浏览器渲染原理

 

 

五、关于电脑刷新率

电脑刷新频率一般为60HZ，1秒60次去更新屏幕图像，也是就1000/60=16.7ms 执行一次更新。系统在每次绘制前都会调用requestAnimationFrame回调函数，确保每次绘制都会执行回调，不会丢帧现象，平时说的超频就是修 改这里的刷新率，有些电脑可以支持75HZ,144hz甚至更高

 

 

六、其它

Chromium 和Chrome区别

Chromium 是谷歌开源的浏览器项目，由开源社区维护, 国内很多浏览器也是基于此项目开发而成的。

Chrome是基于Chromium 开发的，闭源的

 

群名称：playwright开发交流群

QQ群 号：910030525

 相关文章
什么是playwright-第一篇
playwright之浏览器基础浅识-第二篇 
playwright之浏览器基础浅识-第三篇