前端的生命周期

地址栏输入 url 地址到整个网页加载完成经历了怎样的过程? 1、浏览器接收到 URL，到网络请求线程的开启。（开启网络线程，请求对方的服务器） 2、一个完整的 http 请求的发出。（请求对方服务的话，需要建立一个 http 请求） 3、服务器接到请求并转到具体的处理后台。（代理服务器，进行代理和处理，由后端去处理） 4、前后端之间的 HTTP 交互和涉及到的缓存机制。（反向代理实现负载均衡和缓存） 5、浏览器接收到数据包后的关键渲染路径。 6、JS 引擎的解析过程。

一、网络请求线程开启

浏览器接收到我们从地址栏输入的 URL 到开启网络请求线程，这个阶段是在浏览器内部完成的，对 URL 的解析如下：

分析 https://www.baidu.com

• url:统一资源定位符
• https:传输协议
• www:服务器
• baidu.com:域名

进程和线程

进程就是一个程序运行的实例，操作系统会为进程创建独立的内存，用来存放运行所需的代码和数据； 线程是进程的组成部分，每个进程至少有一个主线程和若干个子线程，这些线程由所属的进程进行启动和管理。由于多个线程可以共享操作系统为其所属的同一个进程所分配的资源，所以多线程的并行处理能有效的提高程序的运行效率。

进程和线程之间的区别：

• 只要某个线程执行出错，将会导致整个进程崩溃。
• 进程与进程之间相互隔离。这保证了当一个进程挂起或崩溃的情况发生时，并不会影响其他进程正常运行，虽然每个进程只能访问系统分配给自己的资源，但可以通过IPC 机制进行进程间通信。
• 进程所占用的资源会在其关闭后由操作系统回收，即使进程中存在某个线程产生的内存泄露，当进程退出时，相关的内存资源也会被回收。
• 线程之间可以共享所属进程的数据。

单进程浏览器

2008 年前所有的浏览器都是单进程，他们将所有的功能模块都运行在同一个进程里面。 单进程浏览器存在的隐患：

• 流畅性：首先页面内存泄露，浏览器内核通常非常复杂，单进程浏览器打开再关闭一个页面的操作，通常会有一些内存不能完全回收，这样随着使用时间延长，占用的内存会越来越多，从来引起浏览器运行变慢；其次由于很多模块运行在同一个进程里，如 js 引擎，页面渲染，插件等，那么执行某个循环任务的模块就会阻塞其他模块的任务执行，这样难免会有卡顿的现象发生。
• 安全性：由于插件的存在，不免其中有些恶意脚本会利用浏览器漏洞来获取系统权限，进行引发安全问题的行为。
• 稳定性：由于所有的模块都运行在同一个进程里，对于稍复杂的 js 代码，如果页面渲染引擎崩溃，就会导致整个浏览器崩溃，同样各种不稳定第三方插件也是导致浏览器崩溃的隐患。

多进程浏览器

2008 年谷歌推出了 chrome 浏览器，是多进程浏览器，主要优势是，快，稳定，不容易崩溃。

主要分为了几个进程: 1、浏览器主进程：一个浏览器只有一个主进程，主要负责如菜单栏，标题栏，前进，后退，文件访问，子进程管理 2、GPU 进程：GPU（图形处理单元）最初是为了实现 3D 的 css 效果引入，后来随着网络及浏览器在页面中的使用需求越来越普遍，chrome 便加入了 GPU 进程。 3、插件进程：每个加入浏览器的插件开启一个独立的子进程。 4、网络进程：负责页面的网络资源加载，之前是属于浏览器主进程的一个模块，最近才独立出来 5、渲染进程：也称为浏览器内核，会为每个标签窗口开启一个独立的进程。

二、建立 HTTP 请求

这个阶段主要工作分为两部分：DNS 的解析和通信线路的建立

简单说就是:

• 首先发起请求的客户端浏览器要明确知道所要访问的服务器地址
• 然后建立通往该服务器地址的路径

DNS 解析

• 浏览器缓存：首先搜索浏览器的自身 DNS 缓存（缓存时间比较短，大概只有一分钟，且只能容纳 1000 条数据），看自身的缓存中是否有域名的对应条目，而且没有过期，如果没有过期解析到此结束。
• 系统缓存：如果浏览器自身缓存里没有找到对应的条目，那么浏览器会搜索自身操作系统的 DNS 缓存，如果找到没有过期，那么就会停止搜索解析到此结束。
• 路由器缓存：如果系统也没有搜索到，就会向路由器发送查询请求。
• ISP(互联网服务提供商)DNS 缓存，如果在路由器也没有找到，最后要查询 ISP 缓存的 DNS 服务器。

网络模型

为了使网络通信能够更加灵活，稳定及可互操作，国际标准化组织提出了一些网络架构模型 OSI 模型、TCP/IP 模型等

OSI 模型：

• 应用层
• 表示层
• 会话层
• 传输层
• 网络层
• 数据链路层
• 物理层

TCP/IP 模型：

• 应用层
• 传输层
• 网络层
• 数据链路层

TCP 链接

三次握手，四次挥手。

三、前后端的交互

当 TCP 链接建立好之后，便可以通过 HTTP 等协议进行前后端的通信，但在实际的网络访问中，并非浏览器与确定 IP 地址的服务器之间直接通信，往往会在中间加入反响代理服务器。

反响代理服务器

通过反响代理服务器实现负载均衡和缓存

后端处理流程

经反向代理收到请求后，具体的服务器后台处理流程大致如下：

• 首先会有一层统一的验证环节，如跨域验证，安全校验拦截等，如果不符合校验规则直接返回拒绝报文
• 通过验证才会进入后端程序代码执行阶段。
• 完成代码执行后，后台会以一个 HTTP 响应数据包的形式发送会请求的前端，结束本次请求。

HTTP 相关协议特征

http2.0 和 http1.1

浏览器缓存

强缓存和协商缓存

四、关键渲染路径（CRP）

经过网络请求过程后，从服务器获取到了所访问的页面文件后，浏览器如果将这些 html,js,css 等文件渲染出来

构建对象模型

html 生成 dom tree(dom 树)，css 生成 cssDom(层叠样式模型)，通过 dom tree 和层叠样式模型，生产渲染树(render tree)，通过计算等渲染到浏览器。