2

浏览器输入URL会经历什么

整体流程

  1. 浏览器查找域名的IP地址 DNS
  2. 浏览器与服务器进行TCP连接 3次握手
  3. 浏览器通过http协议发送请求,请求数据包
  4. 有些服务器会做永久重定向响应(为了负载均衡或者导入流量)
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器返回HTML响应(200)
  8. 浏览器显示页面(数据渲染)
  9. 浏览器发送获取嵌入在HTML的其他内容(样式文件、图片url)
  10. 释放TCP连接

包含知识点

一、浏览器的主要组件为:

1、用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
2、浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
3、呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
4、网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
5、用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
6、JavaScript 解释器。用于解析和执行 JavaScript 代码。
7、数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

二、解析域名过程(包括DNS)

拿URL为www.cnblogs.com举例

1、Chrome浏览器会首先搜索浏览器的DNS缓存(缓存时间比较短,TTL默认是1000,且只能容纳1000条缓存),看自身的缓存中是否有www.cnblogs.com对应的条目,而且没有过期,如果有且没有过期则解析到此结束。

2、Chrome搜索操作系统的DNS缓存,如果找到且没有过期则停止搜索解析到此结束。

3、如果在Windows系统的DNS缓存也没有找到,那么尝试读取hosts文件(位于C:WindowsSystem32driversetc),看看这里面有没有该域名对应的IP地址,如果有则解析成功。

4、如果在hosts文件中也没有找到对应的条目,浏览器就会发起一个DNS的系统调用,就会向本地配置的首选DNS服务器(一般是电信运营商提供的)发起域名解析请求(通过的是UDP协议向DNS的53端口发起请求,这个请求是递归的请求,也就是运营商的DNS服务器必须得提供给我们该域名的IP地址)
4.1、运营商的DNS服务器首先查找自身的缓存,找到对应的条目,且没有过期,则解析成功。如果没有找到对应的条目,则有运营商的DNS代我们的浏览器发起迭代DNS解析请求,
4.2、它首先是会找根域的DNS的IP 地址(这个DNS服务器都内置13台根域的DNS的IP地址),找到根域的DNS地址,就会向其发起请求(请问www.cnblogs.com这个域名的 IP地址是多少啊?),根域发现这是一个顶级域com域的一个域名,
4.3、于是运营商的DNS就得到了com域的IP地址,又向com域的IP地址发起了请求(请问www.cnblogs.com这个域名的IP 地址是多少?),
4.4、于是运营商的DNS又向www.cnblogs.com这个域名的DNS地址(这个一般 就是由域名注册商提供的,像万网,新网等)发起请求(请问www.cnblogs.com这个域名的IP地址是多少?),
4.5、这个时候cnblogs.com 域的DNS服务器一查,果真在我这里,于是就把找到的结果发送给运营商的DNS服务器,这个时候运营商的DNS服务器就拿到了 www.cnblogs.com这个域名对应的IP地址,并返回给Windows系统内核,内核又把结果返回给浏览器,终于浏览器拿到了 www.cnblogs.com对应的IP地址,该进行一步的动作了。
4.6、一般情况下是不会进行以下步骤的,如果经过以上的4个步骤,还没有解析成功,那么会继续。操作系统就会查找NetBIOS name Cache(NetBIOS名称缓存,就存在客户端电脑中的),那这个缓存有什么东西呢?凡是最近一段时间内和我成功通讯的计算机的计算机名和Ip地址, 就都会存在这个缓存里面。什么情况下该步能解析成功呢?就是该名称正好是几分钟前和我成功通信过,那么这一步就可以成功解析。
4.7、如果第5步也没有成功,那会查询WINS 服务器(是NETBIOS名称和IP地址对应的服务器)
4.8、如果第6步也没有查询成功,那么客户端就要进行广播查找
4.9、如果第7步也没有成功,那么客户端就读取LMHOSTS文件(和HOSTS文件同一个目录下,写法也一样)
如果第八步还没有解析成功,那么这次解析失败,那就无法跟目标计算机进行通信。只要这八步中有一步可以解析成功,那就可以成功和目标计算机进行通信。

