从输入URL到页面加载发生了什么（DNS解析和优化，TCP连接）

浏览器是多进程的，浏览器之所以能够运行，是因为系统给它的进程分配的资源（CPU和内存）

每打开一个Tab页，就相当于创建了一个独立的浏览进程，有时候为了性能考虑，浏览器的优化策略会将多个空白的Tab页进程合并为一个，在输入内容之后才分离处理创建另一个新的浏览进程。

在输入URL之后发生的过程：

• DNS解析
• TCP连接
• 发送http请求
• 服务器处理请求并返回 http报文
• 浏览器解析渲染页面
• 连接结束

DNS解析

这个过程实际上是浏览器将输入的url发送到DNS服务器进行查询，DNS服务器会返回当前查询url的IP地址。他实际上充当了一个翻译的角色，实现了网址到IP地址的转换。DNS解析式实际上是一个递归查询的过程。

DNS解析优化

DNS缓存：DNS存在多级缓存，从离浏览器的距离排序，有以下几种：

• 浏览器缓存
• 系统缓存
• 路由器缓存
• IPS服务器缓存
• 根域名服务器缓存
• 顶级域名服务器缓存
• 主域名服务器缓存

DNS负载均衡：DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器距离用户的地理位置的距离等等，这种过程就是DNS负载均衡，又叫做DNS的重定向。

TCP连接

HTTP协议是使用TCP作为其传输层协议的，当TCP出现瓶颈时，HTTP也会受到影响。HTTP报文是包裹在TCP报文中发送的，服务器端收到TCP报文时会解析提取出HTTP报文。但是这个过程存在一定的风险，HTTP报文是明文，如果中间被截取的话会存在一些信息泄露的风险。那么在进入TCP报文之前对HTTP做一次加密就可以解决这个问题了。HTTPS协议的本质就是HTTP+ SSL（或者TLS）。在HTTP报文进入TCP报文之前，先使用SSL对HTTP报文进行加密。从网络层级结构看，它位于HTTP协议与TCP协议之间。

HTTPS在传输数据之前需要客户端与服务器进行一个握手（TLS/SSL 握手），在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL使用了非对称加密，对称加密以及hash等。

前端常见面试题，三次握手_前端面试题 三次握手-CSDN博客

HTTP请求

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口（HTTP协议 80/8080，HTTPS协议443）。HTTP请求报文是由三部分组成：请求行，请求报头和请求正文。

请求行的格式如下：

Method Request-URL HTTP-Version CRLF

例如： GET index.html HTTP/1.1

常见的方法有：get post put delete options head等

服务器处理请求并返回HTTP报文

后端从在固定的端口接收到TCP报文开始，这一部分对应于编程语言中的socket。它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般由web服务器去进行。

HTTP响应报文由三部分组成：状态码，响应报头和响应报文。

状态码：

• 1xx：指示信息-表示请求已接收，继续处理
• 2xx：成功-表示请求已被成功接收、理解、接受
• 3xx：重定向-要完成请求必须进行更进一步的操作
• 4xx：客户端错误-请求有语法错误或请求无法实现
• 5xx：服务器端错误-服务器未能实现合法的请求

浏览器解析渲染页面

首先浏览器解析HTML文件构建dom树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上，涉及到回流（reflow）和重绘（repain）。

reflow：dom节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为reflow。

repain：当盒模型的位置、大小以及其他属性，如字体、颜色等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。

页面在首次加载的时候必然会经历重排重绘，重排重绘的过程非常消耗性能，会破坏用户体验，有时会造成页面卡顿，所以应尽可能减少。

浏览器在解析的过程中，如果遇到请求外部资源时，如图像、iconfont等，浏览器将异步请求下载该资源，并不会影响HTML文档进行加载，但是当文档加载过程中遇到js文件，HTML文档会挂起渲染过程，要等到文档中js文件加载完毕并解析执行完毕，才会继续HTML的渲染过程。原因是js可能会修改dom结构，导致下载点资源无用，浪费，因此js会阻塞后续资源下载。CSS的文件加载不影响JS文件的加载，但是却影响JS文件的执行。js代码执行前浏览器必须保证css文件以已经下载并加载完毕。