CN111428168B - 一种可与后端架构分离开发的浏览器前端架构系统 - Google Patents

Abstract

本发明提出了一种可与后端架构分离开发的浏览器前端架构系统，包括访问层、HTML单页面应用模块、视图模块、webpack模块打包器、控制模块和模型层；用以解决现有浏览器每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢和性能差的问题，具有提高前端架构系统性能的特点。

Description

一种可与后端架构分离开发的浏览器前端架构系统

技术领域

本发明涉及浏览器构建技术领域，特别涉及一种可与后端架构分离开发的浏览器前端架构系统。

背景技术

随着互联网应用越来越大、业务逻辑处理越来越复杂、用户获得良好体验的期望越来越高，在这种情况下，如果还继续维持以页面为单位的开发方式，势必会造成很多问题，例如每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢、性能差等问题，同时因为前端技术的极速发展，使得不同浏览器对ES的兼容性不一，这就导致了传统的开发方式无法使用自ES6版本以后的许多新语法。

发明内容

本发明提供了一种可与后端架构分离开发的浏览器前端架构系统，用以解决现有浏览器每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢和性能差的问题，所采取的技术方案如下：

一种可与后端架构分离开发的浏览器前端架构系统，所述浏览器前端架构系统包括：

访问层，用于执行对浏览器的访问操作；

HTML单页面应用模块，用于利用单页面应用的方式对浏览器所展示的业务页面进行开发，构建业务页面的应用内容；

视图模块，用于通过资源预加载、图片格式转换以及组件加载的方式将所述HTML单页面应用模块构建的业务页面应用内容展示出来，并实现人与业务页面交互功能；

webpack模块打包器，用于对视图模块中的预加载资源进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源；

控制模块，用于当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将处理好的数据发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库。

进一步地，所述浏览器前端架构系统还包括白屏情况确定模块和白屏信息反馈模块；

所述白屏情况确定模块，用于用户启动浏览器进行网页访问时，根据白屏期间的鼠标动、静状态来监控浏览器当前页面被访问时的白屏情况；

所述白屏信息反馈模块，用于白屏情况确定模块在确认白屏时间超时后，将白屏时间超时信息反馈给视图模块。

进一步地，所述视图模块包括：

资源预加载子模块，用于浏览器首屏被访问之前，将浏览器首屏的页面资源提前进行加载；

图片转换子模块，用于对资源预加载过程中出现的图片资源进行格式转换，将资源中的图片转换为SVG格式图片；

组件加载子模块，用于在资源预加载的同时，对浏览器首屏的网页组件进行加载。

进一步地，所述视图模块还包括：

时间信息接收子模块，用于接收浏览器页面展示过程中白屏信息反馈模块发送的白屏时间超时的时间检测信息；

网络状态检测子模块，用于在时间信息接收子模块接收到时间检测信息后，进行网络状态检测，如果首屏访问当前存在网络故障问题，则在首屏页面上显示网络故障状态；如果首屏访问当前无网络故障问题，则向资源重置子模块发出资源重置指令；

资源重置子模块，用于在接收到网络状态检测子模块和白屏情况确定模块发来的资源重置指令后，重新进行网页的资源加载；

浏览器故障提示子模块，用于在资源重置后时间信息接收子模块仍然持续接收到白屏时间超时的检测信息时，在页面上提示浏览器故障信息；以及，当白屏情况确定模块对浏览器当前网页连续自动刷新两次后当前网页仍处于白屏阶段时，在页面上提示浏览器故障信息。

进一步地，所述控制模块包括

Vue组件子模块，用于进行Vue的单文件组件形式开发，使浏览器的业务逻辑处理和浏览器的页面视图展示处理分别进行，互不影响；

页面组件子模块，用于进行登录页面和首页页面的构建，以及进行首页面板自定义配置、CRON表达式可视化配置和节假日设置；

状态管理模块，用于通过集中式存储方式管理所有组件的状态，并根据浏览器运行的相应规则保证所有组件的状态在系统允许的范围内进行变化。

进一步地，所述白屏情况确定模块包括：

鼠标状态检测子模块，用于当浏览器页面被访问并进入白屏阶段时检测鼠标状态是静止状态还是移动状态，如果鼠标状态为静止状态，则启动静止状态监测子模块对鼠标静止时间进行监测；如果鼠标为移动状态，则启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测；

静止状态监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于静止状态后，实时监测鼠标的静止时间，当鼠标静止状态的时间超过预设的白屏时间时，则启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；

