CN118094045A - 一种网页进度反馈方法及系统 - Google Patents

Abstract

本发明公开一种网页进度反馈方法及系统，涉及网页进度反馈技术领域，通过随机地把原来某些时刻上规律且连续的进度值，替换为0值并在其他某些时刻以较大值补偿，并以期望E等效v度量整体速度，从而将进度增量离散化、随机化，引入了视觉感受上的快慢变化、时断时续和差异性，使进度反馈更真实、更接近经验认知，同时可以通过改变E值获得与现有技术方案类似的速度控制效果。相对于现有技术方案，在相同的更新频率下，通过使一定数量的更新时刻对应的增量值为0并忽略渲染，减少了对网页元素的操作次数，减少了一定的性能开销。

Description

一种网页进度反馈方法及系统

技术领域

本发明涉及网页进度反馈技术领域，尤其是涉及一种网页进度反馈方法及系统。

背景技术

目前网页进度反馈系统多采用进度条、非实时同步的方式，相较实时进度同步，具有不依赖后端、实现简便的优点，适用于等待时间大概可知、实时性要求不高的场景，如通用接口等待、静态资源加载。常见进度条有两种形式：

设d(s)为进度条加载完成的总时间，L表示进度条总长度，f为进度条更新频率，更新间隔t为从开始时刻0起的更新时刻，t∈[0,d]，t＝0,ti,2ti,3ti,…，p为进度值。

一种为匀速进度展示。速度为常量，将进度p与时刻t的关系以关系式表示为这种进度条始终匀速变化。

一种为采用缓动函数控制进度展示。例如采用“五次方缓入缓出”函数，在时域连续时，进度p关于t的函数采用此函数控制的进度条，呈现初始较快，而后平滑减缓的效果。

现有的进度反馈方式，无论是匀速还是采用缓动函数，为保持视觉上的连续需要较大的f值，可近似地认为t是连续的，由于p关于t的函数是连续的，因此值域上p也可以认为是连续的。两种方式都具有以下特点：

单次展示时，进度值随更新时刻的变化都是连续可预期的，但值的变化没有随机性，也不会有停顿；

多次展示时，进度的变化趋势只取决于固定的速度或采用的缓动函数，没有差异性。即同一进度条展示多次，每一次的进度随更新时刻的变化都是完全一样的；

由于进度值的变化是连续的，在每个更新时刻进度都要操作页面元素(DOM)来更新进度条。

发明内容

为了解决上述技术问题，本发明提供一种网页进度反馈方法及系统。采用如下的技术方案：

一种网页进度反馈方法，网页进度反馈方法引入随机数生成函数R，网页进度每个更新时刻t产生一个随机增量Δp，对于n∈[0,1]，R(n)∈[0,1]，R(n)的概率密度函数f(n)是常数，令Δp＝R(n)；

将随机增量Δp离散化，随机增量Δp的值向下取整，记为并引入自然数x，令/>使原本每个时刻都恒定的Δp，变为在x·R(n)的值<1的时刻值为0，其他时刻值为≤x的整数；

网页进度每个更新时刻t产生一个随机变量Δp，所有Δp的集合表示为随机过程X(n)，记随机过程X(n)的期望为E[n]，更新时刻总数c＝d·f，c越大，E[n]之和与各Δp之和/>越接近，当c大于等于设定更新时刻总数阈值时E[n]替代v，p＝E[n]·t。

可选的，对于随机增量的期望E[n]，x∈N，n∈[0,1]，n是连续型随机变量，/>E[n]由各区间的期望求和。

通过采用上述技术方案，当匀速进度展示时，p与t的关系式为p＝v·t，任意相邻时刻进度变化量为

为了产生单次展示不规则的快慢变化和多次展示的差异性，需要使Δp具有随机性。引入随机数生成函数R：对于n∈[0,1]，R(n)∈[0,1]，且R(n)的概率密度函数f(n)是一个常数，R在[0,1]范围内均匀地生成随机数。令Δp＝R(n)。

为了产生单次展示的快慢变化、停顿和减少DOM操作，需要将增量离散化。将R(n)的值向下取整，使某些时刻Δt的值为0，记为为了使进度条速度可以由类似v的值可调整，引入自然数x，令/>

每个更新时刻t产生一个随机变量Δp，所有Δp的集合可以表示为随机过程X(n)。数学期望是随机过程内描述随机变量平均值的量，等于随机变量的集中趋势，随机过程产生的随机量越多，数学期望的度量越准确。记随机过程X(n)的期望为E[n]，更新时刻总数c＝d·f，c越大，E[n]之和与各Δp之和/>越接近。当c足够大时，E[n]与步骤1中的v等价，此时E[n]可以用来替代v，p＝E[n]·t。d的取值无法限制，所以f的较大取值也可以保证等效的准确性。

