从输入url到页面加载出来都发生了什么？

整个过程

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

8、关闭TCP连接（四次挥手）。

大概过程就是这些，这是侧重从TCP/IP层面上来说的，因而忽略了数据链路层和物理层方面的内容。

下面是每个步骤中拓展到的一些问题。

一、URL

一般url没什么可以拓展来问的，最多就涉及到同源策略等。

• url由哪几个部分组成
• 你知道同源策略吗
• 。。。。。。

二、缓存

• web缓存中有哪几种类型？

• 浏览器怎么处理http缓存？

• 浏览器本地缓存（cookie、session、localStorage、sessionStorage）比较？

• 。。。

三、DNS域名解析

• DNS的解析查询过程说一说？

• 什么时候递归查询，什么时候迭代查询

• ARP协议

• 。。。。。。

四、TCP连接

TCP 基本认识

TCP 连接建立

五、浏览器向服务器发送HTTP请求

完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

• http常见请求方法说一说？

• GET、POST的区别？

• OPITIONS请求知道吗？

• 为什么xxx(例如fetch)要发送两次请求？

• HTTPS的请求过程？

• SSL/TLS握手？

六、浏览器接收响应

• http常见响应状态码说一说？

• 常见响应头（Response响应）介绍一下？

• http缓存更新的问题

• 。。。。。。。

状态码主要包括以下部分

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

响应头主要由Cache-Control、 Connection、Date、Pragma等组成。

响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成。

七、页面渲染

• 页面渲染的过程？
• 重绘和重排是什么？发生在什么时候？
• dom和cssom怎么绑定在一起？
• 虚拟dom技术你知道吗？

• Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为Reflow。

• Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。

• Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。

八、关闭TCP连接或继续保持连接（长连接）

其他问题

OSI七层模型（开放式系统互联参考模型）

。。。

还能拓展到很多方面，建议把《计算机网络：自顶向下》《TCP/IP详解》等经典丛书看一遍。

结语

诶，太难了，卷，使劲内卷吧。

《参考资料》

从输入url到页面加载完成发生了什么详解

《前端面试小册》

《硬不硬你说了算！近 40 张图解被问千百遍的 TCP 三次握手和四次挥手面试题》