输入url后到页面的呈现的详细过程

发表于：
字数：3105 阅读：≈ 7分钟 浏览：

一个老生常谈的问题，一个面试时很大概率出现的问题。

虽然网上也有很多这种文章，这里自己写一篇。一是为了亲自过一遍加深理解和记忆，二是留个档，以便日后回顾。

大致流程

  1. URL 解析
  2. DNS 查询
  3. TCP 连接
  4. 处理请求
  5. 接受响应
  6. 渲染页面

URL解析

首先浏览器会判断你输入的是一个合法的URL还是一个带搜索的关键词，并且根据输入的内容自动完成自动匹配，字符编码等操作。

DNS查询

  1. 浏览器缓存 浏览器会先检查是否在缓存中，没有则调用系统库函数进行查询。
  2. 操作系统缓存 操作系统也有自己的 DNS缓存，但在这之前，会向检查域名是否存在本地的 Hosts 文件里，没有则向 DNS 服务器发送查询请求。
  3. 路由器缓存 路由器也有自己的缓存。
  4. ISP DNS 缓存 ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器，它们在大多数情况下都会有缓存。
  5. 根域名服务器查询 在前面所有步骤没有缓存的情况下，本地 DNS 服务器会将请求转发到互联网上的根域

什么是dns劫持？

dns劫持是一种互联网攻击，通过攻击域名解析服务器（DNS），或伪造域名解析服务器（DNS）的方法，把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。

DNS-Prefetch是什么？

DNS预解析是一种前端优化的手段。为了帮助浏览器对某些域名进行预解析，我们可以在html标签中添加

1

<link rel="dns-prefetch" href="//domain.com">

TCP连接

应用层：发送 HTTP 请求 在前面的步骤我们已经得到服务器的 IP 地址，浏览器会开始构造一个 HTTP 报文，其中包括： 请求报头（Request Header）：请求方法、目标地址、遵循的协议等等 请求主体（其他参数） 传输层：TCP 传输报文 传输层会发起一条到达服务器的 TCP连接，为了方便传输，会对数据进行分割（以报文段为单位），并标记编号，方便服务器接受时能够准确地还原报文信息。 在建立连接前，会先进行 TCP三次握手。

什么是三次握手？

第一次握手：Client将标志位SYN置为1，随机产生一个值seq=J，并将该数据包发送给Server，Client进入SYN_SENT状态，等待Server确认。 第二次握手：Server收到数据包后由标志位SYN=1知道Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给Client以确认连接请求，Server进入SYN_RCVD状态。 第三次握手：Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了。

网络层：IP协议查询Mac地址 将数据段打包，并加入源及目标的IP地址，并且负责寻找传输路线。 判断目标地址是否与当前地址处于同一网络中，是的话直接根据 Mac 地址发送，否则使用路由表查找下一跳地址，以及使用 ARP 协议查询它的 Mac 地址。 数据链路层：以太网协议 以太网协议 根据以太网协议将数据分为以“帧”为单位的数据包，每一帧分为两个部分： 标头：数据包的发送者、接受者、数据类型 数据：数据包具体内容

处理请求

当数据包到达服务端后，它也通过数据链路层、网络层、传输层、应用层。通过层层解析，服务端拿到客户端发送的http报文，对内容进行解析、处理，并将所需要的静态文件等，通过刚刚的路径传回客户端。

接受响应

浏览器接收到来自服务器的响应资源后，会对资源进行分析。

首先查看 Response header，根据不同状态码做不同的事（比如上面提到的重定向）。

然后，对响应资源做缓存。

接下来，根据响应资源里的 MIME 类型去解析响应内容（比如 HTML、Image各有不同的解析方式）。

渲染页面

浏览器会解析HTML文件生成DOM树，解析CSS文件生成CSS规则树，然后二者会合并成一颗渲染树。

渲染树会忽略那些不需要渲染的节点，比如设置了display:none的节点。

计算

通过计算让任何尺寸值都减少到三个可能之一：auto、百分比、px，比如把rem转化为px。

级联

浏览器需要一种方法来确定哪些样式才真正需要应用到对应元素，所以它使用一个叫做specificity的公式，这个公式会通过：

  • 标签名、class、id
  • 是否内联样式
  • !important 然后得出一个权重值，取最高的那个。

渲染阻塞

当遇到一个script标签时，DOM 构建会被暂停，直至脚本完成执行，然后继续构建 DOM 树。 但如果 JS 依赖 CSS 样式，而它还没有被下载和构建时，浏览器就会延迟脚本执行，直至 CSS Rules 被构建。 所以我们知道：

  • CSS 会阻塞 JS 执行
  • JS 会阻塞后面的 DOM 解析

为了避免这种情况，应该遵循以下原则：

  • CSS 资源排在 JavaScript 资源前面
  • js 放在 HTML 最底部，也就是 前

布局与绘制

确定渲染树种所有节点的几何属性，比如：位置、大小等等，最后输入一个盒子模型，它能精准地捕获到每个元素在屏幕内的准确位置与大小。

然后遍历渲染树，调用渲染器的 paint() 方法在屏幕上显示其内容。

回流与重绘

回流(reflow)

当浏览器发现某个部分发现变化影响了布局时，需要倒回去重新渲染，会从html标签开始递归往下，重新计算位置和大小。 reflow基本是无法避免的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变化。

重绘(repaint)

改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时，就会发生重绘。 每次重绘后，浏览器还需要合并渲染层并输出到屏幕上。 回流的成本要比重绘高很多，所以我们应该尽量避免产生回流。

比如：

display:none 会触发回流，而 visibility:hidden 只会触发重绘。

JavaScript 编译执行

1.词法分析

JS 脚本加载完毕后，会首先进入语法分析阶段，它首先会分析代码块的语法是否正确，不正确则抛出“语法错误”，停止执行。 几个步骤：

分词，例如将var a = 2，，分成var、a、=、2这样的词法单元。 解析，将词法单元转换成抽象语法树（AST）。 代码生成，将抽象语法树转换成机器指令。

2.预编译

JS 有三种运行环境：

  • 全局环境
  • 函数环境
  • eval 每进入一个不同的运行环境都会创建一个对应的执行上下文，根据不同的上下文环境，形成一个函数调用栈，栈底永远是全局执行上下文，栈顶则永远是当前执行上下文。 创建执行上下文 创建执行上下文的过程中，主要做了以下三件事：
  • 创建变量对象
    • 参数、函数、变量
  • 建立作用域链
    • 确认当前执行环境是否能访问变量
  • 确定 This 指向 3.执行

虽然 JS 是单线程的，但实际上参与工作的线程一共有四个：

其中三个只是协助，只有 JS 引擎线程是真正执行的

  • JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8 引擎
  • 事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行
  • 定时器触发线程：主要控制setInterval和setTimeout，用来计时，计时完毕后，则把定时器的处理函数推进事件队列中，等待 JS 引擎线程。
  • HTTP 异步请求线程：通过XMLHttpRequest连接后，通过浏览器新开的一个线程，监控readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进事件队列中，等待JS引擎线程执行。

宏任务

分为：

  • 同步任务：按照顺序执行，只有前一个任务完成后，才能执行后一个任务
  • 异步任务：不直接执行，只有满足触发条件时，相关的线程将该异步任务推进任务队列中，等待JS引擎主线程上的任务执行完毕时才开始执行，例如异步Ajax、DOM事件，setTimeout等。

微任务

微任务是ES6和Node环境下的，主要 API 有：Promise，process.nextTick。 微任务的执行在宏任务的同步任务之后，在异步任务之前。