资讯专栏INFORMATION COLUMN

Web 前置知识——老生常谈的从 URL 输入到页面展现背后发生的事

Joonas / 1679人阅读

摘要:学前端后,谷歌算是重新为我打开了认识新世界的大门。作用可以让人们免于记住那些繁琐的数串全国信息可以在网上查找到,各省都有对应分配的网段大型企业都有自己的服务器,专门用来存储域名和的映射关系如谷歌的服务器地址国内知名服务器地址。

本知识学习用时:1小时


前言:学前端前,我常用的浏览器是搜狗、360,搜索引擎用的是百度。学前端后,谷歌算是重新为我打开了认识新世界的大门。但不管用什么浏览器,登录网站都是我们每一个互联网人每天都会做的事。但我们是否想过,从我们打开浏览器在地址栏中输入一连串的字符,到按下键盘上的 Enter 键、页面展现在我们眼前,这一连续动作的背后,网络、计算机都为我们做了些什么?以及你即将从事的前端工作又在这其中参与了哪一项或哪几项工作呢?

1 相关概念简述

首先,打开你最常浏览的一个网站,在最上方的地址栏里,你将会看到一连串的字符。例如知乎:

https://www.zhihu.com/people/oliver-8-10/activities

上边这一连串的字符,就叫做 URL(Uniform Resource Locator 统一资源定位符),实际上就是我们通常叫的“网址”。

1.1 URL 的作用

在茫茫网络世界中,我们的浏览器是靠一个个 URL 来查找资源的具体位置的。

1.2 URL 的组成部分(用以下例子说明)
https://www.zhihu.com/people/oliver-8-10/activities

1.2.1 协议部分
https

它是浏览器和 www 万维网之间的沟通方式,它会告诉浏览器在网络世界中找到资源的正确位置。
常见的协议有:http(最常见的网络传输协议)、https(进行加密的网络传输协议)、file(本地文件夹协议)、ftp、telnet 等。

1.2.2 网络地址部分
www.zhihu.com

即我们常说的“域名”(Domain Name),为了方便记忆,人们用可以语义化的域名来登录网站。
但我们必须知道,每一个域名背后都有其对应的 IP 地址。
IP 是网络世界中每台联网的计算机为实现相互通信而遵循的规则协议,IP 可以具体分为:

1️⃣局域网 IP:

例如一个合租的房子,大家共用一个路由的 wifi,那实际上所有连接上这个 wifi 的电脑都处于同样一个局域网,这里的 IP 就是局域网 IP;

在同样的局域网里,可以直接通过这个 IP 地址访问这个局域网里的其他机器;

但陌生人是不可以通过这个 IP 找到你的,因为这个 IP 是假的,只在这个小圈子里可以用。

2️⃣公网 IP:

假如你做了一个网站要放在公网上,就要申请公网 IP,公网 IP 是需要申请的。

3️⃣本机 IP:

当前电脑的 IP 是 127.0.0.1 ,就是代表自己。

1.2.3 资源路径部分
/people/oliver-8-10/activities

1.3 DNS

提到域名和 IP 关系后,就必须理解 DNS(Domain Name System 域名系统)——用来记录域名和 IP 地址相互映射的信息。

DNS 作用:可以让人们免于记住那些繁琐的数串;

全国 DNS 信息可以在网上查找到,各省都有对应分配的 IP 网段;

大型企业都有自己的 DNS 服务器,专门用来存储域名和 IP 的映射关系;

如谷歌的 DNS 服务器地址 8.8.8.8 ;国内知名 DNS 服务器地址 114.114.114.114 。

2 大致流程概述

从 URL 输入到页面展现经过以下过程:

在浏览器输入 URL;

浏览器查找域名对应的 IP 地址;

浏览器根据 IP 地址与服务器建立联系;

浏览器与服务器通信:浏览器请求,服务器处理请求并呈现页面。

3 具体流程概述

3.1 第一步,在浏览器输入 URL

在地址栏输入相应的 URL 。

3.2 第二步,浏览器查找域名对应的 IP 地址

第一步中,我们已经输入了相应的 URL,但浏览器本身并不能识别 URL 是什么,因此从我们输入 URL 开始,浏览器就要进行域名解析来找到对应 IP——DNS 解析是浏览器的实际寻址方式:

查找浏览器缓存——近期浏览过的网站,浏览器会缓存 DNS 记录一段时间 (如果没有则往下) ;

查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息,查找是否有目标域名和对应的 IP 地址 (如果没有则往下);

