JS文件处理方法和装置

摘要

本发明公开了一种JS文件处理方法和装置。其中，该JS文件处理方法包括：接收网页加载请求，其中，网页加载请求用于请求加载目标网页，目标网页引用第一JS文件，第一JS文件为用于加载第二JS文件的框架文件，第二JS文件为用于实现前端功能的JS文件；基于网页加载请求加载目标网页并在目标网页上加载目标网页引用的第一JS文件；以及通过第一JS文件加载第二JS文件。通过本发明，解决了相关技术中网页加载速度慢的问题。

权利要求

1.一种JS文件处理方法，其特征在于，包括：

接收网页加载请求，其中，所述网页加载请求用于请求加载目标网页，所述目标网页引用第一JS文件，所述第一JS文件为用于加载第二JS文件的框架文件，所述第二JS文件为用于实现前端功能的JS文件；

基于所述网页加载请求加载所述目标网页并在所述目标网页上加载所述目标网页引用的所述第一JS文件；以及通过所述第一JS文件加载所述第二JS文件，

其中，所述第一JS文件携带有所述第二JS文件的位置参数，所述位置参数用于表示所述目标网页加载所述第二JS文件的页面位置。

2.根据权利要求1所述的JS文件处理方法，其特征在于，通过所述第一JS文件加载所述第二JS文件包括：基于所述位置参数通过所述第一JS文件将所述第二JS文件加载到所述页面位置。

3.根据权利要求1所述的JS文件处理方法，其特征在于，所述第二JS文件包括多个JS文件，所述第一JS文件携带有所述多个JS文件的加载顺序，其中，通过所述第一JS文件加载所述第二JS文件包括：通过所述第一JS文件按照所述加载顺序依次加载所述多个JS文件。

4.根据权利要求3所述的JS文件处理方法，其特征在于，在接收网页加载请求之前，所述JS文件处理方法还包括：创建所述第一JS文件；

在所述第一JS文件中添加用于表示所述多个JS文件的加载顺序的参数；以及将所述第一JS文件引用到所述目标网页。

5.根据权利要求1所述的JS文件处理方法，其特征在于，通过所述第一JS文件加载所述第二JS文件包括：在加载完所述第一JS文件之后，以及加载完所述目标网页之前，通过所述第一JS文件异步加载所述第二JS文件；或者在加载完所述目标网页之后，通过所述第一JS文件加载所述第二JS文件。

6.一种JS文件处理装置，其特征在于，包括：

接收单元，用于接收网页加载请求，其中，所述网页加载请求用于请求加载目标网页，所述目标网页引用第一JS文件，所述第一JS文件为用于加载第二JS文件的框架文件，所述第二JS文件为用于实现前端功能的JS文件；

第一加载单元，用于基于所述网页加载请求加载所述目标网页并在所述目标网页上加载所述目标网页引用的所述第一JS文件；以及第二加载单元，用于通过所述第一JS文件加载所述第二JS文件，其中，所述第一JS文件携带有所述第二JS文件的位置参数，所述位置参数用于表示所述目标网页加载所述第二JS文件的页面位置。

7.根据权利要求6所述的JS文件处理装置，其特征在于，所述第二加载单元包括：第一加载模块，用于基于所述位置参数通过所述第一JS文件将所述第二JS文件加载到所述页面位置。

8.根据权利要求6所述的JS文件处理装置，其特征在于，所述第二JS文件包括多个JS文件，所述第一JS文件携带有所述多个JS文件的加载顺序，其中，所述第二加载单元包括：第二加载模块，用于通过所述第一JS文件按照所述加载顺序依次加载所述多个JS文件。

9.根据权利要求8所述的JS文件处理装置，其特征在于，所述JS文件处理装置还包括：创建单元，用于在接收网页加载请求之前，创建所述第一JS文件；

添加单元，用于在所述第一JS文件中添加用于表示所述多个JS文件的加载顺序的参数；以及引用单元，用于将所述第一JS文件引用到所述目标网页。

10.根据权利要求6所述的JS文件处理装置，其特征在于，所述第二加载单元包括：第三加载模块，用于在加载完所述第一JS文件之后，以及加载完所述目标网页之前，通过所述第一JS文件异步加载所述第二JS文件；或者第四加载模块，用于在加载完所述目标网页之后，通过所述第一JS文件加载所述第二JS文件。

