CN104424239A - 资源文件加载方法和装置 - Google Patents

Abstract

本发明提供一种资源文件加载方法和装置。该方法包括：标签加载模块在浏览器运行的前端页面中功能模块的调用下，接收功能模块传送的资源文件地址列表和前端页面中功能模块的下一个功能模块的地址；生成与资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个标签，当标签加载模块判断前端页面中没有标签时，将标签添加到前端页面中，以使浏览器根据标签将对应的资源文件加载到前端页面；在功能模块需要加载的每个资源文件均加载到前端页面后，配置下一个功能模块的地址，使浏览器根据下一个功能模块的地址运行下一个功能模块。本发明避免了浏览器重复加载资源文件的现象，提高了前端页面的加载速度，减小了服务器的负荷。

Description

资源文件加载方法和装置

技术领域

本发明涉及计算机技术，尤其涉及一种资源文件加载方法和装置。

背景技术

浏览器/服务器（Brower/Server，简称B/S）系统中，浏览器运行前端页面中代码向用户展现页面。编写B/S系统的前端页面时，通常按照模块化的思想将功能分解成各个功能模块。各个功能模块在实现时，需要从服务器加载各种资源文件，例如，模块需要用到的javascript组件和css样式表。功能模块可以实现展示功能，也可以实现与用户的交互功能，例如，多个链接文本如何在前端而页中排列展示，可定义一个功能模块来实现，该功能模块实现时需要样式资源文件；又例如，用户点击链接文本后打开另一个页而，可定义一个功能模块来实现，该功能模块实现时需要用到模块资源文件；用户在搜索框中输入文本时，在搜索框的下拉框里为用户展现联想词，也可定义一个功能模块来实现，该功能模块实现时需要用到模块资源文件。

B/S系统的前端页面通常采用静态语言编写，例如HTML语言。对于需要加载资源文件的功能模块，在编写B/S系统的前端页面时，则需要将该功能模块加载的每个资源文件对应的标签均写入前端页面，标签中包括资源文件链接地址。浏览器在运行前端页面时，根据前端页面中每个包括有资源文件链接地址标签从服务器加载资源文件。不同的功能模块有可能会加载相同的资源文件，但在编写前端页面时，是针对每个功能模块分别添加用于加载资源文件的标签，在前端页面中有可能存在两个或两个以上加载同一资源文件的标签，从而浏览器在运行前端页面时，有可能会先后多次加载同一个资源文件。

然而，随着网络技术和计算机硬件系统的发展，B/S系统中前端页面越来越复杂，需要的资源文件也越来越多，一个功能模块有可能需要加载数十个甚至更多的javascript文件和css文件，导致某些资源文件被重复加载的次数会明显增多，并且被重复加载的资源文件数量也会明显增多。这对B/S系统前端页面的加载速度和服务器的压力都有很大影响，同时在编写前端页面时也比较繁琐。

发明内容

本发明提供一种资源文件加载方法和装置，用于提高B/S系统前端页面的加载速度，减少服务器的压力。

本发明提供一种资源文件加载方法，包括：

标签加载模块在浏览器运行的前端页面中功能模块的调用下，接收所述功能模块传送的资源文件地址列表和所述前端页面中所述功能模块的下一个功能模块的地址，所述资源文件地址列表包括当前所述功能模块需要加载的每个资源文件的地址；

所述标签加载模块生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；

对于每个所述标签，当所述标签加载模块判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中，以使所述浏览器根据所述标签将对应的资源文件加载到所述前端页面；

在所述功能模块需要加载的每个资源文件均加载到所述前端页面后，所述标签加载模块配置所述下一个功能模块的地址，使所述浏览器根据所述下一个功能模块的地址运行下一个功能模块。

在上述资源文件加载方法的一个实施例中，可选地，当所述标签加载模块判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中包括：

所述标签加载模块在所述前页端面的所有标签中查找所述标签，如果没有查找到所述标签，将所述标签添加到所述前端页面中。

在上述资源文件加载方法的一个实施例中，可选地，在将所述标签添加到所述前端页面中之后，还包括：所述标签加载模块监测所述标签对应的资源文件的加载状态，若所述标签对应的资源文件加载完成，将所述标签对应的资源文件的状态设置为已加载，否则设置为加载中；

在所述标签加载模块配置所述下一个功能模块的地址之前，还包括：

监测所述功能模块的每个资源文件的状态是否均为已加载，若均为已加载，则确定所述功能模块需要加载的每个资源文件均已加载到所述前端页面。

