前端工程师应该知道的web应用开发知识

前端工程师应该知道的web应用开发知识

作为前端工程师,我不能一直沉迷于css js html react webpack中,有的时候需要跳出自己狭隘的圈子,以一个更加宽广的角度看待web开发在软件系统中的位置。本文介绍了一些和web应用相关的基础知识。

1. web应用技术分类

  • 从架构上来看:MVC MVP MVVM REST Webservice 微服务
  • 从缓存上来看:MemCache Redis Squid
  • 从并发分流来看:集群技术,负载均衡技术,CDN技术
  • 从数据库来看:主从库(即主从复制) 内存数据库 反规划技术 NoSQL 分区分表技术 视图
  • 从持久化来看:Hibernate Mybatis
  • 从分布存储来看:Hadoop FastDFS 区块链
  • 从数据编码来看:XML JSON
  • 从web应用服务器来看:Apache Tomcat JBoss WebSphere WebLogic IIS
  • 从状态性来看:有状态和无状态
  • 从自适应性来看:响应式设计

2. web技术的演变

    1. 单台机器到数据库和web服务器分离。这一步将单体结构拆分成垂直架构,即应用服务器-文件服务器-数据库服务器
    1. 应用服务器 集群:需要解决session一致性和服务转发的问题(前者通过携带session的cookie解决;后者通过负载均衡技术解决)--> 客服端-负载均衡调度服务器-应用服务器集群-同一个数据库服务器
    1. 对单一的数据库实现读写分离 ,并使用主从复制技术保持数据的一致性,即主数据库服务器执行数据的写,从数据库服务器实现数据的多,一主多从;这一步的目的是为了缓解数据库服务器写压力过大。
    1. 数据库服务器的读压力进一步增大,为了缓解数据库服务器的压力,引入缓存集群,分布式缓存服务器使用基于内存的数据库技术,例如MemCache等。
    1. 使用反向代理和CDN内容分发技术 加速网站的响应速度 ,此时的架构为:CDN服务器-反向代理服务器-负载均衡调度服务器-应用服务器集群(分布式缓存服务器)-文件服务器和主从分离的数据库服务器
    1. 将单一的文件服务器和数据库服务器升级成为:文件服务器集群和数据库服务器集群
    1. 针对应用服务器引入搜索引擎和NoSQL服务器,也就是引入NoSQL技术增加数据查询的效率和网站的响应速度。
    1. 使用负载均衡调度服务器将应用服务器分组,然后使用消息队列进行消息通信。
    1. 将应用服务器升级为分布式服务服务器

3. CDN技术

  • CDN是Content Delivery NetWork,含义是内容分发网络。
  • CDN是建立在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
  • CDN的基本原理是:广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中 ,在用户访问网站时,利用全局负载技术 将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户的请求。

4. REST技术

  • 含义为:representational state transfer, 即表述性状态转义,是一种只是用HTTP和XML进行基于web通信的技术,可以降低开发的复杂性 ,提高系统的可伸缩性
  • 对于其为什么能够降低开发的复杂性或者提高可伸缩性,可以从其遵守的五个原则进行理解:
    *
    1. 网络上的所有事物 都被抽象为资源
      1. 每个资源对应一个唯一的资源标识
      1. 通过通用的连接件接口对资源进行操作
      1. 对资源的各种操作不会改变资源标识
      1. 所有的操作都是无状态

5. 微服务架构

  • 微服务架构建议将大型复杂的单体架构应用划分为一组微小的服务,每一个微服务根据其负责的具体业务职责提炼为单一的业务功能;
  • 每一个服务可以很容易的部署并发布到生产环境里隔离和独立的进程内部,它可以很容易的扩展和变更;
  • 对于一个具体的服务来说可以采用任何使用的语言和工具来快速实现;
  • 服务之间基于基础设施互相协同工作。

5.1 微服务的优势

  1. 解决了复杂性的问题
  2. 让每个服务都能能够独立的开发和技术选型
  3. 每一个微服务都可以独立的进行配置
  4. 让每个服务都可以独立调整

5.2 微服务架构的挑战

  1. 并非所有的系统都能够转成微服务
  2. 微服务的部署比以往架构更加复杂
  3. 微服务架构各个服务之间的数据通信会造成性能问题
  4. 微服务之间保持数据一致性比较困难

6. XML技术

XML时Extensible Markup Language的简写,作用为标记电子文件使其具有结构性的标记语言,是一种允许用户对自己的标记语言进行定义的源语言。

  • 优点:格式统一、符合标准; 容易和其它系统进行远程交互,共享数据方便。
  • 缺点:文件庞大、文件格式复杂,传输占的带宽大;服务器端和客户端都需要花费大量代码来解析XML,导致代码异常复杂不容易维护;客户端的不同浏览器之间解析XML的方式不一致,需要重复编写很多代码。

7. JSON技术

是一种轻量级的数据交换格式,具有良好的刻度和便于快速编写的特性,可以在不同平台之间进行数据交换。

  • 优点:数据格式较简单,易于解析,支持多种语言,大大简化了客户端和服务端的解析代码
  • 缺点:相比于XML没有明显的缺点,但是通用性暂时没有XML广泛。

8. 无状态和有状态

  • 无状态服务的含义是:对于单词请求的处理,不会去依赖其他请求。即,处理一次请求所需的全部信息,要么都包含在这个请求里,要么可以从外部获取到,而服务器本身不存储任何信息;
  • 有状态服务的含义是:会在服务器内部保留一部分请求的状态信息。

9. 响应式web设计

是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

  • 采用流式布局和弹性化设计:使用相对单位和百分比
  • 响应式图片:不仅要按照设备的大小缩放图片,还要适配分辨率
相关推荐
码爸17 分钟前
flink doris批量sink
java·前端·flink
深情废杨杨18 分钟前
前端vue-父传子
前端·javascript·vue.js
J不A秃V头A1 小时前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂2 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客2 小时前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹3 小时前
edge 插件 iframe 读取
前端·edge
Kika写代码3 小时前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
天下无贼!4 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr4 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林4 小时前
npm发布插件超级简单版
前端·npm·node.js