鼠标轨迹监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于移动状态后，实时检测鼠标的移动轨迹，当检测到鼠标出现往复的类圆形轨迹、同方向反复的直线轨迹和不同方向反复的直线轨迹时，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块。

进一步地，所述鼠标轨迹监测子模块包括：

类圆形轨迹检测子模块，用于检测鼠标在白屏阶段是否出现往复的类圆形轨迹，如果检测到鼠标出现了往复的类圆形轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在往复的类圆形轨迹，则启动直线轨迹检测子模块一；

直线轨迹检测子模块一，用于检测鼠标在白屏阶段是否出现同方向反复的直线轨迹，如果检测到鼠标出现了同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在同方向反复的直线轨迹，则启动直线轨迹检测子模块二；

直线轨迹检测子模块二，用于检测鼠标在白屏阶段是否出现不同方向反复的直线轨迹，如果检测到鼠标出现了不同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段，则向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块；

浏览器自动刷新模块，用于在直线轨迹检测子模块二没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段时，对浏览器当前网页进行自动刷新；当所述浏览器自动刷新模块连续两次进行当前网页的自动刷新后，当前网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

进一步地，所述白屏情况确定模块检测白屏时间的过程包括：

步骤一、当浏览器页面被访问并进入白屏阶段时，检测白屏阶段的鼠标状态，如果鼠标为静止状态，则检测鼠标静止状态的时间，当鼠标静止状态的时间超过预设的白屏时间，则将白屏时间超时信息反馈给视图模块；如果鼠标为移动状态，导致无法通过鼠标静止状态与预设白屏时间进行对比来判断白屏时间是否超时时，则转至步骤二；

步骤二、检测鼠标的移动轨迹是否为往复的类圆形轨迹，如果鼠标轨迹出现往复的类圆形轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现往复的类圆形轨迹，则转至步骤三；

步骤三、检测鼠标的移动轨迹是否为同方向反复的直线轨迹，如果鼠标轨迹出现同方向反复的直线轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现同方向反复的直线轨迹，则转至步骤四；

步骤四、检测鼠标的移动轨迹是否为不同方向反复的直线轨迹，如果鼠标轨迹出现不同方向反复的直线轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现部同方向反复的直线轨迹且网页仍处于白屏阶段，则转至步骤五；

步骤五、向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块对当前网页进行自动刷新，并重复步骤一至步骤四的内容，当第二次浏览器自动刷新网页并重复步骤一至步骤四后网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

进一步地，所述鼠标状态检测子模块，用于检测鼠标状态是静止状态还是移动状态，并根据所述鼠标状态启动静止状态监测子模块或鼠标轨迹监测子模块，其具体过程如下：

步骤1、建立坐标系；

以鼠标初始所在位置为坐标原点，以水平向右为x轴正向，竖直向上为y轴正向建立笛卡尔直角坐标系，t₀时刻所述鼠标所在位置为(x₀,y₀)，t₁时刻所述鼠标所在位置为(x,y)；

步骤2、计算变化率；

其中，a为t₀时刻到t₁时刻的变化率，ε为灵敏度系数，Δt为t₁时刻与t₀时刻的时间差，

步骤3、计算t₁时刻的速度；

其中，v(t₁)为t₁时刻的速度，v(t₀)为t₀时刻的瞬时速度，a为t₀时刻到t₁时刻的变化率；

步骤4、所述鼠标状态判断；

当v(t₁)＝0时，所述鼠标t₁时刻的状态为静止状态，否则所述鼠标为移动状态；

步骤5、当所述鼠标状态为静止状态时，启动静止状态监测子模块对鼠标静止时间进行监测；当所述鼠标为移动状态时，启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测。

本发明有益效果：

本发明提出的一种可与后端架构分离开发的浏览器前端架构系统，采用了前后端分离开发的方式，前端通过模块打包器将前端工程打包压缩，进而发布到整个项目中，减小了JS、CSS甚至图片体积，提高了静态资源加载速度。同时将异步加载的模块分割成不同大小的块，按需加载静态资源，减小了首页白屏时间，提高了用户体验度。除此，通过其babel模块对ES6语法进行兼容性处理，可以使得js在不同浏览器上无差别运行。在性能提升方面，前端框架使用了静态资源预加载的方式，优先加载首屏必需资源，其他资源按需加载，减少了首页白屏时间，同时对预期加载的组件所依赖的JS提前加载，提高了后续业务页面渲染时的速度，提升了用户体验；同时引入了渐进式框架VUE，将业务逻辑与视图展现相分离，极大的提高了前端性能。同时，降低了视图模块和模型层的耦合度，提高了系统的可维护性。同时Vue所采用的虚拟DOM机制，减少了频繁操作DOM引起的页面渲染时性能降低的问题，极大提升了用户体验度。

