CN104408178A - Web控件加载装置和方法 - Google Patents

Abstract

本发明提供了一种WEB控件加载装置，包括：文件描述单元，用于将外部js文件描述为对应的配置文件；文件解析及计算单元，用于配置文件解析、js文件分析和Hash值计算处理；压缩js文件检查单元，用于根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；压缩js文件加载及应用单元，用于基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。本发明还提供了一种WEB控件加载方法。通过本发明的技术方案，可以在现有的控件加载方式基础上，充分利用单对象类型完成多对象类型的控件加载，建立多对象类型参与的控件加载的通用、统一加载思路。

Description

WEB控件加载装置和方法

 

技术领域

本发明涉及数据处理技术领域，具体地，涉及一种WEB控件加载装置和一种WEB控件加载方法。

 

背景技术

随着Ajax的应用普及，WEB开发已经在在更多的***中得到了广泛的应用并且已经得到了越来越多程序员的重视。在可以很好的提高用户体验的同时，WEB应用一个重要的方面是需要引入大量的JS、CSS等额外文件的信息。而引入JS、CSS文件等也存在不可忽视的缺点就是引入量多了会严重影响WEB应用的速度。因为目前的浏览器在加载外部的如JS等文件时，在同一时间，页面只会加载一个文件。在第一个文件加载并执行完之前，第二个要引入的文件不会下载和执行。所以如果提高JS等的加载及执行速度是需要我们关注的重大课题。

为了提高外部文件如JS等文件的加载及执行速度，在以往的实现中，主要采用以下几种方式：

优先将页面的静态内容先加载完，再来处理JS的调用，采用这样的方案，在页面的加载过程中不会因为个别的JS调用加载缓慢而影响整个页面的加载。但是如果页面引用大量的JS代码时，此方案并不适用。

优化JS代码的的效率，将饮用的js页面做压缩处理，目前一般的网站都采用了此方式。为了提高JS的下载速度，压缩JS文件可以减少JS文件的大小；另外，把多个JS文件合并成一个也能因为减少服务器的响应次数而加快网页下载。但是，如果引用JS文件过多的情况下，压缩也只能部分提高速度，而将多个JS合并会增加JS文件的复杂性，并且降低了代码的可维护性。

让影响页面速度JS函数延迟执行，延迟执行在一定程度上可以提高页面的渲染速度，但还是需要把多个js文件引入。无法解决***中需要引用大量JS文件的加载问题。

因此，需要一种新的控件加载技术，可以在现有的控件加载方式基础上，充分利用单对象类型完成多对象类型的控件加载，建立多对象类型参与的控件加载的通用、统一加载思路。

 

发明内容

本发明正是基于上述问题，提出了一种新的控件加载技术，可以在现有的控件加载方式基础上，充分利用单对象类型完成多对象类型的控件加载，建立多对象类型参与的控件加载的通用、统一加载思路。

有鉴于此，本发明提出了一种WEB控件加载装置，包括：文件描述单元，用于基于待应用的***，将待应用的外部js文件描述为一个对应的配置文件；文件解析及计算单元，用于基于描述的配置文件，进行解析、js文件分析和Hash值计算处理；压缩js文件检查单元，用于根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；压缩js文件加载及应用单元，用于基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。在该技术方案中，只压缩页面所需js，使js的内容最小化；而且可以重用合并的js文件，最大限度的优化页面js的请求数量与流量大小。

在上述技术方案中，优选地，所述文件解析及计算单元，具体包括：配置文件解析模块，用于基于描述的配置文件，进行解析；js文件分析模块，用于基于对配置文件的解析结果，解析相应的页面应用页面，分析得到该页面应用页面包含的js文件；Hash值计算模块，用于根据分析得到的js文件和所有js文件名，计算得到相应的Hash值。在该技术方案中，可以重用合并的js压缩文件，从而有效的提供整个***页面的加载效率。

在上述技术方案中，优选地，所述压缩js文件加载及应用单元，具体包括：压缩js文件加载模块，用于根据计算得到的Hash值，如果从缓存中能够取出值，则直接从缓存中取出压缩js文件的路径，按照该路径加载该压缩js文件。在该技术方案中，在页面加载时，预先计算每个页面包含的页面元素，包含布局跟控件从而实现页面的按需加载。

在上述技术方案中，优选地，所述压缩js文件加载及应用单元，具体还包括：js文件及存储模块，用于根据计算得到的Hash值，如果从缓存中取值结果为空，则将该Hash值包含的所有js文件进行合并压缩，并将合并压缩得到的压缩js文件根据相应的Hash值存入缓存中。在该技术方案中，将所需要的元素对应的前台js文件进行合并，并将合并后的文件进行压缩，从而减少文件的加载量。

