揭秘输入URL到页面加载

一道前端著名的面试题：

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 浏览器接收URL

URL是什么？
Uniform Resource Locator，统一资源定位符，它是由如下部分组成：
协议（或称为服务方式）+主机IP地址+主机资源的具体地址
拓展：
URI：Uniform Resource Identifier，在某一规则下把一个资源独一无二地标识出来
URN：Uniform Resource Name，为一个资源确定一个唯一的的名字
下面说人话：对于JavaScript高级程序设计（第三版）来说
URN就是该书的ISBN：978-7-115-27579-0
URL就是定位这本书：你可以在https://book.douban.com/subject/10546125/这个网址找到这本书
URI可以划分为URL和 URN

2. 是否能直接使用缓存（能，就直接展示资源）

下图来自 浅谈web缓存

缓存流程图

3.DNS解析域名

通过DNS协议将域名解析为一个IP地址

4.建立TCP 连接（三次握手）

4.1三次握手的过程

a、客户端向服务端发送一个建立连接的请求（我要连接你了，好吗）
b、服务端接到请求后发送同意连接的信号（好的，你连接吧）
c、客户端再次向服务端发送了确认信号（那我开始连接了），然后疯狂互动

4.1三次握手的本质

信道不可靠，但是通信双方需要就某个问题达成一致。而要解决这个问题，三次通信是理论上的最小值。

5.浏览器向服务器发送HTTP请求

请求格式

6.服务器处理请求：查找资源并返回HTTP响应

响应格式

7.浏览器接受响应，检查 HTTP header 里的状态码，并处理

HTTP常用状态码

8.根据首部字段判断是否对该响应进行缓存

9.解码并渲染

浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
一图胜千言：

这个过程，浏览器是自上而下对HTML文档进行解析的，遇到脚本文件就会下载，下载完成就执行，而这是与文档解析同步进行的，脚本文件的下载和执行都会阻塞文档的解析。

<script>标签中的 defer 和 async 属性

defer：立即下载脚本文件，页面解析完毕执行
async：异步加载脚本（要求必须是外部脚本文件，不保证各脚本执行顺序等）
总之，不好用，还是将js放在body标签内的内容底部稳。

10.关闭TCP连接或继续保持连接

10.1四次挥手的过程

10.2为什么要四次挥手

推荐一篇文章：通俗大白话来理解TCP协议的三次握手和四次断开

参考文章：https://www.jianshu.com/p/9341192f1f4a