持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

一个面试常考点的话题，90%的前端面试必问问题，虽然会涉及到许多服务端的知识，但可以略过，我们只需要答好客户端的问题就好，比如这个流程里会涉及到浏览器缓存、前端性能优化等问题。答好这部分问题在贯穿讲述好整个流程，会给面试官一个很不错的印象

本文模拟面试的回答，所有不配图，不讲原理，通俗易懂

流程

大概分为3个步骤：

步骤一（请求）

输入网址后浏览器首先要做的是获取目标网址的IP，浏览器的具体做法是发送一个UDP包给DNS服务器，DNS服务器会返回一个IP给浏览器，浏览器通常会把IP缓存起来，下次访问会先从本地DNS缓存里取，就会更快
有了IP浏览器就会发送HTTP请求，HTTP请求是建立在TCP协议上的，建立TCP链接需要4个东西，本机IP/端口，服务器IP/端口。本机和服务器的IP已经知道，然后是本机的端口，在浏览器打开时系统会给浏览器分配一个，而服务器的端口就是HTTP默认的80端口，这样与服务器经过三次握手后，客户端和服务器的tcp就链接起来了

(额外面试官问三次握手，可总结为一句话概括：确认双方的接收与发送能力是否正常)

步骤二（获取资源）

向服务器请求资源，通常服务器为nginx、pm2、tomcat、Apache等，服务器会返回静态资源给浏览器，比如index.html、favicon.ico等等
浏览器拿到服务器返回的html文件后，会再次开始工作，但是html中包含了JS,CSS等其他的资源，这时候浏览器也会一个一个的去下载，刚才的请求连接过程也会在走一遍。如果同时下载的资源比较多的话，浏览器像chrome在HTTP1.1下同时可以建立6个tcp连接去下载资源
当服务器给浏览器发送JS,CSS这些文件时，会告诉浏览器这些文件什么时候过期（比如使用Cache-Control或者Expire等），浏览器会把这些文件缓存到本地，当第二次请求同样的文件时，如果不过期，就会直接从本地取

(额外这里涉及到浏览器缓存策略问题，面试官极有可能会穿插问你问题，比如浏览器强缓存与协商缓存，详细可点击查看👉 浏览器缓存策略(强缓存和协商缓存))

步骤三（渲染页面）

最后浏览器获取完资源后，浏览器就会开始渲染，它会把HTML转化为DOM树，CSS转化为CSS Rule Tree（CSS规则树），js执行可以修改DOM树结构，可修改CSS规则，然后浏览器会通过DOM Tree和CSS Rule Tree生成所谓"Render Tree"（渲染树），接着计算每个元素的位置、大小，进行布局，最后调用操作系统的API进行绘制，页面就呈现出来了

这一过程埋藏了许多知识点，答的详细否可以看得出是否具有一定的功底。
中间面试官可能会打断穿插一些问题，比如http请求返回的状态码（100、200、300、400、500段等）、或者渲染页面时回流与重绘等等，自己可横向扩展补充一些知识储备