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

1、输入URL

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

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

2、DNS解析

• 把URL地址解析为ip地址这一过程就是DNS解析。
• 操作系统检查浏览器缓存和本地hosts文件是否有这个网址所对应的ip地址。有则完成DNS解析，否则进行下一步。
• 检查本地DNS服务器（路由器）是否缓存有该网址对应的ip地址，没有则进行下一步。
• 本地DNS服务器发送查询报文到根DNS服务器进行查询，完成域名解析。

1）优化： dns-prefetch

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

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

3、TCP三次握手

• 当浏览器得到服务器的ip地址后，浏览器通过随机端口号向服务器80端口发起TCP连接请求。
• 客户端发送SYN包，表示请求连接；
• 服务端收到SYN包，回复SYN+ACK包，表示同意连接；
• 客户端收到SYN+ACK包，回复ACK包，表示成功连接。

4、发送 HTTP/HTTPS 请求

（1）HTTP

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

（2）HTTPS

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

5、响应请求

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

6、页面渲染

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

1）构建DOM树

1. 处理HTML标记并构建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）重绘

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

7）优化

（1）首屏渲染FCP

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

7、断开连接

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