WEB基础
1. HTTP协议和B/S结构
操作系统有进程子系统,使用多进程就可以充分利用硬件资源。进程中可以多个线程,每一个线程可以被CPU调度执行,这样就可以让程序并行的执行。这样一台主机就可以作为一个服务器为多个客户端提供计算服务。
客户端和服务端往往处在不同的物理主机上,它们分属不同的进程,这些进程间需要通信。跨主机的进程间通信需要使用网络编程。最常见的网络编程接口是Socket。
Socket称为套接字,本意是插座。也就是说网络通讯需要两端,如果一端被动的接收另一端请求并提供计算和数据的称为服务器端,另一端往往只是发起计算或数据请求,称为客户端。
这种编程模式称为Client/Server编程模式,简称C/S编程。开发的程序也称为C/S程序。C/S编程往往使用传输层协议(TCP/UDP),较为底层,比如:QQ,迅雷, 云音乐, 云盘, foxmail,xshell等
1990年HTTP协议和浏览器诞生。在应用层使用文本跨网络在不同进程间传输数据,最后在浏览器中将服务器端返回的HTML渲染出来。由此,诞生了网页开发。
网页是存储在WEB服务器端的文本文件,浏览器发起HTTP请求后,到达WEB服务程序后,服务程序根据URL读取对应的HTML文件,并封装成HTTP响应报文返回给浏览器端。
起初网页开发主要指的是HTML、CSS等文件制作,目的就是显示文字或图片,通过超级链接跳转到另一个HTML并显示其内容。
后来,网景公司意识到让网页动起来很重要,傍着SUN的Java的名气发布了JavaScript语言,可以在浏览器中使用JS引擎执行的脚本语言,可以让网页元素动态变化,网页动起来了。
为了让网页动起来,微软使用ActiveX技术、SUN的Applet都可以在浏览器中执行代码,但都有安全性问题。能不能直接把内容直接在WEB服务器端组织成HTML,然后把HTML返回给浏览器渲染呢?
最早出现了CGI(Common Gateway Interface)通用网关接口,通过浏览器中输入URL直接映射到一个服务器端的脚本程序执行,这个脚本可以查询数据库并返回结果给浏览器端。这种将用户请求使用程
序动态生成的技术,称为动态网页技术。先后出现了ASP、PHP、JSP等技术,这些技术的使用不同语言编写的程序都运行在服务器端,所以称为WEB后端编程。有一部分程序员还是要编写HTML、CSS、JavaScript,这些代码运行在浏览器端,称为WEB前端编程。合起来称为Browser/Server编程,即B/S编程。
2. 网页技术
2.1 静态网页技术
早期的HTML设计之初,只能在HTML里面显示文字、图片,使用CSS来控制颜色、字体大小等。再后来引入了JavaScript就可以是网页可以人机交互、可以让元素动起来。但这都不是内容的动态变化。
2.2动态网页技术
网页的内容是后端根据用户从浏览器端提交的请求不同,通过后台的程序进行执行,将运行的结果生成内容临时拼凑生成HTML,返回到浏览器端,通过浏览器端渲染呈现。常见的有 JSP、PHP、ASP和DotNet、Nodejs等。也可以将动态资源静态化,以加快速度
3.前端三大核心技术
3.1 HTML
HTML(HyperText Markup Language)超文本标记语言,它不同于一般的编程语言。超文本即超出纯文本的范畴,例如:描述文本颜色、大小、字体等信息,或使用图片、音频、视频等非文本内容。
HTML由一个个的标签(标记)组成,这些标签各司其职,有的提供网页信息,有的负责文字,有的负责图片,有的负责网页布局,所以一个HTML文件,是由格式标签和数据组成。
超文本需要显示,就得有软件能够呈现超文本定义的排版格式,例如显示:图片、表格,显示字体的大小、颜色,这个软件就是浏览器。
超文本的诞生是为了解决纯文本不能格式显示的问题,是为了好看,但是只有通过网络才能分享超文本的内容,所以制定了HTTP协议。
3.2 CSS(Cascading Style Sheets)层叠样式表
HTML本身为了格式化显示文本,但是当网页呈现大家面前的时候,需求HTML提供更多样式能力。这使得HTML变得越来越臃肿。这促使了CSS的诞生。
1994年,W3C成立,CSS设计小组所有成员加入W3C,并努力研发CSS的标准,微软最终加入。
1996年12月发布CSS 1.0。
1998年5月发布CSS 2.0。
CSS 3采用了模块化思想,每个模块都在CSS 2基础上分别增强功能。所以,这些模块是陆续发布的。
不同厂家的浏览器使用的引擎,对CSS的支持不一样,导致网页布局、样式在不同浏览器不一样。因此,想要保证不同用户使用不同浏览器看到的网页效果一直非常困难。
3.3 JavaScript
Javascript 简称JS,是一种动态的弱类型脚本解释性语言,和HTML、CSS并称三大WEB核心技术,得到了几乎所有主流浏览器支持。
1994年,网景Netscape公司成立并发布了Netscape Navigator浏览器,占据了很大的市场份额,网景意识到WEB需要动态,需要一种技术来实现。
1995年9月网景浏览器2发布测试版本发布了LiveScript,随即在12月的测试版就更名为JavaScript。同时期,微软推出IE并支持JScript、VBScript,与之抗衡。
1997年,网景、微软、SUN、Borland公司和其他组织在ECMA(European Computer Manufacturers Association 欧洲计算机制造商协会)确定了ECMAScript的本程序设计语言的标准。JavaScript和JScript都成为ECMAScript标准的实现。
2008年后随着chrome浏览器的V8引擎发布。
V8 JS引擎不是解释执行,而是本地编译,在V8引擎做了很多优化,JS程序在其上运行堪比本地二进制程序。V8引擎使用C++开发,可以嵌入到任何C++程序中。基于V8引擎,2009年基于服务器javascript的运行环境Node.js诞生,创建了第一版npm (Node.js包管理器和开源库生态系统), 提供了大量的库供程序员使用。从此,便可以在服务器端真正大规模使用JavaScript编程了。也就是说 JavaScript 也可以真正称为服务器端编程语言了,成为目前唯一的前,后端通用的语言。
同步
交互式网页,用户提交了请求,就是想看到查询的结果。服务器响应到来后是一个全新的页面内容,哪怕URL不变,整个网页都需要重新渲染。例如,用户填写注册信息,只是2次密码不一致,提交后,整个注册页面重新刷新,所有填写项目重新填写(当然有办法让用户减少重填)。这种交互非常不友好。从代价的角度看,就是为了注册的一点点信息,结果返回了整个网页内容,不但浪费了网络带宽,还需要浏览器重新渲染网页,太浪费资源了,影响了用户体验和感受。上面这些请求的过程,就是同步过程,用户发起请求,页面整个刷新,直到服务器端响应的数据到来并重新渲染。
异步
1996年微软实现了iframe标签,可以在一个网页使用iframe标签局部异步加载内容。
1999年微软推出异步数据传输的ActiveX插件技术,太笨重了,但是也火了很多年。有一个组件XMLHttpRequest被大多数浏览器支持。
传统的网页如果需要更新内容,必需重载整个网页面。Ajax的出现,改变这一切,同时极大的促进了Javascript的发展。Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,最早起源于1998年微软的Outlook Web Access开发团队。Ajax 通过在后台与服务器进行少量数据交换, 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。Javascript 通过调用浏览器内置的WEB API中 的XMLHttpRequest 对象实现Ajax 技术。早期Ajax结合数据格式XML,目前更多的使用JSON。利用AJAX可实现前后端开发的彻底分离,改变了传统的开发模式。
AJAX是一种技术的组合,技术的重新发现,而不是发明,但是它深远的影响了整个WEB开发。
4. WEB架构
4.1 WEB资源和访问
4.1.1 WEB资源分类
静态资源
图片:一旦创建好,图片文件不再改变。图片数目多,占用磁盘空间多,一般使用单独的图片服务器
HTML、CSS、JavaScript:这些文本是文本的,前端工程师可以修改,但修改次数较少,一段时间都不变
动态资源
内容有后台程序动态生成,比如:查询数据库,将查询结果生成为静态 HTML文件
再将之通过 http 协议响应给客户端
4.1.2 访问web的方式
PC 端或移动端浏览器访问
从静态服务器请求HTML、CSS、JS等文件发送到浏览器端,浏览器端接收后渲染在浏览器上
从图片服务器请求图片资源显示
从业务服务器访问动态内容,动态内容是请求后有后台服务访问数据库后得到的,最终返回到浏览器端
手机 App 访问
内置了HTML和JS文件,不需要从静态WEB服务器下载 JS 或 HTML。为的就是减少文件的发送,现代前端开发使用的JS文件太多或太大了
有必要就从图片服务器请求图片,从业务服务器请求动态数据
客户需求多样,更多的内容还是需要由业务服务器提供,业务服务器往往都是由一组服务器组成。
4.2 后台应用架构
4.2.1 单体架构
传统架构(单机系统),一个项目一个工程:比如商品、订单、支付、库存、登录、注册等等,统一部署,一个进程
Java实现:JSP、Servlet,打包成一个jar、war部署
如果某个功能模块出问题,有可能全站不可访问,修改Bug后、某模块功能升级后,需要重新整体打包,功能模块相互之间耦合度高,相互影响,不适合当今互联网业务功能的快速迭代。项目庞大,管理难度大
web应用服务器:开源的tomcat、jetty、glassfish。商用的有weblogic、websphere、Jboss
4.2.2 微服务
属于SOA(Service Oriented Architecture)的子集
微服务化的核心就是将传统的一站式应用,根据业务拆分成一个一个的服务,彻底去掉耦合,每一个微服务提供单个业务功能,一个服务只做一件事。每个服务都围绕着具体业务进行构建,并且能够被独立地部署到生产环境、类生产环境等
从技术角度讲就是一种小而独立的处理过程,类似与进程的概念,能够自行单独启动或销毁
微服务架构(分布式系统),各个模块/服务,各自独立出来,"让专业的人干专业的事",独立部署。分布式系统中,不同的服务可以使用各自独立的数据库。
服务之间采用轻量级的通信机制(通常是基于HTTP的RESTful API)。
微服务设计的思想改变了原有的企业研发团队组织架构。传统的研发组织架构是水平架构,前端、后端、DBA、测试分别有自己对应的团队,属于水平团队组织架构。而微服务的设计思想对团队的划分有着一定的影响,使得团队组织架构的划分更倾向于垂直架构,比如用户业务是一个团队来负责,支付业务是一个团队来负责。但实际上在企业中并不会把团队组织架构拆分得这么绝对,垂直架构只是一种理想的架构
微服务的实现框架有多种,不同的应用架构,部署方式也有不同
4.2.3 单体架构和微服务比较
4.2.4 微服务的优缺点
微服务优点:
每个服务足够内聚,足够小,代码容易理解。这样能聚焦一个只当的业务功能或业务需求。
开发简单、开发效率提高,一个服务可能就是专业的只干一件事,微服务能够被小团队单独开发,这个小团队可以是2到5人的开发人员组成
微服务是松耦合的,是有功能意义的服务,无论是在开发阶段或部署阶段都是独立的。
微服务能使用不同的语言开发
易于和第三方集成,微服务运行容易且灵活的方式集成自动部署,通过持续集成工具,如: Jenkins、Hudson、Bamboo
微服务易于被一个开发人员理解、修改和维护,这样小团队能够更关注自己的工作成果,无需通过合作才能体现价值
微服务允许你利用融合最新技术。微服务只是业务逻辑的代码,不会和HTML/CSS或其他界面组件混合,即前后端分离
每个微服务都有自己的存储能力,可以有自己的数据库,也可以有统一数据库
微服务缺点:
微服务把原有的一个项目拆分成多个独立工程,增加了开发、测试、运维、监控等的复杂度
微服务架构需要保证不同服务之间的数据一致性,引入了分布式事务和异步补偿机制,为设计和开发带来一定挑战
开发人员和运维需要处理分布式系统的复杂性,需要更强的技术能力
微服务适用于复杂的大系统,对于小型应用使用微服务,进行盲目的拆分只会增加其维护和开发成本
4.2.5 常见的微服务框架
Dubbo
阿里开源贡献给了ASF,目前已经是Apache的顶级项目
一款高性能的Java RPC服务框架,微服务生态体系中的一个重要组件
将单体程序分解成多个功能服务模块,模块间使用Dubbo框架提供的高性能RPC通信
内部协调使用Zookeeper,实现服务注册、服务发现和服务治理
Spring cloud
一个完整的微服务解决方案,相当于Dubbo的超集
微服务框架,将单体应用拆分为粒度更小的单一功能服务
基于HTTP协议的REST(Representational State Transfer 表述性状态转移)风格实现模块间通信