附图说明

图1为本发明所述浏览器前端架构系统的结构框图；

图2为本发明所述webpack模块打包器的结构框图；

图3为本发明所述视图模块的结构框图；

图4为本发明所述控制模块的结构框图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

本发明提供了一种可与后端架构分离开发的浏览器前端架构系统，用以解决现有浏览器每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢和性能差的问题。

本发明的实施例提出了一种可与后端架构分离开发的浏览器前端架构系统，如图1所示，所述浏览器前端架构系统包括：

访问层，用于执行对浏览器的访问操作；

HTML单页面应用模块，用于利用单页面应用的方式对浏览器所展示的业务页面进行开发，构建业务页面的应用内容；

视图模块，用于通过资源预加载、图片格式转换以及组件加载的方式将所述HTML单页面应用模块构建的业务页面应用内容展示出来，并实现人与业务页面交互功能；

webpack模块打包器，用于对视图模块中的预加载资源进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源；webpack模块打包器的结构如图2所示。

控制模块，用于当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将处理好的数据发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库。

所述公共方法为java常用的公共方法，例如，获取规字符串中的指定名称的某个字段值、通过表单选中的复选框获取它的值(js的方法)、获取当前年和汇总指定列的总和等；用于根据用户的操作请求，使控制模块调用对应的公共方法对用户的请求进行数据处理；

所述组件解析器为用于对视图模块中加载的组件进行解析；

所述工具类就是对于String，Collection，IO等常用类的功能的扩展，用于控制模块根据用户请求进行常用类的功能的调用时，能够直接进行调用；

所述页面缓存机制为页面缓存的规则，其中，就是把一个已经请求过的web资源(如html页面，图片，JS，数据)拷贝一份放在浏览器中。缓存会根据进来的请求保存输入内容的副本。当下一个用户请求到来的时候，如果是相同的URL，控制模块会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。

上述技术方案的工作原理为：访问层包括PC机和其他移动设备，HTML单页面应用模块利用利用单页面应用方式对浏览器所展示的业务页面进行开发，HTML单页面应用模块开发生成的业务页面通过视图模块采用资源预加载、图片格式转换以及组件加载的方式完成浏览器页面展示以及页面与人交互的功能；同时，利用webpack模块打包器对视图模块中的预加载资源进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源，并发布到整个项目中；然后，通过控制模块当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将处理好的数据发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库；

上述技术方案的技术效果为：利用上述单页面应用开发模式能够实现浏览器前端与后端的分离开发，有效提高浏览器前端架构的兼容性；采用了前后端分离开发的方式，前端通过模块打包器将前端工程打包压缩，进而发布到整个项目中。在性能提升方面，前端框架使用了静态资源预加载的方式，优先加载首屏必需资源，其他资源按需加载，同时在控制模块中引入了渐进式框架VUE，将业务逻辑与视图展现相分离，极大的提高了前端性能。同时，通过webpack模块打包器进行模块打包，有效减小了JS、CSS甚至图片体积，提高了静态资源加载速度。同时，能够将异步加载的模块分割成不同大小的块，按需加载静态资源，减小了首页白屏时间，提高了用户体验度。此外，通过其babel对ES6语法进行兼容性处理，可以使得js在不同浏览器上无差别运行，提高浏览器对ES的兼容性。通过第三方加载模块有效避免首屏加载的bundle文件或按需加载的bundle文件提及过大，导致加载时间过长的问题，有效实现加载过程的深度优化，提高文件加载速度。

在本发明的一个实施例中，如图1所示，所述浏览器前端架构系统还包括白屏情况确定模块和白屏信息反馈模块；

所述白屏情况确定模块，用于用户启动浏览器进行网页访问时，根据白屏期间的鼠标动、静状态来监控浏览器当前页面被访问时的白屏情况；

所述白屏信息反馈模块，用于白屏情况确定模块在确认白屏时间超时后，将白屏时间超时信息反馈给视图模块。

上述技术方案的工作原理为：利用白屏情况确定模块在用户启动浏览器进行网页访问时，根据白屏期间的鼠标动、静状态来监控浏览器当前页面被访问时的白屏情况；然后通过所述白屏信息反馈模块将白屏时间超时信息反馈给视图模块。