说明书

JS文件处理方法和装置

技术领域

[0001] 本发明涉及网页处理领域，具体而言，涉及一种JS文件处理方法和装置。

背景技术

[0002] 目前网站的富前端现象越来越严重，而很多的前端功能都是需要引用第三方的JS文件来完成，所以网页加载引用JS文件已经成为一种网站开发的比较常见方式。

[0003] 由于JS文件是阻塞加载模式，也就说如果网页顺序加载到JS文件时，只有完整加载了引用的JS文件，才会继续加载网页上JS文件之后的元素；如果这个过程中JS文件访问超时，网页也会一直等待，至超时之后再去加载别的元素。这样严重影响网页加载速度，导致网页速度较慢。

[0004] 针对现有技术中网页加载速度慢的问题，目前尚未提出有效的解决方案。

发明内容

[0005] 本发明的主要目的在于提供一种JS文件处理方法和装置，以解决现有技术中网页加载速度慢的问题。

[0006] 为了实现上述目的，根据本发明实施例的一个方面，提供了一种JS文件处理方法。根据本发明的JS文件处理方法包括：接收网页加载请求，其中，上述网页加载请求用于请求加载目标网页，上述目标网页引用第一JS文件，上述第一JS文件为用于加载第二JS文件的框架文件，上述第二JS文件为用于实现前端功能的JS文件；基于上述网页加载请求加载上述目标网页并在上述目标网页上加载上述目标网页引用的上述第一JS文件；以及通过上述第一JS文件加载上述第二JS文件。

[0007] 进一步地，上述第一JS文件携带有上述第二JS文件的位置参数，上述位置参数用于表示上述目标网页加载上述第二JS文件的页面位置，其中，通过上述第一JS文件加载上述第二JS文件包括：基于上述位置参数通过上述第一JS文件将上述第二JS文件加载到上述页面位置。

[0008] 进一步地，上述第二JS文件包括多个JS文件，上述第一JS文件携带有上述多个JS文件的加载顺序，其中，通过上述第一JS文件加载上述第二JS文件包括：通过上述第一JS文件按照上述加载顺序依次加载上述多个JS文件。

[0009] 进一步地，在接收网页加载请求之前，上述JS文件处理方法还包括：创建上述第一JS文件；在上述第一JS文件中添加用于表示上述多个JS文件的加载顺序的参数；以及将上述第一JS文件引用到上述目标网页。

[0010] 进一步地，通过上述第一JS文件加载上述第二JS文件包括：在加载完上述第一JS文件之后，以及加载完上述目标网页之前，通过上述第一JS文件异步加载上述第二JS文件；或者在加载完上述目标网页之后，通过上述第一JS文件加载上述第二JS文件。

[0011] 为了实现上述目的，根据本发明实施例的另一方面，提供了一种JS文件处理装置。根据本发明的JS文件处理装置可以包括：接收单元，用于接收网页加载请求，其中，上述网页加载请求用于请求加载目标网页，上述目标网页引用第一JS文件，上述第一JS文件为用于加载第二JS文件的框架文件，上述第二JS文件为用于实现前端功能的JS文件；第一加载单元，用于基于上述网页加载请求加载上述目标网页并在上述目标网页上加载上述目标网页引用的上述第一JS文件；以及第二加载单元，用于通过上述第一JS文件加载上述第二JS文件。

[0012] 进一步地，上述第一JS文件携带有上述第二JS文件的位置参数，上述位置参数用于表示上述目标网页加载上述第二JS文件的页面位置，其中，上述第二加载单元可以包括：第一加载模块，用于基于上述位置参数通过上述第一JS文件将上述第二JS文件加载到上述页面位置。

[0013] 进一步地，上述第二JS文件可以包括多个JS文件，上述第一JS文件携带有上述多个JS文件的加载顺序，其中，上述第二加载单元可以包括：第二加载模块，用于通过上述第一JS文件按照上述加载顺序依次加载上述多个JS文件。

[0014] 进一步地，上述JS文件处理装置还可以包括：创建单元，用于在接收网页加载请求之前，创建上述第一JS文件；添加单元，用于在上述第一JS文件中添加用于表示上述多个JS文件的加载顺序的参数；以及引用单元，用于将上述第一JS文件引用到上述目标网页。

