【📔 前端小笔记】浏览器输入URL以后发生了什么？

这个基本上是前端面试中的高频考题之一，由于从这个问题能衍生的问题实在是太多了，这也是前端工做的核心问题。

0. 大体流程

看图的话更容易记一些，主要就是如下四个过程：

1. URL 解析
2. 创建 TCP 链接
3. 服务器响应请求
4. 资源解析和渲染

下面将会基于这几个过程进行描述和简要的分析。

1. 浏览器输入 URL

1.1 域名和 ip 地址的区别是什么？如何进行映射？静态映射和动态映射的区别？

首先须要搞明白的是，域名和 ip 地址是不一样的，域名是为了更方便记忆 ip 所产生的，ip 才是服务器在网络上的真实地址。

IP 地址是用来惟一标识互联网上计算机的逻辑地址，让电脑之间能够相互通讯，每台连网计算机都依靠 IP 地址来互相区分，相互联系。

IP 地址一般指的是网络中的主机，而域名则一般表示一个网站，一个域名能够绑定到多个 ip 上，多个域名也能够绑定到一个 ip 上。

为了让域名和地址可以相互转换，就须要对其进行映射，有两种方式：

1. 静态映射 在浏览器端存储一份域名到 ip 地址的映射表，只供本设备使用。
2. 动态映射 利用 DNS 来进行域名解析，在专门的 DNS 服务器上配置主机到 IP 地址的映射。

   DNS（Domain Name System，域名系统），万维网上做为域名和 IP 地址相互映射的一个分布式数据库，可以使用户更方便的访问互联网，而不用去记住可以被机器直接读取的 IP 数串。DNS 协议运行在 UDP 协议之上，使用端口号 53。DNS 可供全部网络上的节点使用。

1.2 描述一下域名解析 && 浏览器查询 ip 的过程

关键词：DNS 查询、域名解析

1. 浏览器从缓存的映射表中寻找域名对应的记录，若是存在则直接返回 IP
2. 缓存中若是没有记录命中，则进行系统调用查询 hosts，查找用户定义的 IP 映射。
3. 前二者都无效的状况下， 向路由器发送 DNS 查询的请求，或者直接向用户定义的 DNS 服务地址发送域名解析的请求。

   DNS 服务器会从根域名服务器开始递归搜索，从.com 顶级域名服务器，到 baidu 的域名服务器。

1.3 短网址的实现 ShortURL

短网址的实现创建在转译和重定向的基础上，重定向的状态码包含 301 永久重定向和 302 临时重定向。

短码转译这里举出两个比较经典的算法：

1. 自增序列算法
2. 摘要算法

1.4 同源策略

源：协议://域名:端口，三者一致为同源

1.5 浏览器容许跨域加载的资源：

1. link href="XXX"
2. img src="XXX"
3. script src="XXX"
4. iframe "src"="XXX"

1.6 为何须要跨域？/ 跨域的几种方法？

跨域的缘由：浏览器拦截了非同源的请求

跨域的几种方式：

1. Jsonp (浏览器经过 script 请求，告知服务器执行 callback 的名称，服务器返回对应的数据执行体)
2. Websocket 通讯 （Origin 字段是关键）
3. CORS （当前主要的跨域方式，浏览器默认发起 CORS 请求，服务器设置 Access-Control-Allow-Origin 字段）
4. iframe 跨域
5. window.postMessage
6. 服务器代理跨域 Proxy

1.7 CSRF 攻击和防护

2. 创建 TCP 链接

关键词：TCP/IP 协议 / 四层模型 / 三次握手

2.1 TCP/IP 协议组是什么？

在 TCP/IP 协议组 中包含一系列用于处理数据通讯的协议：

• TCP (传输控制协议) - 应用程序之间的可靠通讯
• UDP (用户数据包协议) - 应用程序之间的简单通讯
• IP (网际协议) - 计算机之间的通讯
• ICMP (因特网消息控制协议) - 针对错误和状态
• DHCP (动态主机配置协议) - 针对动态寻址
• ... 如图所示

TCP / IP 协议组

• TCP/IP 意味着 TCP 和 IP 在一块儿协同工做。
• TCP 负责应用软件（好比你的浏览器）和网络软件之间的通讯。
• IP 负责计算机之间的通讯。
• TCP 负责将数据分割并装入 IP 包，而后在它们到达的时候从新组合它们。
• IP 负责将包发送至接受者。

在这其中须要着重了解一下的就是数据是如何进行处理的、TCP、IP 以及 TCP 和 UDP 的区别。

数据处理流程

2.2 TCP 与 UDP 的区别