在上述技术方案中，优选地，所述压缩js文件加载及应用单元，具体还包括：压缩js文件应用模块，用于根据计算得到的Hash值，如果从缓存中取出的压缩js文件与下一个应用的页面加载时包含的js文件相同，则直接使用该压缩js文件。在该技术方案中，当包含相布局或控件的页面再进行加载时，可以直接利用以前页面使用的合并js文件，从而减少文件压缩合并时间，可以有效的加快文件的加载速度。

根据本发明的又一个方面，还提出了一种WEB控件加载方法，包括：步骤202：基于待应用的***，将待应用的外部js文件描述为一个对应的配置文件；步骤204：基于描述的配置文件，进行解析、js文件分析和Hash值计算处理；步骤206：根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；步骤208：基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。在该技术方案中，只压缩页面所需js，使js的内容最小化；而且可以重用合并的js文件，最大限度的优化页面js的请求数量与流量大小。

在上述技术方案中，优选地，所述步骤204，具体包括：步骤302：基于描述的配置文件，进行解析；步骤304：基于对配置文件的解析结果，解析相应的页面应用页面，分析得到该页面应用页面包含的js文件；步骤306：根据分析得到的js文件和所有js文件名，计算得到相应的Hash值。在该技术方案中，可以重用合并的js压缩文件，从而有效的提供整个***页面的加载效率。

在上述技术方案中，优选地，所述步骤208，具体包括：步骤402：根据计算得到的Hash值，如果从缓存中能够取出值，则直接从缓存中取出压缩js文件的路径，按照该路径加载该压缩js文件。在该技术方案中，在页面加载时，预先计算每个页面包含的页面元素，包含布局跟控件从而实现页面的按需加载。

在上述技术方案中，优选地，所述步骤208，具体还包括：步骤404：根据计算得到的Hash值，如果从缓存中取值结果为空，则将该Hash值包含的所有js文件进行合并压缩，并将合并压缩得到的压缩js文件根据相应的Hash值存入缓存中。在该技术方案中，将所需要的元素对应的前台js文件进行合并，并将合并后的文件进行压缩，从而减少文件的加载量。

在上述技术方案中，优选地，所述步骤208，具体还包括：步骤406：根据计算得到的Hash值，如果从缓存中取出的压缩js文件与下一个应用的页面加载时包含的js文件相同，则直接使用该压缩js文件。在该技术方案中，当包含相布局或控件的页面再进行加载时，可以直接利用以前页面使用的合并js文件，从而减少文件压缩合并时间，可以有效的加快文件的加载速度。

通过以上技术方案，可以在现有的控件加载方式基础上，充分利用单对象类型完成多对象类型的控件加载，建立多对象类型参与的控件加载的通用、统一加载思路。

 

附图说明

图1示出了根据本发明的实施例的WEB控件加载装置的框图；

图2示出了根据本发明的实施例的WEB控件加载方法的流程图；

图3示出了根据本发明的实施例的文件解析及计算单元的流程图；

图4示出了根据本发明的实施例的压缩js文件加载及应用单元的流程图；

图5示出了传统方案和本发明的流程对比图；

图6示出了本发明的实施例的WEB控件加载方法的详细流程图；

图7示出了本发明的实施例的***中布局、控件方案加载体系的原理图；

图8示出了本发明的实施例的布局的原理图；

图9和图10示出了本发明的实施例的JS动态加载的具体实现过程的流程图；

图11和图12示出了本发明的实施例的应用***的实际应用场景测试截面图；

图13示出了本发明的实施例的页面加载图。

 

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

图1示出了根据本发明的实施例的WEB控件加载装置的框图。

如图1所示，根据本发明的实施例的WEB控件加载装置100，包括：文件描述单元102，用于基于待应用的***，将待应用的外部js文件描述为一个对应的配置文件；文件解析及计算单元104，用于基于描述的配置文件，进行解析、js文件分析和Hash值计算处理；压缩js文件检查单元106，用于根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；压缩js文件加载及应用单元108，用于基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。在该技术方案中，只压缩页面所需js，使js的内容最小化；而且可以重用合并的js文件，最大限度的优化页面js的请求数量与流量大小。