[0015] 进一步地，上述第二加载单元可以包括：第三加载模块，用于在加载完上述第一JS文件之后，以及加载完上述目标网页之前，通过上述第一JS文件异步加载上述第二JS文件；或者第四加载模块，用于在加载完上述目标网页之后，通过上述第一JS文件加载上述第二JS文件。

[0016] 根据发明实施例，通过接收网页加载请求，其中，网页加载请求用于请求加载目标网页，目标网页引用第一JS文件，第一JS文件为用于加载第二JS文件的框架文件，第二JS文件为用于实现前端功能的JS文件；基于网页加载请求加载目标网页并在目标网页上加载目标网页引用的第一JS文件；以及通过第一JS文件加载第二JS文件，解决了现有技术中网页加载速度慢的问题，达到了使网页加载速度加快的效果。

附图说明

[0017] 构成本申请的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

[0018] 图1是根据本发明实施例的JS文件处理方法的流程图；以及

[0019] 图2是根据本发明实施例的JS文件处理装置的示意图。

具体实施方式

[0020] 需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。

[0021] 为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

[0022] 需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

[0023] 本发明实施例提供了一种JS文件处理方法。

[0024] 图1是根据本发明实施例的JS文件处理方法的流程图。如图1所示，该JS文件处理方法包括步骤如下：

[0025] 步骤S102，接收网页加载请求，其中，网页加载请求用于请求加载目标网页，目标网页引用第一JS文件，第一JS文件为用于加载第二JS文件的框架文件，第二JS文件为用于实现前端功能的JS文件。

[0026] 步骤S104，基于网页加载请求加载目标网页并在目标网页上加载目标网页引用的第一JS文件。

[0027] 步骤S106，通过第一JS文件加载第二JS文件。

[0028] 网站的前端功能可以是引用第三方的JS文件完成的。其中，在提供一定前端功能的JS文件时，可以提供至少两个JS文件，如第一JS文件和第二JS文件。第一JS文件可以用于实现加载其他JS文件的功能，该第一JS文件相当于一个功能性的框架文件，由于该JS文件为框架文件，其文件内容可以足够小，这样，加载的第一JS文件基本不影响页面加载。

[0029] 具体地，目标网页引用JS文件时，只引用第一JS文件，并在第一JS文件加载完成之后再在第一JS文件中加载第二JS文件，通过加载第二JS文件实现目标页面想要加载的前端功能。其中，第二JS文件可以是一个JS文件，也可以是多个JS文件。例如第二JS文件包括：JS文件A、JS文件B和JS文件C。在第二JS文件包括多个JS文件的情况下，如果在提供第三方JS文件时，可以先提供一个很小的加载框即第一JS文件，在第一JS文件加载完成后，再在第一JS文件中以特定的加载方式在具体的目标页面加载一个JS文件A，在JS文件A加载完成后再加载JS文件B，最后，在JS文件B加载完成后再加载JS文件C。其中，特定的加载方式可以是第一JS文件根据其自身携带的位置参数和顺序参数，该顺序参数为加载第二JS文件的顺序参数，实现对第二JS文件的加载。

[0030] 根据本发明实施例，由于目标网页引用JS文件时，只引用了第一JS文件，加载目标网页时，对第一JS文件进行加载，由于第一JS文件为框架文件加载速度快，在第一JS文件加载完成之后，可以快速地加载目标网页上的其他元素和第二JS文件，这样，避免由于JS文件的阻塞加载的模式影响网页的加载速度，从而达到了提高网页加载速度的效果。

[0031] 优选地，在本发明实施例中，第一JS文件携带有第二JS文件的位置参数，位置参数用于表示目标网页加载第二JS文件的页面位置，其中，通过第一JS文件加载第二JS文件可以包括：基于位置参数通过第一JS文件将第二JS文件加载到页面位置。

[0032] 例如，在目标网页引用第一JS文件时，可以在该网页的任意页面位置引用该第一JS文件。由于第一JS文件携带有第二JS文件的位置参数，因此，第一JS文件可以指定第二JS文件在之前加载或者在指定的页面位置加载。这样，避免了每个JS文件都限制自己在页面中的引用位置，造成引用麻烦的问题。

