浏览器输入url到整个页面显示出来经历的过程

其实普通web应用,实际上就是对http的应用,http是一种基于TCP协议的网络传输协议,工作在应用层,作为web开发者,我主要从http的角度来看待这个问题:

  • 首先,对于http肯定是有客户端和服务器的,在这个语境中,客户端和服务器本质上也都是一个软件,实现了http协议相关标准的软件。
  • 客户端一般由都是由浏览器充当,也就是说,在浏览器中实现了http客户端的相关功能。
  • 而服务器的实现就多种多样啦,我们可以用java写servlet,c#写ASP.net,还有php,ruby,Python,nodejs等。
  • 实际上我想,http服务在操作系统底层应该有实现,而这些语言只不过是利用操作系统的http服务封装成自己的接口供开发人员编写web服务器程序。

  • 而我们熟悉的IIS,Tomcat,Apache,Web logic,都是能够作为某些web服务器容器的大型服务器平台,它们都会包括很多更为强大的功能。一般来说,我们这里所说的服务器指的是自己用特定语言写的web应用服务器程序。nodejs不需要web容器,本身就有对http的直接应用模块,所以用nodejs创建一个web服务器是很方便的。

整体通信

有了客户端和服务器,就可以开始通信了,整体上分为3个步骤:

1. 因为http是构建在TCP之上,那么自然是要经过3次握手创建连接。

2. 创建连接后,服务器会根据url请求中的信息进行处理,作出响应,一般来说是找到一个html文件返回给客户端。

3. 客户端即浏览器得到html,进行渲染。

下面详细说下这3个步骤:

创建连接

这个跟网络关联多一些,我网络学的马马虎虎,只能大体说一下。

  • 对于http的客户端,它的输入就是一个url
  • 而对于创建连接,它需要的只是url的host(主机)部分
  • 主机地址一般是网站的域名,所以第一步肯定是域名解析,也就是要通过DNS服务器进行域名解析得到网站的ip地址,然后向这个ip地址发送一个连接建立的请求,如果服务器接收到请求会返回一个确认,客户端得到确认再次发送确认,连接建立成功

当然在这个过程中还会涉及到很多细节,这是网络中的知识,在这里不多讲。

服务器处理

建立好连接后,客户端就会发送http请求,请求信息包含一个头部和一个请求体

一般的web技术都会把请求进行封装然后交给我们的服务器进行处理,比如servlet会把请求封装成httpservletrequest对象,把响应封装成httpsevletresponse对象。nodejs的http模块,当你创建服务器的时候会写一个回调函数,回调的参数用来接受http请求对象和响应对象,然后在回调函数中对请求进行处理。

在请求对象中我们可以得到path(路径),queryString(查询字符串),body(post请求中提交的数据)等。

对请求的处理就可以很复杂,也可以很简单。

我们可以根据path找到客户端想要的文件,读取这个文件,然后通过响应对象把内容返回给客户端,这个过程,不同的技术提供的api可能不同,尤其是用惯了MVC框架的人,可能只是指定一个文件,或者在配置文件中设置一下就好了。

但是最终的实现肯定是符合http响应标准的,也就是要有一个响应头和一个响应体

我一般接触到的设置响应头就是设置content-type来决定MIME类型,设置Cache-Control,last-modify等缓存内容。

一般来说返回给客户端的内容是一个html字符串,然后content-type设为text/html。

当然也可能客户端请求的是一个image文件,那么就是读取image文件后,content-type可能设为image/png,image/jpg等,然后把内容返回给客户端。

这样一次对请求的处理就结束了。

当然这个过程太单一,而且处理过程也可能很复杂,又有数据的操作,又有页面的构建,又有路径的查找匹配,又有文件的读取等等,于是就出现了MVC框架以及后来演变出的各种MV框架。这里不细讲MVC的内容,因为需要很长的篇幅

只是概述一下MVC主要做了什么,在我看来最重要的就是解耦和模块化。我认为MVC实现最重要的有两点:

1.路由匹配,http请求的path中就不需要指定到具体的视图位置,而是按照我们制定的规则进行匹配,这样就有了很大的灵活性,可编程性。

2.模板技术,一般来说我们最后返回给客户端的是一个html字符串,而有时候这个字符串往往不是静态单一的,有的时候需要和数据进行结合,需要拼接。这就带来了很大的麻烦,模板技术为解决这个问题带来很大的便利性,同时又能够把视图和数据进行解耦。

客户端渲染

客户端接收到服务器传来的响应对象,从中得到html字符串和MIME,根据MIME知道了要用页面渲染引擎来处理内容即html字符串,于是进入页面渲染阶段,这又是一个很庞杂的体系。我只能大体上说一下:

从浏览器的角度讲,它包含几大组件,网络功能(比如http的实现)算是其中之一,渲染引擎也是其中之一,还有其它的一些比如自己UI界面,javascript解释器,客户端数据存储等等。在这里我们主要关注渲染引擎和javascript解释器,对于web开发者来说,这才是浏览器的核心

我们能够在浏览器中看到一个页面,那么这个页面是怎么出现的呢?实际上就是调用底层绘图API给画出来的。不同的渲染引擎,它的实现也不同,主流的引擎包括IE的Trident,chrome和safary的webkit,firefox的Gecko,chrome又出了一个Blink,放弃webkit。于是乎才有了让人头疼的各种兼容性问题。

整体上页面渲染的过程大致是这样的:

渲染引擎得到html字符串作为输入,然后对html进行转换,转化成能够被DOM处理的形式,接着转换成一个dom树,在解析html的过程,解析到<link>,<script>,<img>等一些请求标签时,会发送请求把对应的内容获取到。这时又会同步进行css的解析,构建出css样式规则应用到dom树上,然后进行一定的布局处理,比如标记节点块在浏览器中的坐标等形成最终的渲染树,最后根据这棵渲染树在浏览器窗口中进行绘制。

最终我们就看到了页面的样子。

当然在页面渲染过程中还会同步进行javascript的解析,而且这两者是在同一个线程中的,所以一旦javascript死循环,页面的渲染也就进行不下去了

以上是我从一个web开发者的角度思考的整个过程。如果从别的角度更细化的去想,还包括许多内容:

比如整个网络通信中协议的封装:

在本机中,把要传输的内容即请求对象在应用层上加上App首部,传递到传输层加上TCP首部,到网络层加上IP首部,数据链路层加上以太网的首部和尾部,然后转换成bit流进入网络环境中。到达主机后在一层层解封装,最后把内容交给服务器程序。

再比如这个过程中的认证,加密,安全,编码等问题都会有一定的处理,不过这些内容我就不是很了解。

转自http://www.cnblogs.com/lichenghan/p/4019370.html

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

推荐阅读更多精彩内容