上述技术方案的技术效果为：通过白屏情况确定模块和白屏信息反馈模块能够有效监控业务页面加载的白屏时间，有效提高业务页面加载质量的监控。

在本发明的一个实施例中，如图3所示，所述视图模块包括：

资源预加载子模块，用于浏览器首屏被访问之前，将浏览器首屏的页面资源提前进行加载；其中，浏览器首屏指浏览器也面打开时的第一屏,即当用户打开网页时直接展现在他面前、不用翻页即可浏览的内容属于页面首屏；页面资源包括文字资源和图片资源；

图片转换子模块，用于对资源预加载过程中出现的图片资源进行格式转换，将资源中的图片转换为SVG格式图片；

组件加载子模块，用于在资源预加载的同时，对浏览器首屏的网页组件进行加载。其中，网页组件为网页中各种常用的界面组件，如：表格、树、联动下拉框等；

上述技术方案的工作原理为：首先视图模块通过资源预加载子模块先加载首屏必需资源，然后通过组件加载子模块对除首屏必须资源之外的其他资源进行按需加载，加载顺序和加载内容，组件加载子模块可根据加载需求自行调整，并且，所有资源的加载均为预先加载。在资源加载的同时，图片转换子模块将各个格式的图片转换为SVG格式图片。视图模块通过资源预加载子模块、图片转换子模块和组件加载子模块形成了业务页面上的JS(javascript)、CSS(层叠样式表)和SVG格式图片。

上述技术方案的技术效果为：通过静态资源加载方式优先进行首屏必须资源的加载，能够有效减小了首页白屏时间，提高首页加载速度。

在本发明的一个实施例中，如图3所示，所述视图模块还包括：

时间信息接收子模块，用于接收浏览器页面展示过程中白屏信息反馈模块发送的白屏时间超时的时间检测信息；

网络状态检测子模块，用于在时间信息接收子模块接收到时间检测信息后，进行网络状态检测，如果页面访问当前存在网络故障问题，则在首屏页面上显示网络故障状态；如果首屏访问当前无网络故障问题，则向资源重置子模块发出资源重置指令；

资源重置子模块，用于在接收到网络状态检测子模块和白屏情况确定模块发来的资源重置指令后，重新进行网页的资源加载；

浏览器故障提示子模块，用于在资源重置后时间信息接收子模块仍然持续接收到白屏时间超时的检测信息时，在页面上提示浏览器故障信息；以及，当白屏情况确定模块对浏览器当前网页连续自动刷新两次后当前网页仍处于白屏阶段时，在页面上提示浏览器故障信息。

上述技术方案的工作原理为：利用时间信息接收子模块接收浏览器页面展示过程中白屏信息反馈模块发送的白屏时间超时的时间检测信息，通过网络状态检测子模块进行网络状态检测，如首屏访问当前存在网络故障问题，则在首屏页面上显示网络故障状态；如首屏访问当前无网络故障问题，则向资源重置子模块发出资源重置指令；当资源重置子模块接收到网络状态检测子模块发来的资源重置指令后，重新进行网页资源的加载；如果在资源重新加载后时间信息接收子模块仍然持续接收到白屏时间超时的检测信息时，则通过浏览器故障提示子模块在页面上提示浏览器故障信息，并将此信息反馈到前端系统。

上述技术方案的技术效果为：通过白屏时间的时长检测和检测信息的反馈，结合视图模块的内部模块设计，使视图模块不仅具有资源加载、图片格式转化和其他组件加载的功能，还具有资源重置、调整白屏时间、网络状态检测和信息提示的功能，不仅能够有效监控和调整首屏的白屏时间，同时，还增加了前端系统整体的页面加载状态的监控能力，提高页面加载速度，有效减少白屏时间超时的情况出现，提高浏览器前端性能和整体的用户体验。

在本发明的一个实施例中，如图4所示，所述控制模块包括

Vue组件子模块，用于进行Vue的单文件组件形式开发，使浏览器的业务逻辑处理和浏览器的页面视图展示处理分别进行，互不影响；

页面组件子模块，用于进行登录页面和首页页面的构建，以及进行首页面板自定义配置、CRON表达式可视化配置和节假日设置；

状态管理模块，用于通过集中式存储方式管理所有组件的状态，并根据浏览器运行的相应规则保证所有组件的状态在系统允许的范围内进行变化。

