从输入URL到浏览器显示页面发生了什么

当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。

一、网络通信

互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信。分层由高到低分别为:应用层、传输层、网络层、数据链路层。发送端从应用层往下走,接收端从数据链路层网上走。如图所示:

1. 在浏览器中输入url

用户输入url,例如http://www.baidu.com。其中http为协议,www.baidu.com为网络地址,及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址,此处为域名。使用域名是为了方便记忆,但是为了让计算机理解这个地址还需要把它解析为IP地址。

2.应用层DNS解析域名

客户端先检查本地是否有对应的IP地址,若找到则返回响应的IP地址。若没找到则请求上级DNS服务器,直至找到或到根节点。

3.应用层客户端发送HTTP请求

HTTP请求包括请求报头和请求主体两个部分,其中请求报头包含了至关重要的信息,包括请求的方法(GET / POST)、目标url、遵循的协议(http / https / ftp…),返回的信息是否需要缓存,以及客户端是否发送cookie等。

4.传输层TCP传输报文

位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输,将大块的数据分割成以报文段为单位的数据包进行管理,并为它们编号,方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。

“三次握手”的过程是,发送端先发送一个带有SYN(synchronize)标志的数据包给接收端,在一定的延迟时间内等待接收的回复。接收端收到数据包后,传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中,如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求,而再次发送,直到收到回复为止。

5.网络层IP协议查询MAC地址

IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址,也就是物理地址。IP地址和MAC地址是一一对应的关系,一个网络设备的IP地址可以更换,但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时,需要多次中转才能到达最终的目标,在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

6.数据到达数据链路层

在找到对方的MAC地址后,就将数据发送到数据链路层传输。这时,客户端发送请求的阶段结束

7.服务器接收数据

接收端的服务器在链路层接收到数据包,再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

8.服务器响应请求

服务接收到客户端发送的HTTP请求后,查找客户端请求的资源,并返回响应报文,响应报文中包括一个重要的信息——状态码。状态码由三位数字组成,其中比较常见的是200 OK表示请求成功。301表示永久重定向,即请求的资源已经永久转移到新的位置。在返回301状态码的同时,响应报文也会附带重定向的url,客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9. 服务器返回相应文件

请求成功后,服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。

二、页面渲染

现代浏览器渲染页面的过程是这样的:jiexiHTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

DOM树是由HTML文件中的标签排列组成,渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素,像<head>元素或display属性值为none的元素都不在渲染树中。

在浏览器还没接收到完整的HTML文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

时间: 2024-10-13 01:33:38

从输入URL到浏览器显示页面发生了什么的相关文章

在浏览器中输入URL按下回车键后发生了什么

在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层分别加入各个层的头部封装为包[5]进行三次握手后,客户端与服务器建立连接[6]客服务器向客户端返回数据,浏览器接收到数据[7]浏览器开始渲染页面 补充:浏览器渲染页面详解 [1]由从服务器接收到的html形成DOM[2]样式被加载和解析,形成css对象模型CSSOM[3]DOM和CSSOM创建一个渲

从输入 URL 到浏览器接收的过程中发生了什么事情

从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器,目前大多是基于电容(Capacitive)来实现的,以前都是直接覆盖在显示屏上的,不过最近出现了 3 种嵌入到显示屏中的技术,第一种是 iPhone 5 的 In-cell,它能减小了 0.5 毫米

从输入 URL 到浏览器接收的过程中发生了什么事情?

从输入 URL 到浏览器接收的过程中发生了什么事情? What really happens when you navigate to a URL 上面两篇文章都解读的很好,值得阅读. 接下来在总结一下这个过程: 1.首先,会查询缓存,如果缓存存在的话则直接响应,否则继续下面过程: 2.当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询.这能使浏览器获得请求对应的IP地址.D

iw14.0.50来了,终于可以直接在地址栏输入url打开iw功能页面了;可以自由使用EasyUI等js框架了;显示模式对话框也不再七绕八绕惹人烦了;

示例代码已经放出!请移步使用delphi+intraweb进行微信开发1~4代码示例进行下载,虽为示例代码但是是从我项目中移出来的,封装很完备适于自行扩展和修改. iw14.0.50来了,在新的版本中最吸引我的就是增加了完善的httphandler功能:终于可以直接在地址栏输入url打开iw功能页面了:可以自由使用EasyUI等js框架了:显示模式对话框也不再七绕八绕惹人烦了:呵呵,我感觉iw第一次接近主流web开发工具了! 兴奋过了,来尝试一下吧.其实iw的坑还是挺多的,虽然已经接近主流了,但

计算机网络【6】—— 从浏览器输入URL到显示页面发生了什么

当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信.分层由高到低分别为:应用层.传输层.网络层.数据链路层.发送端从应用层往下走,接收端从数据链路层网上走.如图所示: 1. 在浏览器中输入url 用户输入url,例如http://www.baidu.com.其中http为

从用户浏览器输入url到用户看到页面结果的过程,发生了什么事情?

题外话:最近经历面试,被问到至少三次这个问题,想起来总结一下.其实这个问题可以换个问法:请描述一下一次完整的http请求过程. 1.域名解析 域名解析的过程:  1).查询浏览器自身DNS缓存 2).若上面没有查找到,则搜索操作系统自身的dns缓存 3).若上面没有找到,则尝试读取hosts文件 4).若上面没有找到,向本地配置的首选DNS服务器发送请求 5).win系统 如果上面没有找到,操作系统查找NetBIOS name cache 6).win系统 如果上面没有找到,查询wins服务器

500px-An_example_of_theoretical_DNS_recursion_svg在浏览器地址栏输入地址,到浏览器显示页面的过程

作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事- 1. 首先嘛,你得在浏览器里输入要网址: 2. 浏览器查找域名的IP地址 导航的第一步是通过访问的域名找出其IP地址.DNS查找过程如下: 域名解析服务器,靠它把你要访问的网址找到然后把信息送到你电脑上.DNS 是域名系统 (Domain Name Syst

在浏览器中输入URL并回车后都发生了什么?

1.解析URL ________________________________________________________________________ 关于URL: URL(Universal Resource Locator):统一资源定位符.俗称网页地址或者网址. URL用来表示某个资源的地址.(通过俗称就能看出来) URL主要由以下几个部分组成: a.传输协议 b.服务器 c.域名 d.端口 e.虚拟目录 f.文件名 g.锚 h.参数 也就是说,通常一个URL是像下面这样 连起来

浏览器输入网址到浏览器渲染页面的过程

1) 在客户端浏览器中输入网址URL. 2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址. 3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接. 4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求. 5) WEB服务器响应请求,返回指定的URL数据或错误信息:如果设定重定向,则重定向到新的URL地址. 6) 客户端浏览器下载数据,解析HTML源文件,解析的过程中实现对页面的排版,解析完成后,在浏览器中显示基础的页面. 7) 分析页面中