在上述技术方案中，优选地，文件解析及计算单元104，具体包括：配置文件解析模块1042，用于基于描述的配置文件，进行解析；js文件分析模块1044，用于基于对配置文件的解析结果，解析相应的页面应用页面，分析得到该页面应用页面包含的js文件；Hash值计算模块1046，用于根据分析得到的js文件和所有js文件名，计算得到相应的Hash值。在该技术方案中，可以重用合并的js压缩文件，从而有效的提供整个***页面的加载效率。

在上述技术方案中，优选地，压缩js文件加载及应用单元108，具体包括：压缩js文件加载模块1082，用于根据计算得到的Hash值，如果从缓存中能够取出值，则直接从缓存中取出压缩js文件的路径，按照该路径加载该压缩js文件。在该技术方案中，在页面加载时，预先计算每个页面包含的页面元素，包含布局跟控件从而实现页面的按需加载。

在上述技术方案中，优选地，压缩js文件加载及应用单元108，具体还包括：js文件及存储模块1084，用于根据计算得到的Hash值，如果从缓存中取值结果为空，则将该Hash值包含的所有js文件进行合并压缩，并将合并压缩得到的压缩js文件根据相应的Hash值存入缓存中。在该技术方案中，将所需要的元素对应的前台js文件进行合并，并将合并后的文件进行压缩，从而减少文件的加载量。

在上述技术方案中，优选地，压缩js文件加载及应用单元108，具体还包括：压缩js文件应用模块1086，用于根据计算得到的Hash值，如果从缓存中取出的压缩js文件与下一个应用的页面加载时包含的js文件相同，则直接使用该压缩js文件。在该技术方案中，当包含相布局或控件的页面再进行加载时，可以直接利用以前页面使用的合并js文件，从而减少文件压缩合并时间，可以有效的加快文件的加载速度。

图2示出了根据本发明的实施例的WEB控件加载方法的流程图。

如图2所示，根据本发明的实施例的WEB控件加载方法，包括：步骤202：基于待应用的***，将待应用的外部js文件描述为一个对应的配置文件；步骤204：基于描述的配置文件，进行解析、js文件分析和Hash值计算处理；步骤206：根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；步骤208：基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。在该技术方案中，只压缩页面所需js，使js的内容最小化；而且可以重用合并的js文件，最大限度的优化页面js的请求数量与流量大小。

在上述技术方案中，优选地，如图3所示，步骤204，具体包括：步骤302：基于描述的配置文件，进行解析；步骤304：基于对配置文件的解析结果，解析相应的页面应用页面，分析得到该页面应用页面包含的js文件；步骤306：根据分析得到的js文件和所有js文件名，计算得到相应的Hash值。在该技术方案中，可以重用合并的js压缩文件，从而有效的提供整个***页面的加载效率。

在上述技术方案中，优选地，如图4所示，步骤208，具体包括：步骤402：根据计算得到的Hash值，如果从缓存中能够取出值，则直接从缓存中取出压缩js文件的路径，按照该路径加载该压缩js文件。在该技术方案中，在页面加载时，预先计算每个页面包含的页面元素，包含布局跟控件从而实现页面的按需加载。

在上述技术方案中，优选地，如图4所示，步骤208，具体还包括：步骤404：根据计算得到的Hash值，如果从缓存中取值结果为空，则将该Hash值包含的所有js文件进行合并压缩，并将合并压缩得到的压缩js文件根据相应的Hash值存入缓存中。在该技术方案中，将所需要的元素对应的前台js文件进行合并，并将合并后的文件进行压缩，从而减少文件的加载量。

在上述技术方案中，优选地，如图4所示，步骤208，具体还包括：步骤406：根据计算得到的Hash值，如果从缓存中取出的压缩js文件与下一个应用的页面加载时包含的js文件相同，则直接使用该压缩js文件。在该技术方案中，当包含相布局或控件的页面再进行加载时，可以直接利用以前页面使用的合并js文件，从而减少文件压缩合并时间，可以有效的加快文件的加载速度。

本发明的技术方案，提供了一种智能的高可用性的WEB控件加载机制，具 体为一种智能的高可用性的可提高WEB页面加载速度的方案，在通常的WEB应用中，往往需要引入大量的外在文件，例如JS文件、CSS文件等。特别是当一个WEB页面根据不同的业务需求展现界面不同时，引入的文件会有大量的增加。在根据实际的应用场景，尽可能减少加载文件量，是提高页面加载速度的重要课题。在页面加载时，预先计算每个页面包含的页面元素，包含布局跟控件从而实现页面的按需加载，同时，将所需要的元素对应的前台js文件进行合并，并将合并后的文件进行压缩，从而减少文件的加载量，加快文件的加载速度。在某个应用领域，多个应用包含的控件是相同的，采用本发明的技术方案提出的方案，可以重用合并的js压缩文件，从而有效的提供整个***页面的加载效率。