通过随机地把原来某些时刻上规律且连续的进度值替换为0值，并在其他某些时刻以较大值补偿，并以期望E等效v度量整体速度，从而将进度增量离散化、随机化，引入了视觉感受上的快慢变化、时断时续和差异性，使进度反馈更真实、更接近经验认知，同时可以通过改变E值获得与现有技术方案类似的速度控制效果。

相对于现有技术方案，在相同的更新频率下，本提案通过使一定数量的更新时刻对应的增量值为0并忽略渲染，减少了对网页元素的操作次数，减少了一定的性能开销

可选的，步骤1，进度条启动，初始化控制参量；设定更新频率f，启动后每秒执行计算并更新进度f次；设定预期持续时间d，并根据更新频率f和持续时间d计算增量期望E，计算增量期望E和自然数x；

步骤2，初始化进度条，根据进度条长度L，渲染进度条框架并留空内容，设置结束标志F为“否”，设置当前进度标志P为0；

步骤3，创建定时器I，间隔秒执行循环操作Fn；

查询是否接收到外部的结束指令，若是则将结束标志位置标记为是；

判断结束标志F和当前进度标志P：

步骤4，清除定时器I，清除页面中的进度条，进度条关闭；

d为进度条持续时间，L为进度条长度，f为进度条更新频率，t为以0为起始时刻的更新时刻，p为某个更新时刻的进度值，v为平均每个更新时刻进度增量，反映进度条平均速度，ti为更新间隔。

可选的，步骤1中，增量期望E的计算公式为：

计算增量期望由于L无法预知，若每个更新时刻直接输出长度值，将无法预测影响。例如若L较小，但每次增加整数长度，将导致进度突然猛增。因此将数值参量L替换为比例参量100，/>

5.根据权利要求4所述的一种网页进度反馈方法，其特征在于：步骤1中，自然数x的计算公式为：

可选的，步骤3中采用以下方法判断结束标志F和当前进度标志P：

若F为否，且P≠100，调用与R函数等价的浏览器随机数生成器Math.random生成随机数r，对r×x的值向下取整得Δp，将Δp×L得到长度增量ΔL，更新当前进度P＝P+ΔL，将ΔL输出到渲染模块；

若F为是，且P≠100，则提前结束进度，若读取到上次记录的更新当前进度并输出/>到渲染模块；若未读取到，以0.5s作为结束剩余进度的时长，剩余更新次数为/>计算/>并记录，更新当前进度/>并输出/>到渲染模块；

若P＝100，跳出循环操作Fn。

可选的，渲染模块接收到忽略0值，向预留的区间填充渲染指定长度的色块。

一种网页进度反馈系统，包括参数管理模块、计算模块、控制模块和渲染模块；所述参数管理模块与计算模块通信连接，所述计算模块与控制模块通信连接，所述渲染模块分别与计算模块和控制模块通信连接；

所述参数管理模块对输入的网页进度反馈参数进行管理，网页进度反馈参数包括进度条尺寸、展示持续时间、进度条位置和填充颜色；

对内置参数进行管理，内置参数包括更新频率f、当前进度标志P、结束标志F和固定增量；

所述计算模块根据输入参数和内置参数，采用一种网页进度反馈方法计算中间参量和每次进度更新的增量；

所述控制模块控制定时器I循环调用计算模块并输出结果到渲染模块。接收外部的指令，对外部提供立即结束、重置、获取当前进度的功能。

所述渲染模块根据计算模块的每次计算结果，忽略其中的0值，向页面渲染对应长度的色块。

可选的，所述参数管理模块基于浏览器的本地存储模块实现，对应计算机的硬盘；所述计算模块基于浏览器的JavaScript引擎实现，对应计算机的CPU；所述控制模块基于浏览器引擎，对应计算机的内存；所述渲染模块基于浏览器的渲染引擎，对应计算机的GPU。

综上所述，本发明包括以下至少一种有益技术效果：

本发明能提供一种网页进度反馈方法及系统，通过随机地把原来某些时刻上规律且连续的进度值，替换为0值并在其他某些时刻以较大值补偿，并以期望E等效v度量整体速度，从而将进度增量离散化、随机化，引入了视觉感受上的快慢变化、时断时续和差异性，使进度反馈更真实、更接近经验认知，同时可以通过改变E值获得与现有技术方案类似的速度控制效果。

