CN113590109A - 浏览器开发环境在集成开发时高可用性的web前端工具 - Google Patents

Abstract

浏览器开发环境在集成开发时高可用性的web前端工具涉及信息技术领域，本发明由监听线程开启模块和数据管理模块组成；数据管理模块由大屏数据命名器、时间窗口管理器、游标管理器和数组组成；本发明提供了一种弹性伸缩的方案，通过浏览器简单的解决办法可以大幅度提升Web应用的效率，同时监听线程可以让数据同步功能不会影响到浏览器主线程的渲染展示问题。

Description

浏览器开发环境在集成开发时高可用性的web前端工具

技术领域

本发明涉及信息技术领域。

背景技术

应用基于浏览器端研发通过拖拽和配置的方式开发web页面的工具的时候会碰到高可用的问题：

在一个拖拽页面工具的操作面板上，制作出一个页面需要的操作动作多，完成一个页面是需要一定的时间和步骤。因此在实际使用中，使用者会提出添加操作的撤销和动态的保存功能，甚至还对工具提出可以查看保存的历史版本等等优化用户使用体验的需求。在实际研发中，大多数从事浏览器开发的程序员对于nodejs和数据库的掌握没有浏览器那么熟练。而且像拖拽工具这样的web应用，其浏览器功能是远远要多于服务端的功能，服务端主要完成两件事情，第一件事情就是数据的持久化工作，第二件事情就是拖拽工具的服务端是处理前端数据的转接服务，而工具本身处理的业务逻辑相对较少。这是在规模不大公司实现web浏览器端的IDE工具普遍遇到的问题，即前端和服务端的能力不均衡。

高可用性需求指的是自动保存和撤销以及历史版本回溯的需求，因此解决工具高可用性需求时候，对于以前端工程师为主的研发团队就会碰到如下问题：

问题1：服务端的优化缺乏相应的知识和经验；

问题2：不可控的部署环境常常导致很多优化方式无法有效实现；

问题3：服务端的性能优化实施起来成本非常的高，对于现有的程序影响很大，运维成本也过高，对于规模不大的团队而言是非常难以控制成本，会导致项目的发展不能健康有序进行。

对于数据展示的前端开发，这些针对数值的操作，每一个数值的变化都会引起页面展示不同，都会触发数据变化的监测因此也会触发自动保存操作。发明人在技术实现前对于业界同类拖拽产品腾讯云图做了调研，腾讯云图里基本每一次数值变化都会发送一个http请求到后台，这就导致有非常频繁的请求发送到后台服务端，假如这样的场景下还碰到多人一起操作，那么很容易导致网站的QPS即每秒处理的请求个数增大，在上文提到虚拟机环境下如果有两人同时使用系统制作页面，那么整个系统就很容易不可用，而不可用往往都是由数据库引起的，因为在短时间内产生了大量的写请求，数据库和web应用没有分离因此工具很快就达到系统的瓶颈。

撤销（恢复）操作、自动保存以及历史回退这三个功能可以让一个集成开发环境时的web软件达到一个和桌面应用软件相当的用户体验，而这三者放在一起说明三者之间存在一定的关联，如果我们想同时实现三个功能，那么就不能把三者分别考虑而是要放在一起综合考虑。

此外，大厂对于此问题的解决方案对于中小团队而言有极高的技术成本和资金成本，如果一个中小团队研发类似的工具，因为资金有限他们可能只能部署在比较差的服务器上或者团队规模小，一般研发交互性很强的Web应用团队都是前端技术能力远好于服务端能力，那么如何利用前端的技术能力达到高可用的服务端效果，这是很多中小团队的困境所在。

因此本发明要解决的技术问题主要是如何有效的按照时间维度在浏览器端和服务端数据存储问题，能有效的管控前端的并发数量，不因为大量数据存储操作导致服务端不可用。

撤销和恢复操作使用客户端存储页面数据的变化，自动保存是页面数据变化后我们需要将新的数据同步到服务端，让服务端存储新的数据。历史回退就是服务端存储数据的撤销操作。理论上，客户端数据变化了客户端的存储和服务端的存储都应该发生相应的变化，这是一个完整的操作事务，不过服务端存储需要通过网络请求的发送，如果客户端数据变化频繁而且间隔频率很高，就很容易给服务端造成高并发请求，这里我们使用专业的说法就是导致服务端的每秒处理查询的次数以及每秒处理事务的次数很高。如果服务端没有限流保护机制就会导致服务端系统崩溃。