查找路由器缓存 (如果没有则往下);

查找 ISP DNS 缓存——从网络服务商(比如电信)的 DNS 缓存信息中查找(如果没有则往下);

经由以上方式都没找到对应 IP 的话,就会向根域名服务器查找目标 URL 对应的 IP,根域名服务器会向下级服务器转达请求,层层下发,直到找到对应的 IP 为止。

3.3 第三步,浏览器根据 IP 地址与服务器建立联系

第2步中,浏览器通过 IP 寻址找到了对应的服务器,浏览器就将用户发起的 http 请求发送给服务器。服务器开始处理用户请求:

每台服务器上都会安装处理请求的应用——web sever;

常见的 web sever 产品有:apache 、nginx 、IIS 和 Lighttpd 等;

web sever 可以理解为一个管理者,它不做具体的请求处理,而是会结合配置文件,把不同用户发来的请求委托给服务器上专门处理相应请求的程序(服务器上的相应程序开始处理请求的这一部分,通俗说就是实际后台处理的工作):

后台开发现在有很多框架,但大部分都是按照 MVC(model view controller)设计模式搭建的,它将服务器上的应用程序分成3个核心部件且分别处理自己的任务,实现输入、处理、输出的分离:

3.3.1 模型(model)

模型,是将实际开发过程中的业务规则和所涉及的数据格式进行模型化;

应用于模型的代码只需写一次就可以被多个视图重用;

在 MVC 三个部件中,模型拥有最多的处理任务;

一个模型能为多个视图提供数据。

3.3.2 视图(view)

视图是用户看到并与之交互的界面;

这一部分,也就是我们前端工作的主力所在。

3.3.3 控制器(controller)

作用:接受用户的输入并调用模型(M)和视图(V)去完成用户的需求;

地位:控制器也是处于一个管理者的地位——从视图(V)接收请求并决定调用哪一个模型构件(M)来处理请求,然后再确定用哪个视图(V)来显示模型(M)处理返回的数据。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54855.html

相关文章

  • Web 前置知识——老生常谈的从 URL 输入页面展现背后发生的事

    摘要:学前端后,谷歌算是重新为我打开了认识新世界的大门。作用可以让人们免于记住那些繁琐的数串全国信息可以在网上查找到,各省都有对应分配的网段大型企业都有自己的服务器,专门用来存储域名和的映射关系如谷歌的服务器地址国内知名服务器地址。 本知识学习用时:1小时showImg(https://cdn.nlark.com/yuque/0/2019/png/229413/1554687733759-9...

    GitChat 评论0 收藏0
  • Web 前置知识——老生常谈的从 URL 输入页面展现背后发生的事

    摘要:学前端后,谷歌算是重新为我打开了认识新世界的大门。作用可以让人们免于记住那些繁琐的数串全国信息可以在网上查找到,各省都有对应分配的网段大型企业都有自己的服务器,专门用来存储域名和的映射关系如谷歌的服务器地址国内知名服务器地址。 本知识学习用时:1小时showImg(https://cdn.nlark.com/yuque/0/2019/png/229413/1554687733759-9...

    Aomine 评论0 收藏0
  • 彻底理解从输入URL页面展现

    摘要:五浏览器绘制网页绘制过程主要是结构与样式的结合,以及行为动态效果的展现。之后会写系列文章,欢迎围观主要参考文章基础进阶详解与编码前端面试题从到页面展现,这之中发生了什么图解 流程概述: 地址栏输入URL ——> 域名解析 ——> 服务器处理请求 ——> 浏览器处理响应 ——> 浏览器绘制网页 一.地址栏输入URL 认识URL showImg(https://segmentfault....

    abson 评论0 收藏0
  • 前端面试题:从url页面展现,这之中发生了什么?

    摘要:比如对于的,浏览器实际上不知道到底是什么东西,需要查找网站所在服务器的地址,才能找到目标,这就是下文要说的域名解析。二域名解析当用户在浏览器中输入后你使用的电脑会发出一个请求到本地服务器。 showImg(https://segmentfault.com/img/remote/1460000009317499?w=700&h=466); 这里markdown格式跟简书不太一样,排版可能...

    wdzgege 评论0 收藏0
  • URL输入页面展现发生什么?

    摘要:定义文档资源的名称二域名解析在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过地址。什么是域名解析协议提供通过域名查找地址,或逆向从地址反查域名的服务。 前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解!本文首发地址为GitHub博客,写文章不易,请多多支...

    elva 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<