上述技术方案的工作原理为：控制模块利用Vue组件子模块进行Vue的单文件组件形式开发，将逻辑与页面视图展示相分离；并通过页面组件子模块进行登录页面和首页页面的构建，以及进行首页面板自定义配置、CRON表达式可视化配置和节假日设置；同时，在整个系统运行过程中，利用状态管理模块通过集中式存储方式管理所有组件的状态，并根据浏览器运行的相应规则保证所有组件的状态在系统允许的范围内进行变化。

上述技术方案的技术效果为：Vue组件子模块可以使开发人员使用独立可复用的小组件来构建浏览器应用，通过Vue的单文件组件形式开发，可以提高组件之间的复用性，可维护性，可扩展性。Vue组件子模块的数据响应方式能够将逻辑与页面视图展示相分离，通过操作数据就可作用到相应视图，降低了视图层和模型层的耦合度，提高了系统的可维护性。同时Vue组件子模块采用虚拟DOM机制，能够有效减少频繁操作DOM引起的页面渲染时性能降低的问题，极大提升了用户体验度。

除此前端框架引入了状态管理模块对vue组件进行态管理，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模块的使用减少了多层组件之间频繁传值的问题，提高了组件的可维护性和操作性。

在本发明的一个实施例中，如图1所示，所述白屏情况确定模块包括：

鼠标状态检测子模块，用于当浏览器页面被访问并进入白屏阶段时鼠标状态是静止状态还是移动状态，如果鼠标状态为静止状态，则启动静止状态监测子模块对鼠标静止时间进行监测；如果鼠标为移动状态，则启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测；

静止状态监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于静止状态后，实时监测鼠标的静止时间，当鼠标静止状态的时间超过预设的白屏时间时，则启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；

鼠标轨迹监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于移动状态后，实时检测鼠标的移动轨迹，当检测到鼠标出现往复的类圆形轨迹、同方向反复的直线轨迹和不同方向反复的直线轨迹时，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块。

上述技术方案的工作原理为：当浏览器页面被访问并进入白屏阶段时，通过鼠标状态检测子模块检测鼠标状态是静止状态还是移动状态，如果鼠标状态为静止状态，则启动静止状态监测子模块对鼠标静止时间进行监测；如果鼠标为移动状态，则启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测；然后，当鼠标状态检测子模块检测到鼠标在白屏阶段处于静止状态后，利用静止状态监测子模块实时监测鼠标的静止时间，当鼠标静止状态的时间超过预设的白屏时间时，则启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；最后，当鼠标状态检测子模块检测到鼠标在白屏阶段处于移动状态后，通过鼠标轨迹监测子模块实时检测鼠标的移动轨迹，当检测到鼠标出现往复的类圆形轨迹、同方向反复的直线轨迹和不同方向反复的直线轨迹时，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块。

上述技术方案的技术效果为：通过白屏时间内鼠标静止时长和鼠标动态轨迹的动静两种鼠标状态检测来确定首屏加载过程的白屏时间，能够有效确定白屏时间，同时，结合鼠标动态轨迹的检测，通过真实反映用户访问首屏时的操作状态，根据操作状态进而能够反映出页面的加载状态，有效提高白屏时间检测的准确性。

在本发明的一个实施例中，如图1所示，所述鼠标轨迹监测子模块包括：

类圆形轨迹检测子模块，用于检测鼠标在白屏阶段是否出现往复的类圆形轨迹，如果检测到鼠标出现了往复的类圆形轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在往复的类圆形轨迹，则启动直线轨迹检测子模块一；

直线轨迹检测子模块一，用于检测鼠标在白屏阶段是否出现同方向反复的直线轨迹，如果检测到鼠标出现了同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在同方向反复的直线轨迹，则启动直线轨迹检测子模块二；

直线轨迹检测子模块二，用于检测鼠标在白屏阶段是否出现不同方向反复的直线轨迹，如果检测到鼠标出现了不同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段，则向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块；

浏览器自动刷新模块，用于在直线轨迹检测子模块二没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段时，对浏览器当前网页进行自动刷新；当所述浏览器自动刷新模块连续两次进行当前网页的自动刷新后，当前网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

