CN102799640A - 页面加载装置和页面加载方法 - Google Patents

Abstract

本发明提供了一种页面加载装置，包括：描述文件生成单元，针对页面中的应用所引用的每个外部文件生成一个描述文件，描述文件中包括关联描述文件与应用的唯一标识、关联描述文件与外部文件的文件标识；页面加载单元，在需要加载页面时，解析页面中的应用，根据应用对应的描述文件加载与应用对应的外部文件。在该技术方案中，通过针对每个外部文件生成一个描述文件，从而在加载外部文件时，可以通过唯一标识从应用关联到描述文件，在通过文件标识从描述文件关联到与应用对应的外部文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率。本发明还提供了一种页面加载方法，可以动态添加系统控件以及动态地修改外部文件名称，实现了页面的动态加载。

Description

页面加载装置和页面加载方法

技术领域

本发明涉及页面加载技术领域，具体而言，涉及一种页面加载装置和一种页面加载方法。

背景技术

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

根据实际的应用场景，根据需要仅仅加载页面所需的文件从而提高页面的加载速度是一个重要的课题，即按需加载。在实现页面按需加载的同时，如果系统需要添加额外的一个文件，而这个文件在已经实现的每个页面中都需要引入，在这样的情况下，修改每个现有的页面会严重影响页面的加载效率；或者如果需要修改已加载的外部文件的文件名，则需要重新加载该文件，也会严重影响页面的加载效率。

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

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

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

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

因此，需要一种新的页面加载装置，在提高页面加载速度的同时，可以动态给系统添加额外需要引用的文件或修改引用的文件名，而不需要修改现成的每个页面，从而提高整个系统的可扩展性。

发明内容

本发明所要解决的技术问题在于，提供一种新的页面加载装置，在提高页面加载速度的同时，可以动态给系统添加额外需要引用的文件或修改引用的文件名，而不需要修改现成的每个页面，从而提高整个系统的可扩展性。

有鉴于此，本发明提供了一种页面加载装置，包括：描述文件生成单元，针对页面中的应用所引用的每个外部文件生成一个描述文件，所述描述文件中包括关联所述描述文件与所述应用的唯一标识、关联所述描述文件与所述外部文件的文件标识；页面加载单元，在需要加载所述页面时，解析所述页面中的应用，根据所述应用对应的描述文件加载与所述应用对应的外部文件。在该技术方案中，通过针对每个外部文件生成一个描述文件，从而在加载外部文件时，可以通过唯一标识从应用关联到描述文件，在通过文件标识从描述文件关联到与应用对应的外部文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率。其中，在WEB页面中，所谓的应用例如可以是布局或者控件，而所谓的外部文件例如可以是JS文件或CSS文件等。

优选地，所述描述文件生成单元还用于，当所述页面需要引用额外的外部文件时，针对该额外的外部文件生成一个对应的描述文件。在该技术方案中，在系统需要加载额外的外部文件时，不需要将每个需要加载该外部文件的页面均重新加载，只需生成一个相应的描述文件，再根据新生成的描述文件完成该外部文件的加载即可，实现了页面的动态加载，提高了页面的加载效率。

优选地，所述的页面加载装置还包括：标识修改单元，当需要所述页面需要加载的外部文件的文件名改变时，对该外部文件对应的描述文件中的文件标识进行修改。在该技术方案中，在已加载的外部文件的文件名修改时，不需要重新加载该外部文件，只需要修改相应的描述文件即可，而不需要修改每个引入该外部文件的页面，提高了页面的加载效率。

优选地，所述描述文件还包括使用范围字段，用于标识相应的外部文件所对应的页面配置方式；以及，在加载所述页面时，根据所述页面的配置方式选择相应的描述文件。在该技术方案中，通过在描述文件中增加使用范围字段，从而使该技术方案可以适用于不同的页面配置方式，例如app应用或page应用等，通过使用范围字段可以根据页面的配置方式选择相应的描述文件，扩展了本发明中技术方案的使用范围。

优选地，所述描述文件还包括依赖类字段，用于标识该描述文件对应的外部文件与其它外部文件的依赖关系；以及，在加载所述页面时，如果所述应用对应的外部文件依赖于其它外部文件，则同时加载所述其它外部文件。在该技术方案中，通过依赖类字段可将相互依赖的外部文件之间进行关联，而不需要将所有的外部文件均与应用关联，使整个页面加载的逻辑性更强，效率更高。