本发明提供一种资源文件加载装置，包括：

标签加载模块，用于在浏览器运行的前端页面中功能模块的调用下，接收所述功能模块传送的资源文件地址列表和所述前端页面中所述功能模块的下一个功能模块的地址，所述资源文件地址列表包括当前所述功能模块需要加载的每个资源文件的地址；

所述标签加载模块，还用于生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个所述标签，当判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中；

文件加载模块，用于所述标签加载模块在所述前端页面添加标签后，根据所述标签将对应的资源文件加载到所述前端页面；

所述标签加载模块，还用于在所述功能模块需要加载的每个资源文件均加载到所述前端页面后，配置所述下一个功能模块的地址，使所述浏览器根据所述下一个功能模块的地址运行下一个功能模块。

在上述资源文件加载装置的一个实施例中，可选地，所述标签加载模块，还用于生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个所述标签，在所述前页端面的所有标签中查找所述标签，如果没有查找到所述标签，将所述标签添加到所述前端页面中。

在上述资源文件加载装置的一个实施例中，可选地，所述标签加载模块，还用于在将所述标签添加到所述前端页面中之后，监测所述标签对应的资源文件的加载状态，若所述标签对应的资源文件加载完成，将所述标签对应的资源文件的状态设置为已加载，否则设置为加载中；

所述标签加载模块，还用于在配置所述下一个功能模块的地址之前，监测所述功能模块的每个资源文件的状态是否均为已加载，若均为已加载，则确定所述功能模块需要加载的每个资源文件均已加载到所述前端页面。

本发明提供的标签加载模块在功能模块的调用下，生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签，对于每个所述标签，如果所述前端页面中没有所述标签，将所述标签添加到所述前端页面中，使浏览器根据标签加载对应的资源文件。由于，在前端页面没有资源文件对应标签的情况下，标签加载模块才将该标签添加到前端页面，避免了浏览器重复加载资源文件的现象，提高了前端页面的加载速度，减小了服务器的负荷。由于本发明采用了动态添加标签的方法，不需要在前端页面中事先添加每个功能模块需要加载的文件对应的标签，提高了编写前端页面的便捷性。

附图说明

图1为本发明一实施例提供的资源文件加载方法流程图；

图2为本发明另一实施例提供的资源文件加载方法流程图；

图3为本发明一实施例提供的资源文件加载装置结构示意图。

具体实施方式

本发明实施例适用于为B/S系统的前端页面加载实现功能模块需要的资源文件。

图1为本发明一实施例提供的资源文件加载方法流程图。如图1所示，本实施例提供的方法包括：

步骤11：标签加载模块在浏览器运行的前端页面中功能模块的调用下，接收当前功能模块传送的资源文件地址列表和前端页面中当前功能模块的下一个功能模块的地址，所述资源文件地址列表包括当前功能模块需要加载的每个资源文件的地址。

本发明在实现每个功能模块的代码中添加调用标签加载模块的代码。功能模块将需要加载的每个资源文件的地址组织成资源文件地址列表传送给标签加载模块，同时还向标签加载模块传送前端页面中该功能模块的下一个模块的地址。

浏览器运行前端页面中实现功能模块的代码的过程中，执行到调用加载模块的代码时，从该功能模块跳转到标签加载模块运行。标签加载模块执行完成后，浏览器跳转到该功能模块在前面页面中的下一个模块继续运行。

标签加载模块可以是用javascript脚本编写的函数，调用标签加载模块的功能模块向标签加载模块传送两个参数：资源文件地址列表和前端页面中该功能模块的下一个模块的位置。

步骤12：标签加载模块生成与资源文件地址列表中每个资源文件的地址分别对应的标签，对于每个所述标签，当标签加载模块判断前端页面中没有所述标签时，将所述标签添加到前端页面中，以使浏览器根据所述标签将对应的资源文件加载到前端页面。

对于资源文件地址列表中每个资源文件的地址，标签加载模块生成一个与该地址对应的标签，该标签用于从服务器加载资源文件。资源文件分主要分为两类：一类是模块资源文件，通常为javascript文件，对应标签的表现形式为script类型标签；另一类是样式资源文件，通常为css文件，对应标签的表现形式为link类型标签。

对于每个生成的标签，标签加载模块判断前端页面中是否已存在该标签，如果不存在，则将该标签添加到前端页面中。标签加载模块在前端页面中每添加一个标签，浏览器会自动解析插入的标签，从服务器加载该标签对应资源文件。如果前端页面中已存在该标签，可以确定其它功能模块也调用该标签对应的资源文件并已加载到前端页面，为避免重复加载相同的资源文件，标签加载模块不在前端页面中添加该标签。

