您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

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

时间:2019-08-12 13:07:54  来源:  作者:

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

第一步、输入URL

URL是什么

统一资源定位符(Uniform Resource Locator,缩写为URL),又叫做网页地址,是互联网上标准的资源的地址(Address)。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址的。现在它已经被万维网联盟编制为因特网标准RFC1738了。统一资源定位符的开始,一般会标志着一个计算机网络所使用的网络协议。

URL的几个部分

百度完整的URL地址:https://www.baidu.com/link?url=sofXEgyeLzeisB_YfK4BQmywO9kRUuUrCNxYWtf0fI-8sQ1ZtanCPsip2xchhicn&wd=&eqid=e87ea4c90011764d000000065d4fc73f

协议部分

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

域名部分

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

域名一般也分三个级别域名

一级域名(顶级域名):比如.com .cn 二级域名:http://baidu.com http://qq.com 三级域名:http://www.baidu.comhttp://www.qq.com 例子中http://www.baidu.com是二级域名 .com 供商用的国际域名 .cn 供商用的中文域名 .net 用于网络供应服务商(系统类的经常使用net域名) .org 用于官方组织 .edu 用于教育院校 .gov 用于政府机构 .io 是(British Indian Ocean Territory)英属印度洋领地的简写 ...

端口号

用来区分同一台服务器上不同服务的标识(基于web服务管理创建服务的时候可以指定),不同服务之间一般是不能使用相同的端口号的。 HTTP => 默认端口号80 HTTPS => 默认端口号443 FTP => 默认端口号21 如果当前网络服务,采用的是协议对应的默认端口管理,那么当用户输入网址的时候可以不指定端口号,浏览器会默认帮用户把默认的端口传递给服务器。(开发者在服务器上发布服务的时候需要指定端口) 一台服务器上的端口号范围:0~65535之间 webstorm预览页面:http://localhost:63342/QQMusicWebApp.html/ webstorm预览页面:webstorm把自己的电脑当做服务器,在服务器上创建一个服务,端口号是63342,自己电脑上的浏览器预览自己电脑上的服务,属于本机服务请求,用localhost(127.0.0.1)本地域名即可。 服务器上安装一款应用都可能会作为一个服务,占用一个端口号。

问号传参及哈希值

?xx=xxx这是问号传参,在HTTP事务中,问号传参是客户端把信息传递给服务器的一种方式(也有可能是跳转到某一个页面,把参数值传递给页面用来标识的)。 #xxx这是哈希值,哈希值一般都是跟用户端服务器交互没啥关系,主要用于页面中的锚点定位和HASH路由切换。

第二步、域名解析

DNS是什么

域名系统(Domain Name System缩写DNS,Domain Name被译为域名)是因特网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。DNS系统是为解析域名为 IP 地址而存在的。

IP

IP 网络协议(英语:Internet Protocol)。

IP分为内网和外网。

内网(也称局域网),是几台或者几十台电脑之间互相连接用于资源共享的网络,家庭、单位所使用的网络一般都是内网。内网中的设备使用内网 IP,一般来说这个 IP 的格式都是 http://192.168.xxx.xxx。

外网(也称广域网),在单位、家庭之外有覆盖范围极大的网络,比如internet,这个大网络延伸到了我们的单位、家庭(通过光纤、网线、电话线等)。我们把自己的局域网连接到internet上,那么我们的访问范围就从局域网扩展到了整个internet。这时候,就说局域网是内网,internet是外网。

内网和外网就像两个隔绝的空间,无法互通,唯一的联通点就是路由器(因为路由器既有外网 IP 也有内网 IP),所以路由器有时候也被叫做网关。

每个处于互联网的机器都有IP地址,比如192.168.0.1,127.0.0.1代表着本机的IP地址。