上述技术方案的技术原理为：利用类圆形轨迹检测子模块检测鼠标在白屏阶段是否出现往复的类圆形轨迹，如果检测到鼠标出现了往复的类圆形轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在往复的类圆形轨迹，则启动直线轨迹检测子模块一；然后，通过直线轨迹检测子模块一检测鼠标在白屏阶段是否出现同方向反复的直线轨迹，如果检测到鼠标出现了同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在同方向反复的直线轨迹，则启动直线轨迹检测子模块二；随后，通过直线轨迹检测子模块二检测鼠标在白屏阶段是否出现不同方向反复的直线轨迹，如果检测到鼠标出现了不同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段，则向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块；最后，利用浏览器自动刷新模块在直线轨迹检测子模块二没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段时，对浏览器当前网页进行自动刷新；当所述浏览器自动刷新模块连续两次进行当前网页的自动刷新后，当前网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

上述技术方案的技术效果：鼠标动态轨迹的检测，通过对用户访问网页的等待过程中，常出现的移动鼠标轨迹的检测，来真实反映用户访问首屏时的操作状态，根据操作状态进而能够反映出页面的加载状态，如果出现上述的几种鼠标移动轨迹，说明用户在页面访问时存在等待或等待时间较长的情况，进而说明页面记载时间过长，即白屏时间过长；另一方面，如果在未检测到上述几种鼠标移动轨迹的情况下，网页仍处于白屏状态，则立即通过浏览器自动刷新模块对当前网页进行处理，能够有效避免在未检测到用户进行上述设定检测的鼠标轨迹时，浏览器停留在白屏状态而不动作的情况发生。通过这种方式检测白屏时间能够有效提高白屏时间的检测效率，真实反映用户情况的方式来检测白屏时间，能够更有效的提高白屏时间检测的准确性；同时，通过自动刷新功能能够有效防止浏览器停留在白屏状态而不动作的情况发生，有效实现浏览器的自行监控和问题自行处理的功能，并提高监控和自行处理的准确度和效率。

本发明的一个实施例，所述白屏情况确定模块检测白屏时间的过程包括：

步骤一、当浏览器页面被访问并进入白屏阶段时，检测白屏阶段的鼠标状态，如果鼠标为静止状态，则检测鼠标静止状态的时间，当鼠标静止状态的时间超过预设的白屏时间，则将白屏时间超时信息反馈给视图模块；如果鼠标为移动状态，导致无法通过鼠标静止状态与预设白屏时间进行对比来判断白屏时间是否超时时，则转至步骤二；

步骤二、检测鼠标的移动轨迹是否为往复的类圆形轨迹，如果鼠标轨迹出现往复的类圆形轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现往复的类圆形轨迹，则转至步骤三；

步骤三、检测鼠标的移动轨迹是否为同方向反复的直线轨迹，如果鼠标轨迹出现同方向反复的直线轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现同方向反复的直线轨迹，则转至步骤四；

步骤四、检测鼠标的移动轨迹是否为不同方向反复的直线轨迹，如果鼠标轨迹出现不同方向反复的直线轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现部同方向反复的直线轨迹且网页仍处于白屏阶段，则转至步骤五；

步骤五、向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块对当前网页进行自动刷新，并重复步骤一至步骤四的内容，当第二次浏览器自动刷新网页并重复步骤一至步骤四后网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

上述技术方案的技术效果：通过白屏时间内鼠标静止时长和鼠标动态轨迹的动静两种鼠标状态检测来确定首屏加载过程的白屏时间，能够有效确定白屏时间，同时，结合鼠标动态轨迹的检测，通过真实反映用户访问首屏时的操作状态，根据操作状态进而能够反映出页面的加载状态，有效提高白屏时间检测的准确性。另一方面，通过自动刷新功能能够有效防止浏览器停留在白屏状态而不动作的情况发生，有效实现浏览器的自行监控和问题自行处理的功能，并提高监控和自行处理的准确度和效率。

本发明的一个实施例，所述鼠标状态检测子模块，用于检测鼠标状态是静止状态还是移动状态，并根据所述鼠标状态启动静止状态监测子模块或鼠标轨迹监测子模块，其具体过程如下：

步骤1、建立坐标系；

以鼠标初始所在位置为坐标原点，以水平向右为x轴正向，竖直向上为y轴正向建立笛卡尔直角坐标系，t₀时刻所述鼠标所在位置为(x₀,y₀)，t₁时刻所述鼠标所在位置为(x,y)；

步骤2、计算变化率；

其中，a为t₀时刻到t₁时刻的变化率，ε为灵敏度系数，Δt为t₁时刻与t₀时刻的时间差，

步骤3、计算t₁时刻的速度；