相对于现有技术方案，在相同的更新频率下，通过使一定数量的更新时刻对应的增量值为0并忽略渲染，减少了对网页元素的操作次数，减少了一定的性能开销。

附图说明

图1是本发明一种网页进度反馈方法的流程示意图；

图2是本发明一种网页进度反馈系统的部件连接原理示意图。

具体实施方式

以下结合附图对本发明作进一步详细说明。

本发明实施例公开一种网页进度反馈方法及系统。

参照图1，一种网页进度反馈方法，网页进度反馈方法引入随机数生成函数R，网页进度每个更新时刻t产生一个随机增量Δp，对于n∈[0,1]，R(n)∈[0,1]，R(n)的概率密度函数f(n)是常数，令Δp＝R(n)；

将随机增量Δp离散化，随机增量Δp的值向下取整，记为并引入自然数x，令/>使原本每个时刻都恒定的Δp，变为在x·R(n)的值<1的时刻值为0，其他时刻值为≤x的整数；

网页进度每个更新时刻t产生一个随机变量Δp，所有Δp的集合表示为随机过程X(n)，记随机过程X(n)的期望为E[n]，更新时刻总数c＝d·f，c越大，E[n]之和与各Δp之和/>越接近，当c大于等于设定更新时刻总数阈值时E[n]替代v，p＝E[n]·t。

c的具体值在下文步骤中求出。

对于随机增量的期望E[n]，x∈N，n∈[0,1]，n是连续型随机变量，E[n]由各区间的期望求和。

当匀速进度展示时，p与t的关系式为p＝v·t，任意相邻时刻进度变化量为

为了产生单次展示不规则的快慢变化和多次展示的差异性，需要使Δp具有随机性。引入随机数生成函数R：对于n∈[0,1]，R(n)∈[0,1]，且R(n)的概率密度函数f(n)是一个常数，R在[0,1]范围内均匀地生成随机数。令Δp＝R(n)。

为了产生单次展示的快慢变化、停顿和减少DOM操作，需要将增量离散化。将R(n)的值向下取整，使某些时刻Δt的值为0，记为为了使进度条速度可以由类似v的值可调整，引入自然数x，令/>

每个更新时刻t产生一个随机变量Δp，所有Δp的集合可以表示为随机过程X(n)。数学期望是随机过程内描述随机变量平均值的量，等于随机变量的集中趋势，随机过程产生的随机量越多，数学期望的度量越准确。记随机过程X(n)的期望为E[n]，更新时刻总数c＝d·f，c越大，E[n]之和与各Δp之和/>越接近。当c足够大时，E[n]与步骤1中的v等价，此时E[n]可以用来替代v，p＝E[n]·t。d的取值无法限制，所以f的较大取值也可以保证等效的准确性。

对于随机变量的期望E[n]，x∈N，n∈[0,1]，n是连续型随机变量，/>E[n]可由各区间的期望求和。分别考虑自然数x：

当x>1，x＝2时，将n的取值范围分为三个连续区间，每个区间概率密度函数f(n)均为常函数，每个区间的数学期望记为E[s]。

当x＝3时：

推广到一般情况，引入正整数ɑ。若x∈(ɑ,ɑ+1)，ɑ∈Z：

前ɑ项为等差数列，公差/>ɑ1表示首项，n表示项数，数列的和/>从而

当x<1时，f(n)＝0，

当x＝1时，f(n)＝1，

所以只考虑x>1。

E[n]关于x的关系式为：

由于E[n](x)在x∈[ɑ,ɑ+1)上单调递增，所以

给定期望E[n]＝m(m>0)。由可知2·m<ɑ<2@m+1，由于对2m向上取整的值/>一定落在区间(2·m,2·m+1)内，所以取/>由关系式/>可得/>从而/>

即每个更新时刻产生的进度增量可由与增速v等价的期望E[n]获得。

为了评估随机过程X(n)期望E[n]的准确度，采用蒙特卡洛方法，通过设置一定数量的样本值，即更新时刻总数c，来估计期望值Es[n]，通过比较Es[n]与真实期望值Er[n]的差值D[n]＝|Es[n]-Er[n]|来评价本次随机过程准确度。估计期望值Es[n]为随机值总和的平均，对于系数x，其值的改变不影响随机值函数的函数特征，不影响期望的准确度而只影响值的大小，期望的准确度只与c有关。通过改变c值可以获得D[n]的变化趋势，从而确定c的取值范围。令Er[n]＝m＝0.5，/>通过计算机模拟，不同c值下期望值的准确度为：