本发明还提供了一种页面加载方法，针对页面的应用所引用的每个外部文件生成一个描述文件，所述描述文件中包括关联所述描述文件与所述应用的唯一标识、关联所述描述文件与所述外部文件的文件标识；在需要加载所述页面时，解析所述页面中的应用，根据所述应用对应的描述文件加载与所述应用对应的外部文件。在该技术方案中，通过针对每个外部文件生成一个描述文件，从而在加载外部文件时，可以通过唯一标识从应用关联到描述文件，在通过文件标识从描述文件关联到与应用对应的外部文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率。其中，在WEB页面中，所谓的应用例如可以是布局或者控件，而所谓的外部文件例如可以是JS文件或CSS文件等。

优选地，当所述页面需要引用额外的外部文件时，针对该额外的外部文件生成一个对应的描述文件。在该技术方案中，在系统需要加载额外的外部文件时，不需要将每个需要加载该外部文件的页面均重新加载，只需生成一个相应的描述文件，再根据新生成的描述文件完成该外部文件的加载即可，实现了页面的动态加载，提高了页面的加载效率。

优选地，当需要所述页面需要加载的外部文件的文件名改变时，对该外部文件对应的描述文件中的文件标识进行修改。在该技术方案中，在已加载的外部文件的文件名修改时，不需要重新加载该外部文件，只需要修改相应的描述文件即可，而不需要修改每个引入该外部文件的页面，提高了页面的加载效率。

优选地，所述描述文件还包括使用范围字段，用于标识相应的外部文件所对应的页面配置方式；以及，在加载所述页面时，根据所述页面的配置方式选择相应的描述文件。在该技术方案中，通过在描述文件中增加使用范围字段，从而使该技术方案可以适用于不同的页面配置方式，例如app应用或page应用等，通过使用范围字段可以根据页面的配置方式选择相应的描述文件，扩展了本发明中技术方案的使用范围。

优选地，所述描述文件还包括依赖类字段，用于标识该描述文件对应的外部文件与其它外部文件的依赖关系；以及，在加载所述页面时，如果所述应用对应的外部文件依赖于其它外部文件，则同时加载所述其它外部文件。在该技术方案中，通过依赖类字段可将相互依赖的外部文件之间进行关联，而不需要将所有的外部文件均与应用关联，使整个页面加载的逻辑性更强，效率更高。

综上所述，通过针对每个外部文件生成一个描述文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率；在系统需要加载额外的外部文件时，只需生成一个相应的描述文件，再根据新生成的描述文件完成该外部文件的加载即可，以及在已加载的外部文件的文件名修改时，只需要修改相应的描述文件即可，实现了页面的动态加载，提高了页面的加载效率。

附图说明

图1是根据本发明实施例的页面加载装置的框图；

图2是根据本发明实施例的页面加载方法的流程图；

图3是根据本发明实施例的页面加载方法的流程图；

图4是根据本发明实施例的描述文件的解析过程的流程图；

图5是根据本发明实施例的页面解析的过程的流程图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。

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

下面结合附图和实施例对本发明做进一步说明。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

如图1所示，本发明提供了一种页面加载装置100，包括：描述文件生成单元102，针对页面中的应用所引用的每个外部文件生成一个描述文件，描述文件中包括关联描述文件与应用的唯一标识、关联描述文件与外部文件的文件标识；页面加载单元104，在需要加载页面时，解析页面中的应用，根据应用对应的描述文件加载与应用对应的外部文件。在该技术方案中，通过针对每个外部文件生成一个描述文件，从而在加载外部文件时，可以通过唯一标识从应用关联到描述文件，在通过文件标识从描述文件关联到与应用对应的外部文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率。

其中，在WEB页面中，所谓的应用例如可以是布局或者控件，而所谓的外部文件例如可以是JS文件或CSS文件等。具体而言：

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

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

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