三、TCP三次握手

1、解析出IP地址后,根据IP地址和默认端口80和服务器建立连接
浏览器发出读取文件(URL中域名后边部分对应的文件)的HTTP请求,该请求报文作为TCP三次握手的第三个报文的数据发送给服务器
服务器对浏览器的请求作出响应,并把对应的html文本发送给浏览器
释放TCP连接(四次挥手断开连接)
浏览器解析该HTML文本并显示内容

2、TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接:
位码即tcp标志位,有6种表示:

SYN(synchronous建立连接)
ACK(acknowledgement 表示响应、确认)
PSH(push表示有DATA数据传输)
FIN(finish关闭连接)
RST(reset表示连接重置)
URG(urgent紧急指针字段值有效)

2.1、第一次握手:客户端发送syn包(syn=x)到服务器,并进入SYN_SEND状态,等待服务器确认;
2.2、第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个SYN包(syn=y),即SYN+ACK包,此时服务器进入SYN_RECV状态;
2.3、第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=y+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。
另外:握手过程中传送的包里不包含数据,三次握手完毕后,客户端与服务器才正式开始传送数据。理想状态下,TCP连接一旦建立,在通信双方中的任何一方主动关闭连接之前,TCP 连接都将被一直保持下去。
3、四次挥手
3.1、第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可以接受数据。
3.2、第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
3.3、第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

四、用到的协议及其作用

1、所涉及的协议
1.1、域名解析用到DNS协议
DNS服务器是基于UDP的,因此会用到UDP协议
得到IP地址后,浏览器会与服务器建立HTTP连接,用到HTTP协议
1.2、http协议生成GET请求报文,将该报文传给TCP层处理,用到了TCP协议
1.3、如果用到了HTTPS协议还会对HTTP协议内容进行加密
TCP层若有需要会对HTTP数据报分片,分片依据路径MTU和MSS
1.4、TCP的数据报会发送给IP层,用到IP协议
1.5、IP层通过路由选择,将数据发送给目的端口
以太网协议需要知道目的IP的物理地址,需要用到ARP协议
2、协议所处层级
2.1、DNS协议,HTTP协议,HTTPS协议属于应用层
应用层是体系结构中的最高层。应用层确定进程之间通信的性质满足用户的需要。这里所说的进程就是指正在运行的程序。应用层不仅需要提供应用进程需要的信息交换,而且还要作为相互作用的应用进程的用户代理,来完成一些为进行语义上有意义的交换所必须的功能。
2.2、TCP/UDP属于传输层
传输层的任务就是负责主机中两个进程间的通信。因特网的传输层可使用两种不同的协议;即面向连接的传输控制协议TCP和无连接的用户数据报协议UDP。面向连接的服务能够提供可靠的交付,两种方式都各有其优点
2.3、IP协议和ARP协议属于网络层
网络层负责为分组交换网上的不同主机提供通信。在发送数据时,网络层将传输层产生的报文段或用户数据报封装成分组或者包进行传送。在TCP/IP体系中,分组也叫作IP数据报。网络层的另一个任务就是选择合适的路由,使源主机传输层传下来的分组能够交付到目的主机。
2.4、数据链路层
当发送数据时,数据链路层的任务是将在网络层交下来的IP数据报组装成帧,在两个相邻节点间的链路上传送以帧为单位的数据。每一帧包括数据和必要的控制信息(如同步信息、地址信息、差错控制以及流量控制等信息)。控制信息使接收端能够知道一个帧从那个比特开始到那个比特结束。控制信息还使接收端能够检测到所收到的帧中有没有差错。
2.5、物理层
物理层的任务就是透明的传送比特流。在物理层上所传输的数据的单位是比特。传递信息所利用的一些物理媒介,如双绞线、同轴电缆、光缆等,并不是在物理层之内而是在物理层的下面。因此也有人把物理媒体当做第0层。

