从输入网址到网页完整呈现的理解与全栈开发

大学的时候,在所有不同系统的开发模式中,对我个人来说最困难的就是Web开发,现在想来可能是因为在Web开发中,默认就有多个运行时环境共同作用,才能完成Web应用的整个流程。这个过程中涉及的一些运行时视图,在当时的认知水平情况下,无法全面理解。

后来在实际的互联网项目中,通过LAMP、Django、nodejs和Spring MVC等一系列不同语言和框架的开发学习,从摸索到完全可以在大脑中构建清晰的运行时视图,这个时候就可以像《架构实践》中所描述的篮球教练一样,看到细节。在组建培训团队的过程中,我也发现,对于这个运行时的理解程度,几乎就决定的新人、中间水平一直到全栈工程师的表现能力,还有对架构的理解。在面试的时候也能够很好的考察开发人员的全局视野。

因此,我认为,理解从输入网址,到网页完整呈现出来的过程,对于Web应用开发,是至关重要的;具备了整个图景的思考和实战能力,就可以挑战真正意义上的全栈开发。本文将会试着简单描述这个过程,并且思考一下我对全栈开发的理解。

运行时组件

首先我会从运行时的视角开始,在整个过程中从多个粒度,解析所有发生的事情的运行时。

最大粒度的划分,由两个运行时,本地的浏览器和云端的服务器组成;两个实体逻辑上是运行在不同机器上的完全隔离的进程里,因此,也可以把http协议理解为一种进程间通信。

在浏览器这个运行时里,至少需要三个必要的组件,才能完成工作,分别是进行http远程通讯的http客户端、javascript脚本解释器还有html+css样式的渲染;简单的来看,就是这三个组件,加上浏览器的运行时控制器,组成了完整的Web浏览器。

在云端,也有必要的细分,可能物理上不一定完全分离,但是逻辑上必须由对应的单元组成。http服务器负责处理http协议的通讯,以文本或文件形式将url指向的资源返回给客户端;应用服务器执行特定语言的处理程序,进行计算;数据管理软件,负责提供和存储数据。根据不同架构和应用场景,还可以有很多细分的组件,通过各自的接口相互协作,完成数据计算和资源处理,对资源进行处理,并且返回给请求的客户端。

基本的运行时组件:

  • javascript解释器,如Google V8
  • html和css渲染
  • http客户端
  • http服务器,如Apache httpd、tomcat和nginx
  • 应用容器,如Tomcat、PHP解释器和Python运行时
  • 数据库,例如:MySQL、MongoDB、Redis等
  • 其他各种中间件,Kafka、ElasticSearch、ZooKeeper等

上面这些运行时环境,参与并实现了从浏览器请求一直到完整网页信息和交互效果的呈现。

简单过程描述

基于LAMP的简单描述

  1. 用户在浏览器中输入一个链接地址,
  2. 浏览器通过DNS服务,找到url指向的服务器。
  3. 浏览器通过TCP协议,向Apache Httpd服务器请求资源。
  4. Apache Httpd服务器根据配置,决定如何处理资源;并且处理请求及响应的header和body。
  5. 直接返回静态资源,如果是配置了其他应用服务器或者网关,那么apache将请求转发给网关或应用容器,例如Tomcat或者调用php解释器,在应用容器返回处理的结果之后,返回给客户端。
  6. php运行时或者Tomcat分析路由和请求头部,执行相应的服务端代码,调用服务器配置的资源,根据请求,进行计算。
  7. php程序调用MySQL数据库,通过mysql协议获取程序对应的数据。

云端服务器

服务器存储了根据系统设计需要提供的各种资源,包括核心的MVC处理代码,这里MVC和分层架构是一种入门级的最佳实践,可以应付大多数的Web场景需要。整个MVC和三层架构,都是通过代码实现的一种逻辑结构,运行在PHP解释器或者其他语言的对应运行时中;理论上说,每个web应用,通过MVC就可以实现业务逻辑,其他的所有资源,都可以通过MVC代码的调用实现。

除了核心的业务逻辑以外,根据模块化,设计的需要,或者现实的限制,单个Web应用可能并不拥有所需的所有资源,就需要通过调用各种本地或者远程的资源来获取自身没有的数据。一般来说,服务端的语言运行环境,通过驱动可以做物理机能做的任何事情。外部资源无论数据库还是消息队列,rpc都是基于互联网通讯的,通过tcp或者http,以自己设计的一套协议提供对外服务。在mvc执行的运行时,可以自己实现对应服务的协议来调用远程资源,但是更一般的情况,我们直接调用远程资源在对应语言下提供的API来完成资源获取,这些API和我们的调用程序会实现某种设计模式,使应用和API以更有逻辑完整性的方式整合起来。

而浏览器端的主角javascript,除了nodejs之外,在服务端看来,跟另外两个主角html、css一样,从html诞生之初,就与普通文本无异,是一种超文本。虽然通过语法和语义需要,服务端也可以实现处理文本的API,更优雅的生成最终的三大主角,例如freemarker对应html,或者grunt、gulp的uglify、less等构建过程放在服务器端处理。

浏览器客户端

用户在浏览器里看到的一切,从输入url获取对应的html文本开始,在html解析阶段,script、link标签所指向的资源,会发起新的http请求来获取,这个跟img加载图片是一样的。css样式的解析也是并行发生的,从link到style各个优先级的css将会应用到浏览器建立的dom结构中,用户自定义的css样式加上浏览器为每种标准html标签内置的style结合起来,就是用户看到的页面效果。script标签加载执行javascript代码也是同步开始的,尤其是现代前端,单页面web时代,javascript扮演了更加重要的作用,包括在前端更像一个完整的客户端应用,前端通过mvc、mvvm、amd等技术具备了完整端系统的能力。通过浏览器的ajax支持,websocket实现异步通讯,就能够实现纯粹前后端分离的应用。

这样我们就可以去试着理解各种web应用如何构建,并且自己亲自权衡取舍,设计构建一个合适的web应用。

对开发的意义

web全栈开发,对于我自己而言,我觉得来自于达芬奇更早的维特鲁威,在2000多年前的古罗马时代对建筑师所需要具备的能力和素质的描述,要构建永恒之道的系统,理所当然需要理解整个系统如何构建。

从系统架构的角度,软件系统,本身就是复杂的有机系统,任何构建的系统,应该是可以被一个人能够清晰完整的理解,在大脑中建立模型的。否则就需要将系统的复杂性分散到不同的子系统,对于一个逻辑完整边界清晰的系统应该能够理解。

从开发角度,在精益mvp模式开发中,团队总是处在能力不足的困扰之下,围绕系统的薄弱环节,应该有人既能看到整体,又有能力实现具体的细节。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,599评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,506评论 25 707
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,748评论 6 342
  • 于随这次演的是一个女反派,从小喜欢男主,不过男主喜欢女主,甩了她,由于她家有权有势,就报复女主,狠虐女主,想想都爽...
    叶等闲阅读 278评论 0 0
  • 寂静夜空 整片的天 广袤的地 那样安静 此刻的心也如此平静 静默的我犹如孤独的患者 被无数影子追赶 撕声力竭地呐喊...
    记得Zhu阅读 214评论 2 3