这有可能是web前端面试中被问得最稀烂的问题了，可是我还是想按照我个人的理解，仔细的梳理下其过程。

1. 浏览器通过DNS查询系统解析域名中的主机名为IP地址，DNS的解析过程是先在本地，没有则去上上一级DNS查询服务器，层层向上知道根节点。查询的过程分为迭代和递归
2. 浏览器与服务器进行TCP三次握手建立网络连接
3. 浏览器将请求的参数封装成HTTP请求报文，并发送给服务器
4. 服务器接收请求报文并解析参数，将浏览器需要的内容封装成HTTP响应报文（第一次是html文档，后面可能是一个json/xml数据包，也可能是一个资源文件）返还给浏览器
5. 浏览器解析渲染页面。浏览器按照html页面内代码先后顺序，请求加载css、图片等静态资源、js（无async则阻塞）等文件、解析DOM树、解析CSSOM树、依据dom和cssom构建渲染树、利用渲染树进行布局、执行js脚本可能会发生重绘和重排，最终渲染完整个页面

这是一个最基本最简单的流程，没有涉及HTTPS、缓存机制、Nginx代理、CDN等。

使用了https不同的是在上面的2和3之间还需要加一个 TLS/SSL握手。客户端利用服务器提供的数字证书中的公钥，按照双方都支持的方式加密与服务器比对，进行安全校验。

在web的整个开发过程中 缓存机制 非常的复杂，涉及：

• 客户端缓存（cookie、localstorage、sessionstorage、meta标签中控制cache、manifest离线缓存）
• 服务器缓存（Session、CDN是一个代理缓存服务器、Nginx反向代理缓存）
• HTTP缓存（缓存http请求，如 Cache-Control、Expires、Last-Modified、Etag）
• 数据库缓存（使用memcached分布式内存对象缓存系统 来缓存数据库读取结果）
• web应用层缓存（通过代码层面来实现缓存。比如缓存变量、缓存文件到内存、缓存页面组件、）

使用了Nginx代理之后，上面的过程1和4会发生变化。这种情况下，1中DNS查询出来的IP地址很有可能并不是真正的服务器ip地址，而只是Nginx服务器的ip地址。浏览器所有的请求都会经过Nginx处理返回或者转发请求给真正的服务器。而4中服务器处理的结果也会返给Nginx，让Nginx去反向代理服务器响应浏览之前的请求。

参考文章：

前端经典面试题: 从输入URL到页面加载发生了什么？

构建对象模型 | Web | Google Developers

浏览器的渲染：过程与原理 - 前端 - 掘金

HTTP 缓存 - HTTP | MDN

【Web缓存机制系列】1 – Web缓存的作用与类型 | AlloyTeam

WEB缓存机制

浏览器缓存 Last-Modified / Etag / Expires / Cache-Control 详解

赏

谢谢你请我吃糖果

支付宝

微信