计算机网络 第一章 在浏览器输入URL回车之后发生了什么？

1、输入URL

• 在地址栏输入网址后回车，浏览器对输入内容进行判断：检查输入内容是否为合法的URL连接。

  • 合法，判断输入的URL是否完整。如果不完整，浏览器智能补齐地址前缀或者后缀。
  • 不合法，将输入内容作为搜索条件，使用搜索引擎进行搜索。

2、DNS解析

• 把URL地址解析为ip地址这一过程就是DNS解析。
• 浏览器缓存：浏览器会按照一定的频率缓存 DNS 记录。
• 操作系统缓存：如果浏览器缓存中找不到需要的 DNS 记录，那就去操作系统中找。
• 路由缓存：路由器也有 DNS 缓存。
• ISP 的 DNS 服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求。
• 根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址，然后再问.baidu 域名服务器，依次类推）

1）优化： dns-prefetch

• 当浏览器从（第三方）服务器请求资源时，必须先将该跨域域名解析为 IP 地址，然后浏览器才能发出请求。

• dns-prefetch(DNS预获取)是前端网络性能优化的一种措施。它根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，进而提高网站的访问速度。

  <link rel="dns-prefetch" href="https://fonts.googleapis.com/">

3、TCP三次握手

• 当浏览器得到服务器的ip地址后，浏览器通过随机端口号向服务器80端口发起TCP连接请求。
• 在客户端发送数据之前会发起 TCP 三次握手用以同步客户端和服务端的序列号和确认号，并交换 TCP 窗口大小信息。
• 客户端发送SYN包，表示请求连接；
• 服务端收到SYN包，回复SYN+ACK包，表示同意连接；
• 客户端收到SYN+ACK包，回复ACK包，表示成功连接。

1）为什么是三次握手

• 目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。

4、发送 HTTP/HTTPS 请求

（1）HTTP

• 建立连接后，浏览器向服务器发送一个初始的HTTP GET请求，请求目标通常是一个HTML文件。

（2）HTTPS

• 如果使用 HTTPS，会在TCP与HTTP之间添加一层协议作为加密及认证的服务，该层协议一般为SSL和TLS协议
• SSL协议和TLS协议的作用是认证客户端和服务器，加密数据防止数据中途被窃取，并且维护数据的完整性，确保数据在传输过程中不被改变。

5、响应请求

• 服务器收到请求后，发送一个HTTP响应报文，内容包含响应头和HTML正文。

1）状态码

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

6、浏览器的页面渲染

• link 不会阻塞渲染
• script 可能会阻塞渲染

1）构建DOM树

• 根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
• 在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

2）构建CSSOM树

1. 处理CSS标记并构建CSSOM树。
2. 在匹配一个节点对应的 CSS 规则时，是按照从右到左的顺序的，例如：div p { font-size :14px }会先寻找所有的p标签然后判断它的父元素是否为div。
3. 所以我们写 CSS 时，尽量用 id 和 class，千万不要过度层叠。

3）合并渲染树

1. 将DOM树和CSSOM树合并成一个渲染树。
2. 渲染树会忽略那些不需要渲染的节点，比如设置了display:none的节点。

4）布局与绘制

1. 根据渲染树布局，计算每个节点的几何信息。

5）回流与重绘

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

（1）回流

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

（2）重绘

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

6）优化

（1）首屏渲染FCP

• 第一次渲染的时间点，发生在 head 标签加载完成后。
• 将关键样式放在 head 标签中。
• 尽量把 script 标签放在 body 标签末尾，因为 script 可能会阻塞渲染。

7、断开连接

• 完成渲染后就可以断开TCP连接了。
• 但是现在浏览器为了减少请求耗时，默认开启了持久连接，只有标签页关闭的时候，TCP连接才关闭。