从URL输入到页面展现发生了什么?

上网已经成为我们每个人生活中一项重要的内容了,当我们打开浏览器,在地址栏中输入相应的网址并按下了回车键,既会在页面中呈现所需的相关信息。那么,在这背后都进行了哪些技术步骤,才会将丰富的信息内容加载出来,展现在我们眼前呢。

从URL的输入到页面的展现,大概会经过以下几个过程:

  1. 在浏览器中输入url
  2. DNS域名解析
  3. 服务器处理请求
  4. 网站处理流程
  5. 浏览器显示页面信息

一、在浏览器输入URL

首先,我们来了解下URL的一些知识。

URL(Uniform Resource Locator,统一资源定位符)

由一串简单的文本字符组成,他的作用是用于定位互联网上资源的地址。URL通常由以下几部分组成:传输协议、域名、端口、文件路径。

以我的简书主页为例,“https://www.jianshu.com/u/dc6b5792c956”这一串字符即为URL。

  • 协议部分

通过特定的传输协议,获得指定文档的内容。

该URL的协议部分为“ https: ”,这代表网页使用的是https协议。在Internet中可以使用多种协议。常见的协议有:” http:// ” (超文本传输协议,信息是明文传输)、“ https:// ”(进行加密的网络传输协议)、" file:// "(本地文件传输协议,file协议主要用于访问本地计算机中的文件)、" ftp:// "(文件传输协议)," mailto: "(资源为电子邮件地址,通过SMTP访问)。还有一种URL前面没有加指定协议,它是指获取该资源需要使用的协议与当前的URL是保持一致的。

  • 域名部分

用来确定服务器在互联网上的位置,域名的目的是便于记忆和沟通的一组服务器的地址,是唯一不可重复的。

该URL的域名部分为jianshu.com

  • 端口部分

跟在域名后面的为端口编号,域名和端口之间使用“ :”分隔开。默认端口一般在URL中不展现。当Web服务器采用的不是默认端口时,就需要写明服务所用的端口。端口号的作用,主要是区分服务类别和在同一时间进行多个会话。

常用的应用协议和对应的端口号如下:

应用协议 端口号
http 80
ftp 21
https 443
smtp 25
tftp 69
telnet 23
  • 文件路径

一般用来表示主机上的一个目录或文件地址(即存储的位置),由零或多个“ / ”符号隔开,划分为多个层次进行描述。

该URL的文件路径为/u/dc6b5792c956

二、DNS域名解析

当你在浏览器中输入URL后,你使用的电脑会发出一个DNS请求(将域名转化为IP地址的请求)。对于浏览器,实际上并不知道“https://www.jianshu.com/u/dc6b5792c956”到底是什么东西,需要确认其中域名所在服务器的IP地址才能找到目标网站(浏览器需要对IP地址进行识别,才能够进一步传递网址和信息内容)。那么,将域名解析成对应的服务器IP地址这项工作,就是由DNS服务器来完成。

DNS(Domain Name System,域名系统)

主要进行将主机名和域名转换为IP地址的工作。把便于用户记忆的特定域名转换成为能够被机器直接读取的IP数串。

IP地址(Internet Protocol Address,互联网协议地址)

IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址。在互联网中的每一台主机都有IP地址,IP协议就是使用这个地址在主机之间传递信息,形如 192.168.0.1 。如果没有IP地址,就无法找到相应的主机进行信息交换,这个设备也就无法连接到互联网。

相关问题:

为什么要用域名,不直接使用IP地址?

  • IP地址不容易记住,特定的域名,更加方便与用户记忆或辨识。
  • IP地址与域名并不是一对一的映射关系,一个域名后面可以对应多台设备的IP地址,一个IP地址也可以绑定多个域名。如果直接使用IP地址的话,可能无法准确的定位你想要访问的网站。

局域网IP与公网IP之间的区别

  • 内网也就是局域网,内网的计算机以NAT(网络地址转换)协议,通过一个公共的网关访问Internet。内网的计算机可向Internet上的其他计算机发送连接请求,但Internet上其他的计算机无法向内网的计算机发送连接请求。
  • 公网IP是处于整个互联网可访问的一个状态当中,公网IP都是需要购买的。

在同样的局域网下,如果知道对方的IP就可以进行访问,公网IP是处于整个互联网可访问的状态中。

