浏览器按下回车发生了什么，前端跨进程通信导论

• 响应返回

• 页面渲染

IP地址查询

假设我们在页面上输入 www . baidu . com ，那么我们是如何得到百度的IP地址呢？我先来插个小插曲，其实百度服务器的IP地址是有多个的，因为对于搜索引擎来说每天都有巨大的访问量，必须有负载均衡的处理，否则就会崩溃挂机。

IP地址的查询其实也通过几个步骤来得到的

• 首先浏览器查询自己的DNS缓存

• 如没有就会去操作系统中进行查找，也会查找一下本机的host是否有缓存

• 如没有就会去路由器中查找

• 再没有就去本地域名服务器中查找，一般是本地的服务运营商，如中国电信

• 操作系统会得到IP地址，并且缓存起来

• 浏览器得到操作系统返回的IP地址，同样也缓存

到了这里浏览器就会得到www . baidu . com 的IP地址了，接下来就会进行地址的访问和连接。

建立TCP连接

建立TCP连接最重要的就是要进行三次握手

当进行数据发送之前，会把数据经过网络协议的层层封装，经过应用层、传输层、网络层、链路层。当服务器接收数据时会对数据进行拆封，最后才会得到HTTP数据。我们知道TCP/IP分层模型一般会分成以下几层（图），每一层都有不同的协议对应着，保证了数据的传输。

那么每一层对应哪些协议呢？

应用层：决定了向用户提供应用服务时通讯的活动。比如FTP（文件传输协议），DNS（域名系统），HTTP（超文本传输协议），Telnet（网络远程访问协议）等。

传输层：传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据传输。提供TCP（传输控制协议）和 UDP（用户数据报协议）两种协议，主要是对数据格式化、数据确认和数据丢失重传。

网络层：用来处理网络上流动的数据包。数据包是网络传输的最小数据单位。规定了通过怎么样的途径来到达对方的计算机，并传输数据给它。网络层中通过IP协议把数据包传输给对方。IP地址指明结点被分配到的地址，而MAC地址指网卡所属地址（一般不会改）。在IP层中，会通过ARP（地址解析协议）得到相应的MAC地址。

链路层：处理连接网络的硬件部分，包括控制操作系统、硬件的设备驱动、网卡以及光纤的物理可见部分。涉及硬件部分就依赖于MAC地址。

服务器处理

当数据到达服务器就会进行解析处理。处理结果会返回一个状态码，常见的状态码有如下几种：

• 200 OK ：客户端请求成功

• 400 Bad Request ：客户端请求有语法错误，不能被服务器所理解

• 401 Unauthorized ：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用

• 403 Forbidden ：服务器收到请求，但是拒绝提供服务

• 404 Not Found ：请求资源不存在

• 500 Internal Server Error ：服务器发生不可预期的错误

• 503 Server Unavailable ：服务器当前不能处理客户端的请求，一段时间后可能恢复正常

响应返回

当浏览器接收到服务器返回的数据，会对数据进行预处理，根据状态码来进行不同的处理。比如403状态码，就会允许浏览器使用缓存而无需重新请求。如果是200状态码，可能就是一次新的请求，浏览器可能会对资源进行解压缩、缓存资源等操作。最后一步才是解析资源，渲染页面。

页面渲染

浏览器接收到数据，会进行以下步骤的操作：

• 解析HTML文件，转换成DOM树

• 解析CSS文件，转换成CSSOM树

• 生产渲染树

• 将信息发送给GPU，合成渲染

我们知道，计算机的传输都是以0101的数据进行传输，所以说我们接收到的数据也是这种格式，我们必须要进行解析。首先将字节数据转换成字符串，也就是我们的代码。然后对字符串进行词法分析转换成token（标记），这一过程就是标记化。下一步就把标记转换成Node，最后根据不同的联系构建出一棵DOM树。

解析CSS的原理一样，两棵树的解析是并行的。

最后就是合并两棵树的操作，注意渲染树会忽略那些不需要显示的节点，比如节点的样式设置为：display:none;

03 重绘与回流

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】