CN106126645A - 一种提高web页面渲染性能的装置 - Google Patents

Abstract

本发明公开一种提高web页面渲染性能的装置,涉及web前端开发领域，在浏览器端用javascript实现了一套DOM接口，其结构主要包括：接口模块、缓冲模块、装载模块和输出模块；其中，缓冲模块通过装载模块获取真实的DOM结构，接口模块接收DOM操作，所有DOM操作通过接口模块流经缓冲模块，通过缓冲模块计算出实际DOM结构需要做的最小变动，最后，通过输出模块提交给浏览器执行，仅仅将需要变化的部分进行实际的浏览器DOM更新。通过本发明够能自动的管理复杂的DOM操作，最大化减少针对DOM的操作，提高web页面渲染性能。

Description

一种提高web页面渲染性能的装置

技术领域

本发明涉及web前端开发领域，具体的说是一种提高web页面渲染性能的装置。

背景技术

在web开发中，有一些业务场景，需要实时的将变化的数据体现到UI层面上，这时就需要对DOM进行操作。调用浏览器的接口对页面的DOM进行操作，从性能上来讲非常的昂贵，所以在web开发中，都尽量避免频繁的对DOM进行操作。但是对于一些业务复杂、功能多样的页面，手工对DOM的操作进行管理，通常是极其复杂的。

本发明提出一种提高web页面渲染性能的装置，使用JAVASCRIPT进行开发，够能自动的管理复杂的DOM操作，提高web页面渲染性能。渲染的流程基本包括：首先，计算CSS（层叠样式表）样式，然后，构建渲染树，确定布局：定位坐标和大小，是否换行，各种position,overflow, z-index属性等，然后根据渲染树对页面进行渲染，正式开画。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

发明内容

本发明针对目前技术发展的需求和不足之处，提供一种提高web页面渲染性能的装置。

本发明所述一种提高web页面渲染性能的装置，解决上述技术问题采用的技术方案如下：所述一种提高web页面渲染性能的装置，在浏览器端用javascript实现了一套DOM接口，其结构主要包括：接口模块、缓冲模块、装载模块和输出模块；其中，缓冲模块通过装载模块获取真实的DOM结构，接口模块接收DOM操作，所有DOM操作通过接口模块流经缓冲模块，通过缓冲模块计算出实际DOM结构需要做的最小变动，再通过输出模块提交给浏览器执行。

优选的，所述接口模块提供一系列操作dom的接口，包括对DOM的创建、删除、修改、追加，整体上覆盖了浏览器源生的DOM接口，使得所有的DOM操作都能够流经缓冲模块。

优选的，所述缓冲模块是该装置的核心，通过装载模块获取真实DOM结构，同时使用javascript来模拟DOM节点；所述缓冲模块中设置有差异比较器，差异比较器对模拟的DOM节点修改前后的差异进行计算，计算出实际DOM结构需要做的最小变动。

优选的，所述缓冲模块中的差异比较器主要负责比较两颗DOM树，以及记录DOM节点之间的差异；所述差异比较器使用一个DOM树算法，只对同级别DOM节点进行比较；每个DOM节点都有一个编号，在深度优先遍历的过程中，若对应的DOM节点有变化，则把相应的变化类别记录下来。

优选的，通过缓存模块的差异比较器，计算出两颗模拟的DOM节点之间的差异；通过输出模块提交给浏览器执行，来修改真实的DOM结构。

优选的，当页面的数据变化时，该装置自动管理页面上所有的dom变化，并且在内存里对这些变化进行统一的标记与识别，最后将最终的汇总结果和更新部分提交给页面渲染。

本发明所述一种提高web页面渲染性能的装置与现有技术相比具有的有益效果是：

本发明在浏览器端使用JAVASCRIPT开发该装置，用javascript构建的DOM树性能比浏览器的DOM要好很多；该装置在浏览器端实现了一套DOM 接口，引入一个缓冲层；进行页面开发时，所有的DOM操作都会通过DOM接口，经过该缓冲层；通过该缓冲层计算实际DOM结构需要做的最小变动，最后，仅仅将需要变化的部分进行实际的浏览器DOM更新；通过本发明够能自动的管理复杂的DOM操作，最大化减少针对DOM的操作，提高web页面渲染性能。

说明书附图

附图1为所述提高web页面渲染性能的装置的构造示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，对本发明所述一种提高web页面渲染性能的装置进一步详细说明。

针对一些业务复杂、功能多样的页面，手工对DOM进行操作极其复杂的问题，本发明公开了一种提高web页面渲染性能的装置，在浏览器端用javascript实现了一套DOM 接口，引入一个缓冲层；进行页面开发时，所有的DOM操作都会通过DOM接口，经过该缓冲层。每当有OM操作的请求时，在缓存层内重新构建整个DOM树；然后，分析整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别；最后，仅仅将需要变化的部分进行实际的浏览器DOM更新。该装置够能自动的管理复杂的DOM操作，最大化减少针对DOM的操作，提高web页面渲染性能。

实施例：

