Web架构

1、描述

• web（World Wide Web），简写www，即全球广域网，主要指基于浏览器运行的网页或者网站
• web前端：在浏览器上运行的应用（网站，APP，小程序等）
• APP：Android、Ios、Web_app(H5_app)

2、Web工作原理

• 客户端发起请求（request）
• 服务端接受并处理请求
• 服务端响应处理结果给客户端（respond）
• 客户端浏览器解析返回数据并渲染页面

3、常用浏览器及内核

4、网页组成

• HTML（结构）：超文本标记语言用来描述和定义网页的内容
• CSS（样式）：层叠样式表用于描述网页内容的外观
• JavaScript（行为）：是一种用于为网页增加交互特性的编程语言

5、web技术参考

（1）HTML

• 超文本标记语言，用来描述和定义网页内容

（2）CSS

• 层叠样式表，用来描述web内容的外观

（3）JavaScript

• JavaScript 是一种用于为网站增加交互特定的编程语言

（4）WebAssembly

• WebAssembly 技术允许使用C、C++、Rust、Swift、C#、Go等语言编写的程序在web上运行

（5）事件

• 事件是web应用的反馈：例如，当一个网页完成加载，或者用户选择什么，调整窗口大小，提交一个表单等

（6）HTTP

• HTTP是一种互联网协议，用于在网页上获取文档、样式表、脚本、图像、视频、字体和其他资源，并将数据送回到网络服务器

（7）媒体技术

• 在 web 文档和应用程序中嵌入和流式传输视频、音频和图像内容的格式、编解码器、协议、API和技术

（8）SVG

• 可缩放矢量图形（Scalable Vector Graphics）使你能够使用一组矢量与形状来描述图片，在显示时可提供无关大小的零失真的平滑缩放

（9）MathML

• Mathematical 标记语言让显示复杂的数学公式或语法成为可能

（10）Web Components

Web Components 允许你在自己的应用中创建和服用自定义元素

（11）WebDriver

• WebDriver 是一种浏览器自动化机制，通过模拟真实的人使用浏览器的动作来远程控制浏览器，它被广泛用于网络应用的跨浏览器测试

（12）Web扩展

• Web 扩展是一种在浏览器中为用户提供增强功能的方式——用于阻止广告和其它内容、定制页面和外观以及更多行为

（13）Web APP 清单

• Web 应用清单让你能够让用户将网络应用安装到他们的设备主屏幕上，并预先设置屏幕方向（纵向或横向）和显示模式（如全屏）等方面

（14）渐进式 Web 应用（PWA）

• 渐进式 Web 应用是使用新兴 Web 浏览器 API 和功能以及运用传统渐进增强策略的 Web 应用，为跨平台 Web 应用带来类似原生反应的用户体验

6、web架构分类

（1）B/S架构

B/S架构：通过浏览器运行的架构，B=Browser，S=Server
1）优点

• 不用安装，每次访问都能访问到最新资源，可维护性高，支持跨平台

2）缺点

• 对网络性能要求高，数据加载慢

（2）C/S架构

C/S架构：通过客户端访问，C=Client，S=Server
1）优点

• 数据加载快

2）缺点

• 需要安装，需要更新，可维护性低，不支持跨平台

（3）B/S/S架构

B/S架构升级版本，主要目的是解决网站并发问题，动静分离，提高资源加载速度和用户访问速度
1）结构

• B=Browser，S=Server（静态资源，只做业务逻辑处理），S=Server（动态资源，只做数据交互）

2）优点

• 相对于B/S架构，访问速度更快，安全性提高

（4）C/S/S架构

C/S架构升级版本，主要是解决网站并发问题，动静分离，提高资源加载速度和用户访问速度
1）结构

• C=Client，S=Server（静态资源，只做业务逻辑处理），S=Server（动态资源，只做数据交互）

2）优点

• 相对于C/S架构，访问速度更快，安全性高

7、常见网站类型

（1）按内容分类

• 推广展示类
• 企业机构类
• 电子商务类
• 多媒体互动类
• 综合门户类
• 搜索引擎类

（2）按技术类型分类

• 固定分辨率：网站内容显示的大小固定
• 响应式网站：网站内容显示，根据窗口的大小变化而变化
• 瀑布流式网站：网站内容是动态加载的，根据滚动条的滚动动态加载网页内容

更多web学习，请参考官网文档

https://developer.mozilla.org/zh-CN/docs/Web