通常服务端的限流机制都是用缓存队列来完成，如果前端请求比较大，我们可以把来不及处理的请求先缓存起来，按照服务端程序可以承受的并发量来从队列里按先进先出的原则一个个处理。不过缓存队列本身也要消耗资源，服务端程序全负荷处理消耗的电脑资源也是最大，因此如果后台服务器配置太差或者单机部署还是很容易让服务器超出负载。解决这个问题的方法很简单就是减少浏览器端向服务端发送的请求，不过这样做就会导致浏览器端每次的数据变化都不能实时和服务端同步，如果自动保存控制不到位就可能发生有效数据丢失的问题。

本发明认为为了减少服务端的请求负载，服务端如果没法承载全部的数据变化的持久化处理操作，为了保证服务端的稳定性，服务端不会处理并且持久化全部的数据变化。如何处理服务端丢失90%数据所带来的业务问题，首先，相对我们准许服务端可以丢失部分数据，但是客户端是不能丢失变化数据，这是本发明方法设计的基本原则。另外，每秒处理查询的次数过高其含义是1秒钟内请求个数过多即单位时间内的请求个数过多，因此降低每秒处理查询的次数的手段就是控制单位时间内的请求个数也就是控制手段要以时间维度来思考和设计。

不管是浏览器端的JavaScript运行环境还是服务端的JavaScript运行环境nodejs他们都是一个单线程的执行环境，也就是程序代码的执行都是按时间顺序一行行的执行，如果我们把撤销和恢复以及上面阐述的降低每秒处理的请求个数的方案都不是服务于页面渲染和展示业务逻辑的处理，同时这些操作本身比较复杂，占用的电脑资源很大，如果我们在主线程上完成上述的功能一定会导致页面的渲染和展示业务逻辑性能下降，因此完成上述操作我们要考虑不在用JavaScript主线程的情况下运行。

历史回退相当于服务端的撤销，如果我们可以做到客户端和服务端全量数据的同步，那么基于服务端的历史回退就可以替换客户端的撤销，而且服务端的历史回退可以从页面创建开始做回退这样就超出了客户端撤销的时间长度了。不过本发明人认为不管是客户端的撤销和恢复还是服务端的历史回退，我们做到什么样的程度和什么样的力度其实还要看实际的业务诉求的重要性如否，本发明对于这些功能提供一种弹性的伸缩方案，当然这种弹性伸缩方案更多体现在服务端侧的历史回退上，因为历史回退操作是一个公共资源池，本发明所要解决的问题就是如何高效的利用服务器端资源，高效利用服务器资源是一个全方位的技术问题，而本发明的弹性伸缩方案提供配置方式可以将历史回退做到最小粒度，也可以将粒度变大即只回退每次时间窗口的数据回退。

术语定义

自动保存：自动保存顾名思义就是自动的将数据持久化到服务端的数据库，当拖拽工具里我们添加了一个新的组件，希望页面关闭重新打开可以看到这个新组件那么我们需要先保存最新的数据，自动保存就是前端自动监测到数据变化，自动发送请求给服务端将新的数据持久化到数据库。只要会引起展示变化的数据就可以被认为是有效的数据变化就应当发送到服务端进行数据持久化。

撤销操作：撤销操作在我们使用office、photoshop这样的工具里非常的常见，当我们拖拽出一个组件，在组件上做了一大串的操作，如果我们觉得这一大串操作不合适，没有撤销操作我们就得将正确的操作重新做一遍，这样的效果必然让工具的用户体验大大降低。那么在业界类似拖拽工具这样功能的web应用撤销功能都是必备的功能。本发明人在调研中发现业界的撤销功能主要有3种方式，具体如下：

方式1：客户端存储历史数据，撤销是在客户端获取上一次的新数据；

方式2：在服务端存储历史数据，撤销是通过请求获取服务端上次保存的数据；

