浏览器导航渲染流程(从输入 URL 到页面展示，这中间发生了什么？)

转自---> 前端食堂

这是一道十分常见的面试题

image.png

流程

• 1、用户在地址栏输入内容后，地址栏会将输入的内容进行合成 URL。

• 2、当用户输入完内容并按下回车键时，浏览器会在当前页面执行 beforeunload 事件，你可以在这个钩子中询问是否要离开当前页面，常见于一些表单提交的场景。

• 3、接下来开始导航流程，浏览器进入加载状态。

• 4、浏览器的网络进程会先查找缓存中是否存在该资源，有的话直接返回，如果没有的话会发起 URL 请求。
  : 浏览器获取了这个url，当然就去解析了，它先去缓存当中看看有没有，从 浏览器缓存-系统缓存-路由器缓存 当中查看，如果有从缓存当中显示页面，然后没有那就进行步骤5；
  缓存就是把你之前访问的web资源，比如一些js，css，图片什么的保存在你本机的内存或者磁盘当中。
  在chrome浏览器中输入网址： chrome://chrome-urls/ chrome-urls是一个看到所有的Chrome支持的伪RUL，找到其中的chrome://appcache-internals/ 可以看见chrome的本地缓存地址：Instances in: C:\Users\User\AppData\Local\Google\Chrome\User Data\Default (0)

• 5、接下来首先要进行的是 DNS 解析，获得请求域名的服务器的 IP 地址(这个过程我也画了一张图，放在下文)，如果协议是 HTTPS，还需要建立 TLS 连接。

• 6、接着利用目标服务器的 IP 地址建立 TCP 连接(三次握手)，构建 HTTP 请求报文，发起请求。服务器收到请求后，会根据请求信息生成响应报文。

• 7、浏览器的网络进程接收到响应报文后进行解析，如果状态码是 301 或者 302(还有 300、303 等 3xx 的状态码)，则需要取得响应头中的 Location 对应的地址进行重定向，再重新发起请求。

• 8、如果状态码是 200，浏览器会根据响应头中的 Content-Type 字段来识别返回的响应体数据类型，从而进行不同的流程。如 text/html 代表 html 格式， application/octet-stream 代表字节流类型，浏览器会按照下载类型来处理。

• 9、如果是 HTML，浏览器会遵循 process-per-site-instance 默认策略准备渲染进程，准备好后就提交文档(将网络进程接收到的数据提交给渲染进程)。文档被提交后，渲染进程便开始进行页面解析和子资源的加载。

• process-per-site-instance 默认策略：每个标签对应一个渲染进程，如果从一个页面打开了一个新页面，新打开的页面与当前页面还属于同一个站点的话，那么新页面会复用当前页面的渲染进程。

浏览器的网络进程会先查找缓存中是否存在该资源，有的话直接返回，如果没有的话会发起 URL 请求

image.png

目前 Chrome 的浏览器包括如下进程：

• 1 个浏览器(Browser)主进程
• 1 个 GPU 进程
• 1 个网络(NetWork)进程
• 多个渲染进程(运行在沙箱模式下)
• 多个插件进程

HTML渲染流程

    在上图中一并画了出来，需要经过以下几个阶段：构建 DOM 树--->样式计算--->布局--->分层--->绘制--->分块--->光栅化--->合成

DNS

DNS 的解析是一个递归流程，顺序如下图中数字标记所示：

image.png

• 根 DNS 服务器：返回顶级域 DNS 服务器的 IP 地址。
  扯一句：世界上有13台根服务器，而有N台根镜像服务器，所以有些国外地址会被墙 ~~~，说明域名解析第一步并不是走的根服务器，而是由根镜像服务器控制住做了过滤，有选择性地进行了域名解析，所以如果根域名服务器出了问题，我觉得我们国内仍然可以做到正常访问，当然只是新更新的域名无法访问。
• 顶级 DNS 服务器：返回权威 DNS 服务器的 IP 地址
• 权威 DNS 服务器：返回相应主机的 IP 地址

JS 栈 垃圾数据回收

• 示例代码1：

function hello () {
    let name = '数据'
}
hello()
console.log(name) // Uncaught ReferenceError: name is not defined   在执行上下文时，存放在栈内存中的name地址和数据【内存块】已经回收掉了，所以在全局上下文中是访问不到。

• 示例代码2：

function hello () {
    let name = '前端食堂'
    let food = { name: '回锅肉' } 
    function world () {
        var description = { slogan: '吃好每一顿饭' }
    }
    world()
}
hello()

上面的代码所对应的内存堆栈空间如下图所示：

image.png

栈中的垃圾回收比较简单，当一个函数执行结束后，JavaScript 引擎会通过向下移动 ESP 来销毁函数调用栈中所保存的执行上下文，ESP 就是记录当前执行状态的指针。

• 垃圾回收操作会暂停 JavaScript 的运行，回收完毕后才会恢复执行，这种行为就是全停顿。

为了降低全停顿所带来的卡顿，V8 引擎采用了增量标记(Incremental Marking) 算法进行优化，将标记过程分为一个个小任务，这些小任务的执行时间比较短，可以穿插在其他的 JavaScript 任务中间执行，这样就不会有明显的卡顿了。

当然，V8 所采用的优化方案不只这一种，而是多种方案综合使用的，除了增量回收还有并行回收、并发回收等。

并行回收：垃圾回收器会使用多个辅助线程来并行执行垃圾回收
并发回收：回收线程在执行 JavaScript 的过程中，辅助线程在后台执行垃圾回收
如果你了解【** React 的 Concurrent 模式中时间切片的原理 **】，它的实现思想是不是与增量标记算法有异曲同工之妙呢。