优选地，描述文件生成单元102还用于，当页面需要引用额外的外部文件时，针对该额外的外部文件生成一个对应的描述文件。在该技术方案中，在系统需要加载额外的外部文件时，不需要将每个需要加载该外部文件的页面均重新加载，只需生成一个相应的描述文件，再根据新生成的描述文件完成该外部文件的加载即可，实现了页面的动态加载，提高了页面的加载效率。

优选地，的页面加载装置100还包括：标识修改单元106，当需要页面需要加载的外部文件的文件名改变时，对该外部文件对应的描述文件中的文件标识进行修改。在该技术方案中，在已加载的外部文件的文件名修改时，不需要重新加载该外部文件，只需要修改相应的描述文件即可，而不需要修改每个引入该外部文件的页面，提高了页面的加载效率。

优选地，描述文件还包括使用范围字段，用于标识相应的外部文件所对应的页面配置方式；以及，在加载页面时，根据页面的配置方式选择相应的描述文件。在该技术方案中，通过在描述文件中增加使用范围字段，从而使该技术方案可以适用于不同的页面配置方式，例如app应用或page应用等，通过使用范围字段可以根据页面的配置方式选择相应的描述文件，扩展了本发明中技术方案的使用范围。

优选地，描述文件还包括依赖类字段，用于标识该描述文件对应的外部文件与其它外部文件的依赖关系；以及，在加载页面时，如果应用对应的外部文件依赖于其它外部文件，则同时加载其它外部文件。在该技术方案中，通过依赖类字段可将相互依赖的外部文件之间进行关联，而不需要将所有的外部文件均与应用关联，使整个页面加载的逻辑性更强，效率更高。

本发明还提供了一种页面加载方法，包括：针对页面的应用所引用的每个外部文件生成一个描述文件，描述文件中包括关联描述文件与应用的唯一标识、关联描述文件与外部文件的文件标识；在需要加载页面时，解析页面中的应用，根据应用对应的描述文件加载与应用对应的外部文件。在该技术方案中，通过针对每个外部文件生成一个描述文件，从而在加载外部文件时，可以通过唯一标识从应用关联到描述文件，在通过文件标识从描述文件关联到与应用对应的外部文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率。其中，在WEB页面中，所谓的应用例如可以是布局或者控件，而所谓的外部文件例如可以是JS文件或CSS文件等。

优选地，当页面需要引用额外的外部文件时，针对该额外的外部文件生成一个对应的描述文件。在该技术方案中，在系统需要加载额外的外部文件时，不需要将每个需要加载该外部文件的页面均重新加载，只需生成一个相应的描述文件，再根据新生成的描述文件完成该外部文件的加载即可，实现了页面的动态加载，提高了页面的加载效率。

优选地，当需要页面需要加载的外部文件的文件名改变时，对该外部文件对应的描述文件中的文件标识进行修改。在该技术方案中，在已加载的外部文件的文件名修改时，不需要重新加载该外部文件，只需要修改相应的描述文件即可，而不需要修改每个引入该外部文件的页面，提高了页面的加载效率。

优选地，描述文件还包括使用范围字段，用于标识相应的外部文件所对应的页面配置方式；以及，在加载页面时，根据页面的配置方式选择相应的描述文件。在该技术方案中，通过在描述文件中增加使用范围字段，从而使该技术方案可以适用于不同的页面配置方式，例如app应用或page应用等，通过使用范围字段可以根据页面的配置方式选择相应的描述文件，扩展了本发明中技术方案的使用范围。

优选地，描述文件还包括依赖类字段，用于标识该描述文件对应的外部文件与其它外部文件的依赖关系；以及，在加载页面时，如果应用对应的外部文件依赖于其它外部文件，则同时加载其它外部文件。在该技术方案中，通过依赖类字段可将相互依赖的外部文件之间进行关联，而不需要将所有的外部文件均与应用关联，使整个页面加载的逻辑性更强，效率更高。

本发明中，在整个动态页面的渲染机制的前提是每个布局和控件对应一个JS、CSS文件，在此基础上针对每个布局和控件生成一个描述文件，在页面解析的过程中，根据描述文件按需加载页面所包含布局和控件。下面将对布局和页面的控件描述文件的实现以及建立过程进行详细的描述。

布局的描述文件主要包含以下几个部分：

唯一标识：用于标识描述JS文件的唯一性。