• TCP 是面向链接的、可靠的流协议。流就是指不间断的数据结构，当应用程序采用 TCP 发送消息时，虽然能够保证发送的顺序，但仍是犹如没有任何间隔的数据流发送给接收端。TCP 为提供可靠性传输，实行“顺序控制”或“重发控制”机制。此外还具有“流控制（流量控制）”、“拥塞控制”、提升网络利用率等众多功能。
• UDP 是不具备可靠性的数据报协议。细微的处理它会交给上层的应用去完成。在 UDP 的状况下，虽然能够确保发送消息的大小，却不能保证消息必定会到达。所以，应用有时会根据本身的须要进行重发处理。
• TCP 和 UDP 的优缺点没法简单地、绝对地去作比较：TCP 用于在传输层有必要实现可靠传输的状况；而在一方面，UDP 主要用于那些对高速传输和实时性有较高要求的通讯或广播通讯。TCP 和 UDP 应该根据应用的目的按需使用。

浏览器利用 IP 直接与网站主机通讯。浏览器发出 TCP（SYN 标志位为 1）链接请求，主机返回 TCP（SYN，ACK 标志位均为 1）应答报文，浏览器收到应答报文发现 ACK 标志位为 1，表示链接请求确认。浏览器返回 TCP（）确认报文，主机收到确认报文，三次握手，TCP 链接创建完成。

2.3 三次握手的过程

2.4 四次握手的过程 / 为何四次握手最后须要等待 2MSL 的时间？

浏览器发送完最后的 ACK 请求以后，须要等待 2MSL 的时间，是由于为了保证客户端发送的最后一个 ACK 报文段可以到达服务器。

2.5 HTTP 和 HTTPS / 对称加密和非对称加密的区别

HTTP 主要版本：1.0（短链接）\1.1（长链接）\2.0（多路复用、头部压缩、加密传输）

HTTPS = HTTP + SSL

SSL 加密：非对称加密 + CA 证书体系

加密的两种分类：

1. 对称加密：只使用一个密钥
2. 非对称加密：客户端和服务器各具备私钥和公钥

3. 服务器响应请求

在 TCP 链接创建完成后，浏览器向主机发起一个 HTTP-GET 方法报文请求。请求中包含访问的 URL，也就是www.baidu.com/ ，还有 User-Agent 用户浏览器操做系统信息，编码等。

3.1 常见的服务器状态码

1** 请求状态

• 100 Continue 继续，通常在发送 post 请求时，已发送了 http、header 以后服务端将返回此信息，表示确认，以后发送具体参数信息

2** 响应状态

• 200 OK 正常返回信息
• 201 Created 请求成功而且服务器建立了新的资源

3** 资源状态

• 301 Moved Permanently 永久重定向，请求的网页已永久移动到新位置。
• 302 Found 临时重定向，适用于“因为不可预见的缘由该页面暂不可用”
• 303 See Other 临时重定向，全部方法变动为GET，防止表单提交跳转页面时因为页面刷新而致使的重复触发操做
• 304 Not Modified 未更改，特殊重定向，前端缓存机制涉及

4** 网页状态

• 400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。
• 404 Not Found 找不到如何与 URI 相匹配的资源。
• 412 Precondition Failed 条件判断失败，协商缓存机制涉及

5** 服务器状态

• 500 Internal Server Error 最多见的服务器端错误。

3.2 重定向的做用

重定向是为了负载均衡或者导入流量，提升 SEO 排名。利用一个前端服务器接受请求，而后负载到不一样的主机上，能够大大提升站点的业务并发处理能力；

重定向也可将多个域名的访问，集中到一个站点；因为 baidu.com，www.baidu.com会被搜索引擎认为是两个网站，照成每一个的连接数都会减小从而下降排名，永久重定向会将两个地址关联起来，搜索引擎会认为是同一个网站，从而提升排名。

4. 资源解析和渲染

4.1 页面生成渲染树的过程（Render Tree）

4.2 如何减小页面的重排（Reflow）重绘(Repaint)

1. 减小对 DOM 的操做
2. Js 合并操做（document.createDocumentFragment, el.style.cssText="...."）
3. CSS 切换类名
4. 缓存布局信息，减小属性访问

4.3 <script> 为何建议放在 HTML 的最后部分？

js 的加载和执行会阻塞渲染进程。

4.4 浏览器的事件循环机制 EventLoop \ 宏任务和微任务

4.5 浏览器缓存机制

强缓存：Expires \ Cache-control

协商缓存: Etag \ Last-modified

参考文章

1. W3School - TCP/IP 简介
2. 一篇文章带你熟悉 TCP/IP 协议（网络协议篇二）

笔者看法有限，只能简要地进行概括，欢迎各位帮助指正。