本发明的技术方案提出的方案，在页面加载时，预先计算每个页面包含的页面元素，包含布局跟控件从而实现页面的按需加载；同时，将所需要的元素对应的前台js文件进行合并，并将合并后的文件进行压缩，从而减少文件的加载量；同时，当包含相布局或控件的页面再进行加载时，可以直接利用以前页面使用的合并js文件，从而减少文件压缩合并时间，可以有效的加快文件的加载速度。

为了提高JS等文件的加载及执行速度，在以往的实现中，主要采用以下几种方式：

优先将页面的静态内容先加载完，再来处理JS等文件的调用，采用这样的方案，在页面的加载过程中不会因为个别的JS文件调用加载缓慢而影响整个页面的加载。但是如果页面引用大量的动态的JS代码时，此方案并不适用。

优化JS代码的的效率，将引用的JS页面做压缩处理，目前一般的网站都采用了此方式。为了提高JS的下载速度，压缩Js文件可以减少JS文件的大小；另外，把多个JS文件合并成一个也能因为减少服务器的响应次数而加快网页下载。但是，如果引用JS文件过多的情况下，压缩也只能部分提高速度，而将多个JS合并会增加JS文件的复杂性，并且降低了代码的可维护性。

让影响页面速度的JS函数延迟执行，延迟执行在一定程度上可以提高页面的渲染速度，但还是需要把多个JS文件引入。无法解决***中需要引用大量JS文件的加载问题。

与传统压缩方法相比，本发明的技术方案提出的方案只压缩页面所需js，使js的内容最小化。而且可以重用合并的js文件，最大限度的优化页面js的请求数量与流量大小。参见图5。

为了实现上述目标，本发明的技术方案提出了一种智能的高可用性的WEB控件加载机制。本发明技术方案的实现过程如下：

步骤1：针对***的应用，将所需要引用的外部的js文件描述为一个对应的配置文件。

步骤2：解析***引用的外部文件的描述文件。

步骤3：解析一个页面应用页面，分析出此页面包含的js文件。

步骤4：根据步骤3解析出的js文件，根据所有js文件名计算出Hash值。

步骤5：根据步骤4计算的Hash值，从缓存中取值，检查缓存中是否存在此Hash值的压缩js文件。

步骤6：如果步骤5可以取出值，直接从缓存中取出压缩js文件路径，按照路径加载此js压缩文件；如果为空的话，将包含的所有js文件进行合并压缩，跟将其根据Hash值存入缓存中。如果下一个应用的页面加载时包含的js文件相同，则可以直接使用此js压缩文件。

为了更清晰的描述本方案的实现，介绍我们的几个概念:

WEB页面：描述一个业务逻辑的整体过程，一个页面由多个组成部分，主要包括布局和控件。

控件：页面的基本组成部分，在应用***中，控件是一种具有图形表示的对象，它可以显示在屏幕上并与用户实现交互。在我们的应用中，每个控件对应一个JS文件和对与此控件样式的CSS文件描述。

布局：页面的格局的整体配置，可以放置其它控件的容，在整个应用***中，每个布局对应一个JS文件和对此布局样式的CSS文件描述。

具体的流程如图6所示。

***中布局、控件方案加载体系：

在整个页面的渲染过程中，首先需要解析每个布局跟控件对应的js文件，在此基础上方案才能正确实施。整个动态页面的渲染机制的前提是每个布局和控件对应一个JS、CSS文件，在此基础上针对每个布局和控件实现一个描述文件，在页面解析的过程中，根据描述文件按需加载页面所包含布局和控件。参见图7。

从图3可以看出，***本身的布局、控件都是通过xml文件进行描述的，同时，***可以扩展自定义控件，同样是通过xml描述。其中xml文件中会记录布局与控件对应的js文件。

控件的xml文件描述信息有如下部分组成。布局具有类似的描述。参见图8。

加载JS具体过程：

JS动态加载的具体实现过程如图9和图10所示。

对于一个应用***来说，包含相同布局与相同控件的页面的情况是非常多见的，采用这样的压缩方式，可以最大限度的减少js文件的加载量及传输量，从而有效的提高页面加载的速度。参见图11。

图11为采用本发明的技术方案提供的机制页面加载时请求数据，图12是未使用本发明的技术方案机制直接加载js页面的请求数据，从两个图对比中可以看出，采用本发明的技术方案加载机制后可以有效减少请求数及加载量，加载时间有了显著提升。参见图13。

