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 表述性状态转移）风格实现模块间通信