动画: 一个浏览器是如何工做的？

写在前边

对于面试的大部分前端开发者来讲，对浏览器的了解也算是只知其一;不知其二，由于咱们一开始前端以为，咱们开发中一般使用浏览器来显示和调试页面用的，不会涉入到太过的相关浏览器工做原理知识。

这你就大错特错了，虽然浏览器默默的为咱们工做，可是有关浏览器的工做原理不但在你就业前端面试中属于重中之重，也是在前端优化中占有很大比重。做为一个前端开发若是不了解浏览器的工做原理，只能永远停留在前端“切图仔”水平。

PS：前几天还有个读者和小鹿说，以前看到小鹿朋友圈发过这个这个导图，当时没当回事，次日面试居然问到了。

学习浏览器工做原理是为了可以运用到实际项目中，好比前端的性能优化以及错误排查，都会涉及到浏览器相关的知识，因此掌握浏览器的工做原理是必不可缺的，相信你学完以后，可以对你的我的能力和见识会有很大的提高。

浏览器涉及到的知识点很是多并且很是重要，文章中可能其中有不足和错误的地方，也欢迎各位指出！

思惟导图

一、浏览器的职责

咱们由浅入深的去了解浏览器的工做原理。首先学习一个事物要知道它是什么，它要完成一个什么样的事情，也就是拥有什么样的职责。

对于浏览器来讲，表面上看来，咱们输入了 URL，而后等待几秒浏览器就展示出咱们想要访问的网址内容了。对没错，这就是浏览器的职责所在。这只是停留在了表面，要想深刻知道浏览器在这个阶段发生了什么？须要咱们进一步探索浏览器的工做原理。

因此说，不管是面试仍是实际工做中，浏览器无时不刻和咱们打交道。那咱们就要从在浏览器输入 URL 开始提及，直到浏览器最后展示出网站内容，这个过程浏览器作了哪些工做，又是如何工做的呢？

咱们会详细分为如下几大模块进行系统的讲解：

一、DNS 解析

二、TCP 链接

三、HTTP 请求

四、构建 DOM 树

五、构建 CSSOM 树

六、生成渲染树

七、合成、绘制

其中有些部分咱们以前的文章已经分享过，因此也不过到陈述，到时候会巩固一下，重点咱们放在浏览器的渲染原理上，这也是咱们之后在学习前端优化中的重点。

二、DNS 解析

在以前的文章 TCP 三次握手中提到，要想获得接收方的 MAC 地址，须要经过对方的 IP 地址获取，对方的 IP 须要经过 DNS 解析。

2.1 为何进行 DNS 解析？

所谓的 DNS 解析就是将咱们输入在网页地址栏的 URL 经过 DNS 解析成 IP 地址。DNS 就是将域名转化成 ip 地址的过程。那么这个过程会发生什么呢？和小鹿一块儿深刻探究一下。

2.2 系统缓存查询

首先浏览器会调用一个库函数，检测本地的 hosts 文件（能够认为是电脑本地的一个地址映射文件），从该文件中查看是否有对应的该域名的 IP 地址，这个过程是在系统缓存中查找是否存在该域名对应的 IP 地址。

好比在浏览器的地址栏中输入小鹿的博客网址（www.xiaolu.com），而后回车，此时浏览器拿着这个域名去本地电脑的一个名为 hosts 文件中查询是否存在该域名所对应的 IP 地址，若是有，就返回给浏览器，若是没有，咱们继续往下进行。

2.3 路由器缓存、ISP 缓存

若是系统缓存没有，就会向 DNS 服务器发送请求，而网络服务通常都会先通过路由器以及网络服务商（电信），因此会先查询路由器缓存，而后再查询 ISP 的 DNS 缓存。

PS：ISP缓存，自己是一种宽带接入提供商给网页批量访问加速的技术。ISP会将当前访问量较大的网页内容放到ISP服务器的缓存中，当有新的用户请求相同内容时，能够直接从缓存中发送相关信息，没必要每次都去访问真正的网站，从而加快了不一样用户对相同内容的访问速度，同时也能节省网间流量结算成本。

2.4 DNS 递归查询

若是路由器缓存和 ISP 的 DNS 缓存仍是没有的话，咱们就进行 DNS 递归查询。从根域名服务器开始查询，而后再到顶级域名服务器，最后到主域名服务器依次查询。

可是这里有两种查询方式，不只仅有递归查询一种方式，还有一个查询方式是迭代查询，两种查询方式的区别是什么呢？

迭代查询：DNS 收到请求时，而不是直接返回查询结果，而是告诉客户端另外一台 DNS 服务器地址。而后客户端再向这台的 DNS 服务器提交请求，依次循环。

递归查询：当 DNS 服务器收到请求时，就会检查 DNS 缓存，若是没有就会询问其余服务器，并将返回的查询结果返回客户端。

咱们前端会在性能优化的使用用到 DNS 的相关知识，咱们在这稍微提一下，如何进行 DNS 优化呢？

DNS 查询经历不少步骤，查询很慢。浏览器获取到 IP 地址后，通常都会加到浏览器的缓存中，本地的 DNS 缓存服务器，也能够去记录。

另外使用 DNS 负载均衡，一般咱们的网站应用各类云服务，DNS 系统根据每台机器的负载量，地理位置的限制等等，去提供高效快速的 DNS 解析服务。

三、TCP 链接

咱们经过 DNS 查询到 IP 地址以后，咱们就开始打算与服务器创建链接，为接下来的数据传输作准备，这部分在以前的文章中写的很是详细，必定要去看哦。

网络分层模型

动画：用动画给面试官解释 TCP 三次握手过程

四、HTTP 请求

