从URL输入到页面展现到底发生什么?-阿里云开发者社区

开发者社区> 知与谁同> 正文

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

简介:
+关注继续查看
本文讲的是从URL输入到页面展现到底发生什么,打开浏览器从输入网址到网面呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?这是本文要探讨的问题!

一、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地址,这样可以省去很多麻烦。

我们先来了解下什么是IP地址

IP地址是指互联网协议地址,是IP Address的缩写。IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。IP地址是一个32位的二进制数,比如127.0.0.1为本机IP;如果每个网址都是一串数字,那就不便于记忆!

域名就相当于IP地址乔装打扮的伪装者,带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。但这样有时候会带来一种风险----DNS劫持,就是使域名对应的不再是原本对应的IP,其效果就是对特定的网络不能访问或访问的是假网址,又难于被用户发觉,曾导致巴西最大银行巴西银行近1%客户受到攻击而导致账户被盗。

域名解析流程

  • 浏览器缓存:如果在之前对该url指定的主机进行过访问,浏览器会缓存该主机的IP一段时间(该时间浏览器指定),然后通过该IP地址找到对应主机;
  • 系统缓存:若浏览器中无该缓存,那么就到系统缓存中进行查询,浏览器会进行系统调用,查询缓存;
  • 路由器缓存:如果系统缓存中也没有,那么就到路由器缓存中进行查询;
  • ISP DNS 缓存:如果路由器缓存依旧未命中,那么就到ISP DNS中查询,一般的域名都能在这里查询得到;
  • 递归搜索:如果以上都没有查询到,那么就会到顶级域名服务器的根服务器中进行递归查询,只要该域名存在就肯定能找得到。

通过域名解析查找到对应的IP地址之后,通过IP地址查找到对应的服务器,浏览器将用户发起的http请求发送给服务器。下一步就到了服务器处理阶段的工作。

三、服务器处理响应请求

服务器

服务器是网络环境中的高性能计算机,它侦听网络上的其他计算机(客户机)提交的服务请求,并提供相应的服务,比如网页服务、文件下载服务、邮件服务、视频服务。而客户端主要的功能是浏览网页、看视频、听音乐等等,两者截然不同。 每台服务器上都会安装处理请求的应用——web server。常见的web server产品有apache、nginx、IIS或Lighttpd等。

web server 担任管控的角色,对于不同用户发送的请求,会结合配置文件,把不同请求委托给服务器上处理相应请求的程序进行处理(例如CGI脚本,JSP脚本,servlets,ASP脚本,服务器端JavaScript,或者一些其它的服务器端技术等),然后返回后台程序处理产生的结果作为响应。

从URL输入到页面展现到底发生什么?
服务器和客户端区别

四、网站处理阶段

网站处理,就是实际后台处理的工作。后台开发现在有很多框架,但大部分都还是按照MVC设计模式进行搭建的。

MVC是一个设计模式,将应用程序分成三个核心部件:模型(model)-- 视图(view)--控制器(controller),它们各自处理自己的任务,实现输入、处理和输出的分离。

1、视图(view)

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

2、模型(model)

模型表示企业数据和业务规则。在MVC的三个部件中,模型拥有最多的处理任务。一个模型能为多个视图提供数据。

3、控制器(controller)

从URL输入到页面展现到底发生什么?
MVC.png

控制器接受用户的输入并调用模型和视图去完成用户的需求。控制器属于管理者角色,从视图接收请求并决定调用哪个模型构件去处理请求,然后再确定用哪个视图来显示模型处理返回的数据。

总结而言,首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回HTML字符串给浏览器,浏览器呈现网页给用户。因此,下一步就来到浏览器处理阶段。

五、浏览器的处理

浏览器拿到响应文本HTML后,以chrome浏览器为例,介绍下浏览器渲染机制

chrome浏览器渲染机制

  • 处理 HTML 标记并构建 DOM 树。
  • 处理 CSS 标记并构建 CSSOM 树。
  • 将 DOM 与 CSSOM 合并成一个渲染树(render 树)。
  • 根据渲染树来布局,以计算每个节点(也就是每个Element)的几何位置,这又叫layout和reflow过程。
  • 最后通过调用操作系统Native GUI的API绘制,将各个节点绘制到屏幕上。
  • 于是就来到了绘制网页的最后阶段。

六、绘制网页

浏览器根据html和css计算得到渲染树之后,将渲染好的页面图像显示出来,即绘制网页,并开始响应用户的操作。。


本文作者:浪里行舟

来源:51CTO

原文标题:从URL输入到页面展现到底发生什么?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9496 0
C++中利用输入输入流进行一行输入
我们在使用istream类的对象cin进行一行输入的时候 往往遇到N多问题  比如我这样做 char  buf [100]  ; cin>>buf ; cout
625 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10843 0
在浏览器地址栏输入URL,按下回车后究竟发生了什么?
1.DNS 在浏览器中输入URL后,首先要进行DNS解析,DNS解析的顺序为: 浏览器缓存 本地hosts文件 系统缓存 路由器缓存 DNS服务器迭代查询 2.发送请求 通过DNS得到目标的IP地址后,通过TCP协议向服务器发送请求即三次握手。
1026 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13186 0
浏览器从输入 Url 到展示出页面都经历了哪些过程
在浏览器输入网址时,浏览器会根据历史记录、书签智能匹配补全域名或者 url 。
192 0
perl学习2--处理用户输入
#!/usr/bin/perl -w$madonna=;if (defined($madonna)) {  print "The input was $madonna";} else {  print "No input available!\n";}
544 0
+关注
10077
文章
2994
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载