[0033] 优选地，在本发明实施例中，第二JS文件可以包括多个JS文件，第一JS文件携带有多个JS文件的加载顺序，其中，通过第一JS文件加载第二JS文件可以包括：通过第一JS文件按照加载顺序依次加载多个JS文件。

[0034] 由于第一JS文件携带有第二JS文件的加载顺序，因此第二JS文件的加载顺序由第一JS文件控制。例如，第二JS文件包括多个JS文件：JS文件A、JS文件B和JS文件C。在第一JS文件加载完成之后，JS文件A通过第一JS文件中的加载顺序加载完成后，再加载JS文件B，最后，在JS文件B加载完成后再加载JS文件C。如果第二JS文件中有比较大或比较耗时的JS文件(如JS文件B)，第一JS文件可以将JS文件B的加载顺序排到最后。具体地，第一JS文件也可以将顺序调整为：在第一JS文件中先非阻塞加载JS文件A，JS文件A加载完成后，再加载JS文件C，最后在JS文件C加载完成后，再加载比较大或比较耗时的JS文件B。这样，避免了只有完整加载了当前JS文件，才会继续加载页面上的其他元素的问题。进一步地，还避免了由于在加载过程中JS文件访问超时，页面会一直等待直至超时之后再去加载其他元素的问题。由于避免了上述问题，因此达到了提高网页加载速度的效果。

[0035] 优选地，在本发明实施例中，在接收网页加载请求之前，JS文件处理方法还可以包括：

[0036] S2，创建第一JS文件。

[0037] S4，在第一JS文件中添加用于表示多个JS文件的加载顺序的参数。

[0038] S6，将第一JS文件引用到目标网页。

[0039] 目标网页引用第一JS文件之前，可以预先创建第一JS文件，并在第一JS文件中添加表示多个JS文件的加载顺序的参数，该多个JS文件为第二JS文件中的JS文件。第二JS文件通过第一JS文件中的顺序参数加载它包含的多个JS文件。

[0040] 优选地，在本发明实施例中，通过第一JS文件加载第二JS文件可以包括：在加载完第一JS文件之后，以及加载完目标网页之前，通过第一JS文件异步加载第二JS文件；或者，在加载完目标网页之后，通过第一JS文件加载第二JS文件。

[0041] 本发明实施例中，在加载完第一JS文件之后，再加载该JS文件之后的网页元素，第二JS文件可以是在第一JS文件加载完之后并在网页元素加载完之前加载，也可以是在第一JS文件加载完之后且网页元素加载完之后加载。

[0042] 本发明实施例还提供了一种JS文件处理装置。该装置可以通过计算机设备实现其功能。需要说明的是，本发明实施例的JS文件处理装置可以用于执行本发明实施例所提供的JS文件处理方法，本发明实施例的JS文件处理方法也可以通过本发明实施例所提供的JS文件处理装置来执行。

[0043] 图2是根据本发明实施例的JS文件处理装置的示意图。如图2所示，该JS文件处理装置可以包括：接收单元10、第一加载单元20和第二加载单元30。

[0044] 接收单元10用于接收网页加载请求，其中，网页加载请求用于请求加载目标网页，目标网页引用第一JS文件，第一JS文件为用于加载第二JS文件的框架文件，第二JS文件为用于实现前端功能的JS文件。

[0045] 第一加载单元20用于基于网页加载请求加载目标网页并在目标网页上加载目标网页引用的第一JS文件。

[0046] 第二加载单元30用于通过第一JS文件加载第二JS文件。

[0047] 网站的前端功能可以是引用第三方的JS文件完成的。其中，在提供一定前端功能的JS文件时，可以提供至少两个JS文件，如第一JS文件和第二JS文件。第一JS文件可以用于实现加载其他JS文件的功能，该第一JS文件相当于一个功能性的框架文件，由于该JS文件为框架文件，其文件内容可以足够小，这样，加载的第一JS文件基本不影响页面加载。