本实施例所述一种提高web页面渲染性能的装置，在浏览器端用javascript实现了一套DOM 接口，如附图1所示，该装置的结构主要包括：接口模块、缓冲模块、装载模块和输出模块；其中，缓冲模块通过装载模块获取真实的DOM结构，接口模块接收DOM操作，所有DOM操作通过接口模块流经缓冲模块，通过缓冲模块计算出实际DOM结构需要做的最小变动，再通过输出模块提交给浏览器执行。

所述接口模块提供一系列操作dom的接口，包括对DOM的创建、删除、修改、追加等，整体上覆盖了浏览器源生的DOM接口，使得所有的DOM操作都能够流经缓冲模块。

所述缓冲模块是该装置的核心，其首先通过装载模块获取真实DOM结构，同时使用javascript来模拟DOM节点，模拟的DOM节点包括便签、属性和子节点。所述缓冲模块中设置有差异比较器。在用JS对象表示DOM结构后，从接口模块进来的DOM操作，首先作用在这个JS模拟的DOM节点上，然后，差异比较器对模拟的DOM节点修改前后的差异进行计算，计算出实际DOM结构需要做的最小变动，最后，通过输出模块提交给浏览器执行。

所述缓冲模块中的差异比较器主要负责比较两颗DOM树，以及记录DOM节点之间的差异。由于，计算两棵树之间差异的常规算法复杂度为O(n³)，一个文档的DOM结构有上百个节点是很正常的情况，这种复杂度无法应用于实际项目。很少存在跨级别的修改DOM节点，通常是修改节点的属性、调整子节点的顺序、添加子节点等。本实施例中，所述差异比较器使用一个有效的DOM树算法，只对同级别DOM节点进行比较，避免了diff算法的复杂性。对DOM树采取同级比较，节点之间的差异可以归结为4种类型：修改节点属性、修改节点文本内容、替换原有节点、调整子节点，包括移动、删除等。每个DOM节点都有一个编号，在深度优先遍历的过程中，若对应的DOM节点有变化，则把相应的变化类别记录下来。

本实施例所述提高web页面渲染性能的装置，通过缓存模块的差异比较器，计算出两颗模拟的DOM节点之间的差异后，然后通过输出模块提交给浏览器执行，来修改真实的DOM结构。

当页面的数据变化时，本实施例所述提高web页面渲染性能的装置，会自动的管理页面上所有的dom变化，并且在内存里对这些变化进行统一的标记与识别，最后将最终的汇总结果和更新部分提交给页面渲染。该装置能够批量处理DOM结构的更新，在一个事件循环中的两次数据变化会被合并，例如：连续的先将节点内容从A变更为B，然后又从B变更为A，那么缓冲层的自动处理机构会认为UI没有发生任何变化。

上述具体实施方式仅是本发明的具体个案，本发明的专利保护范围包括但不限于上述具体实施方式，任何符合本发明的权利要求书的且任何所属技术领域的普通技术人员对其所做的适当变化或替换，皆应落入本发明的专利保护范围。

Claims (6)

1.一种提高web页面渲染性能的装置，其特征在于, 在浏览器端用javascript实现了一套DOM 接口，其结构主要包括：接口模块、缓冲模块、装载模块和输出模块；其中，缓冲模块通过装载模块获取真实的DOM结构，接口模块接收DOM操作，所有DOM操作通过接口模块流经缓冲模块，通过缓冲模块计算出实际DOM结构需要做的最小变动，再通过输出模块提交给浏览器执行。

2.根据权利要求1所述一种提高web页面渲染性能的装置，其特征在于, 所述接口模块提供一系列操作dom的接口，包括对DOM的创建、删除、修改、追加，整体上覆盖了浏览器源生的DOM接口，使得所有的DOM操作都能够流经缓冲模块。

3.根据权利要求2所述一种提高web页面渲染性能的装置，其特征在于, 所述缓冲模块是该装置的核心，通过装载模块获取真实DOM结构，同时使用javascript来模拟DOM节点；所述缓冲模块中设置有差异比较器，差异比较器对模拟的DOM节点修改前后的差异进行计算，计算出实际DOM结构需要做的最小变动。

4.根据权利要求3所述一种提高web页面渲染性能的装置，其特征在于, 所述缓冲模块中的差异比较器主要负责比较两颗DOM树，以及记录DOM节点之间的差异；所述差异比较器使用一个DOM树算法，只对同级别DOM节点进行比较；每个DOM节点都有一个编号，在深度优先遍历的过程中，若对应的DOM节点有变化，则把相应的变化类别记录下来。

5.根据权利要求4所述一种提高web页面渲染性能的装置，其特征在于, 通过缓存模块的差异比较器，计算出两颗模拟的DOM节点之间的差异；通过输出模块提交给浏览器执行，来修改真实的DOM结构。

6.根据权利要求5所述一种提高web页面渲染性能的装置，其特征在于, 当页面的数据变化时，该装置自动管理页面上所有的dom变化，并且在内存里对这些变化进行统一的标记与识别，最后将最终的汇总结果和更新部分提交给页面渲染。