其中，v(t₁)为t₁时刻的速度，v(t₀)为t₀时刻的瞬时速度，a为t₀时刻到t₁时刻的变化率；

步骤4、所述鼠标状态判断；

当v(t₁)＝0时，所述鼠标t₁时刻的状态为静止状态，否则所述鼠标为移动状态；

步骤5、当所述鼠标状态为静止状态时，启动静止状态监测子模块对鼠标静止时间进行监测；当所述鼠标为移动状态时，启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测。

有益效果：通过上述实施例，首先选定一个笛卡尔直角坐标系，在t₀～t₁时间段内，通过所述鼠标的位移的变化计算所述鼠标的变化率，然后再通过计算末时刻所述鼠标的速度来判断所述鼠标的状态，最后根据所述鼠标的状态启动相应模块进行监测。通过上述技术，不仅可以根据所述鼠标的速度来判断所述鼠标的状态，而且，每一时刻的鼠标状态都可以通过上述技术获得，同时，所述鼠标的速度还可以用于鼠标轨迹监测子模块中，用于预测所述鼠标的移动轨迹有助于实时检测所述鼠标的移动轨迹，此外，在此实施例中，t₀～t₁时间段取值越小，所涉及到的运算数据越准确。

显然，本领域的技术人员可以对发明进行各种改动和变型而不脱离发明的精神和范围。这样，倘若发明的这些修改和变型属于发明权利要求及其等同技术的范围之内，则发明也意图包含这些改动和变型在内。

Claims (8)

1.一种可与后端架构分离开发的浏览器前端架构系统，其特征在于，所述浏览器前端架构系统包括：

访问层，用于执行对浏览器的访问操作；

HTML单页面应用模块，用于利用单页面应用的方式对浏览器所展示的业务页面进行开发，构建业务页面的应用内容；

视图模块，用于通过资源预加载、图片格式转换以及组件加载的方式将所述HTML单页面应用模块构建的业务页面应用内容展示出来，并实现人与业务页面交互功能；

webpack模块打包器，用于对视图模块中的预加载资源文件进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源；

控制模块，用于当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将数据处理结果发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库；所述浏览器前端架构系统还包括白屏情况确定模块和白屏信息反馈模块；

所述白屏情况确定模块，用于用户启动浏览器进行网页访问时，根据白屏期间的鼠标动、静状态来监控浏览器当前页面被访问时的白屏情况；

所述白屏信息反馈模块，用于白屏情况确定模块在确认白屏时间超时后，将白屏时间超时信息反馈给视图模块。

2.根据权利要求1所述浏览器前端架构系统，其特征在于，所述视图模块包括：

资源预加载子模块，用于浏览器首屏被访问之前，将浏览器首屏的页面资源提前进行加载；

图片转换子模块，用于对资源预加载过程中出现的图片资源进行格式转换，将资源中的图片转换为SVG格式图片；

组件加载子模块，用于在资源预加载的同时，对浏览器首屏的网页组件进行加载。

3.根据权利要求2所述浏览器前端架构系统，其特征在于，所述视图模块还包括：

时间信息接收子模块，用于接收浏览器页面展示过程中白屏信息反馈模块发送的白屏时间超时的时间检测信息；

网络状态检测子模块，用于在时间信息接收子模块接收到时间检测信息后，进行网络状态检测，如果首屏访问当前存在网络故障问题，则在首屏页面上显示网络故障状态；如果首屏访问当前无网络故障问题，则向资源重置子模块发出资源重置指令；

资源重置子模块，用于在接收到网络状态检测子模块和白屏情况确定模块发来的资源重置指令后，重新进行网页的资源加载；

浏览器故障提示子模块，用于在资源重置后时间信息接收子模块仍然持续接收到白屏时间超时的检测信息时，在页面上提示浏览器故障信息；以及，当白屏情况确定模块对浏览器当前网页连续自动刷新两次后当前网页仍处于白屏阶段时，在页面上提示浏览器故障信息。

4.根据权利要求1所述浏览器前端架构系统，其特征在于，所述控制模块包括

Vue组件子模块，用于进行Vue的单文件组件形式开发，使浏览器的业务逻辑处理和浏览器的页面视图展示处理分别进行，互不影响；

页面组件子模块，用于进行登录页面和首页页面的构建，以及进行首页面板自定义配置、CRON表达式可视化配置和节假日设置；

状态管理模块，用于通过集中式存储方式管理所有组件的状态，并根据浏览器运行的相应规则保证所有组件的状态在系统允许的范围内进行变化。

