[发明专利]一种基于虚拟DOM的气动数据渲染优化方法

权利要求书

1.权利要求项1。一种基于虚拟DOM的气动数据渲染优化方法，其特征在于，包括以下步骤：

S1：构建气动数据渲染过程中对应的虚拟DOM树；

S2：在用户端呈现基于气动数据构建的虚拟DOM树；

S3：利用改进的diff算法对真实和虚拟的DOM树进行比较；

S4：记录真实与虚拟DOM树之间的差异；

S5：循环递归遍历输出真实与虚拟DOM树的差异记录；

S6：对基于气动数据构建的真实DOM树进行更新，用户端页面进行快速渲染。

2.权利要求项2。根据权利要求1所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于，所述步骤S1中的虚拟DOM树包含有多个节点并且具有多层数据结构。

3.权利要求项3。根据权利要求1所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于，所述步骤S2中包括以下子步骤：

S21：定义渲染函数render对虚拟DOM树中每一层级的每个子节点的属性名以及属性值进行赋值，比如在马赫数为10.02，攻角为25°的情况下，热流密度（q/q_ref）值与测力点（point）是一一对应关系，构建虚拟的气动数据DOM树中包含的属性名有马赫数、攻角、测力点、热流密度，属性值有10.02、25°、point[1,2,……,N]，q/q_ref[value1,value2,……,valueN]；

S22：通过循环递归调用渲染函数render的方法逐个创建气动数据真实DOM树的节点。

4.权利要求项4。根据权利要求1所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于，所述步骤S3中使用改进的diff算法对真实和虚拟的DOM树进行比较，主要包含以下子步骤：

S31：在初始化的范围内，获取气动数据新旧两棵DOM树；

S32：判断节点的层级是否有移动，若是则对旧的DOM树进行更新移位操作，若否则进行子步骤S33；

S33：对新旧两棵DOM树进行深度遍历；

S34：判断组件是否相同，若否则组件更新，替换整个组件中的所有节点，若是则进行子步骤S35；

S35：判断组件中是否存在节点，若否则插入组件并更新节点的信息，若是则进行子步骤S36；

S36：判断组件中对应节点是否更改，若是则删除旧的组件后再创建新的组件，若否则进行子步骤S37；

S37：判断组件的位置是否改变，若是则更新父节点的结构，对比新旧节点的属性差异，有子节点则加入唯一的键值key。

5.权利要求项5。根据权利要求3所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于：所述步骤S4中对比的内容为节点名称、节点属性名称、节点属性值。

6.权利要求项6。.根据权利要求1所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于所述的步骤S5中的具体方法为：

对真实DOM树和虚拟DOM树进行递归遍历，将每遍历到的一个节点就把该节点与另一棵树对应的节点进行对比，并加入唯一的键值key，如果两个节点存在差异进行保存记录，并将保存记录的差异应用更新在真实DOM树上。

7.权利要求项7。根据权利要求6所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于所述的步骤S5中所述的差异类型包括节点内容增加、删除、修改造成的差异，节点位置移动造成的差异，节点名称、节点属性名称、节点属性值改变造成的差异。

8.权利要求项8。根据权利要求1所述的基于虚拟DOM的气动数据渲染优化方法，其特征在于：所述的步骤S6中通过只针对页面中变化的内容做更新的操作来提高页面渲染的速率。

9.权利要求项9。根据权利要求1所述的基于虚拟DOM的气动数据渲染优化方法，实现了对气动数据分系统优化前后浏览器页面对数据的渲染时间进行横向的对比分析，主要使用没有优化的分析系统即原生JS和优化后的分析系统即引入虚拟DOM后两者在渲染同一组气动数据的性能优劣，最终以算术平均值作为测试结果，每次基准测试的平均值为12次，忽略两个最差的结果。