域名解析的流程:

  1. 查找浏览器缓存——我们日常浏览网站时,浏览器会缓存DNS记录一段时间。如果以前我们访问过该网站,那么在浏览器中就会有相应的缓存记录。因此,我们输入网址后,浏览器会首先检查缓存中是否有该域名对应的IP信息。如果有,则直接返回该信息供用户访问网站,如果查询失败,会从系统缓存中进行查找。
  2. 查找系统缓存——从hosts文件中查找是否有存储的DNS信息(MAC端,可在“终端”中输入命令cat etc/hosts找到hosts文件位置),如果查询失败,可从路由器缓存中继续查找。
  3. 查找路由器缓存——如果之前访问过相应的网站,一般路由器也会缓存信息。如果查询失败,可继续从 ISP DNS 缓存查找。
  4. 查找ISP DNS缓存——从网络服务商(例如电信)的DNS缓存信息中查找。
  5. 如果经由以上方式都没找到对应IP的话,则像根域名服务器查找域名对应的IP地址,根域名服务器把请求转发到下一级,逐层查找该域名的对应数据,知道获得最终解析结果或失败的相应。
  • 根域名服务器,根服务器主要用来管理互联网的主目录。是互联网域名解析系统(DNS)中最高级别的域名服务器。
相关问题:
  • 什么是DNS劫持?

DNS劫持(Domain Name System,域名劫持),是指在劫持的网络范围内拦截域名解析的请求,分析请求的域名,把审查范围以外的请求放行,返回假的IP地址或者什么都不做使请求失去响应,其效果就是对特定的网络不能访问或访问的是假网址。简单来说,就是你输入的是知乎的网址,但是却跳转到了百度的页面。

  • 为什么修改DNS为114.114.114.114或8.8.8.8可以解决电脑上不了网的问题?

当你使用手机端可以正常打开网站,但是在电脑端访问网站失败的话,那么可能是DNS配置出现了问题,或者是在路由器缓存中解析查找错误,无法找到对应的IP地址。那么这时我们可以在电脑端更改DNS进行单独配置即可正常访问(MAC端,打开“网络偏好设置”——“高级”——“DNS”进行修改)。8.8.8.8是谷歌提供的免费DNS服务器的IP地址,114.114.114.114是电信的。

三、服务器处理请求

浏览器通过IP地址找到对应的服务器,要求建立TCP链接,此时服务器开始处理用户请求。

服务器是什么?

服务器是一台安装系统的机器。常见的系统有Linux、Windows Server2012等。系统里安装的处理请求的应用叫Web server

服务器如何处理请求?

由服务器上安装的处理请求的应用(Web Server)来处理。
常见的Web服务器有:Apache、Nginx、IIS、Lighttpd。
Web服务器接收用户的Requset交给网站代码或反向代理到其他服务器。

TCP是什么?

TCP是互联网中的传输层协议,提供可靠的链接服务,采用三次握手确认一个连接:

  1. 浏览器向服务器发送建立连接的请求。
  2. 服务器接收到浏览器发送的请求后,想浏览器发送统一连接的信号。
  3. 浏览器接受到服务器发出的同意连接的信号后,再次向服务器发出确认连接的信号。

当三次握手返程,TCP客户端和服务端成功的建立连接,就可以开始传输数据了。

四、网站处理流程

用户输入网址后向服务器发送内容请求,服务器接收到请求后触发Controller(控制器),控制器从Model(模型)和视图(View)中获取各种数据信息进行处理,最后视图(View)将数据渲染为HTML使得页面完整的呈献给用户。

MVC是什么

MVC是一种设计模式,全名是Model View Controller,是模型(Model)- 视图(View)- 控制器(Controller)的缩写。

  • Model(模型)
    是应用程序中用于处理应用程序数据逻辑的部分。
    通常模型对象负责在数据苦衷存取数据。

  • View(视图)
    是应用程序中处理数据显示的部分。
    通常视图是一句模型数据创建的。
    而这一部分也是我们前端工作中很重要的一项内容。

  • Controller(控制器)
    是应用程序中处理用户交互的部分。
    通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

五、浏览器显示页面信息

  • HTML字符串被浏览器接收后被一句句读取解析。
  • 解析到link标签后重新发送请求获取CSS。
  • 解析到script标签后发送请求获取JS,并执行代码。
  • 解析到img标签后发送请求获取图片资源。
  • 浏览器根据HTML和CSS计算得到渲染书,绘制到屏幕上。
  • JS会被执行,页面展现。

以上就是我与大家分享的,从URL输入到页面展现其中过程的学习记录,对于理解不到位或者错误的地方烦请大家指正,感谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259