江苏龙网

  1. 主页 > 生活百科 > >

浏览器的底层是如何完成一次网络请求的？

浏览器

对于面试的大部分前端开发者来说，对浏览器的了解也算是一知半解，因为我们一开始前端觉得，我们开发中通常使用浏览器来显示和调试页面用的，不会涉入到太过的相关浏览器工作原理知识 。
这你就大错特错了，虽然浏览器默默的为我们工作，但是有关浏览器的工作原理不但在你就业前端面试中属于重中之重，也是在前端优化中占有很大比重 。作为一个前端开发如果不了解浏览器的工作原理，只能永远停留在前端“切图仔”水平 。

PS：前几天还有个读者和小鹿说，之前看到小鹿朋友圈发过这个这个导图，当时没当回事，第二天面试竟然问到了 。
学习浏览器工作原理是为了能够运用到实际项目中，比如前端的性能优化以及错误排查，都会涉及到浏览器相关的知识，所以掌握浏览器的工作原理是必不可缺的，相信你学完之后，能够对你的个人能力和见识会有很大的提升 。
浏览器涉及到的知识点非常多而且非常重要，文章中可能其中有不足和错误的地方，也欢迎各位指出！
思维导图
浏览器的底层是如何完成一次网络请求的？

文章插图
 
1、浏览器的职责我们由浅入深的去了解浏览器的工作原理 。首先学习一个事物要知道它是什么，它要完成一个什么样的事情，也就是拥有什么样的职责 。
对于浏览器来说，表面上看来，我们输入了 URL，然后等待几秒浏览器就展现出我们想要访问的网址内容了 。对没错，这就是浏览器的职责所在 。这只是停留在了表面，要想深入知道浏览器在这个阶段发生了什么？需要我们进一步探索浏览器的工作原理 。
所以说，无论是面试还是实际工作中，浏览器无时不刻和我们打交道 。那我们就要从在浏览器输入 URL 开始说起，直到浏览器最后展现出网站内容，这个过程浏览器做了哪些工作，又是如何工作的呢？
我们会详细分为以下几大模块进行系统的讲解：
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 地址的过程 。那么这个过程会发生什么呢？和小鹿一起深入探究一下 。
浏览器的底层是如何完成一次网络请求的？

文章插图
 
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 服务器提交请求，依次循环 。


推荐阅读


上一篇：自媒体的10个大坑，千万别碰，轻则封号，重则坐牢

下一篇：零度以上几天会化冻 绝对零度能冻结时间吗