对于大部分受访的前端开发者来说，对于浏览器的了解也算是一知半解，因为一开始前端认为我们在开发中一般都是使用浏览器来展示和调试页面，而不会涉及浏览器如何工作的过多知识。.你大错特错了。虽然浏览器默默地为我们工作，但是浏览器的工作原理不仅是你就业前端面试的重中之重，而且在前端优化中也占据着很大的比重。作为前端开发人员，如果不了解浏览器的工作原理，就只能永远停留在前端“切图”的层面。PS：前几天，有读者告诉小鹿，他之前在小鹿的朋友圈看到过这张地图，但当时并没有当回事，第二天采访的时候才问起。学习浏览器的工作原理是为了能够将其应用到实际项目中，比如前端性能优化、错误排查等，都会涉及到浏览器相关的知识，因此掌握浏览器的工作原理必不可少。相信在你学完之后，能大大提高你的个人能力和见识。浏览器涉及的知识点非常多，非常重要。文中可能存在不足和错误，欢迎大家指出！思维导图1.浏览器的职责让我们由浅入深地了解浏览器的工作原理。学习一件事首先要知道它是什么，它要完成什么样的事情，也就是它有什么样的责任。对于浏览器来说，从表面上看，我们输入网址，然后等待几秒钟，让浏览器显示我们要访问的网址内容。没错，浏览器就是这么做的。这只是表面上的。想知道这个阶段浏览器中发生了什么？我们需要进一步探索浏览器的工作原理。因此，无论是面试还是实际工作，浏览器无时无刻不在与我们打交道。那么我们就要从在浏览器中输入网址开始，一直到浏览器最终显示出网站的内容，在这个过程中浏览器做了哪些工作，又是如何工作的呢？我们将其详细分为以下几个模块进行系统讲解：1.DNS解析2.TCP连接3.HTTP请求4.DOM树的构建5.CSSOM树的构建6.渲染树的生成7.合成和绘图。到时候再巩固一下说法，重点讲浏览器的渲染原理，这也是我们以后学习前端优化的重点。2、DNS解析上一篇TCP三次握手中提到，如果要获取接收方的MAC地址，需要通过对方的IP地址获取，而对方的IP需要通过DNS解析。2.1为什么要做DNS解析？所谓DNS解析，就是将我们在网页地址栏中输入的URL，通过DNS解析成IP地址。DNS是将域名转换为IP地址的过程。那么在这个过程中会发生什么？与Fawn一起深入探索。2.2系统缓存查询首先，浏览器会调用一个库函数检测本地的hosts文件（可以认为是电脑本地的一个地址映射文件），从文件。这个过程是在检查系统缓存中是否存在该域名对应的IP地址。例如，在浏览器地址栏中输入小鹿的博客网址（www.xiaolu.com），然后回车。这时候浏览器会把这个域名拿到本地电脑的一个hosts文件中去查看是否有对应的域名。如果有IP地址，则返回给浏览器，如果没有，我们继续进行。2.3路由器缓存、ISP缓存如果没有系统缓存，就会向DNS服务器发送请求，而网络服务一般要经过路由器和网络服务商（电信），所以会先查询路由器缓存，然后再查询将查询ISP的DNS缓存。PS：ISP缓存本身就是宽带接入商用来加速批量访问网页的一种技术。ISP会将当前访问的网页内容放入ISP服务器的缓存中。当新用户请求相同的内容时，可以直接从缓存中发送相关信息，而不必每次都访问真实网站，从而加快了访问速度。提高了不同用户对同一内容的访问速度，也节省了跨网流量结算成本。2.4DNS递归查询如果路由器缓存和ISP的DNS缓存仍然不存在，我们将进行DNS递归查询。查询从根域名服务器开始，然后到顶级域名服务器，最后到主域名服务器。但是这里有两种查询方式，既有递归查询，也有迭代查询。这两种查询方式有什么区别？迭代查询：当DNS收到请求时，它不会直接返回查询结果，而是告诉客户端另一个DNS服务器的地址。然后客户端向这台DNS服务器提交请求，如此循环往复。递归查询：当DNS服务器收到请求时，会检查DNS缓存，如果没有，会去询问其他服务器，并将返回的查询结果返回给客户端。我们的前端在性能优化的使用中会用到DNS的相关知识。这里稍微提一下，如何优化DNS？DNS查询要经过很多步骤，查询速度很慢。浏览器获取IP地址后，一般会添加到浏览器的缓存中，本地的DNS缓存服务器也可以记录下来。另外，使用DNS负载均衡，通常我们的网站使用各种云服务，DNS系统根据每台机器的负载，地理位置限制等，提供高效快速的DNS解析服务。3.TCP连接我们查询IP后通过DNS地址，我们开始计划与服务器建立连接，为下一次数据传输做准备。这部分在上一篇文章中讲的很详细，一定要看。网络分层模型动画：用动画向面试官讲解TCP三次握手过程4.HTTP请求我们的客户端和服务器通过TCP三次握手建立连接后，客户端开始向服务器发起请求。PS：对于HTTP协议，我们后面会单独出一篇文章详细介绍它的发展历程。这里我们只涉及HTTP请求相关的内容。服务端收到客户端发送的信息后，返回响应信息和文件。客户端如何判断服务端是否返回成功？需要以下状态代码来识别它。同样，前端所做的工作也是通过状态码来判断当前的响应状态。1XX（信息状态代码）：服务器正在处理请求。2XX（成功状态码）：请求已被处理。3XX（重定向状态代码）：需要执行其他操作才能完成请求。301：永久重定向。此状态代码表示所请求的资源已分配了一个新的URI，并且要在将来使用该资源，请使用当前的URI。302：临时重定向。表示状态码已经分配了新的URI，希望用户这次可以使用新的URI访问。304：服务器资源没有变化，可以直接使用客户端未过期的缓存。4XX（客户端错误状态码）：服务器无法处理请求。400：请求消息中存在语法错误。403：没有资源访问权限。404：找不到资源。5XX（服务器错误状态代码）：服务器在处理请求时出错。500：服务器发生错误503：服务器过载或维护中。远程服务器找到资源并返回HTTP响应，HTTP响应状态为200表示响应正确。5、浏览器的渲染原理5.1搭建一个DOM服务器，将HTML、CSS、JS文件转换成0,1字节的数据，传输给网络中的浏览器。浏览器通过判断状态码开始接收并解析文件，适用于浏览器的渲染原理。首先，浏览器需要做的是获取HTTP请求体中的字符串（字符流）的HTML文本，解析并构建DOM树。将字符流转换为字符串后，浏览器开始进行词法分析。虽然我们不熟悉这个术语，但我们需要知道我们需要拆分HTML字符串来构建DOM树。词法分析就是把字符串拆分成的过程。将字符串转换成-token的token（标记）是最小的代码单元，是拆分后的结果。这个过程称为标记化。我们将字符串拆解后，再将这些标签转换成Node节点，浏览器就开始根据不同的节点构建DOM树。这就是构建整个DOM树的过程，其中还涉及到很多细节，比如词法分析是怎样一个过程（状态机）。感兴趣的朋友可以在文末详细查看英文文档。5.2构建CSSOM树浏览器已经将HTML文件转化为DOM树，然后解析CSS样式文件构建CSSOM树。这个过程和上面说的构建DOM树的过程有点类似，但是CSSOM树的构建比较耗时。我们来看看耗时如何？浏览器通过DOM树递归地为节点设置样式。通过先找到具体的标签，然后递归找到设置的父标签，最后确定选择器选中的标签的样式。比如下面这个例子，浏览器是怎么判断节点的样式的呢？
小鹿动画学编程，一天一个动画养活你！
你好，小鹿！