cordova 某个页面强制横屏_小白科普:从输入网址到最后浏览器呈现页面内容,中间发生了什么?...

60732084cd5a7688612a96b8300584b8.png

老刘

1前言
这篇文章是应网友之邀所写,主要描述一下我们访问网站时, 从输入网址到最后浏览器呈现内容,中间发生了什么。
今天的文章主要专注于应用层,我拿了一个很简单的网络结构来讲。假定本机已经获取了IP地址,各种网络基础设施已经准备好了。由于知识点太多,我肯定会漏掉部分内容,欢迎在留言中补充, 以后我会根据大家建议再写文章扩展。2准备
当你在浏览器中输入网址(例如http://www.coder.com)并且敲了回车以后, 浏览器首先要做的事情就是获得http://coder.com的IP地址,具体的做法就是发送一个UDP的包给DNS服务器,DNS服务器会返回http://coder.com的IP, 这时候浏览器通常会把IP地址给缓存起来,这样下次访问就会加快。
比如Chrome, 你可以通过chrome://net-internals/#dns来查看。
有了服务器的IP, 浏览器就要可以发起HTTP请求了,但是HTTP Request/Response必须在TCP这个“虚拟的连接”上来发送和接收。
想要建立“虚拟的”TCP连接,TCP邮差需要知道4个东西:(本机IP, 本机端口,服务器IP, 服务器端口),现在只知道了本机IP,服务器IP, 两个端口怎么办?
本机端口很简单,操作系统可以给浏览器随机分配一个, 服务器端口更简单,用的是一个“众所周知”的端口,HTTP服务就是80, 我们直接告诉TCP邮差就行。
经过三次握手以后,客户端和服务器端的TCP连接就建立起来了! 终于可以发送HTTP请求了。

afef387316a44062e7778ad675cdf200.png


之所以把TCP连接画成虚线,是因为这个连接是虚拟的3Web服务器
一个HTTP GET请求经过千山万水,历经多个路由器的转发,终于到达服务器端(HTTP数据包可能被下层进行分片传输,略去不表)。
Web服务器需要着手处理了,它有三种方式来处理:
(1) 可以用一个线程来处理所有请求,同一时刻只能处理一个,这种结构易于实现,但是这样会造成严重的性能问题。
(2) 可以为每个请求分配一个进程/线程,但是当连接太多的时候,服务器端的进程/线程会耗费大量内存资源,进程/线程的切换也会让CPU不堪重负。
(3) 复用I/O的方式,很多Web服务器都采用了复用结构,例如通过epoll的方式监视所有的连接,当连接的状态发生变化(如有数据可读), 才用一个进程/线程对那个连接进行处理,处理完以后继续监视,等待下次状态变化。 用这种方式可以用少量的进程/线程应对成千上万的连接请求。
我们使用Nginx这个非常流行的Web服务器来继续下面的故事。
对于HTTP GET请求,Nginx利用epoll的方式给读取了出来, Nginx接下来要判断,这是个静态的请求还是个动态的请求啊?
如果是静态的请求(HTML文件,JavaScript文件,CSS文件,图片等),也许自己就能搞定了(当然依赖于Nginx配置,可能转发到别的缓存服务器去),读取本机硬盘上的相关文件,直接返回。
如果是动态的请求,需要后端服务器(如Tomcat)处理以后才能返回,那就需要向Tomcat转发,如果后端的Tomcat还不止一个,那就需要按照某种策略选取一个。
例如Ngnix支持这么几种:

  • 轮询:按照次序挨个向后端服务器转发
  • 权重:给每个后端服务器指定一个权重,相当于向后端服务器转发的几率。
  • ip_hash: 根据ip做一个hash操作,然后找个服务器转发,这样的话同一个客户端ip总是会转发到同一个后端服务器。
  • fair:根据后端服务器的响应时间来分配请求,响应时间段的优先分配。

27a45518d8c0bb341b9f978861206d98.png

becf1129789085984e47dbd4f68f09dc.png


不管用哪种算法,某个后端服务器最终被选中,然后Nginx需要把HTTP Request转发给后端的Tomcat,并且把Tomcat输出的HttpResponse再转发给浏览器。
由此可见,Nginx在这种场景下,是一个代理人的角色。

27a45518d8c0bb341b9f978861206d98.png

64e1497a8795134e92048db453b3bda4.png

4应用服务器
Http Request终于来到了Tomcat,这是一个由Java写的、可以处理Servlet/JSP的容器,我们的代码就运行在这个容器之中。
如同Web服务器一样, Tomcat也可能为每个请求分配一个线程去处理,即通常所说的BIO模式(Blocking I/O 模式)。
也可能使用I/O多路复用技术,仅仅使用若干线程来处理所有请求,即NIO模式。
不管用哪种方式,Http Request 都会被交给某个Servlet处理,这个Servlet又会把Http Request做转换,变成框架所使用的参数格式,然后分发给某个Controller(如果你是在用Spring)或者Action(如果你是在Struts)。
剩下的故事就比较简单了(不,对码农来说,其实是最复杂的部分),就是执行码农经常写的增删改查逻辑,在这个过程中很有可能和缓存、数据库等后端组件打交道,最终返回HTTP Response,由于细节依赖业务逻辑,略去不表。
根据我们的例子,这个HTTP Response应该是一个HTML页面。5归途
Tomcat很高兴地把Http Response发给了Ngnix 。
Ngnix也很高兴地把Http Response 发给了浏览器。

7ae0bf516beb08f8ed978816f4e52503.png


发完以后TCP连接能关闭吗?
如果使用的是HTTP1.1, 这个连接默认是keep-alive,也就是说不能关闭;
如果是HTTP1.0,要看看之前的HTTP Request Header中有没有Connetion:keep-alive,如果有,那也不能关闭。6浏览器再次工作
浏览器收到了Http Response,从其中读取了HTML页面,开始准备显示这个页面。
但是这个HTML页面中可能引用了大量其他资源,例如js文件,CSS文件,图片等,这些资源也位于服务器端,并且可能位于另外一个域名下面,例如http://static.coder.com。
浏览器没有办法,只好一个个地下载,从使用DNS获取IP开始,之前做过的事情还要再来一遍。不同之处在于不会再有应用服务器如Tomcat的介入了。
如果需要下载的外部资源太多,浏览器会创建多个TCP连接,并行地去下载。
但是同一时间对同一域名下的请求数量也不能太多,要不然服务器访问量太大,受不了。所以浏览器要限制一下, 例如Chrome在Http1.1下只能并行地下载6个资源。

5230c5c83479f4e228f82a0ac6ffd95d.png


当服务器给浏览器发送JS,CSS这些文件时,会告诉浏览器这些文件什么时候过期(使用Cache-Control或者Expire),浏览器可以把文件缓存到本地,当第二次请求同样的文件时,如果不过期,直接从本地取就可以了。
如果过期了,浏览器就可以询问服务器端,文件有没有修改过?(依据是上一次服务器发送的Last-Modified和ETag),如果没有修改过(304 Not Modified),还可以使用缓存。否则的话服务器就会被最新的文件发回到浏览器。
当然如果你按了Ctrl+F5,会强制地发出GET请求,完全无视缓存。
注:在Chrome下,可以通过 chrome://view-http-cache/ 命令来查看缓存。
现在浏览器得到了三个重要的东西:
1.HTML ,浏览器把它变成DOM Tree
2. CSS, 浏览器把它变成CSS Rule Tree
3. JavaScript, 它可以修改DOM Tree
浏览器会通过DOM Tree和CSS Rule Tree生成所谓“Render Tree”,计算每个元素的位置/大小,进行布局,然后调用操作系统的API进行绘制,这是一个非常复杂的过程,略去不表。
到目前为止,我们终于在浏览器中看到了http://www.coder.com的内容。
本文转自公众号:码农翻身

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue调用手机相机相册_今天才发现,点一下小米手机相册,能将照片一键制作成电影...

随着国产手机的发展,手机像素越来越高,里面的功能也越来越丰富,手机拍照成了不少人的日常,如果你很爱拍照,手机里有一大堆照片,那么教你用手机自带的相册功能,一键将照片制作成电影,…

unity 烘焙参数 设置_Unity通用渲染管线(URP)系列(九)——点光源和聚光灯

200篇教程总入口,欢迎收藏:放牛的星星:[教程汇总持续更新]Unity从入门到入坟——收藏这一篇就够了​zhuanlan.zhihu.com本文重点内容:1、支持更多类型的灯光2、包含实时的点光源和聚光灯3、为点光源和聚光灯烘焙阴影4、每个物体限…

c#日期转换周几_Java时间与日期

只有把眼前的事情做好,才能考虑其他的问题。众所周知,全世界在同一时刻看手表肯定不会看到同一个时间,因为地球是圆的,面对太阳的角度是不一样的,我们一般说时间几点几点,是指的本地时间,比如国…

Python开发之--前端 HTML基础

一:HTML介绍 HTML:超文本标记语言,标准通用标记语言下的一个应用。包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息&…

给与用户建立dblink的权限_网络安全 之 NTFS安全权限

NTFS安全权限一、NTFS权限概述1、通过设置NTFS权限,实现不同的用户访问不同的权限2、分配了正确的访问权限后,用户才能访问其资源3、设置权限防止资源被篡改、删除二、文件系统概述 文件系统即在外部存储设备上组织文件的方法常用的文件系统:…

TCP 连接中的TIME_WAIT

原文:http://blog.csdn.net/wangpengqi/article/details/17245349 这就有个细节,一次http请求,谁会先断开TCP连接?什么情况下客户端先断,什么情况下服务端先断? 百度后,找到原因,主要…

丁丁打折网卷能用吗_微信群控还能用吗?现在什么群控还能使用吗?

微信群控系统还能用吗?为什么现在微信群控系统越来越被限制了呢?其实,微信群控我想在生活中占据着很大的位置!因为微信这么多的使用,现在微信使用人数都是几十亿了,所以很多人看重微信群控系统的市场&#…

错题整理

1.JAVA语言的下面几种数组复制方法中,哪个效率最高? A for循环逐一复制 B System.arraycopy C System.copyof D 使用clone方法 答案:B A、for循环的话,很灵活,但是代码不够简洁. for循环为什么慢,java中所…

xpath中两个冒号_爬虫学习(5)—XPath

之前我们写了一个简单的爬虫,在提取页面信息时我们使用正则表达式来匹配内容,但是正则表达式的书写比较繁琐,而且一旦错误就可能导致匹配失败。对于网页的节点来说,它可以定义id,class或其他的属性,而且节点…

canny算法的实现(android加载图片,数组写入文件换行)

Canny边缘检测首先要对图像进行高斯去噪,前面讲到了高斯去噪处理,这里从对图像灰度进行微分运算讲起吧。微分运算常用的方法是利用模板算子,把模板中心对应到图像的每一个像素位置,然后按照模板对应的公式对中心像素和它周围的像素…

【VirtualBox】VirtualBox的桥接网络模式,为啥网络不稳定?

网桥模式访问外网非常慢,经常卡死,ping时断时续 七搞八搞,反复重启了几次 TMD 就好了,也不知道什么情况,VirtualBox还是不太好使啊。。。。。 网桥模式 设置 如下: 参考资料: http://blog.csdn…

白盒基本路径发测试实验报告_软件生命周期、白盒测试、黑盒测试

继上一讲:隅巳毕月:达摩克里斯之——排序与查找技术​zhuanlan.zhihu.com我们今天来讲一下软件周期与两种软件测试方法软件开发应遵循一个软件的生命周期,通常把软件产品从提出、实现、使用、维护到停止使用、退役的过程称为软件生命周期。软…

Windows7睡眠后自动唤醒

笔者的电脑(Windows7 64位旗舰版)睡眠后,隔段时间后会自动唤醒。经两项配置后,解决了该问题。 1 禁用唤醒定时器 控制面板里进入"电源选项""更改计划设置"界面,如下图所示 单击上图的"更改高…

bootstrap 两个轮播图冲突_为什么使用bootstrap在一个页面同时做两个轮播效果时,只有第一个有效??...

我们都知道使用bootstrap做轮播效果非常快,但是有时候一个页面会需要两个轮播;但这个时候再次使用bootstrap做轮播效果时就会失效;原因在于bootstrap的Carousel问题,只要修改一下id,就好了~~这是第一个轮播&#xff1a…

Ajax的用法

1 Ajax是什么 1.1 Asynchronous JavaScript and XML(异步的javascript和xml) 实质为:使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求,服务器返回xml数据或文本数据给浏览器,然后在浏…

Node.js server使用

一、创建项目 #创建项目目录 cd /data mkdir webroot cd webroot#初始化git git init vim .gitignore 输入: node_modules/ 保存: :wq#初始化npm,生成package.json npm init#安装express npm install -D express#创建入口文件 vim app.js输入: var expr…

模仿Linux内核kfifo实现的循环缓存

想实现个循环缓冲区(Circular Buffer),搜了些资料多数是基于循环队列的实现方式。使用一个变量存放缓冲区中的数据长度或者空出来一个空间来判断缓冲区是否满了。偶然间看到分析Linux内核的循环缓冲队列kfifo的实现,确实极其巧妙。…

领域模型(domain model)贫血模型(anaemic domain model)充血模型(rich domain model)

领域模型是领域内的概念类或现实世界中对象的可视化表示,又称为概念模型或分析对象模型,它专注于分析问题领域本身,发掘重要的业务领域概念,并建立业务领域概念之间的关系。 贫血模型是指使用的领域对象中只有setter和getter方法&…

datagrid显示mysql_WPF DataGrid显示MySQL查询信息,且可删除、修改、插入 (原发布 csdn 2018-10-13 20:07:28)...

1、入行好几年了,工作中使用数据库几率很小(传统行业)。借着十一假期回家机会,学习下数据库。2、初次了解数据库相关知识,如果本文有误,还望告知。3、本文主要目的,记录下wpf界面显示数据库信息,且可进行删…

mysql 集群 qps_MySQL Cluster:如何通过扩展为MySQL带来2亿QPS

本篇文章的目的在于介绍MySQL Cluster——也就是MySQL的一套内存内、实时、可扩展且具备高可用性的版本。在解决标题中所提到的每秒2亿查询处理能力问题之前,我们先对MySQL集群的背景信息及其架构进行一番回顾,这将有助于大家理解上述目标的实现过程。My…