可知在c＝500时D[n]＝0.024，期望值偏差率<5％，并随c继续提高呈总体下降趋势。另一方面，目前浏览器的主流刷新率是60Hz，将进度更新频率设定为刷新率，f＝60。考虑令c≥600，则即进度条预期(最长)持续时间≥10s，属于正常范围。因而兼顾准确度和实际实现，取更新时刻总数阈值为600，当c≥600时，E[n]替代v。

通过随机地把原来某些时刻上规律且连续的进度值替换为0值，并在其他某些时刻以较大值补偿，并以期望E等效v度量整体速度，从而将进度增量离散化、随机化，引入了视觉感受上的快慢变化、时断时续和差异性，使进度反馈更真实、更接近经验认知，同时可以通过改变E值获得与现有技术方案类似的速度控制效果。

相对于现有技术方案，在相同的更新频率下，本提案通过使一定数量的更新时刻对应的增量值为0并忽略渲染，减少了对网页元素的操作次数，减少了一定的性能开销。

步骤1，进度条启动，初始化控制参量；设定更新频率f，启动后每秒执行计算并更新进度f次；设定预期持续时间d，并根据更新频率f和持续时间d计算增量期望E，计算增量期望E和自然数x；

步骤2，初始化进度条，根据进度条长度L，渲染进度条框架并留空内容，设置结束标志F为“否”，设置当前进度标志P为0；

步骤3，创建定时器I，间隔秒执行循环操作Fn；

查询是否接收到外部的结束指令，若是则将结束标志位置标记为是；

判断结束标志F和当前进度标志P：

步骤4，清除定时器I，清除页面中的进度条，进度条关闭；

d为进度条持续时间，L为进度条长度，f为进度条更新频率，t为以0为起始时刻的更新时刻，p为某个更新时刻的进度值，v为平均每个更新时刻进度增量，反映进度条平均速度，ti为更新间隔。

步骤1中，增量期望E的计算公式为：

计算增量期望由于L无法预知，若每个更新时刻直接输出长度值，将无法预测影响。例如若L较小，但每次增加整数长度，将导致进度突然猛增。因此将数值参量L替换为比例参量100，/>

步骤1中，自然数x的计算公式为：

步骤3中采用以下方法判断结束标志F和当前进度标志P：

若F为否，且P≠100，调用与R函数等价的浏览器随机数生成器Math.random生成随机数r，对r×x的值向下取整得Δp，将Δp×L得到长度增量ΔL，更新当前进度P＝P+ΔL，将ΔL输出到渲染模块；

若F为是，且P≠100，则提前结束进度，若读取到上次记录的更新当前进度并输出/>到渲染模块；若未读取到，以0.5s作为结束剩余进度的时长，剩余更新次数为/>计算/>并记录，更新当前进度/>并输出/>到渲染模块；

若P＝100，跳出循环操作Fn。

可选的，渲染模块接收到忽略0值，向预留的区间填充渲染指定长度的色块。

参照图2，一种网页进度反馈系统，包括参数管理模块、计算模块、控制模块和渲染模块；参数管理模块与计算模块通信连接，计算模块与控制模块通信连接，渲染模块分别与计算模块和控制模块通信连接；

参数管理模块对输入的网页进度反馈参数进行管理，网页进度反馈参数包括进度条尺寸、展示持续时间、进度条位置和填充颜色；

对内置参数进行管理，内置参数包括更新频率f、当前进度标志P、结束标志F和固定增量；

计算模块根据输入参数和内置参数，采用一种网页进度反馈方法计算中间参量和每次进度更新的增量；

控制模块控制定时器I循环调用计算模块并输出结果到渲染模块。接收外部的指令，对外部提供立即结束、重置、获取当前进度的功能。

渲染模块根据计算模块的每次计算结果，忽略其中的0值，向页面渲染对应长度的色块。

参数管理模块基于浏览器的本地存储模块实现，对应计算机的硬盘；计算模块基于浏览器的JavaScript引擎实现，对应计算机的CPU；控制模块基于浏览器引擎，对应计算机的内存；所述渲染模块基于浏览器的渲染引擎，对应计算机的GPU。

以上均为本发明的较佳实施例，并非以此限制本发明的保护范围，故：凡依本发明的结构、形状、原理所做的等效变化，均应涵盖于本发明的保护范围之内。

Claims (10)