方式3：服务端和客户端都存储历史数据，但是实际使用中只使用客户端的数据做操作数据，只有在客户端数据失效的情况下，通过拉取服务端的数据来保证数据不被丢失，同样历史数据存储时候要在客户端和服务端同时存储；

方式1和方式3的效果和人们传统意义理解的撤销操作一样，即我们在操作页面的中间修改数据是可以撤销的，如果我们关闭浏览器或者退出了拖拽工具的应用那个撤销就无效了。相对而言，方式3其实是把撤销和自动保存一起做了功能实现，而自动保存功能则是撤销操作健壮性的补充。而使用方式1的工具往往都没有自动化保存的功能，保存操作都需要使用者自行点击完成；

方式2的撤销都是取自服务端的数据，这样的撤销不受浏览器关闭或者工具退出的影响，只要服务端可以保存完整的历史数据，那么撤销理论上在任何时期都可以撤销到页面初始化的时候。但是方式2对于服务端的高并发性能以及服务端的健壮性要求很高，因此像本发明人这样规模较小的团队很难完成这样的撤销操作。在一些大厂例如阿里云的DataV，腾讯的云图在撤销操作同时还能实现恢复操。

历史版本：历史版本也是撤销或者回退操作的一种模式，撤销都是当前工作区间的操作，如果我们关闭浏览器或者是退出工具，那么撤销就会失效，而历史版本则是如果我们当前保存到后台的内容如果有问题，我们想恢复到更早的历史版本，而不是重新再做一个新的页面，由此我们可以发现历史版本是服务端数据的撤销。在上面撤销操作的描述里，撤销的方式2就是把前端的撤销和服务端的历史版本两个操作合二为一，撤销操作的方式2和撤销操作方式3一般都是基于客户端做撤销的，撤销操作方式3经过改良也是可以兼容客户端撤销和服务端的历史回退。

QPS每秒处理查询的次数；

TPS每秒处理事务的次数。

发明内容

鉴于现有技术的不足，本发明提供的浏览器开发环境在集成开发时高可用性的web前端工具由监听线程开启模块和数据管理模块组成；数据管理模块由大屏数据命名器、时间窗口管理器、游标管理器和数组组成；

监听线程开启模块负责开启监听线程用于监听web展示主线程的数据变化；web展示主线程是用于基于浏览器拖拽开发的JavaScript主线程；主流的web前端框架Vue、React和Angular三大框架都有监听数据变化的功能，由监听线程开启模块根据web前端框架的类型开启对web展示主线程的数据变化进行监听的监听线程，并将监听线程获取的数据发送给数据管理模块；

大屏数据命名器用于对监听线程所监听的web展示主线程所获得的监听数据所存储的数组进行命名，命名规则是不重复的数字序列，以确保在同一台计算机上开发多个web前端应用时，产生多个web展示主线程时对不同的web展示主线程的数据变化进行监听时，区别存储的数组；

数组用来储存监听线程所监听到的数据；

游标管理器定义一个访问游标，访问游标指向用户正在使用的第N组数据，撤销操作就是访问游标向数组起始位置方向迁移操作，即访问游标由指向第N组数据迁移到指向第N减一组数据；恢复操作是访问游标向数组尾部移动的操作，即访问游标由指向第N组数据迁移到指向第N加一组数据；

时间窗口管理器设定时间窗口的时间大小，启动一个定时器，定时器按照时间窗口的大小周期间隔执行，通知游标管理器让访问游标找到数组里当下时间窗口里的最早记录的一条数据，通过时间窗口大小获取数组在当下时间窗口范围里记录的最后一条数据，当不需要全量数据时，只获取当下时间窗口范围里记录的最后一条数据，由时间窗口管理器将获得的数据发送到数据管理器，再有数据管理器发送到服务端。

有益效果

本发明提供了一种弹性伸缩的方案，通过浏览器简单的解决办法可以大幅度提升Web应用的效率，例如时间窗口可以降低QPS，例如QPS降低了90%，那么这就意味着Web服务可以承担原来设备10倍的用户请求，因此运用本方案，一个web部署环境原来可以并发10人使用，现在就变成了100人可以并发使用，这是一个很大的性能提升。

