前端性能优化-页面性能优化-认识浏览器1

浏览器的主要作用

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示选择的网络资源。

浏览器的组成结构

用户界面（User Interface）

包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的请求页面外，其他显示的各个部分都属于用户界面

浏览器引擎（Browser engine）

在用户界面和渲染引擎之间传送指令。

渲染引擎（Rendering engine）

负责显示请求的内容，如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。

网络（Networking）

用于网络调用，比如HTTP请求。其接口与平台无关，并为所有平台提供底层实现。

用户界面后端（UI Backend）

用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

JavaScript解释器（JavaScript Interpreter）

用于解析和执行JavaScript代码，如V8引擎。JS引擎线程负责解析JavaScript脚本，运行代码。

JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行。

数据存储（Data Persistence）

这是持久层。浏览器需要在硬盘上保存各种数据，例如Cookie。新的HTML规范（HTML5）定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

浏览器是多进程的

进程线程简单的理解：进程里面可以有多个线程，进程就是聊天工具，线程是单个会话

• 浏览器是多进程的
• 浏览器之所以能够运行，是因为系统给它的进程分配了资源（CPU、内存）
• 简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。

浏览器里面的进程

1.Browser进程： 浏览器的主要进程（负责协调、主控），只有一个。
作用有

• 负责浏览器界面显示，与用户交互。如前进，后退等。
• 负责各个页面的管理，创建和销毁其他进程
• 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
• 网络资源的管理，下载等

2.第三方插件进程： 每种类型的插件对应一个进程，仅当使用该插件时才创建

3.GPU进程： 最多一个，用于3D绘制等。

4.渲染进程（浏览器内核）（Renderer进程，内部是多线程的）

• 默认每个Tab页面一个进程，互补影响
• 主要作用为页面渲染，脚本执行，时间处理等

渲染进程是多线程的：

1.GUI 渲染线程

• 负责渲染那浏览器界面，解析HTML，CSS，构建DOM树和RendererObject树，布局和绘制等。
• 当界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行
• 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即执行。

2.JS 引擎线程

• 也称为JS内核，负责处理Javascript脚本程序。
• JS引擎线程负责解析Javascript脚本，运行代码。
• JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行
• 同样注意，GUI渲染线程与JS引擎线程是互斥的。所以如果JS执行的时间过长，要放在body下面，否则会导致页面渲染加载阻塞。

3.事件触发线程

• 管理着事件队列

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】