面试必问:从输入url到页面展示到底发生了什么

2023-07-26 深圳推广 技术文档

刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料。而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步追问下去的,很多细节就不太清楚了。

本文的目的是通过输入url之后发生的事情来做知识的总结和扩展。所以文章可能会很杂。

总的过程大概如下:

1、输入地址

当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址。对于 google的chrome 的浏览器,他甚至会直接从缓存中把网页展示出来,就是说,你还没有按下 enter,页面就出来了。

2、浏览器查找域名的 IP 地址  

  1、请求一旦发起,浏览器首先要做的事情就是解析这个域名,一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。

2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。

  3、查询你输入的网址的DNS请求到达本地DNS服务器之后,本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果,此过程是递归的方式进行查询。如果没有,本地DNS服务器还要向DNS根服务器进行查询。

  4、根DNS服务器没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址。这种过程是迭代的过程。

  5、本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址。

  6、最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。

下面这张图很完美的解释了这一过程:

知识扩展:

1)什么是DNS?

  DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。

  通俗的讲,我们更习惯于记住一个网站的名字,比如www.baidu.com,而不是记住它的ip地址,比如:167.23.10.2。而计算机更擅长记住网站的ip地址,而不是像www.baidu.com等链接。因为,DNS就相当于一个电话本,比如你要找www.baidu.com这个域名,那我翻一翻我的电话本,我就知道,哦,它的电话(ip)是167.23.10.2。

2)DNS查询的两种方式:递归查询和迭代查询

1、递归解析

当局部DNS服务器自己不能回答客户机的DNS查询时,它就需要向其他DNS服务器进行查询。此时有两种方式,如图所示的是递归方式。局部DNS服务器自己负责向其他DNS服务器进行查询,一般是先向该域名的根域服务器查询,再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器,再由局部DNS服务器返回给客户端。

2、迭代解析

  当局部DNS服务器自己不能回答客户机的DNS查询时,也可以通过迭代查询的方式进行解析,如图所示。局部DNS服务器不是自己向其他DNS服务器进行查询,而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序,客户端DNS程序再继续向这些DNS服务器进行查询,直到得到查询结果为止。也就是说,迭代解析只是帮你找到相关的服务器而已,而不会帮你去查。比如说:baidu.com的服务器ip地址在192.168.4.5这里,你自己去查吧,本人比较忙,只能帮你到这里了。

3)DNS域名称空间的组织方式

我们在前面有说到根DNS服务器,域DNS服务器,这些都是DNS域名称空间的组织方式。按其功能命名空间中用来描述 DNS 域名称的五个类别的介绍详见下表中,以及与每个名称类型的示例

(盗图)

4)DNS负载均衡

  当一个网站有足够多的用户的时候,假如每次请求的资源都位于同一台机器上面,那么这台机器随时可能会蹦掉。处理办法就是用DNS负载均衡技术,它的原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的。例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等。

3、浏览器向 web 服务器发送一个 HTTP 请求

  拿到域名对应的IP地址之后,浏览器会以一个随机端口(1024<端口<65535)向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求这个连接请求到达服务器端后(这中间通过各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别该连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终到达WEB程序,最终建立了TCP/IP的连接。

TCP连接如图所示:

  建立了TCP连接之后,发起一个http请求。一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求。

  客户端向服务器发起http请求的时候,会有一些请求信息,请求信息包含三个部分:

  | 请求方法URI协议/版本

| 请求头(Request Header)

  | 请求正文:

下面是一个完整的HTTP请求例子:

GET/sample.jspHTTP/1.1Accept:image/gif.image/jpeg,*/*Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
username=jinqiao&password=1234
登录后复制

  • 全角符号怎么输入
    hover

    全角符号怎么输入

    输入步骤:1、打开文本编辑器或输入框,确保输入法工具栏可见;2、找到“全角/半角”切换图标,通常为月亮或圆形标识;3、点击切换至全角状态;4、输入的符号将占用汉字字符的位置,形成全角效果。 全角符号的输入方法可以通过以下步···

    2024-03-15
  • 无法定位程序输入点于动态链接库
    hover

    无法定位程序输入点于动态链接库

    无法定位程序输入点于动态链接库的原因:1、dll文件损坏或缺失;2、版本不匹配;3、路径问题;4、依赖关系问题;5、系统更新或升级。 “无法定位程序输入点于动态链接库”这个错误通常出现在Windows操作系统中,当程序尝试调用一个动···

    2024-03-11
  • MathType中求导符号怎么输入
    hover

    MathType中求导符号怎么输入

    方法:1、打开MathType软件,并在编辑窗口中输入函数符号;2、在菜单栏中,选择“编辑”选项,或者按下快捷键E;3、在弹出的对话框中,选择“插入符号”选项;4、在符号面板中,找到求导符号(通常在数学符号类别中);5、将光标移动到要···

    2024-01-15
  • 求导符号怎么输入
    hover

    求导符号怎么输入

    求导符号的输入方法取决于你所使用的工具或平台。在LaTeX中,求导符号的表示方法:1、对于一阶导数,可以使用 '(单引号)符号,例如:f′=dxdf;2、对于高阶导数,可以在数字后面加上 ',例如:f′′=dx2d2f;3、对于多元函数的偏导数···

    2024-01-15
  • 无法定位程序输入点于动态链接库怎么办
    hover

    无法定位程序输入点于动态链接库怎么办

    解决办法:1、重新安装程序或动态链接库;2、检查依赖项;3、系统文件检查器;4、管理员权限;5、查看错误日志;6、重新注册DLL;7、系统更新;8、兼容性问题;9、查找特定解决方案;10、联系软件供应商;11、考虑第三方工具;12、确···

    2024-01-04
  • w3c标准有哪些面试
    hover

    w3c标准有哪些面试

    w3c标准有“HTML”、“CSS”、”JavaScript“、”XML“、”DOM”、“SVG”、“WebRTC”和“HTTP”八种:1、HTML,用于创建网页的标记语言,定义了网页的结构和内容;2、CSS,用于描述网页的样式和布局;3、JavaScript,脚本语言,用于在网页上添加交···

    2023-12-25
  • 前端面试canvas有哪些API
    hover

    前端面试canvas有哪些API

    前端面试canvas有”元素相关API“、”绘制图形和路径相关API“、”绘制文本相关API“和”图像相关API“:1、素相关API、getContext('2d'),获取2D绘图上下文;2、绘制图形和路径相关API,fillStyle:设置填充颜色或样式;3、绘制文本相关API···

    2023-12-20
  • 大厂面试:HTTPS三连问,最后一问难道很多人
    hover

    大厂面试:HTTPS三连问,最后一问难道很多人

    大家好,我是专门给大家分享干货的老田。另外,需要面试资料的朋友,记得后台回复面试 前言 大家都知道 HTTPS 比 HTTP 安全,也听说过与 HTTPS 协议相关的概念有 SSL 、非对称加密、 CA 证书等。 但对于以下灵魂三拷问可能就答不···

    2023-08-28