引用的样式：用于标识JS文件的显示样式，即此布局对应的CSS文件。

对应的JS文件：用于标识此文件描述的是哪个布局。

布局解析文件：用于标识如何将页面的描述解析成JS布局的应用。

对应的后台描述文件：布局描述文件对应的后台描述类。

使用范围：布局控件应用的范围。

控件的描述文件主要包含以下几个部分：

唯一标识：用于标识描述JS文件的唯一性。

引用的样式：用于标识控件的显示样式，即此控件对应的CSS文件。

对应的JS文件：用于标识此文件描述的是哪个JS控件。

控件解析文件：用于标识如果将页面的描述解析成JS控件的应用。

对应的后台描述文件：控件描述文件对应的后台描述类。

使用范围：布局控件应用的范围。

依赖类：此JS文件依赖的其他JS文件。

基于上述技术方案，以WEB页面的加载为例，如图2所示，本发明中的页面加载流程如下：

步骤202，针对系统的应用，将引用的外部的JS文件描述为一个对应的描述文件。

步骤204，解析系统需要引用的外部的JS文件的描述文件。

步骤206，解析一个页面应用页面，将步骤202中解析的文件引入到页面中，并加载这些文件。

步骤208，如果系统需要引入额外的引用文件时，只需要添加JS文件及与JS对应的描述文件，而不需要在页面中重新引入JS文件；如果需要改变某个JS文件文件名，不需要修改每个引入此文件的页面，只需要修改描述文件即可。

具体而言，如图3所示，WEB页面的加载流程如下：

步骤302，解析整个WEB页面的应用，解析出整个WEB页面所包含的布局和控件等信息。

步骤304，解析系统的整体布局和控件的对应的描述文件，将布局和控件对应的JS、CSS等文件放入容器中。此容器将在真正需要加载页面的时候调用。

步骤306，执行页面的顶层布局。

步骤308，检测该布局对应的JS、CSS文件是否已经包含在页面加载文件中，如果是，则进入步骤312，如果否，则进入步骤310。

步骤310，引入与该布局对应的JS、CSS文件。

步骤312，加载该布局对应的JS、CSS文件。

步骤314，判断该布局下面是否包含其他子布局，如果是，则进入步骤308，如果否，则进入步骤316。

步骤316，检测顶层布局下是否包括其它控件，如果是，则进入步骤318，如果否，则进入步骤324。

步骤318，检测控件对应的JS、CSS文件是否已经引入，如果是，则进入步骤322，如果否，则进入步骤320。

步骤320，引入与该控件对应的JS、CSS文件。

步骤322，加载该控件对应的JS、CSS文件。

步骤324，判断页面加载是否结束，如果否，则进入步骤308中。

如图4所示，在以上页面的加载过程中，描述文件的解析过程具体如下：

步骤402，将页面加载过程中必须包含的JS、CSS文件导入。

步骤404，判断页面的应用类型，根据页面的类型选择相应的描述文件。例如系统支持app和page两种页面配置方式，不同的配置方式需要引入的JS、CSS等文件有所不同。

步骤406，解析相应的描述文件。

步骤408，解析描述文件的依赖属性，判断是否依赖于其它控件，如果是，则进入步骤410，如果否，则进入步骤412。在解析描述文件的过程中，解析出此描述文件的依赖属性，如果此属性的不为空，则表明此配置文件依赖于其他的描述文件，即此控件是否依赖于其他的控件

步骤410，将依赖的控件描述文件放入容器中。

步骤412，将此布局或控件对应的描述文件放入容器中。

循环执行步骤408至412，直至所有的配置文件均放入容器中。

如图5所示，页面解析的过程具体如下：

步骤502，解析WEB应用页面的文件信息。

步骤504，渲染页面的布局和控件信息。

步骤506，从容器中取出布局的信息。

步骤508，将此布局对应的JS和CSS文件等加入到页面的中。

步骤510，解析布局下的子布局信息。

步骤512，从容器中将子布局对应的JS和CSS文件等加载到页面中。

步骤514，解析页面中包含的控件。

步骤516，从容器中将控件对应的JS和CSS文件等加载到页面中。

步骤518，判断页面是否渲染结束，如果否，则返回至步骤510。