五、http状态码

   5.1、2XX成功
   1. 200 OK
   表示从客户端发来的请求在服务器被正常处理了。
   2. 204 no content
   表示从客户端发来的请求在服务器被正常处理了,但在返回的响应报文中不含实体的主体部分。
   3. 206 partial content
   表示客户端进行了范围请求,而服务器成功执行了这部分的GET请求。

   5.2、3XX重定向
   1. 301 moved permanently
   永久性重定向。该状态码表示请求的资源已被分配了新的URI,以后应使用资源现在所指的URI。也就是说,如果已经把资源对应的URI保存为书签了,这时应按Location首部字段提示的URI重新保存。
   如下方给出的请求URI,当指定资源路径的最后忘记添加斜杠“/”,就会产生301状态码
   http://example.com/sample
   2. 302 found
   临时性重定向。该状态码表示请求的资源已被分配了新的URI,希望用户(本次)能使用新的URI访问。
   与301的区别:302代表的资源不是被永久移动,只是临时性质的,已移动的资源对应的URI将来还有可能发生改变。
   如用户把URI保存成书签,但不会像301出现时那样去更新书签,而是仍旧保留返回302的页面对应的URI。
   3. 303 see other
   该状态码表示由于请求对应的资源存在着另一个URI,应使用GET方法定向获取请求的资源。
   与302的区别:303明确表示客户端应采用GET方法获取资源
   4. 304 not modified
   该状态码表示客户端发送附带条件的请求时,服务器端资源已找到,但未符合条件请求。304返回时,不包含任何响应的主体部分。
   304虽然被划分在3XX类别中,但是和重定向没有关系。
   5. 307 temporary rediect
   临时重定向。该状态码与302有着相同的含义,但307会遵照浏览器标准,不会从POST变成GET。对于处理响应时的行为,每种浏览器有可能出现不同的情况。
   
   5.3、4XX客户端错误
   1. 400 bad request
   该状态码表示请求报文中存在语法错误。当错误发生时,需修改请求的内容后再次发送请求。
   2. 401 unauthorized
   该状态码表示发送的请求需要有通过HTTP认证(BASIC认证、DIGEST认证)的认证信息。另外,若之前已进行过1次请求,则表示用户认证失败。
   返回含有401的响应必须包含一个适用于被请求资源的WWWAuthenticate首部用以质询(challenge)用户信息。当浏览器初次接收到401响应,会弹出认证用的对话窗口。
   3. 403 forbidden
   该状态码表明对请求资源的访问被服务器拒绝了
   4. 404 not found
   该状态码表明服务器上无法找到请求的资源。除此之外,也可以在服务器端拒绝请求且不想说明理由时使用。

   5.4、5XX 服务器错误
   1. 500 internal server error
   该状态码表明服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。
   2. 503 service unavailable
   该状态码表明服务器暂时处于超负载或正在进行停机维护,现在无法处理请求。如果事先得知解除以上状况需要的时间,最好写入RetryAfter首部字段再返回给客户端。

六、http请求有几种

1:GET
 请求指定的页面信息,并返回实体主体。
2:HEAD
类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
3:POST
向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
4:PUT
从客户端向服务器传送的数据取代指定的文档的内容。
5:DELETE
请求服务器删除指定的页面。
6:CONNECT
HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7:OPTIONS
允许客户端查看服务器的性能。
8:TRACE
回显服务器收到的请求,主要用于测试或诊断。
9:PATCH
实体中包含一个表,表中说明与该URI所表示的原内容的区别。
10:MOVE
请求服务器将指定的页面移至另一个网络地址。
11:COPY
请求服务器将指定的页面拷贝至另一个网络地址。
12:LINK
请求服务器建立链接关系。
13:UNLINK
断开链接关系。
14:WRAPPED
允许客户端发送经过封装的请求。
15:Extension-mothed
在不改动协议的前提下,可增加另外的方法