咱们客户端与服务端经过 TCP 的三次握手创建链接以后，客户端开始向服务器主动发起请求。

PS：对于 HTTP 协议，咱们会在后边单独拿出一篇文章来详细介绍它的发展史，这里咱们只涉及到 HTTP 的请求相关的内容。

服务端接收到客户端发送的信息，就返回响应信息和文件。客户端如何判断服务端是否成功返回了呢？就须要下列的一些状态码来识别，一样前端作的工做也是经过状态码来判断当前响应状态。

• 1XX（信息性状态码） : 服务器正在处理请求中。

• 2XX （成功状态码）: 请求处理完毕。

• 3XX （重定向状态码）: 须要附加操做以完成请求。

  • 301：永久性重定向。该状态码表示请求的资源已被分配了新的 URI，之后使用该资源，使用如今所指 URI。

  • 302：临时性重定向。表示该状态码被分配了新的 URI，但愿用户本次可以使用新的 URI 访问。

  • 304：服务器资源未改变，可直接使用客户端未过时的缓存。

• 4XX （客户端错误状态码）: 服务器没法处理请求。

  • 400：该请求报文中有语法错误。

  • 403：没有资源的访问权限。

  • 404：找不到资源。

• 5XX （服务端错误状态码）: 服务器处理请求出错。

  • 500：服务器发生错误

  • 503：服务器超荷载或正在维护。

远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

五、浏览器的渲染原理

5.1 构建 DOM

服务器将 HTML、CSS、JS文件转化为 0,1字节数据在网络中传输给浏览器，浏览器经过判断状态码开始接收、解析文件，这开始运用到浏览器的渲染原理。

首先浏览器要作的就是获取 HTTP 的 Request 的 body 中字符串（字符流）的 HTML 文本，进行解析并构建 DOM 树。

将字符流转化为字符串以后，浏览器开始进行词法分析，虽然这个名词咱们不熟悉，可是咱们要知道，一个 HTML 字符串咱们要拆分开才能构建 DOM 树，词法分析就是将字符串拆分红的过程。将字符串转化为的 token（标记） —— token 做为代码的最小单位，也就是拆分后的结果，这个过程咱们称为标记化。

咱们将字符串拆解以后，而后将这些标记转化为 Node 结点，浏览器根据不一样的结点开始构建一棵 DOM 树。这就是整个 DOM 树构建的过程，其中还涉及到不少的细节，好比词法分析是如何一个过程（状态机），有兴趣的小伙伴能够详细查看英文文档，在文章底部。

5.2 构建 CSSOM 树

浏览器已经把 HTML 文件转化为了 DOM 树，下面就对 CSS 样式文件进行解析，构建成 CSSOM 树。这个过程和上述构建 DOM 树的过程有点类似，可是其中 CSSOM 树的构建更加的耗时。下面咱们来看看如何耗时的？

浏览器经过递归的方式 DOM 树为结点设置样式。经过先找到具体的标签，而后递归找到设置的上级标签，最后肯定选择器选择的所选标签的样式。

好比下边的例子，浏览器是如何肯定结点的样式的呢？

1  <div>
 2        <span>
 3            <p>小鹿动画学编程，一天一篇动画喂饱你！</p>
 4        </span>
 5        <p>你好，小鹿！</p>
 6  </div>
 7
 8
 9    div span p{
10        color: red;
11        font-size: 12px;
12    }
13    div {
14       background:red;   
15    }
复制代码

首先在 HTML 中找到 p 标签，一共有两个地方，而后按照样式的继续递归中找具备父节点的 p，咱们只好把第二个 p 过滤掉，而后继续向上找父节点 div，匹配成功，而后将样式设置到结点上。

咱们经过上边的动画，能够知道为何构建 CSSOM 树的时候很是耗时了，咱们在写代码的时候能够作出优化，因此应该避免书写过于具体的 CSS 选择器，少一些添加无心义的 HTML 标签，有利于提升习页面的性能。

5.3 构建渲染树

咱们分别将上边生成的 DOM 和 CSSOM 树进行合并，生成咱们的渲染树。可是在合并的时候，并非二者简单的进行结合，由于有些结点咱们并不须要显示，还记得有一个 display:none 属性吗？若是某结点的样式有这个属性，就不会出如今渲染树中。

5.4合成、绘制

浏览器在生成渲染树的时候，就会根据渲染树进行布局，调用 GPU 进行绘制，而后合成图层，最后显示在屏幕上。

小结

经过上边的对浏览器工做原理的介绍，相信你对浏览器有了新的认识和简介，可是只看上边的知识还彻底不能深刻到底层，若是还想要进行深刻的对浏览器的工做原理进行研究，能够英文文档《How Browsers Work》，已经有人把它翻译成了中文，可是我本身又翻译了一遍。

第一，提升本身阅读英文文档的能力；

第二，从中学会提取关键的内容。

虽然翻译过程当中遇到不少问题，可是相信你翻译完以后，对你又有新的收获和认识，更重要的是你的能力又比别人提高了 —— 更况且我这个英语四级没过的人都坚持翻译下来了呢！

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

文章+动画写了好几个小时，不妨点赞支持一下。嘻嘻，你不点赞说明你很自私，你怕那么好的文章让别人也看到。开个小小玩笑。

做者Info：

【做者】：小鹿

【原创公众号】：小鹿动画学编程。

【简介】：和小鹿同窗一块儿用动画的方式从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈献给小伙伴。先定个小目标，原创 1000 篇的动画技术文章，和各位小伙伴共同努力一块儿学习！公众号回复 “资料” 送一从零自学资料大礼包！

【转载说明】：转载请说明出处，谢谢合做！~