1.一种网页进度反馈方法，其特征在于：网页进度反馈方法引入随机数生成函数R，网页进度每个更新时刻t产生一个随机增量Δp，对于n∈[0,1]，R(n)∈[0,1]，R(n)的概率密度函数f(n)是常数，令Δp＝R(n)；

将随机增量Δp离散化，随机增量Δp的值向下取整，记为并引入自然数x，令/>使原本每个时刻都恒定的Δp，变为在x·R(n)的值<1的时刻值为0，其他时刻值为≤x的整数；

网页进度每个更新时刻t产生一个随机变量Δp，所有Δp的集合表示为随机过程X(n)，记随机过程X(n)的期望为E[n]，更新时刻总数c＝d@f，c越大，E[n]之和与各Δp之和/>越接近，当c大于等于设定更新时刻总数阈值时E[n]替代v，p＝E[n]·t。

2.根据权利要求1所述的一种网页进度反馈方法，其特征在于：

对于随机增量的期望E[n]，x∈N，n∈[0,1]，n是连续型随机变量，E[n]由各区间的期望求和。

3.根据权利要求1所述的一种网页进度反馈方法，其特征在于：包括以下步骤：

步骤1，进度条启动，初始化控制参量；设定更新频率f，启动后每秒执行计算并更新进度f次；设定预期持续时间d，并根据更新频率f和持续时间d计算增量期望E，计算增量期望E和自然数x；

步骤2，初始化进度条，根据进度条长度L，渲染进度条框架并留空内容，设置结束标志F为“否”，设置当前进度标志P为0；

步骤3，创建定时器I，间隔秒执行循环操作Fn；

查询是否接收到外部的结束指令，若是则将结束标志位置标记为是；

判断结束标志F和当前进度标志P：

步骤4，清除定时器I，清除页面中的进度条，进度条关闭；

d为进度条持续时间，L为进度条长度，f为进度条更新频率，t为以0为起始时刻的更新时刻，p为某个更新时刻的进度值，v为平均每个更新时刻进度增量，反映进度条平均速度，ti为更新间隔。

4.根据权利要求3所述的一种网页进度反馈方法，其特征在于：

步骤1中，增量期望E的计算公式为：

5.根据权利要求4所述的一种网页进度反馈方法，其特征在于：步骤1中，自然数x的计算公式为：

6.根据权利要求5所述的一种网页进度反馈方法，其特征在于：步骤3中采用以下方法判断结束标志F和当前进度标志P：

若F为否，且P≠100，调用与R函数等价的浏览器随机数生成器Math.random生成随机数r，对r×x的值向下取整得Δp，将Δp×L得到长度增量ΔL，更新当前进度P＝P+ΔL，将ΔL输出到渲染模块；

若F为是，且P≠100，则提前结束进度，若读取到上次记录的更新当前进度/>并输出/>到渲染模块；若未读取到，以0.5s作为结束剩余进度的时长，剩余更新次数为/>计算/>并记录，更新当前进度/>并输出/>到渲染模块；

若P＝100，跳出循环操作Fn。

7.根据权利要求6所述的一种网页进度反馈方法，其特征在于：渲染模块接收到忽略0值，向预留的区间填充渲染指定长度的色块。

8.根据权利要求6所述的一种网页进度反馈方法，其特征在于：更新时刻总数阈值是600。

9.一种网页进度反馈系统，其特征在于：包括参数管理模块、计算模块、控制模块和渲染模块；所述参数管理模块与计算模块通信连接，所述计算模块与控制模块通信连接，所述渲染模块分别与计算模块和控制模块通信连接；

所述参数管理模块对输入的网页进度反馈参数进行管理，网页进度反馈参数包括进度条尺寸、展示持续时间、进度条位置和填充颜色；

对内置参数进行管理，内置参数包括更新频率f、当前进度标志P、结束标志F和固定增量；

所述计算模块根据输入参数和内置参数，采用权利要求1-8中任一项所述方法计算中间参量和每次进度更新的增量；

所述控制模块控制定时器I循环调用计算模块并输出结果到渲染模块。接收外部的指令，对外部提供立即结束、重置、获取当前进度的功能。

所述渲染模块根据计算模块的每次计算结果，忽略其中的0值，向页面渲染对应长度的色块。

10.根据权利要求9所述的一种网页进度反馈系统，其特征在于：所述参数管理模块基于浏览器的本地存储模块实现，对应计算机的硬盘；所述计算模块基于浏览器的JavaScript引擎实现，对应计算机的CPU；所述控制模块基于浏览器引擎，对应计算机的内存；所述渲染模块基于浏览器的渲染引擎，对应计算机的GPU。