我们几乎每天都在使用浏览器，我们在浏览器地址栏中输入网址或者通过链接打开网页后，浏览器就会将目标内容呈现出来。这个过程具体是如何进行的，对于前端开发者来说，了解清楚是很有必要的，因为更细化的了解浏览器的工作原理，能帮助 我们更好地理解那些最佳开发实践的缘由，并在开发中选择更好的实现方案，比如怎么加载JS脚本最好、网页性能如何调优等等。
浏览器结构
先来了解下浏览器的主要结构，参考how browser work，如图所示
- 用户界面
浏览器中菜单栏、地址栏、向前/回退按钮、书签目录等除了页面显示窗口外的所有地方都属于用户界面。 - 浏览器引擎
浏览器引擎是各个组件之间通信的核心，它在用户界面与渲染引擎间传递指令。为渲染引擎提供接口，将用户界面上的给定的网址、用户浏览器操作（如刷新、向前、退后等）信息提供给为渲染引擎；同时，浏览器引擎 为用户界面提供各种如错误提示、资源下载进度等消息。还有，它可以在客户端本地缓存中读写数据。 - 渲染引擎 渲染引擎负责显示请求的内容。例如，如果请求的内容是HTML文件，则它负责解析文件里的html、css等信息，并将网页内容渲染呈现出来。所以渲染引擎的内部包括了Html解析器、css解析器等。
- 网络模块
处理网络请求，比如http请求网页、图片资源等。 - JavaScript引擎 网页中经常有JS脚本来动态操作网页，就是靠这个JS引擎来解析执行的。比如Chrome浏览器的V8引擎、Safari浏览器的JavaScriptCore引擎。
- 界面后端 前面介绍的用户界面是展示给用户看到的，界面后端是浏览器的图形库，用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮、组合框和窗口等，不同浏览器绘制的视觉效果不太想同，但功能基本都是一样的。
- 数据存储 管理用户数据，将与浏览会话相关联的各种数据存储在硬盘上，例如保存书签、cookie、缓存、偏好设置等各种数据，可通过浏览器引擎提供的API进行调用。
这里面最核心的内容是渲染引擎和JS引擎，后面将会详细介绍这两个引擎的相关内容。 这里要了解并不是所有的浏览器的渲染引擎和JS引擎都相同的，这取决于浏览器厂家的技术实现，常见浏览器的渲染引擎和JS引擎如下：
浏览器的多进程架构
首先, 我们知道对于操作系统来讲，浏览器应用程序是一个独立的进程。如果是Mac电脑，打开Chrome浏览器后，在电脑的「活动监视器」中就可以看到Chrome浏览器进程的相关信息。
那浏览器应用内部工作情况又是怎样的呢？其架构是单进程多线程模型，还是多进程多线程模型，还是其他模型架构呢？下面给出答案。 现代的浏览器采用的都是多进程架构，主要包含以下五种进程：
- 浏览器进程
浏览器进程是浏览器的主线程，主要负责浏览器的页面管理，如果页面创建、页面关闭、页面前进后退，也负责网络资源下载管理等，该进程对应上述浏览器组成中的浏览器引擎，整个浏览器应用程序只有一个。 - 渲染进程
渲染进程是浏览器的内核进程，负责页面渲染、JS脚本的执行，页面事件的处理等，对应的是上述的渲染引擎和JS引擎，在浏览器中，每个Tab窗口页对应一个渲染进程，所以一个浏览器可以包含多个渲染进程。 - GPU进程
负责GPU(Graphic Processing Unit，图形处理器)渲染，界面绘制，整个浏览器应用程序只有一个。 - 插件进程
浏览器安装的插件(扩展程序)，每个插件会创建一个进程，比如掘金插件、印象笔记插件等，所以一个浏览器有可以包含多个插件进程。 - 网络进程 负责网络请求相关操作，整个浏览器应用程序只有一个。
为了直观的理解这些进程，我们可以打开Chrome 的「任务管理器」查看当前浏览器中运行的所有进程以及每个进程的内存占用空间、进程ID等信息。
- 1个浏览器进程
- 1个GPU进程
- 1个网络进程
- 3个渲染进程（打开了三个标签页，每个标签页对应一个渲染进程）
- 3个扩展程序进程
浏览器多进程架构主要有如下优势：
- 避免单个页面崩了影响整个浏览器
- 避免第三方插件崩了影响整个浏览器 这些优势保证了浏览器的稳定性。
浏览器工作大体流程
了解完浏览器的设计架构后，接下来了解下 从输入网址到网页内容展示的整体流程吧。 可以把这个整体流程按照前后顺序分为两大部分：网络资源请求 和 浏览器渲染。
- 网络资源请求过程是根据URL从服务器上请求对应的资源，包括URL解析、DNS查询、TCP连接、HTTP请求、服务器端响应、断开请求。
- 浏览器渲染过程是对请求到的资源进行渲染展示，也就是浏览器渲染进程负责的事情，包括构建dom tree、构建cssdom tree，构建rendering tree 、layout、painting。
这两个过程涉及到很多的知识点，后面继续写两篇文章来分别介绍~
