前言

在前段时间的面试中，许多候选人对于浏览器中代码的执行过程都不甚了解，多数是只停留在知道个大概。最近正好在极客时间上拜读了大神的浏览器工作原理，读完对浏览器工作原理有种豁然开朗之感，趁有空余时间就把自己对这块的理解整理了一下，希望对各位小伙伴能有所帮助吧。

相关知识

内存空间

在浏览器中JavaScript的执行空时的存储空间可分为三种：代码空间、栈空间、堆空间。

• 代码空间：存储可执行代码
• 栈空间：JavaScript代码编译执行时候创建的执行上下文存储位置，主要存储原始类型的数值，以及引用类型的引用。
• 栈帧：是指为一个函数调用单独分配的那部分栈空间。
• 堆空间：在对内存中数据的存储是无序，并且每个存储在堆空间的数据都是具备唯一的索引值的，我们可以根据索引取到其真正的值。例如在js的对象数据类型：我们把对象的引用存储在栈中，这样就不会因为对象占用过大内存导致性能的问题。所以在操作对象时，实际上操作的都是对象的引用（地址指针）。

注意：栈的含义有以下几种借鉴畅畅_f7af的文章

含义一：数据结构 stack的第一种含义是一组数据的存放方式，特点为LIFO，即后进先出（Last in, first out）。
含义二：代码运行方式  stack的第二种含义是"调用栈"（call stack），表示函数或子例程像堆积木一样存放，以实现层层调用。
含义三：内存区域  stack的第三种含义是存放数据的一种内存区域。程序运行的时候，需要内存空间存放数据。一般来说，系统会划分出两种不同的内存空间：一种叫做stack（栈），另一种叫做heap（堆）

JavaScript代码执行

• 调用栈：在JavaScript中由于它是单线程所以在执行函数时候会产生一个调用栈，在JavaScript代码执行时（当调用某一个函数时此函数会进入调用栈）会压入调用栈，执行完成时候会弹出调用栈，这也就是我们JavaScript中函数的一个生命周期。
  网络异常，图片无法展示

  |
• 队列：在JavaScript中我们都了解的事件机制（点击 鼠标移动 dom加载等等），而事件执行的方式肯定不能是采用调用栈的方式来，他实际的结构是队列的方式执行的，即先进先出，后进后出。
  网络异常，图片无法展示

  |

浏览器中的进程

注：JavaScript执行是单线程的，浏览器是多进程的

• 进程：现在浏览器打开时一般都会执行多个进程，处理主进程外大概有如下几个，插件进程/网络进程/渲染进程。
• 线程：线程是一条执行路径，是程序执行时的最小单位，它是进程的一个执行流，是CPU调度和分派的基本单位，一个进程可以由很多个线程组成，线程间共享进程的所有资源，每个线程有自己的堆栈和局部变量。线程由CPU独立调度执行，在多CPU环境下就允许多个线程同时运行。同样多线程也可以实现并发操作，每个请求分配一个线程来处理。
• 单线程（为何js是单线程的）：当浏览器中JS引擎被设计为多线程的，那么DOM之间必然会存在资源竞争，那么语言的实现会变得非常臃肿，在客户端跑起来，资源的消耗和性能将会是不太乐观的，故设计为单线程的形式，另外在浏览器如果是多线程的那用户在交互（操作DOM）时候会页面出现许多意想不到的显示。
• 多线程：在htm5标准中提出了Web Worker多线程的操作，但是这个多线程是受控于主线程的并且不能操作页面上的DOM元素。

页面渲染流程

浏览器解析URL

当我们在浏览器的导航栏中输入一个网站地址或者其他内容后会经历以下几个过程

• 判断输入是否是一个合法的url规则：通过特点的规则来判断输入的内容是否符合url规则
• 组合成一个合法的url或调用浏览器默认的搜索引擎
• 当前页面触发beforeunload事件：在去请求输入内容时候会触发当前页面的beforeunload事件，在这里我们可以停止浏览器的后续操作。
• 浏览器发送http请求：此时浏览器的网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接发起网络请求流程。在网络请求中浏览器会进行DNS解析以获取真实的服务器ip地址。。
• 服务器返回相关数据

响应数据处理

• 进程开始解析响应头：浏览器会获取当前请求的返回状态码如果等于200会继续进行下一步，如果非200则会进行对应的数据处理，例：301/302会进行跳转处理。
• 浏览器解析响应类型：请求状态码为200时候浏览器会去读取响应类型，根据浏览器的响应类型来判断下一步的处理逻辑，如果是text/html则进入准备渲染阶段。
• 进入准备页面渲染阶段

页面渲染处理

• 渲染进程启动：浏览器的渲染进程通常是一个tab就会启动一个渲染进程，以下情况时候多个tab会共用一个渲染进程，1.如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程；2.打开多个空白的tab页面
  网络异常，图片无法展示

  |
  如图所示，此时我的浏览器知识开了两个tab页。
  
• 渲染进程获取返回的html文件：浏览器主进程会把网络进程获取到的数据通过进行数据通道交给渲染进程（注：此时浏览器还没有刷新），渲染进程接受完之后会告诉浏览器主进程接受完毕，此时开始浏览器主进程开始更新整个页面。
  
• 页面解析和加载：构建DOM 树=》样式计算=》布局=》分层=》绘制=》分块=》光栅化和合成
  
• 构建DOM树：
  
• 样式计算：把 CSS 转换为浏览器能够理解的结构=》转换属性值=》计算DOM中的样式。最终得到的如图所示
  网络异常，图片无法展示

  |
  
  
• 布局：创建（遍历页面所有DOM节点）=》计算（根据css相关属性计算DOM节点的位置）
  

注：布局的创建和计算非常复杂，对网站的性能消耗也是最大的。

• 分层：我们需要知道浏览器中的页面是分层的，在绘制之前我们应当要理清楚布局树的层级关系
  网络异常，图片无法展示

  |

注：此图片来自极客时间

• 绘制：渲染引擎开始绘制DOM图块
• 光栅化和合成：图块转换为位图（这块是美术知识后面打算了解下去）

注：本节主要说明基本流程，详细的过程会在下面的章节中分享

总结

本章节主要介绍了浏览器（chrome）原理的基础知识，希望能帮助大家在去了解浏览器原理时候更容易去看懂。