|
|
51CTO旗下网站
|
|
移步端
  • 副URL步入到页面展现到底发生什么?

    开拓浏览器从投入网址到网页呈现在大家面前,悄悄到底发生了什么?经验怎么样的一个过程?先给大家来张总体流程图,现实步骤请看下文分解!

    笔者:刘少奇 来源:前者工匠| 2020-01-10 08:54

     

    前言

    开拓浏览器从投入网址到网页呈现在大家面前,悄悄到底发生了什么?经验怎么样的一个过程?先给大家来张总体流程图,现实步骤请看下文分解!

    完全来说分为以下几个经过:

  • DNS 剖析:名将域名解析成 IP 地点
  • TCP 联网:TCP 三次握手
  • 发送 HTTP 呼吁
  • 传感器处理请求并返回 HTTP 报文
  • 传感器解析渲染页面
  • 断开连接:TCP 四次挥手
  • 一、URL 到底是哪

    URL(Uniform Resource Locator),联合资源定位符,用于定位互联网上资源,俗称网址。比如 http://www.w3school.com.cn/html/index.asp,恪守以下的语法规则:

    scheme://host.domain:port/path/filename各组成部分解释如下:scheme - 定义因特网服务的项目。科普的商谈有 http、https、ftp、file,其中最广泛的项目是 http,而 https 则是进行加密的网络传输。host - 定义域主机(http 的默认主机是 www) domain - 定义因特网域名,比如 w3school.com.cn port - 定义主机上的端口号(http 的默认端口号是 80) path - 定义服务器上的门路(如果省略,则文档必须位于网站的根目录中)。filename - 定义文档/能源之称谓

    二、域名解析(DNS)

    在新石器输入网址后,第一要经过域名解析,因为浏览器并未能直接穿过域名找到对应的蒸发器,而是要通过 IP 地点。大家这里或许会有个问题----微机既可以把赋予 IP 地点,也得以把赋予主机名和域名。比如 www.hackr.jp。那怎么不一开始就赋予个 IP 地点?这样就足以节约解析麻烦。咱们先来了解下什么是 IP 地点

    1.IP 地点

    IP 地点是指互联网协议地址,是 IP Address 的缩写。IP 地点是 IP 协和提供的一种统一的地点格式,他为互联网上的每一个网络和每一台主机分配一个逻辑地址,这个来屏蔽物理地址的差别。IP 地点是一番 32 位的福利制数,比如 127.0.0.1 为本机 IP。地名就相当于 IP 地点乔装打扮的伪装者,带着一下面具。他的企图就是便于记忆和联系的一组服务器的地点。他家通常使用主机名或域名来访问中的微机,而不是直接穿过 IP 地点访问。因为与 IP 地点的一组纯数字相比,用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去领略名称,对比就变得困难了。因为计算机更善于处理一长串数字。为了消灭上述的题材,DNS 劳务应运而生。

    2.什么是域名解析

    DNS 协和提供通过域名查找 IP 地点,或逆向从 IP 地点反查域名的劳务。DNS 是一番网络服务器,咱们的域名解析简单来说就是在 DNS 上记录一枝消息记录。

    例如 baidu.com 220.114.23.56(传感器外网IP地点)80(传感器端口号)

    3. 传感器如何通过域名去查询 URL 对应的 IP 呢

  • 传感器缓存:传感器会按照一定的效率缓存 DNS 记录。
  • 操作系统缓存:如果浏览器缓存中找不到需要的 DNS 记录,那就去操作体系中找。
  • 路由缓存:玉器也有 DNS 缓存。
  • ISP 的 DNS 传感器:ISP 是互联网服务提供商(Internet Service Provider)的简称,ISP 有专门的 DNS 传感器应对 DNS 查询请求。
  • 根服务器:ISP 的 DNS 传感器还找不到的话,他就会向根服务器发出呼吁,拓展递归查询(DNS 传感器先问根域名服务器.com 域名服务器的 IP 地点,下一场再问.baidu 域名服务器,依次类推)
  • 4. 总结

    传感器通过向 DNS 传感器发送域名,DNS 传感器查询到与域名相对应的 IP 地点,下一场返回给浏览器,传感器再将 IP 地点打在磋商上,同时呼吁参数也会在磋商搭载,下一场一并发送给对应的蒸发器。然后介绍向服务器发送 HTTP 呼吁阶段,HTTP 呼吁分为三个组成部分:TCP 三次握手、http 呼吁响应信息、关闭 TCP 联网。

    三、TCP 三次握手

    在客户端发送数据之前会发起 TCP 三次握手用以同步客户端和劳务端的序列号和认同号,并交换 TCP 入海口大小信息。

    1.TCP 三次握手的经过如下:

  • 客户端发送一个带 SYN=1,Seq=X 的数据包到铁器端口(着重次握手,由浏览器发起,告知服务器我要发送请求了)
  • 传感器发回一个带 SYN=1, ACK=X+1, Seq=Y 的呼唤包以示传达确认信息(其次次握手,由服务器发起,告知浏览器我准备接受了,你赶紧发送吧)
  • 客户端再回传一个带 ACK=Y+1, Seq=Z 的数据包,代表“拉手结束”(先后三次握手,由浏览器发送,告知服务器,我马上就发了,未雨绸缪接受吧)
  • 2.为啥需要三次握手

    谢希仁著《计算机网络》官方讲“三次握手”的目的是“为了防止已失效的过渡请求报文段突然又扩散给到了劳动端,故此产生错误”。

    四、发送 HTTP 呼吁

    TCP 三次握手结束以后,起来发送 HTTP 呼吁报文。呼吁报文由伸手行(request line)、呼吁头(header)、呼吁体四个组成部分构成,如下图所示:

    1.呼吁行包含呼吁方法、URL、协和版本

  • 呼吁方法包含 8 种:GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
  • URL 即请求地址,由 <协和>://<长机>:<端口>/<途径>?<数> 重组
  • 协和版本即 http 版本号
  •       
    1. POST /chapter17/user.html HTTP/1.1 

    上述代码中“POST”代表呼吁方法,“/chapter17/user.html”表示 URL,“HTTP/1.1”代表协商和协商的本子。如今比较流行的是 Http1.1 本子

    2.呼吁头包含呼吁的叠加信息,由关键字/值对组成,每趟一对,关键字和值用英文冒号“:”相隔。

    呼吁头部通知服务器有关于客户端请求的消息。他包含许多有关的客户端环境和请求正文的有效信息。其中比如:Host,表示主机名,编造主机;Connection,HTTP/1.1 增长的,采用 keepalive,即持久连接,一度连接可以发多个请求;User-Agent,呼吁发出者,冷水性以及定制化需求。

    3.呼吁体,可以承载多个请求参数的多寡,包含回车符、换行符和请求数据,并不是全部请求都具有请求数据。

          
    1. name=tom&password=1234&realName=tomson 

    地方代码,承载着 name、password、realName 三个请求参数。

    五、传感器处理请求并返回 HTTP 报文

    1. 传感器

    传感器是网络环境中的高性能计算机,他侦听网络上的任何计算机(我家机)付出的劳务请求,并提供相应的劳务,比如网页服务、文件下载服务、邮件服务、视频服务。而客户端主要的效应是浏览网页、瞧视频、听音乐等等,二者截然不同。每台服务器上都会安装处理请求的使用——web server。科普的 web server 产品有 apache、nginx、IIS 或 Lighttpd 等。web server 担任管控的角色,对于不同用户发送的呼吁,会结合配置文件,把不同请求委托给服务器上处理相应请求的顺序进行拍卖(例如 CGI 剧本,JSP 剧本,servlets,ASP 剧本,服务器端 JavaScript,或者部分其它的服务器端技术等),下一场返回后台程序处理产生之结果表现响应。

    2.MVC 看台处理阶段

    看台开发现在有许多框架,但大多数都还是按照 MVC 计划模式进行搭建的。MVC 是一番计划模式,名将采用程序分成三个中心部件:模型(model)-- 挂图(view)--玉器(controller),它们各自处理自己之天职,贯彻输入、拍卖和进出口的分别。

    1、挂图(view)

    他是提供给用户之借鉴界面,是程序的框架。

    2、模型(model)

    模型主要承担数据交互。在 MVC 的三个部件中,模型拥有最多的拍卖任务。一度模型能为多个视图提供多少。

    3、玉器(controller)

    他肩负根据用户从"挂图层"步入的吩咐,分选"模型层"中的数据,下一场对他进行相应的借鉴,产生最终结果。玉器属于管理者角色,副视图接收请求并决定调用哪个模型构件去处理请求,下一场再确定用哪个视图来显示模型处理回来的多寡。这三层是紧紧联系在总共的,但又是互相独立的,每一层内部的转移不影响其他层。每一层都对外提供接口(Interface),供上面一层调用。至于这一阶段发生什么?概括,第一浏览器发送过来的呼吁先经过控制器,玉器进行逻辑处理和请求分发,接着会调用模型,这一阶段模型会获取 redis db 以及 MySQL 的多寡,获取数据后将渲染好的页面,呼唤信息会以响应报文之样式返回给客户端,说到底浏览器通过渲染引擎将网页呈现在他家面前。

    3.http 呼唤报文

    呼唤报文由响应行(request line)、呼唤头部(header)、呼唤主体三个组成部分构成。如下图所示:

    (1) 呼唤行包含:协和版本,状态码,状态码描述

    状态码规则如下:1xx:指示信息--表示请求已收到,继承处理。2xx:成功--表示请求已把成功接收、了解、接到。3xx:重定向--要形成请求必须进行更进一步的借鉴。4xx:客户端错误--呼吁有语法错误或请求无法实现。5xx:服务器端错误--传感器未能实现合法的呼吁。

    (2) 呼唤头部包含响应报文之叠加信息,由 红/值 对组成

    (3) 呼唤主体包含回车符、换行符和响应返回数据,并不是全部响应报文都有响应数据

    六、传感器解析渲染页面

    传感器拿到响应文本 HTML 此后,然后介绍下灭火器渲染机制

    传感器解析渲染页面分为一下五个步骤:

  • 根据 HTML 剖析出 DOM 树
  • 根据 CSS 剖析生成 CSS 规则树
  • 重组 DOM 树和 CSS 规则树,浮动渲染树
  • 根据渲染树计算每一个节点的消息
  • 根据计算好的消息绘制页面
  • 1.根据 HTML 剖析 DOM 树

  • 根据 HTML 的情节,名将标签按照结构解析成为 DOM 树,DOM 树解析的经过是一番深度优先遍历。即先构建当前节点的一切子节点,再构建下一个兄弟节点。
  • 在读取 HTML 文档,构建 DOM 树的经过中,若遇到 script 标签,则 DOM 树的构建会半途而废,直至脚本执行完毕。
  • 2.根据 CSS 剖析生成 CSS 规则树

  • 剖析 CSS 规则树时 js 推行将暂停,直至 CSS 规则树就绪。
  • 传感器在 CSS 规则树生成之前不会进展渲染。
  • 3.重组 DOM 树和 CSS 规则树,浮动渲染树

  • DOM 树和 CSS 规则树全部准备好了今后,传感器才会开始构建渲染树。
  • 言简意赅 CSS 并可以加速 CSS 规则树的构建,故而加快页面相应速度。
  • 4.根据渲染树计算每一个节点的消息(布局)

  • 布局:穿过渲染树中渲染对象的消息,计算出每一个渲染对象的岗位和尺寸
  • 回流:在布局完成后,意识了某个部分发生了变动影响了布局,那就要求倒回去重新渲染。
  • 5.根据计算好的消息绘制页面

    测绘阶段,系统会遍历呈现树,并调用呈现器的“paint”办法,名将呈现器的情节显示在荧屏上。

    重绘:某个元素的全景颜色,文字颜色等,不影响元素周围或内部布局之习性,名将只会引起浏览器的份额绘。

    回流:某个元素的尺寸发生了变动,则需重新计算渲染树,重新渲染。

    七、断开连接

    顶数据传送完毕,要求断开 tcp 联网,此刻发起 tcp 四次挥手。

  • 倡导方向被动方发送报文,Fin、Ack、Seq,表示已经没有数据传输了。并进入 FINWAIT1 状态。(着重次挥手:由浏览器发起的,发送给服务器,我请求报文发送完了,你准备关闭吧)
  • 消极方发送报文,Ack、Seq,表示同意关闭请求。此刻主机发起方进入 FINWAIT2 状态。(其次次挥手:由服务器发起的,告知浏览器,我请求报文接受完了,我准备关闭了,你也准备吧)
  • 消极方向发起方发送报文段,Fin、Ack、Seq,呼吁关闭连接。并进入 LAST_ACK 状态。(先后三次挥手:由服务器发起,告知浏览器,我响应报文发送完了,你准备关闭吧)
  • 倡导方向被动方发送报文段,Ack、Seq。下一场进入等待 TIME_WAIT 状态。消极方收到发起方的报文段下关闭连接。倡导方等待一定时间未接到回复,则正常关闭。(先后四次挥手:由浏览器发起,告知服务器,我响应报文接受完了,我准备关闭了,你也准备吧)
  • 【编纂推荐】

    1. 4000字详解TCP逾期与重传,看完没收获算我输
    2. 采用Netty打电话时,赶上TCP粘包拆包问题如何解决?答案如此简单
    3. TCP三次握手背的滚瓜乱熟,那意外丢包呢?故意不回答 ACK 呢?
    4. TCP 三次握手背的滚瓜乱熟,那意外情况呢?丢包了呢?故意不回答 ACK 呢?
    5. TCP 四次挥手,你熟了!那意外情况呢?恶意攻击呢?单端跑路呢?
    【义务编辑: 武晓燕 TEL:(010)68476606】

    点赞 0
  • URL  DNS  TCP
  • 分享:
    大家都在看
    猜你喜欢
  • 订阅专栏+更多

    Python使用场景实战手册

    Python使用场景实战手册

    Python使用场景实战手册
    共3章 | KaliArch

    115人口订阅学习

    一步到位玩儿透Ansible

    一步到位玩儿透Ansible

    Ansible
    共17章 | 骏马金龙1

    182人口订阅学习

    云架构师修炼手册

    云架构师修炼手册

    云架构师之必不可少技能
    共3章 | Allen在路上

    131人口订阅学习

    读 书 +更多

    网管员必读―-网络安全

    该书共10章,介绍的情节包括恶意软件(包括病毒、布老虎和蠕虫等)的吃水防御方法,黑客的首要品种和防御方法,集团网络内、表面网络防火墙系...

    订阅51CTO邮刊

    点击这里查看样刊

    订阅51CTO邮刊

    51CTO劳务号

    51CTO官微


      &lt;dd id="5fa361b1"&gt;&lt;/dd&gt;