本发明的弹性伸缩在web服务端能力非常强大已经不需要本发明来控制QPS和传输数据大小，那么我们将时间窗口设定为0，然后发送全量数据，那么这样就做到客户端和服务端数据实时同步，而发明里的监听线程的方案又可以让数据同步功能不会影响到浏览器主线程的渲染展示问题。

附图说明

图1是本发明的系统结构图。

具体实施方式

实施例一

参看图1，本发明提供的浏览器开发环境在集成开发时高可用性的web前端工具由监听线程开启模块1和数据管理模块2组成；数据管理模块2由大屏数据命名器20、时间窗口管理器21、游标管理器22和数组23组成；

监听线程开启模块1负责开启监听线程用于监听web展示主线程B的数据变化；web展示主线程B是用于基于浏览器拖拽开发的JavaScript主线程；主流的web前端框架Vue、React和Angular三大框架都有监听数据变化的功能，由监听线程开启模块根据web前端框架的类型开启对web展示主线程B的数据变化进行监听的监听线程，并将监听线程获取的数据发送给数据管理模块2；

大屏数据命名器20用于对监听线程所监听的web展示主线程B所获得的监听数据所存储的数组23进行命名，命名规则是不重复的数字序列，以确保在同一台计算机上开发多个web前端应用A时，产生多个web展示主线程B时对不同的web展示主线程B的数据变化进行监听时，区别存储的数组23；

数组23用来储存监听线程所监听到的数据；

游标管理器22定义一个访问游标，访问游标指向用户正在使用的第N组数据，撤销操作就是访问游标向数组起始位置方向迁移操作，即访问游标由指向第N组数据迁移到指向第N减一组数据；恢复操作是访问游标向数组尾部移动的操作，即访问游标由指向第N组数据迁移到指向第N加一组数据；

时间窗口管理器21设定时间窗口的时间大小，启动一个定时器，定时器按照时间窗口的大小周期间隔执行，通知游标管理器22让访问游标找到数组里当下时间窗口里的最早记录的一条数据，通过时间窗口大小获取数组在当下时间窗口范围里记录的最后一条数据，当不需要全量数据时，只获取当下时间窗口范围里记录的最后一条数据，由时间窗口管理器21将获得的数据发送到数据管理器2，再有数据管理器2发送到服务端。

Claims (1)

1.浏览器开发环境在集成开发时高可用性的web前端工具，其特征在于由监听线程开启模块和数据管理模块组成；数据管理模块由大屏数据命名器、时间窗口管理器、游标管理器和数组组成；

监听线程开启模块负责开启监听线程用于监听web展示主线程的数据变化；web展示主线程是用于基于浏览器拖拽开发的JavaScript主线程；主流的web前端框架Vue、React和Angular三大框架都有监听数据变化的功能，由监听线程开启模块根据web前端框架的类型开启对web展示主线程的数据变化进行监听的监听线程，并将监听线程获取的数据发送给数据管理模块；

大屏数据命名器用于对监听线程所监听的web展示主线程所获得的监听数据所存储的数组进行命名，命名规则是不重复的数字序列，以确保在同一台计算机上开发多个web前端应用时，产生多个web展示主线程时对不同的web展示主线程的数据变化进行监听时，区别存储的数组；

数组用来储存监听线程所监听到的数据；

游标管理器定义一个访问游标，访问游标指向用户正在使用的第N组数据，撤销操作就是访问游标向数组起始位置方向迁移操作，即访问游标由指向第N组数据迁移到指向第N减一组数据；恢复操作是访问游标向数组尾部移动的操作，即访问游标由指向第N组数据迁移到指向第N加一组数据；

时间窗口管理器设定时间窗口的时间大小，启动一个定时器，定时器按照时间窗口的大小周期间隔执行，通知游标管理器让访问游标找到数组里当下时间窗口里的最早记录的一条数据，通过时间窗口大小获取数组在当下时间窗口范围里记录的最后一条数据，当不需要全量数据时，只获取当下时间窗口范围里记录的最后一条数据，由时间窗口管理器将获得的数据发送到数据管理器，再有数据管理器发送到服务端。

Images