七、get和post请求区别

7.1、GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.
7.2、GET提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST方法提交的数据没有限制.
7.3、GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
7.4、GET方式提交数据,会带来安全问题,比如一个登录页面,通过GET方式提交数据时,用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问这台机器,就可以从历史记录获得该用户的账号和密码.
7.5、多数浏览器对于POST采用两阶段发送数据的,先发送请求头,再发送请求体,即使参数再少再短,也会被分成两个步骤来发送(相对于GET),也就是第一步发送header数据,第二步再发送body部分。HTTP是应用层的协议,而在传输层有些情况TCP会出现两次连结的过程,HTTP协议本身不保存状态信息,一次请求一次响应。对于TCP而言,通信次数越多反而靠性越低,能在一次连结中传输完需要的消息是最可靠的,尽量使用GET请求来减少网络耗时。如果通信时间增加,这段时间客户端与服务器端一直保持连接状态,在服务器侧负载可能会增加,可靠性会下降。

八、浏览器解析html

8.1、整体流程
  1. 解析html
  2. 构建dom树
  3. 处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。
  4. dom树结合cssOM,构建渲染树
  5. 布局
  6. 绘制
8.2、注意点:

1、解析html和构建dom树是同步进行的,这个过程就是逐行解析代码,包括html标签和js动态生成的标签,最终生成dom树。    
2、构建渲染树,就是把css文件和style标签的中的内容,结合dom树的模型,构建一个渲染树,写到内存,等待进一步生成界面。呈现树一定依赖dom树, 呈现节点一定会有对应的dom节点,但是dom节点不一定会有对应的呈现节点,比如,被隐藏的一个div。    
3、布局,这一步就是结合呈现树,把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上,会有对元素大小、位置的定义,但是浏览器 还需要根据实际窗口大小进行计算,比如对auto的处理。   
4、绘制,把css中有关颜色的设置,背景、字体颜色等呈现出来。
5、浏览器遇到img等媒体资源时,不会阻塞渲染,会去异步加载这些资源。
6、浏览器如果遇到内联的script脚本,则会立即执行该脚本。
7、浏览器如果遇到含有外部文件的script(先讨论不含defer、async属性的情况)标签,会阻塞当前渲染,创建新的网络连接,开始下载脚本文件,下载完成后立即执行。
8、所以,若在HTML头部加载JS文件,由于JS阻塞,会推迟页面的首绘。为了加快页面渲染,一般将JS文件放到HTML底部进行加载,或是对JS文件执行async或defer加载
9、defer属性和async属性都能防止脚本下载阻塞页面渲染
如果script标签包含defer属性,则浏览器会立即去下载该js文件,但是却不会执行该js文件,该文件执行时机为,浏览器渲染至</html>时。defer的js文件会在DOMContentLoaded事件之前完成执行。
如果script标签包含async属性,是会去异步下载该js文件,并且当该js下载完成后立即执行,async的js文件会在load事件之前完成执行。
10、onload事件和DOMContentLoaded事件
DOMContentLoaded事件是当初始HTML文档完全被加载和解析(即所有的DOM完全解析)时触发的,无需要等待样式表,图片,子框架完成加载。而onload事件要等页面所有元素,包括图片以及脚本等全部加载完成才触发,因此它比DOMContentLoaded要更晚执行。
在页面的图片很多,网络不好的情况下,从用户访问到onload触发可能需要很长的时间,此时如果在onload中加入许多初始化的动作, 必然会影响用户的体验。这事使用DOMContentLoaded事件代替onload事件是更合适的。


以上为楼主的笔记整理,希望能帮到大家理解相关知识。


引用:

https://blog.csdn.net/yanxiao...
https://blog.csdn.net/qq_4194...
https://blog.csdn.net/qq_3265...

小鹏
13 声望4 粉丝

幸福是奋斗出来的!