[0048] 具体地，目标网页引用JS文件时，只引用第一JS文件，并在第一JS文件加载完成之后再在第一JS文件中加载第二JS文件，通过加载第二JS文件实现目标页面想要加载的前端功能。其中，第二JS文件可以是一个JS文件，也可以是多个JS文件。例如第二JS文件包括：JS文件A、JS文件B和JS文件C。在第二JS文件包括多个JS文件的情况下，如果在提供第三方JS文件时，可以先提供一个很小的加载框即第一JS文件，在第一JS文件加载完成后，再在第一JS文件中以特定的加载方式在具体的目标页面加载一个JS文件A，在JS文件A加载完成后再加载JS文件B，最后，在JS文件B加载完成后再加载JS文件C。其中，特定的加载方式可以是第一JS文件根据其自身携带的位置参数和顺序参数，该顺序参数为加载第二JS文件的顺序参数，实现对第二JS文件的加载。

[0049] 根据本发明实施例，由于目标网页引用JS文件时，只引用了第一JS文件，加载目标网页时，对第一JS文件进行加载，由于第一JS文件为框架文件加载速度快，在第一JS文件加载完成之后，可以快速地加载目标网页上的其他元素和第二JS文件，这样，避免由于JS文件的阻塞加载的模式影响网页的加载速度，从而达到了提高网页加载速度的效果。

[0050] 优选地，在本发明实施例中，第一JS文件携带有第二JS文件的位置参数，位置参数用于表示目标网页加载第二JS文件的页面位置，其中，第二加载单元30可以包括：第一加载模块，用于基于位置参数通过第一JS文件将第二JS文件加载到页面位置。

[0051] 例如，在目标网页引用第一JS文件时，可以在该网页的任意页面位置引用该第一JS文件。由于第一JS文件携带有第二JS文件的位置参数，因此，第一JS文件可以指定第二JS文件在之前加载或者在指定的页面位置加载。这样，避免了每个JS文件都限制自己在页面中的引用位置，造成引用麻烦的问题。

[0052] 优选地，在本发明实施例中，第二JS文件可以包括多个JS文件，第一JS文件携带有多个JS文件的加载顺序，其中，第二加载单元30可以包括：第二加载模块，用于通过第一JS文件按照加载顺序依次加载多个JS文件。

[0053] 由于第一JS文件携带有第二JS文件的加载顺序，因此第二JS文件的加载顺序由第一JS文件控制。例如，第二JS文件包括多个JS文件：JS文件A、JS文件B和JS文件C。在第一JS文件加载完成之后，JS文件A通过第一JS文件中的加载顺序加载完成后,再加载JS文件B，最后，在JS文件B加载完成后再加载JS文件C。如果第二JS文件中有比较大或比较耗时的JS文件(如JS文件B)，第一JS文件可以将JS文件B的加载顺序排到最后。具体地，第一JS文件也可以将顺序调整为：在第一JS文件中先非阻塞加载JS文件A，JS文件A加载完成后，再加载JS文件C，最后在JS文件C加载完成后，再加载比较大或比较耗时的JS文件B。这样，避免了只有完整加载了当前JS文件，才会继续加载页面上的其他元素的问题。进一步地，还避免了由于在加载过程中JS文件访问超时，页面会一直等待直至超时之后再去加载其他元素的问题。由于避免了上述问题，因此达到了提高网页加载速度的效果。

[0054] 优选地，在本发明实施例中，JS文件处理装置还可以包括：创建单元，用于在接收网页加载请求之前，创建第一JS文件；添加单元，用于在第一JS文件中添加用于表示多个JS文件的加载顺序的参数；以及引用单元，用于将第一JS文件引用到目标网页。

[0055] 目标网页引用第一JS文件之前，可以预先创建第一JS文件，并在第一JS文件中添加表示多个JS文件的加载顺序的参数，该多个JS文件为第二JS文件中的JS文件。第二JS文件通过第一JS文件中的顺序参数加载它包含的多个JS文件。

[0056] 优选地，在本发明实施例中，第二加载单元30可以包括：第三加载模块，用于在加载完第一JS文件之后，以及加载完目标网页之前，通过第一JS文件异步加载第二JS文件；或者第四加载模块，用于在加载完目标网页之后，通过第一JS文件加载第二JS文件。

[0057] 本发明实施例中，在加载完第一JS文件之后，再加载该JS文件之后的网页元素，第二JS文件可以是在第一JS文件加载完之后并在网页元素加载完之前加载，也可以是在第一JS文件加载完之后且网页元素加载完之后加载。

[0058] 需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

[0059] 在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

[0060] 在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。

[0061] 所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

[0062] 另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

[0063] 所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、移动终端、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

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