图13是采用本发明的技术方案方案后，加载与图11包含相同控件的页面加载情况，从图13中可以看出，请求时间与从未加载过某个控件组合时加载时间有了很大提升。

通过以上分析可以看出：与传统压缩方法相比，本发明的技术方案提出的方案只压缩页面所需js，使js的内容最小化。而且可以重用合并的js文件，最大限度的优化页面js的请求数量与流量大小。

以上结合附图详细说明了本发明的技术方案，考虑到相关技术中没有简便的、统一的针对复杂类型元数据加载的解决办法。现有的控件加载无法完成有复杂类型参与的控件加载过程。因此，本发明提出了一种WEB控件加载装置和一种WEB控件加载方法，可以在现有的控件加载方式基础上，充分利用单对象类型完成多对象类型的控件加载，建立多对象类型参与的控件加载的通用、统一加载思路。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种WEB控件加载装置，其特征在于，包括：

文件描述单元，用于基于待应用的***，将待应用的外部js文件描述为一个对应的配置文件；

文件解析及计算单元，用于基于描述的配置文件，进行解析、js文件分析和Hash值计算处理；

压缩js文件检查单元，用于根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；

压缩js文件加载及应用单元，用于基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。

2.根据权利要求1所述的WEB控件加载装置，其特征在于，所述文件解析及计算单元，具体包括：

配置文件解析模块，用于基于描述的配置文件，进行解析；

js文件分析模块，用于基于对配置文件的解析结果，解析相应的页面应用页面，分析得到该页面应用页面包含的js文件；

Hash值计算模块，用于根据分析得到的js文件和所有js文件名，计算得到相应的Hash值。

3.根据权利要求1或2所述的WEB控件加载装置，其特征在于，所述压缩js文件加载及应用单元，具体包括：

压缩js文件加载模块，用于根据计算得到的Hash值，如果从缓存中能够取出值，则直接从缓存中取出压缩js文件的路径，按照该路径加载该压缩js文件。

4.根据权利要求3所述的WEB控件加载装置，其特征在于，所述压缩js文件加载及应用单元，具体还包括：

js文件及存储模块，用于根据计算得到的Hash值，如果从缓存中取值结果为空，则将该Hash值包含的所有js文件进行合并压缩，并将合并压缩得到的压缩js文件根据相应的Hash值存入缓存中。

5.根据权利要求4所述的WEB控件加载装置，其特征在于，所述压缩js文件加载及应用单元，具体还包括：

压缩js文件应用模块，用于根据计算得到的Hash值，如果从缓存中取出的压缩js文件与下一个应用的页面加载时包含的js文件相同，则直接使用该压缩js文件。

6.一种WEB控件加载方法，其特征在于，包括：

步骤202：基于待应用的***，将待应用的外部js文件描述为一个对应的配置文件；

步骤204：基于描述的配置文件，进行解析、js文件分析和Hash值计算处理；

步骤206：根据计算处理得到的Hash值，从缓存中取值，检查缓存中是否存在该Hash值的压缩js文件；

步骤208：基于缓存中相应Hash值的压缩js文件的检查结果，加载或合并压缩并存储或应用压缩js文件。

7.根据权利要求6所述的WEB控件加载方法，其特征在于，所述步骤204，具体包括：

步骤302：基于描述的配置文件，进行解析；

步骤304：基于对配置文件的解析结果，解析相应的页面应用页面，分析得到该页面应用页面包含的js文件；

步骤306：根据分析得到的js文件和所有js文件名，计算得到相应的Hash值。

8.根据权利要求6或7所述的WEB控件加载方法，其特征在于，所述步骤208，具体包括：

步骤402：根据计算得到的Hash值，如果从缓存中能够取出值，则直接从缓存中取出压缩js文件的路径，按照该路径加载该压缩js文件。

9.根据权利要求8所述的WEB控件加载方法，其特征在于，所述步骤208，具体还包括：

步骤404：根据计算得到的Hash值，如果从缓存中取值结果为空，则将该Hash值包含的所有js文件进行合并压缩，并将合并压缩得到的压缩js文件根据相应的Hash值存入缓存中。

10.根据权利要求9所述的WEB控件加载方法，其特征在于，所述步骤208，具体还包括：

步骤406：根据计算得到的Hash值，如果从缓存中取出的压缩js文件与下一个应用的页面加载时包含的js文件相同，则直接使用该压缩js文件。