这是一个古老的问题,即我们输入URL后按下回车到网页测呈现都发生了什么?

加载过程到显示如下:

  • 1.根据域名,进行DNS域名解析;
  • 2.拿到解析的IP地址,建立TCP连接;
  • 3.向IP地址,发送HTTP请求;
  • 4.服务器处理请求;
  • 5.返回响应结果;
  • 6.关闭TCP连接;
  • 7.浏览器解析HTML;
  • 8.浏览器布局渲染;

首先来看一张图:

  

表示了数据从源端到目的端的封装和拆解过程

预处理URL

URL格式: 

以http为例:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

 有时候我们并没有输入完整的url,浏览器会智能地进行自动补全,如浏览器会对不同协议自动添加端口,如http的80端口,https的443端口等等。除此之外浏览器还会根据我们的历史记录,书签等信息进行智能提示,并对一些非ASCII字符进行编码。如果不合法,将会转为搜索关键字。 

DNS解析

  浏览器在得到合法的URL后,就要进行域名解析,DNS采用UDP协议进行传输数据,默认端口为53,DNS查询过程本质上还是一个客户端请求服务端的过程,它同样会经过其下面的网络层和数据链路/物理层的封装。

只考虑查询过程:

  • 从浏览器自身DNS缓存中查找结果,上一章中我们提到了DNS预解析优化策略就是提前进行DNS解析放入缓存(要查看 Chrome 当中的缓存, 打开 chrome://net-internals/#dns)
  • 在操作系统DNS缓存中查询,如linux上的NSCD缓存服务
  • 读取hosts文件,如*nix上的/etc/hosts
  • 查询配置的DNS服务器查询
  • 递归查询过程: 本地DNS服务器查询自己的缓存记录(本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动),如果有则返回,如果没有则去查询根DNS服务器。
  • 迭代查询过程: 根DNS服务器告诉本地DNS服务器顶级域的DNS地址,本地DNS再查询通过顶级域DNS找到下一级域的DNS地址,以此迭代查询直到找到域名和IP的对应信息
  • 找到关系后,本地DNS返回结果给客户机,并进行相应的缓存

  

  图片来源:51cto

  我们可以使用命令dig +trace www.luoxia.me来跟踪dns查询过程:

  

可以清晰地看到这个迭代查询的过程。

Socket发送数据

浏览器得到IP地址和端口号以后,就会调用系统库函数socket,请求一个TCP流套接字,下面是之后的逐层封装过程:

  • 这个请求首先被交给传输层,在传输层请求被封装成 TCP segment。目标端口会被加入头部,源端口会在系统内核的动态端口范围内选取(Linux下是ip_local_port_range)
  • TCP segment 被送往网络层,网络层会在其中再加入一个 IP 头部,里面包含了目标服务器的IP地址以及本机的IP地址,把它封装成一个TCP packet。
  • 这个 TCP packet 接下来会进入链路层,链路层会在封包中加入 frame 头部,里面包含了本地内置网卡的MAC地址以及网关(本地路由器)的 MAC 地址。如果内核不知道网关的 MAC 地址,它必须进行 ARP 广播来查询其地址。

数据传输

数据可以通过以下方式进行传输:

  • 以太网
  • WiFi
  • 蜂窝移动网络

  

  数据经过一层层封装,经过本地网络,传送到网络的下一个节点,再到管理该主机所在子网的路由器,这个路由器经过区域内路由(Intra-AS routing)算法(如RIP)将数据发送给自治区域(autonomous system, 缩写 AS,如运营商区域网络)的边界路由(网关),再通过区域间路由(Inter-AS routing)算法(如BGP)找到其他域的边界路由,再经过区域内路由算法,直到找到目的主机。

  一路上经过的这些路由器会从IP数据报头部里提取出目标地址,并将封包正确地路由到下一个目的地。IP数据报头部 time to live (TTL) 域的值每经过一个路由器就减1,如果封包的TTL变为0,或者路由器由于网络拥堵等原因封包队列满了,那么这个包会被路由器丢弃。

  此外,由于IPV4的能够分配的IP有限,我们往往使用NAT来进行公网到内网的地址映射:

  

数据包最终传到目的主机的网卡,接着网卡会将数据拷贝到内存中(DMA),然后通过中断来通知 CPU,经过一层层的拆解到达指定端口的进程进行处理。

可以看到,我们的数据包会经过多个路由的不断转发,由于路由存在的各种延迟,会导致性能瓶颈的出现,后面会细讲。此外,TCP协议用于点对点的可靠传输,此部分也存在性能瓶颈,会在后面的小节单独展开。

可以通过命令traceroute查看数据包经过的路由.

HTTP协议

客户端发起的请求形成HTTP请求报文,经过层层封装最终到达服务端HTTP服务器所在进程,HTTP服务在接受到请求报文后,连同数据形成响应报文,再通过传输层、网络层等等地包装传输回客户端。

luoxia.me/images/climb.jpg为例:

  

访问网页的时候,服务端最终返回html文档,接下来就是网页的渲染过程了,这部分参照网页渲染原理章节

各层协议的具体字段可以通过抓包分析

从输入url到数据内容的返回,更多的学习:

  可参考链接:https://www.cnblogs.com/LXG97/p/10999022.html

        http://www.bubuko.com/infodetail-2275283.html

参考:

  

前端性能----从输入URL开始到返回数据的中间经历过程的更多相关文章

  1. 一次完整的HTTP事务的过程、从输入URL到网页展示,浏览器都经历了什么?

    详细介绍:老生常谈-从输入url到页面展示到底发生了什么 (1)一次完整的HTTP事务的过程 基本流程: a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务 ...

  2. 输入url到页面返回的过程

    输入url后,你看到了百度的首页,那么这一切是如何发生的呢? 这个问题之前.最近.我想以后肯定还会被问到,或者问到这样的题目,如果在百度框里输入查询的字符串开始,是怎么返回你需要的东西呢. 那这什么个 ...

  3. 从输入url到页面返回到底发生了什么

    1. 前言 Google应该是开发者平日里用得最多的网站之一,今早笔者在浏览器地址栏里键入www.google.com的时候,突然想了解下这背后的网络通信过程究竟是怎么样的.毕竟自己也算是一名Web开 ...

  4. 一个页面从输入URL 到页面加载显示完成的过程中都发生了什么

    前端面试/笔试必考问题,越详细越好 先简单得讲: 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求: 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML.JS.CSS. ...

  5. 从浏览器地址栏输入URL到浏览器呈现数据全过程解析

    一.输入设备(或粘贴)输入 URL,按下 Enter键 或其他按钮开始请求. 二.浏览器开始解析 URL 关于 URL 到相关知识点:什么是URI,URL以及URN,你真的理解了吗. 1.URL 是否 ...

  6. 前端回答从输入URL到页面展示都经历了些什么

    浏览器和服务器涉及大量网络通信内容,此处做了弱化介绍,作为前端主要关注第四部分.一. 网络环境保障我们先假定我们访问的URL为www.abc.com并且地址不在局域网内:首先我们所处的局域网的总路由应 ...

  7. 从输入URL到页面返回的过程详解

    文章转自以为大神的博客;https://www.cnblogs.com/xianyulaodi/p/6547807.html#_labelTop 总结的很不错,看完收获颇多, 下面就是大神的文章,我只 ...

  8. 面试题——分析从输入url到页面返回的过程(或者查询返回过程)

    1. You enter a URL into the browser(输入一个url地址) 2.The browser looks up the IP address for the domain ...

  9. 【前端】从输入URL到页面加载完成的过程中都发生了什么事情

    把URL分割成几个部分:协议(http, https).网络地址(xxx.xxx.xxx.xxx).资源路径(/xxx/xxx.xx).端口号(默认80). 如果地址不是一个IP地址,通过DNS(域名 ...

随机推荐

  1. django 中进程监控工具flower的使用

    工程结构:请参考https://www.cnblogs.com/apple2016/p/11425307.html flower官方文档:https://flower.readthedocs.io/e ...

  2. css伪类:before及:after除了插入文字内容还能做点儿啥?画图

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一 ...

  3. FusionInsight大数据开发---sorl应用开发

    sorl应用开发 要求: 了解Solr应用开发适用场景 熟悉Solr应用开发流程 熟悉并使用Solr常用API 理解Collection设计基本原则 应用开发实践 Solr简介 Solr是一个高性能, ...

  4. java版的状态机实现

    状态机适用场景: C的操作,需要等到A.B的两个操作(A.B顺序操作),那就需要在 A.B之间创建一个状态机(state machine),C的操作需要状态机达到某一个状态才能进行 1. Overvi ...

  5. c# mvc webapi的put报405错误

    程序在本机调试可正常修改,本机是iis11 放到服务器上,报错了:405.服务器iis7.0 返回的错误页面: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  6. CentOS8 安装MySQL8.0

    2019/11/25, CentOS 8,MySQL 8.0 摘要: CentOS 8 安装MySQL 8.0 并配置远程登录 安装MySQL8.0 使用最新的包管理器安装MySQL sudo dnf ...

  7. .Net调用ffmpeg对视频截图

    2019/10/27, .Net c#代码片段 摘要:借助ffmpeg对视频/图片截图.生成缩略图,使用命令行调用ffmpeg工具,支持Linux和Windows 网上很多版本都是需要等待4s的做法, ...

  8. winform datagridview控件使用

    最近做项目时,显示查询结果总需要绑定到datagridview控件上显示,总结了给datagridview绑定数据的方式,以及导出datagridview数据到excel表格,如有错误请多指教 1.直 ...

  9. IDEA控制台中文乱码问题

    Tomcat启动时乱码 在tomcat启动时,控制台中的中文为乱码 在idea安装路径的bin文件夹下,找到idea64.exe.vmoptions这个配置文件,添加如下代码 -Dfile.encod ...

  10. 【转载】C#通过Contains方法判断DataTable中是否存在某个列名

    在C#中的Datatable数据变量的操作过程中,有时候需要判断DataTable中是否存在某个列名,此时可以通过DataTable对象的Columns列对象集合属性下的Contains方法来进行判断 ...