在浏览器中输入一个 URL 至页面呈现的过程是什么

转载 2017年12月28日 13:48:37

摘要:

        我们使用浏览器去浏览网址但是我们却不知道这个过程中到底发生了什么,本篇博文就是讲述在浏览器输入url之后到浏览器展现出页面这一过程中都是发生了什么,是如何发生的。DNS域名解析 -> 建立TCP连接 -> 发送HTTP请求 -> 服务器处理请求 -> 返回响应结果 -> 关闭TCP连接 -> 浏览器解析HTML -> 浏览器布局渲染。


一、DNS域名解析

        我们在浏览器输入网址,其实就是要向服务器请求我们想要的页面内容,所有浏览器首先要确认的是域名所对应的服务器在哪里。将域名解析成对应的服务器IP地址这项工作,是由DNS服务器来完成的。客户端收到你输入的域名地址后,它首先去找本地的hosts文件,检查在该文件中是否有相应的域名、IP对应关系,如果有,则向其IP地址发送请求,如果没有,再去找DNS服务器。一般用户很少去编辑修改hosts文件。



二、建立TCP连接

        费了一顿周折终于拿到服务器IP了,下一步自然就是链接到该服务器。对于客户端与服务器的TCP链接,必然要说的就是『三次握手』。


        客户端发送一个带有SYN标志的数据包给服务端,服务端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息,最后客户端再回传一个带ACK标志的数据包,代表握手结束,连接成功。
        上图也可以这么理解:
              客户端:“你好,在家不,有你快递。”
              服务端:“在的,送来就行。”
              客户端:“好嘞。”


三、发送HTTP请求

        与服务器建立了连接后,就可以向服务器发起请求了。这里我们先看下请求报文的结构,在浏览器中查看报文首部(以google浏览器为例):


        请求行包括请求方法、URI、HTTP版本。首部字段传递重要信息,包括请求首部字段、通用首部字段和实体首部字段。我们可以从报文中看到发出的请求的具体信息。具体每个首部字段的作用,这里不做过多阐述。


四、服务器处理请求

        服务器端收到请求后的由web服务器(准确说应该是http服务器)处理请求,诸如Apache、Ngnix、IIS等。web服务器解析用户请求,知道了需要调度哪些资源文件,再通过相应的这些资源文件处理用户请求和参数,并调用数据库信息,最后将结果通过web服务器返回给浏览器客户端。


五、返回响应结果

        在响应结果中都会有个一个HTTP状态码,比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常,并能了解具体的错误。

        状态码由3位数字和原因短语组成。根据首位数字,状态码可以分为五类:



六、关闭TCP连接

        为了避免服务器与客户端双方的资源占用和损耗,当双方没有请求或响应传递时,任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似,关闭TCP连接,需要4次握手。


        上图可以这么理解:
            客户端:“兄弟,我这边没数据要传了,咱关闭连接吧。”
            服务端:“收到,我看看我这边有木有数据了。”
            服务端:“兄弟,我这边也没数据要传你了,咱可以关闭连接了。”
            客户端:“好嘞。


七、浏览器解析HTML

        准确地说,浏览器需要加载解析的不仅仅是HTML,还包括CSS、JS。以及还要加载图片、视频等其他媒体资源。

        浏览器通过解析HTML,生成DOM树,解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同,渲染树中并没有head、display为none等不必显示的节点。

        要注意的是,浏览器的解析过程并非是串连进行的,比如在解析CSS的同时,可以继续加载解析HTML,但在解析执行JS脚本时,会停止解析后续HTML,这就会出现阻塞问题,关于JS阻塞相关问题,这里不过多阐述,后面会单独开篇讲解。


八、浏览器布局渲染

        根据渲染树布局,计算CSS样式,即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的,CSS和js会打破这种布局,改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念:replaint和reflow。

        replaint:屏幕的一部分重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。

        reflow: 意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow,或是Layout。

        所以我们应该尽量减少reflow和replaint,我想这也是为什么现在很少有用table布局的原因之一。

        最后浏览器绘制各个节点,将页面展示给用户。

从浏览器中输入url地址到浏览器中显示网页内容 的过程分析

此文是我总结了一些经验和各种大神知识综合而成的。  1.首先当然是浏览器红输入url地址,            但是当你输入baidu 为什么最终的URL地址是www.baidu.com呢?  ...
  • alwanyslongjing
  • alwanyslongjing
  • 2016年09月20日 23:38
  • 2548

从输入URL到浏览器显示页面的详细过程

当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。 一、网络通信     互联网内各网络设备间的通信都遵...
  • liu2011zhijie
  • liu2011zhijie
  • 2016年09月20日 11:03
  • 929

浏览器中输入URL到返回页面的全过程

在浏览器输入:http://www.baidu.com/,最后,浏览器呈现出相应网页,这个过程究竟发生了什么? 第一步,解析域名,找到主机IP (1)浏览器会缓存DNS一段时间,一...
  • qq991029781
  • qq991029781
  • 2016年03月20日 20:34
  • 2522

从浏览器地址栏里输入一个URL开始,到出现整个页面,网络上都发生了什么事?

最近谈到这个问题,觉得自己不能够清楚的讲明白这个过程的一些细节,所以差了些资料,觉得如下的解答还是比较详细的,后期还会慢慢完善这个过程中不足的地方。回车前: 1. 如果用某些输循入法输入, 它会按标准...
  • u014304560
  • u014304560
  • 2015年09月24日 19:20
  • 1172

URL-浏览器过程(1)

In an extremely rough and simplified sketch, assuming the simplest possible HTTP request, no proxies...
  • zhang19871201
  • zhang19871201
  • 2015年09月24日 16:44
  • 2772

在浏览器中输入网址到网页展现全部过程

序 最近接触到了整个网站的开发流程,所以就总结一下网站的运行机制,对网络应用如何工作有一个完整的层次化的认知。 第一步 首先,你得在浏览器里输入要网址: 例如百度或者facebook。 第二步 浏览...
  • xiangriikui
  • xiangriikui
  • 2016年08月14日 23:05
  • 4461

输入一个URL到页面呈现其中发生的过程-------http过程详解

在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情。 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们...
  • heshan1992
  • heshan1992
  • 2017年08月18日 09:44
  • 429

浏览器输入一个URL地址后发生的事情

在浏览器中输入一个URL至页面呈现,发生的事情? 1、域名解析:浏览器获得URL地址,向操作系统请求该URL对应的IP地址,操作系统查询DNS(首先查询本地HOST文件,没有则查询网络)获得对应的IP...
  • kongjunchao159
  • kongjunchao159
  • 2016年03月08日 17:17
  • 2799

从URL输入后 浏览器做了哪些行为?

故事其实并不是从在浏览器的地址栏输入一个网址,或者我们抓着鼠标点击一个链接开始,事情的开端要追溯到服务器启动监听服务的时候,在某个未知的时刻,一台机房里普普通通的刀片服务器,加上电,启动了操作系统,随...
  • lamianT
  • lamianT
  • 2017年02月09日 15:00
  • 819

一个页面从输入URL到页面加载显示完成,这个过程都发生什么?

一般会经历以下几个过程: 1、首先,在浏览器地址栏中输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。 ...
  • xingxingba123
  • xingxingba123
  • 2016年10月06日 13:21
  • 4300
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在浏览器中输入一个 URL 至页面呈现的过程是什么
举报原因:
原因补充:

(最多只允许输入30个字)