5.根据权利要求1所述浏览器前端架构系统，其特征在于，所述白屏情况确定模块包括：

鼠标状态检测子模块，用于当浏览器页面被访问并进入白屏阶段时检测鼠标状态是静止状态还是移动状态，如果鼠标状态为静止状态，则启动静止状态监测子模块对鼠标静止时间进行监测；如果鼠标为移动状态，则启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测；

静止状态监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于静止状态后，实时监测鼠标的静止时间，当鼠标静止状态的时间超过预设的白屏时间时，则启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；

鼠标轨迹监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于移动状态后，实时检测鼠标的移动轨迹，当检测到鼠标出现往复的类圆形轨迹、同方向反复的直线轨迹和不同方向反复的直线轨迹时，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块。

6.根据权利要求5所述浏览器前端架构系统，其特征在于，所述鼠标轨迹监测子模块包括：

类圆形轨迹检测子模块，用于检测鼠标在白屏阶段是否出现往复的类圆形轨迹，如果检测到鼠标出现了往复的类圆形轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在往复的类圆形轨迹，则启动直线轨迹检测子模块一；

直线轨迹检测子模块一，用于检测鼠标在白屏阶段是否出现同方向反复的直线轨迹，如果检测到鼠标出现了同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在同方向反复的直线轨迹，则启动直线轨迹检测子模块二；

直线轨迹检测子模块二，用于检测鼠标在白屏阶段是否出现不同方向反复的直线轨迹，如果检测到鼠标出现了不同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段，则向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块；

浏览器自动刷新模块，用于在直线轨迹检测子模块二没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段时，对浏览器当前网页进行自动刷新；当所述浏览器自动刷新模块连续两次进行当前网页的自动刷新后，当前网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

7.根据权利要求5所述浏览器前端架构系统，其特征在于，所述白屏情况确定模块检测白屏时间的过程包括：

步骤一、当浏览器页面被访问并进入白屏阶段时，检测白屏阶段的鼠标状态，如果鼠标为静止状态，则检测鼠标静止状态的时间，当鼠标静止状态的时间超过预设的白屏时间，则将白屏时间超时信息反馈给视图模块；如果鼠标为移动状态，导致无法通过鼠标静止状态与预设白屏时间进行对比来判断白屏时间是否超时时，则转至步骤二；

步骤二、检测鼠标的移动轨迹是否为往复的类圆形轨迹，如果鼠标轨迹出现往复的类圆形轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现往复的类圆形轨迹，则转至步骤三；

步骤三、检测鼠标的移动轨迹是否为同方向反复的直线轨迹，如果鼠标轨迹出现同方向反复的直线轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现同方向反复的直线轨迹，则转至步骤四；

步骤四、检测鼠标的移动轨迹是否为不同方向反复的直线轨迹，如果鼠标轨迹出现不同方向反复的直线轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现部同方向反复的直线轨迹且网页仍处于白屏阶段，则转至步骤五；

步骤五、向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块对当前网页进行自动刷新，并重复步骤一至步骤四的内容，当第二次浏览器自动刷新网页并重复步骤一至步骤四后网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。

8.根据权利要求5所述浏览器前端架构系统，其特征在于，

所述鼠标状态检测子模块，用于检测鼠标状态是静止状态还是移动状态，并根据所述鼠标状态启动静止状态监测子模块或鼠标轨迹监测子模块，其具体过程如下：

步骤1、建立坐标系；

以鼠标初始所在位置为坐标原点，以水平向右为x轴正向，竖直向上为y轴正向建立笛卡尔直角坐标系，t₀时刻所述鼠标所在位置为(x₀,y₀)，t₁时刻所述鼠标所在位置为(x,y)；

步骤2、计算变化率；

其中，a为t₀时刻到t₁时刻的变化率，ε为灵敏度系数，Δt为t₁时刻与t₀时刻的时间差，

步骤3、计算t₁时刻的速度；

其中，v(t₁)为t₁时刻的速度，v(t₀)为t₀时刻的瞬时速度，a为t₀时刻到t₁时刻的变化率；

步骤4、所述鼠标状态判断；

当v(t₁)＝0时，所述鼠标t₁时刻的状态为静止状态，否则所述鼠标为移动状态；

步骤5、当所述鼠标状态为静止状态时，启动静止状态监测子模块对鼠标静止时间进行监测；当所述鼠标为移动状态时，启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测。

Images