基于以上页面加载方法，如果系统需要引入额外的外部文件时，只需要添加JS文件及与JS对应的描述文件，而不需要在页面中重新引入JS文件；如果需要改变某个JS文件文件名，不需要修改每个引入此文件的页面，只需要修改配置文件即可。

具体如下：

如果系统需要新的控件，给系统添加相应的JS文件和与JS文件对应的配置文件等信息，将需要此控件的页面中引入此控件信息即可；

如果系统需要修改某个布局或控件的对应的文件名等信息，找出与此控件或布局对应的描述文件信息，修改此配置文件信息。

通过以上分析可以看出：可动态配置的提高WEB页面渲染速度的方案在实际的应用中，只加载页面渲染时所需要的文件，在不影响现有系统的情况下，可以实现可扩展的添加额外的文件，从而实现系统的可扩展性；如果需要改变某个JS文件文件名，不需要修改每个引入此文件的页面，只需要修改配置文件即可，从而提高系统的稳定性。

综上所述，通过针对每个外部文件生成一个描述文件，可以快速地找到与所加载应用对应的外部文件，有效地提高了页面地加载效率；在系统需要加载额外的外部文件时，只需生成一个相应的描述文件，再根据新生成的描述文件完成该外部文件的加载即可，以及在已加载的外部文件的文件名修改时，只需要修改相应的描述文件即可，实现了页面的动态加载，提高了页面的加载效率，提高了系统的稳定性。

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

Claims (10)

1.一种页面加载装置，其特征在于，包括：

描述文件生成单元，针对页面中的应用所引用的每个外部文件生成一个描述文件，所述描述文件中包括关联所述描述文件与所述应用的唯一标识、关联所述描述文件与所述外部文件的文件标识；

页面加载单元，在需要加载所述页面时，解析所述页面中的应用，根据所述应用对应的描述文件加载与所述应用对应的外部文件。

2.根据权利要求1所述的页面加载装置，其特征在于，所述描述文件生成单元还用于，当所述页面需要引用额外的外部文件时，针对该额外的外部文件生成一个对应的描述文件。

3.根据权利要求1所述的页面加载装置，其特征在于，还包括：

标识修改单元，当需要所述页面需要加载的外部文件的文件名改变时，对该外部文件对应的描述文件中的文件标识进行修改。

4.根据权利要求1至3中任一项所述的页面加载装置，其特征在于：

所述描述文件还包括使用范围字段，用于标识相应的外部文件所对应的页面配置方式；以及，

在加载所述页面时，根据所述页面的配置方式选择相应的描述文件。

5.根据权利要求1至3中任一项所述的页面加载装置，其特征在于：

所述描述文件还包括依赖类字段，用于标识该描述文件对应的外部文件与其它外部文件的依赖关系；以及，

在加载所述页面时，如果所述应用对应的外部文件依赖于其它外部文件，则同时加载所述其它外部文件。

6.一种页面加载方法，其特征在于：

针对页面的应用所引用的每个外部文件生成一个描述文件，所述描述文件中包括关联所述描述文件与所述应用的唯一标识、关联所述描述文件与所述外部文件的文件标识；

在需要加载所述页面时，解析所述页面中的应用，根据所述应用对应的描述文件加载与所述应用对应的外部文件。

7.根据权利要求6所述的页面加载方法，其特征在于，当所述页面需要引用额外的外部文件时，针对该额外的外部文件生成一个对应的描述文件。

8.根据权利要求6所述的页面加载方法，其特征在于，当需要所述页面需要加载的外部文件的文件名改变时，对该外部文件对应的描述文件中的文件标识进行修改。

9.根据权利要求6至8中任一项所述的页面加载方法，其特征在于：

所述描述文件还包括使用范围字段，用于标识相应的外部文件所对应的页面配置方式；以及，

在加载所述页面时，根据所述页面的配置方式选择相应的描述文件。

10.根据权利要求6至8中任一项所述的页面加载方法，其特征在于：

所述描述文件还包括依赖类字段，用于标识该描述文件对应的外部文件与其它外部文件的依赖关系；以及，

在加载所述页面时，如果所述应用对应的外部文件依赖于其它外部文件，则同时加载所述其它外部文件。

Images