步骤13：在当前功能模块需要加载的每个资源文件均加载到前端页面后，标签加载模块配置下一个功能模块的地址，使浏览器根据下一个功能模块的地址运行下一个功能模块。

标签加载模块确定当前功能模块需要加载的每个资源文件均加载到前端页面后，根据当前功能模块传送的前端页面中该功能模块的下一个模块的地址，配置当前功能模块的下一个功能模块的地址，使浏览器跳转到当前功能模块在前端页面中的下一个模块运行。

本实施例提供的标签加载模块在功能模块的调用下，生成与资源文件地址列表中每个资源文件的地址分别对应的标签，对于每个标签，如果前端页面中没有标签，将标签添加到前端页面中，以使浏览器根据标签加载对应的资源文件。由于，在前端页面没有资源文件对应标签的情况下，标签加载模块才将该标签添加到前端页面，避免了浏览器重复加载资源文件的现象，提高了前端页面的加载速度，减小了服务器的负荷。由于本实施例采用了动态添加标签的方法，不需要在前端页面中事先添加每个功能模块需要加载的文件对应的标签，提高了编写前端页面的便捷性。

图2为本发明另一实施例提供的资源文件加载方法流程图。在上述实施例的基础上，本实施例提供了详细的实现方法。如图2所示，本实施例提供的方法包括：

步骤21：标签加载模块在浏览器运行的前端页面中功能模块的调用下，接收功能模块传送的资源文件地址列表和前端页面中功能模块的下一个模块的地址，资源文件地址列表包括当前功能模块需要加载的每个资源文件的地址。

步骤22：标签加载模块依次遍历资源文件地址列表中资源文件的地址，每遍历到一个资源文件的地址时，生成与遍历到的资源文件的地址对应的标签，在前页端面的所有标签中查找标签，如果没有查找到标签，将标签添加到前端页面中，直至遍历到资源文件地址列表中每个资源文件的地址。

资源文件分主要分为两类：一类是模块资源文件，通常为javascript文件，对应标签的表现形式为script类型标签；另一类是样式资源文件，通常为css文件，对应标签的表现形式为link类型标签。浏览器根据标签类型从服务器加载标签对应的资源文件。

步骤23：标签加载模块将标签则添加到前端页面中后，监测标签对应的资源文件的加载状态，若标签对应的资源文件加载完成，将标签对应的资源文件的状态设置为已加载，否则设置为加载中。

标签加载模块将每个标签则添加到前端页面中后，监测每个标签对应的资源文件的加载状态。

步骤24：标签加载模块监测功能模块的每个资源文件的状态是否均为已加载，若均为已加载，则确定功能模块需要加载的每个资源文件均已加载到前端页面。

步骤25：在当前功能模块需要加载的每个资源文件均加载到前端页面后，所述标签加载模块配置下一个功能模块的地址，使浏览器根据下一个功能模块的地址运行下一个功能模块。

本实施例提供的方法中，标签加载模块监测功能模块的每个资源文件的加载状态，如果所有资源文件均已载，则使浏览器调转到功能模块在前端页面中的下一个模块运行。

图3为本发明一实施例提供的资源文件加载装置结构示意图。图1对应实施例可以采用本实施例提供的装置来实现。如图3所示，本实施例提供的装置包括：标签加载模块31和文件加载模块32.

标签加载模块31，用于在浏览器运行的前端页面中功能模块的调用下，接收所述功能模块传送的资源文件地址列表和所述前端页面中所述功能模块的下一个功能模块的地址，所述资源文件地址列表包括当前所述功能模块需要加载的每个资源文件的地址；

所述标签加载模块31，还用于生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个所述标签，当判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中；

文件加载模块32，用于所述标签加载模块在所述前端页面添加标签后，根据所述标签将对应的资源文件加载到所述前端页面；

所述标签加载模块31，还用于在所述功能模块需要加载的每个资源文件均加载到所述前端页面后，配置所述下一个功能模块的地址，使所述浏览器根据所述下一个功能模块的地址运行下一个功能模块。

上述各模块的功能可参见图1对应实施例中的描述，在此不再赘述。