域名解析的流程

  1. 浏览器缓冲—浏览器会缓存DNS记录一段时间系统缓存—从Hosts文件查找是否有该域名和对应IP路由器缓冲—一般路由器也会缓存域名信息ISP DNS缓存—比如到电信的DNS上查找缓存如果都没有找到,则向根域名服务器查找域名对应IP,根域名服务器把请求转发到下一级,直到找到IP

第三步、服务器处理

服务器是一台安装系统的机器,系统里安装的处理请求的应用叫Web server

常见的web服务器有ApacheNginx、IIS、Lighttpd

web服务器接收用户的Request交给网站代码,或者接收请求方向代理到其他web服务器

第四步、网站处理流程

MVC模型(model)—视图(view)—控制器(controller)

从输入URL到页面展示

 

第五步、浏览器处理

  1. HTML字符串被浏览器接受后被一句句读取解析解析到link标签后重新发送请求获取css解析到script标签后发送请求获取JS,并执行代码解析到img标签后发送请求获取图片资源

第六步、绘制网页

浏览器根据HTML和CSS计算得到渲染树,绘制到屏幕上,JS会被执行。



Tags:URL   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
URL是什么URL代表着是统一资源定位符(UniformResourceLocator)。作用是为了告诉使用者 某个资源在 Web 上的地址。这个资源可以是一个 HTML 页面,一个 CSS 文档,一幅图像或一...【详细内容】
2021-10-15  Tags: URL  点击:(49)  评论:(0)  加入收藏
一、概述服务端未对传入的跳转url变量进行检查和控制,可导致恶意用户构造一个恶意地址,诱导用户跳转到恶意网站。跳转漏洞一般用于钓鱼攻击,通过跳转到恶意网站欺骗用户输入用...【详细内容】
2021-06-24  Tags: URL  点击:(132)  评论:(0)  加入收藏
引言浏览网页时,我们需要知道“网址”才能访问,这里说的“网址”通常就是指URL,比如:https://www.xydida.com/index.html,而平时也会说URI、URN,那又是什么呢?今天就来捋一捋。URLU...【详细内容】
2021-05-24  Tags: URL  点击:(135)  评论:(0)  加入收藏
characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nul...【详细内容】
2021-04-27  Tags: URL  点击:(183)  评论:(0)  加入收藏
要在不使用图形界面的情况下从互联网上获取所需的信息,curl 是一种快速有效的方法。• 来源:linux.cn • 作者:Seth Kenlon • 译者:MjSeven •(本文字数:4904,阅...【详细内容】
2021-04-01  Tags: URL  点击:(229)  评论:(0)  加入收藏
1、明确需求实战工作中经常会请求各种各样的接口,例如•微信网页授权接口 • 高德周边检索接口 •发现:下图是根据接口文档开发后的代码,发现代码可读性差(ps. 参数...【详细内容】
2020-12-30  Tags: URL  点击:(188)  评论:(0)  加入收藏
这篇文章主要来讲解下Python自带的爬虫库urllib常见用法,主要围绕urllib定义、urllib的常用模块和urllib+lxml爬虫案例三个部分进行展开。一、什么是urllib它是一个http请求...【详细内容】
2020-12-16  Tags: URL  点击:(106)  评论:(0)  加入收藏
CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到curl向其他系统api访问。使用要想使用CURL,大致需要如下流程: 初...【详细内容】
2020-11-20  Tags: URL  点击:(104)  评论:(0)  加入收藏
1.修改了某个栏目的目录地址,原本是/abc/,现在改成了/ab/,重新生成了栏目页面/ab/和文章页面/ab/*.html,但是栏目页的列表文章url还是/abc/*.html(正确的url应该是/ab/*.html),这个...【详细内容】
2020-10-26  Tags: URL  点击:(106)  评论:(0)  加入收藏
布隆过滤器(BloomFilter)类似于hash set,用来判断元素是否在集合中。但是与hash set区别是:布隆过滤器不需要存储元素值,就能判断元素是否在集合中。说一下布隆过滤器优缺点: 优点...【详细内容】
2020-09-29  Tags: URL  点击:(121)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条