从输入URL到看到页面,面试官可以问你多少问题

发布于 2021-11-24 14:51 ，所属分类：2021面试经验技巧分享

文：1704字阅读：5分钟

这是一道被问烂的问题，正好这个问题也是对于这几天网络基础的一个总结。

它会像“陷阱”一样，一环套一环的问下去，面试的岗位不同，考官问的会各有侧重。

几大过程

总结来说，共经历以下几个过程：

1 DNS解析 2 发起TCP连接 3 发起HTTP请求 4 服务器处理请求并返回报文 5 浏览器解析渲染页面 6 连接结束

如果是偏后端的岗位或是硬件的公司，侧重的是前三个过程，如果是前端岗位，更愿意问第45两项。

每个过程的考核要点

我们以输入www.baidu.com为例

DNS解析：

网络上的服务器都有一个唯一标识IP地址，但是IP地址不容易记，就有了域名，域名解析也就是对网址和IP进行转换。

DNS解析其实是一个递归的过程。

1. 首先检查本地hosts，看看域名有没有指向的IP地址

2. 然后检查计算机上有没有配置DNS服务器的缓存

3. 如果还没有就去根DNS服务器（全球13台）查找，先判断.com是在哪台服务器管理，如果无法解析就找baidu.com是否可以解析，然后再查到www.baidu.com地址。

4. 负载均衡

找到对应IP后，每次响应的并不是同一个服务器，大公司都是成百上千的服务器，通过负载均衡指向某一台服务器。（这里面试馆可能会考你负载均衡的几种策略，比如：轮询、权重、IP关联等等）

发起TCP连接

到了TCP连接，就会问到前面说的三次握手、四次挥手、KEEP-ALIVE、ISO的七层模式，每层模型的作用是什么？还不了解的，可以翻翻之前的文章。

发起HTTP请求

这个环节主要会问到HTTP的请求报文、响应报文，HTTP的发展史、HTTP2和HTTP1的区别、HTTP2的多路复用是怎么回事。

在这个过程有一个比较重要的HTTP缓存，当浏览器发现缓存中存在这个文件中。就不再继续请求，直接去缓存拿。

我们通常使用的F5刷新，就是去服务器看看文件是否过期，发送请求时会带上if-modify-since，如果还在有效期就从缓存中取。所以有时候在修改JS后，我们刷新并没有变化。

CTRL+F5 强制更新，告诉浏览器把缓存中的文件删除，重新去服务器请求完整的资源文件下来。这里面试官可能就会问到两者的区别，对于前端岗的同学这是一个要点。

浏览器解析渲染页面

1 解析HTML形成DOM树

2 解析CSS形成CSSOM树

3 合并DOM树和CSSOM树形成渲染树（render tree)

4 浏览器根据渲染树将节点树的每一个节点布局到屏幕的正确位置上，开始渲染并绘制页面。

就这么四步，但这里还要注意两个概念回流和重绘。

回流就是tree中的部分或是全部元素尺寸结构或是某些属性发生变化时，浏览器重新渲染部分中是全部文档的过程。如页面首次渲染、窗口大小、元素内容和大小变化等

重绘是元素样式的改变并不影响他在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它。就比如color或是background-color.

哪些操作会导致回流和重绘，这是一个问题点。另外一个考点就是JS解析，这其中必须提的就是Event Loop事件循环。

由于JavaScript是单线程运行，也就是说一个时间只能干一件事，干这件事情时其他事情都有排队，但是有些比较耗时（例如IO操作），所以将任务分为同步任务和异步任务，所有的同步任务放在主线程上执行，形成执行栈，而异步任务等待，当执行栈被清空时再去看看异步任务有有没有要执行的，有再提取到主线程执行，这样往复循环。

这里会问到几个知识点：微任务、宏任务。

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval

micro-task(微任务)：Promise，process.nextTick

顺序为：主线程执行->微任务->宏任务

微任务会全部执行，而宏任务会一个一个来执行

前端面试就会给你一段JS代码，让你看看输出的先后顺序就是考这个。

最后，面试官还要问问你，页面渲染的优化有哪些方式：

1 HTML文档结构层次尽量少，最好不深于六层；

2 脚本尽量后放，放在前即可；

3 少量首屏样式内联放在标签内；

4 样式结构层次尽量简单；

5 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；