本实施例提供的标签加载模块在功能模块的调用下，生成与资源文件地址列表中每个资源文件的地址分别对应的标签，对于每个标签，如果前端页面中没有标签，将标签添加到前端页面中，使文件加载模块根据标签从服务器加载对应的资源文件。由于，在前端页面没有资源文件对应标签的情况下，标签加载模块才将该标签添加到前端页面，避免了文件加载模块重复加载资源文件的现象，提高了前端页面的加载速度，减小了服务器的负荷。由于本实施例采用了动态添加标签的方法，不需要在前端页面中事先添加每个功能模块需要加载的文件对应的标签，提高了编写前端页面的便捷性。

上述实施例的基础上，可选地，在前端页面中插入标签时标签加载模块31的具体功能如下：所述标签加载模块31，还用于生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个所述标签，在所述前页端面的所有标签中查找所述标签，如果没有查找到所述标签，将所述标签添加到所述前端页面中。

上述实施例的基础上，可选地，在确定调用标签模块的功能模块的所有资源文件是否均已加载时，标签加载模块的具体功能如下：

所述标签加载模块31，还用于在将所述标签则添加到所述前端页面中之后，监测所述标签对应的资源文件的加载状态，若所述标签对应的资源文件加载完成，将所述标签对应的资源文件的状态设置为已加载，否则设置为加载中；

所述标签加载模块，还用于在配置所述下一个功能模块的地址之前，监测所述功能模块的每个资源文件的状态是否均为已加载，若均为已加载，则确定所述功能模块需要加载的每个资源文件均已加载到所述前端页面。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (6)

1.一种资源文件加载方法，其特征在于，包括：

标签加载模块在浏览器运行的前端页面中功能模块的调用下，接收所述功能模块传送的资源文件地址列表和所述前端页面中所述功能模块的下一个功能模块的地址，所述资源文件地址列表包括当前所述功能模块需要加载的每个资源文件的地址；

所述标签加载模块生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；

对于每个所述标签，当所述标签加载模块判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中，以使所述浏览器根据所述标签将对应的资源文件加载到所述前端页面；

在所述功能模块需要加载的每个资源文件均加载到所述前端页面后，所述标签加载模块配置所述下一个功能模块的地址，使所述浏览器根据所述下一个功能模块的地址运行下一个功能模块。

2.根据权利要求1所述的方法，其特征在于，当所述标签加载模块判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中包括：

所述标签加载模块在所述前页端面的所有标签中查找所述标签，如果没有查找到所述标签，将所述标签添加到所述前端页面中。

3.根据权利要求2所述的方法，其特征在于：

在将所述标签添加到所述前端页面中之后，还包括：

所述标签加载模块监测所述标签对应的资源文件的加载状态，若所述标签对应的资源文件加载完成，将所述标签对应的资源文件的状态设置为已加载，否则设置为加载中；

在所述标签加载模块配置所述下一个功能模块的地址之前，还包括：

监测所述功能模块的每个资源文件的状态是否均为已加载，若均为已加载，则确定所述功能模块需要加载的每个资源文件均已加载到所述前端页面。

4.一种资源文件加载装置，其特征在于，包括：

标签加载模块，用于在浏览器运行的前端页面中功能模块的调用下，接收所述功能模块传送的资源文件地址列表和所述前端页面中所述功能模块的下一个功能模块的地址，所述资源文件地址列表包括当前所述功能模块需要加载的每个资源文件的地址；

所述标签加载模块，还用于生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个所述标签，当判断所述前端页面中没有所述标签时，将所述标签添加到所述前端页面中；

文件加载模块，用于所述标签加载模块在所述前端页面添加标签后，根据所述标签将对应的资源文件加载到所述前端页面；

所述标签加载模块，还用于在所述功能模块需要加载的每个资源文件均加载到所述前端页面后，配置所述下一个功能模块的地址，使所述浏览器根据所述下一个功能模块的地址运行下一个功能模块。

5.根据权利要求4所述的装置，其特征在于，所述标签加载模块，还用于生成与所述资源文件地址列表中每个资源文件的地址分别对应的标签；对于每个所述标签，在所述前页端面的所有标签中查找所述标签，如果没有查找到所述标签，将所述标签添加到所述前端页面中。

6.根据权利要求5所述的装置，其特征在于：

所述标签加载模块，还用于在将所述标签添加到所述前端页面中之后，监测所述标签对应的资源文件的加载状态，若所述标签对应的资源文件加载完成，将所述标签对应的资源文件的状态设置为已加载，否则设置为加载中；

所述标签加载模块，还用于在配置所述下一个功能模块的地址之前，监测所述功能模块的每个资源文件的状态是否均为已加载，若均为已加载，则确定所述功能模块需要加载的每个资源文件均已加载到所述前端页面。