一种延迟加载JS脚本的方法和装置与流程

本发明涉及网页处理技术领域，特别涉及一种延迟加载js脚本的方法和装置。

背景技术：

网页中往往包含有各类资源，如文字、图片、音频和视频等资源。网页浏览器对网页的打开速度与该网页中各资源的加载完成情况相关，如果网页浏览器对该网页中各资源完成加载的用时越短，则打开该网页速度越快。

在上述各类资源中，js(javascript)脚本较为特殊，其对网页的加载完成情况不产生影响，但会对网页的加载时间产生影响。js脚本具有如下的加载逻辑：网页浏览器在下载完成js脚本后，会立即执行该js脚本，同时会对网页中的后续资源停止加载。由于js脚本的执行时间往往较长，因此当网页中的js脚本较多时，会大大增加网页的加载时间，极大地降低网页打开速度。为了提高网页打开速度，可以对网页中的各js脚本进行延迟加载，即在网页加载完成后再对网页中的各js脚本进行加载。由于各js脚本之间可能存在执行依赖，如果不按照各js脚本的脚本执行顺序执行，将会出现未定义错误或逻辑错误，因此还需要保证各js脚本按照其脚本执行顺序进行执行，例如普遍采用的串行下载方式。具体的，当监听到网页加载完成的相应事件时，可以按照脚本执行顺序对所有待延迟加载的js脚本依次进行如下处理：基于js脚本的url(uniformresourcelocator，统一资源定位符)地址创建该js脚本的脚本标签，将脚本标签插入到网页的html(hypertextmarkuplanguage，超文本标记语言)文档，以触发网页浏览器对该js脚本的下载及执行，之后，当监听到该js脚本执行完毕时，再对下一个js脚本重复上述处理，直至所有待延迟加载的js脚本执行完毕。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：

在上述串行下载方式中，网页浏览器必须按照脚本执行顺序对网页中的各js脚本一个一个地进行下载，且后一个js脚本需要在前一个js脚本执行完毕后才可以进行下载，耗费了大量的时间用于js脚本的下载，导致网页浏览器需要较长时间才可以加载完成js脚本，故而js脚本的延迟加载效率较低。

技术实现要素：

为了解决现有技术的问题，本发明实施例提供了一种延迟加载js脚本的方法和装置。所述技术方案如下：

第一方面，提供了一种延迟加载js脚本的方法，所述方法包括：

判断目标浏览器是否支持async属性的按序执行功能；

如果支持，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并对每个所述脚本标签设置async＝false；

按照各个所述js脚本的脚本执行顺序，依次将每个所述脚本标签插入到html文档，以使所述目标浏览器并行下载各个所述js脚本，并按照所述脚本执行顺序执行每个所述js脚本。

进一步的，所述判断目标浏览器是否支持async属性的按序执行功能，包括：

获取记录有不支持async属性的按序执行功能的浏览器的预设浏览器名单；

如果所述预设浏览器名单中存在所述目标浏览器，则判断所述目标浏览器不支持async属性的按序执行功能，否则判断所述目标浏览器支持async属性的按序执行功能。

进一步的，所述方法还包括：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为ie浏览器，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并按照所述脚本执行顺序将每个所述脚本标签放入队列，以使所述目标浏览器并行下载各个所述js脚本；

当监听到所述队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述html文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述js脚本；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档。

进一步的，所述方法还包括：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非ie浏览器，则基于待延迟加载的各个所述js脚本的url地址创建各个用于下载所述js脚本的image标签，以使所述目标浏览器基于各个所述image标签并行下载各个所述js脚本；

基于待延迟加载的各个所述js脚本的url地址创建每个所述js脚本的脚本标签，按照所述脚本执行顺序将每个所述脚本标签放入队列；

当监听到所述队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述html文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述js脚本；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档。

进一步的，所述如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档，包括：

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；

当监听到队列中当前位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述当前位于队首的脚本标签插入到所述html文档。

进一步的，所述方法还包括：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非ie浏览器，且待延迟加载的所述js脚本为同域脚本，则基于待延迟加载的各个所述js脚本的url地址创建每个所述js脚本的脚本标签；

按照所述脚本执行顺序将每个所述脚本标签放入队列，并对每个脚本标签发起ajax下载请求，以使所述目标浏览器并行下载各个所述js脚本；

当监听到队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，发起对所述位于队首的脚本标签对应的所述js脚本的eval执行请求；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则发起对所述队列中所述处于队首的脚本标签的下一个所述脚本标签所对应的js脚本的eval执行请求。

进一步的，所述如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则发起对所述队列中所述处于队首的脚本标签的下一个所述脚本标签所对应的js脚本的eval执行请求，包括：

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；

当监听到所述队列中当前位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，发起对所述当前处于队首的脚本标签所对应的js脚本的eval执行请求。

进一步的，所述判断目标浏览器是否支持async属性的按序执行功能之前，还包括：

如果所述目标浏览器支持link标签的预下载功能，则基于待延迟加载的各个所述js脚本的url地址创建各个所述js脚本的link标签；

按照所述脚本执行顺序将每个所述link标签插入到所述html文档的head部分，以使所述目标浏览器基于各个所述link标签并行下载各个所述js脚本。

第二方面，提供了一种装置，所述装置包括：

判断模块，用于判断目标浏览器是否支持async属性的按序执行功能；

控制模块，用于如果支持，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并对每个所述脚本标签设置async＝false；

执行模块，用于按照各个所述js脚本的脚本执行顺序，依次将每个所述脚本标签插入到html文档，以使所述目标浏览器并行下载各个所述js脚本，并按照所述脚本执行顺序执行每个所述js脚本。

进一步的，所述判断模块，具体用于：

获取记录有不支持async属性的按序执行功能的浏览器的预设浏览器名单；

如果所述预设浏览器名单中存在所述目标浏览器，则判断所述目标浏览器不支持async属性的按序执行功能，否则判断所述目标浏览器支持async属性的按序执行功能。

进一步的，所述控制模块，还用于：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为ie浏览器，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并按照所述脚本执行顺序将每个所述脚本标签放入队列，以使所述目标浏览器并行下载各个所述js脚本；

所述执行模块模块，还用于：

当监听到所述队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述html文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述js脚本；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档。

进一步的，所述控制模块，还用于：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非ie浏览器，则基于待延迟加载的各个所述js脚本的url地址创建各个用于下载所述js脚本的image标签，以使所述目标浏览器基于各个所述image标签并行下载各个所述js脚本；

基于待延迟加载的各个所述js脚本的url地址创建每个所述js脚本的脚本标签，按照所述脚本执行顺序将每个所述脚本标签放入队列；

所述执行模块，还用于：

当监听到所述队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述html文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述js脚本；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档。

进一步的，所述执行模块，还用于：

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；

当监听到队列中当前位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述当前位于队首的脚本标签插入到所述html文档。

进一步的，所述控制模块，还用于：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非ie浏览器，且待延迟加载的所述js脚本为同域脚本，则基于待延迟加载的各个所述js脚本的url地址创建每个所述js脚本的脚本标签；

按照所述脚本执行顺序将每个所述脚本标签放入队列，并对每个脚本标签发起ajax下载请求，以使所述目标浏览器并行下载各个所述js脚本；

所述执行模块，还用于：

当监听到队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，发起对所述位于队首的脚本标签对应的所述js脚本的eval执行请求；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则发起对所述队列中所述处于队首的脚本标签的下一个所述脚本标签所对应的js脚本的eval执行请求。

进一步的，所述执行模块，还用于：

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；

当监听到所述队列中当前位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，发起对所述当前处于队首的脚本标签所对应的js脚本的eval执行请求。

进一步的，所述装置还包括预下载模块，用于：

如果所述目标浏览器支持link标签的预下载功能，则基于待延迟加载的各个所述js脚本的url地址创建各个所述js脚本的link标签；

按照所述脚本执行顺序将每个所述link标签插入到所述html文档的head部分，以使所述目标浏览器基于各个所述link标签并行下载各个所述js脚本。

第三方面，提供了一种终端，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如第一方面所述的加载js脚本的方法。

第四方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如第一方面所述的加载js脚本的方法。

本发明实施例提供的技术方案带来的有益效果是：

在本实施例中，判断目标浏览器是否支持async属性的按序执行功能；如果支持，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并对每个所述脚本标签设置async＝false；按照各个所述js脚本的脚本执行顺序，依次将每个所述脚本标签插入到html文档，以使所述目标浏览器并行下载各个所述js脚本，并按照所述脚本执行顺序执行每个所述js脚本。这样，通过利用async属性的按序执行功能，既可以保证对待延迟加载的各js脚本的并行下载，使得后一个js脚本无需等待前一个js脚本执行完毕后才可以进行下载，又可以保证浏览器按照各js脚本的脚本执行顺序执行，从而可以充分利用cpu以及io的并行处理能力，有效缩短下载各js脚本的时间，提高js脚本的延迟加载效率。另外，对于浏览器不支持async属性的按序执行功能的情况，本发明实施例还提供了相应的延迟加载方案，具有较强的兼容性。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本发明实施例提供的一种网络场景示意图；

图2是本发明实施例提供的一种延迟加载js脚本的方法流程图；

图3是本发明实施例提供的一种延迟加载js脚本的装置结构示意图；

图4是本发明实施例提供的一种延迟加载js脚本的装置结构示意图；

图5是本发明实施例提供的一种终端的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

本发明实施例提供了一种延迟加载js脚本的方法，该方法的执行主体可以是安装有网页浏览器的任意终端，例如个人计算机、智能手机和平板电脑等终端，上述网页浏览器可以是ie浏览器、chrome浏览器、firefox浏览器和opera浏览器等任意浏览器。上述终端可以基于网页浏览器生成的网页获取请求，从相应的服务器处获取上述网页的html文档，然后可以通过网页浏览器对html文档中的各类资源进行加载，并可以在加载结束后将上述网页在终端的屏幕进行显示。相应的网络场景可以如图1所示。上述终端中可以包括处理器、存储器和收发器，处理器可以用于进行下述流程中加载js脚本的处理，存储器可以用于存储下述处理过程中需要的数据以及产生的数据，收发器可以用于接收和发送下述处理过程中的相关数据。

下面将结合具体实施方式，对图2所示的一种延迟加载js脚本的方法的处理流程进行详细的说明，内容可以如下：

步骤201，判断目标浏览器是否支持async属性的按序执行功能。

在实施中，当用户想要访问某一网页时，用户可以在终端上打开已安装的网页浏览器(可称为目标浏览器)，然后在目标浏览器的地址栏中输入该网页的网络地址。这样，目标浏览器可以生成对上述网页的网页获取请求，然后可以通过终端获取到上述网页的html文档。之后，如果该html文档支持延迟加载，例如该html文档由网页所有者经过了如下处理，“在编写html文档时将延迟加载的js脚本的url地址以能够被目标浏览器识别的方式记录在html文档中”，则可以对目标浏览器是否支持async属性的按序执行功能进行判断，来确定目标浏览器采用的延迟加载方式。具体的，上述async属性为脚本标签的异步执行属性，支持async属性的浏览器可以对待延迟加载的js脚本进行并行下载，async属性值可以为true或false，其中，async＝false表示开启按序执行功能，即按照脚本标签在html文档中的插入顺序执行脚本，async＝true表示不开启按序执行功能，即按照脚本下载完成的顺序执行脚本。

可选的，可以通过预设浏览器名单来判断目标浏览器是否支持async属性的按序执行功能，相应的处理可以如下：获取记录有不支持async属性的按序执行功能的浏览器的预设浏览器名单；如果预设浏览器名单中存在目标浏览器，则判断目标浏览器不支持async属性的按序执行功能，否则判断目标浏览器支持async属性的按序执行功能。

在实施中，一些浏览器尽管支持async属性，但是当设置async＝false时，这些浏览器仍然无法对脚本进行按序执行，例如5.0版本的safari浏览器，这时，可以通过下述预设浏览器名单对是否支持async属性的按序执行功能进行判断。具体的，预设浏览器名单可以记录有不支持async属性的按序执行功能的浏览器，包括不支持async属性的浏览器，以及支持async属性但不支持按序执行功能的浏览器，预设浏览器名单可以是技术人员自己统计的自定义名单，也可以是通过网络获取的通用名单。这样，在基于预设浏览器名单进行判断时，如果预设浏览器名单中存在目标浏览器，则可以判断目标浏览器不支持async属性的按序执行功能；如果预设浏览器名单中不存在目标浏览器，则可以判断目标浏览器支持async属性的按序执行功能。

进一步的，还可以通过另一种方式来判断目标浏览器是否支持async属性的按序执行功能。具体的，可以在预设浏览器名单中记录支持async属性的按序执行功能的浏览器。这样，在基于预设浏览器名单进行判断时，如果预设浏览器名单中存在目标浏览器，则可以判断目标浏览器支持async属性的按序执行功能；如果预设浏览器名单中不存在目标浏览器，则可以判断目标浏览器不支持async属性的按序执行功能。

步骤202，如果支持，则基于待延迟加载的各js脚本的url地址创建每个js脚本的脚本标签，并对每个脚本标签设置async＝false。

在实施中，如果目标浏览器支持async属性的按序执行功能，则可以获取待延迟加载的各js脚本的url地址，然后可以基于获取的待延迟加载的各js脚本的url地址创建每个js脚本的脚本标签，同时可以通过对每个脚本标签设置async＝false，以开启浏览器的按序执行功能。具体的，上述网页的网页所有者，可以通过在页面加载过程中可以执行的脚本将待延迟加载的各个js脚本的url地址记录在html文档中，以使目标浏览器在加载html文档后，可以执行上述记录有待延迟加载的各个js脚本的url地址的脚本，从而目标浏览器可以获取到待延迟加载的各个js脚本的url地址。

步骤203，按照各个js脚本的脚本执行顺序，依次将每个脚本标签插入到html文档，以使目标浏览器并行下载各个js脚本，并按照脚本执行顺序按序执行每个js脚本。

在实施中，脚本执行顺序可以由各脚本之间的依赖顺序所决定，以脚本a和脚本b为例，如果脚本a中定义有一变量x，且脚本b在执行时需要调用脚本a中的变量x，则脚本b依赖脚本a，脚本执行顺序为ab，即先执行脚本a后执行脚本b。上述网页的网页所有者可以按照脚本执行顺序有序地将待延迟加载的各个js脚本的url地址记录在html文档中，以使目标浏览器可以基于html文档中各个js脚本的url地址的记录顺序，获取到上述脚本执行顺序。这样，目标浏览器在创建每个js脚本的脚本标签，并对每个脚本标签设置async＝false后，可以基于html文档中各个js脚本的url地址的记录顺序，获取到上述脚本执行顺序，然后目标浏览器可以按照脚本执行顺序，依次将每个脚本标签插入到html文档。之后，目标浏览器可以基于async的按序执行功能，对插入到html文档的各个脚本标签进行解析，并行下载各个脚本标签对应的js脚本，然后按照脚本执行顺序有序地执行js脚本。以脚本a、脚本b、脚本c、脚本d、脚本e为例，当脚本执行顺序为bcade时，目标浏览器将按照bcade的顺序将脚本a-e对应的脚本标签依次插入到html文档，然后目标浏览器可以并行下载脚本a-e，并按照bcade的顺序依次执行脚本b、脚本c、脚本a、脚本d、脚本e。这样，通过上述处理，可以充分利用cpu(centralprocessingunit，中央处理器)以及io(inputandoutput，输入输出)的并行处理能力，从而可以并行下载各待延迟加载的js脚本，有效缩短下载js脚本的时间，提高js脚本的延迟加载效率。

可选的，对于不支持async属性的按序执行功能的浏览器，如果该浏览器为ie浏览器，则延迟加载js脚本的处理可以如下：如果目标浏览器不支持async属性的按序执行功能，且目标浏览器为ie浏览器，则基于待延迟加载的各个js脚本的url地址创建每个js脚本的脚本标签；按照脚本执行顺序将每个脚本标签放入队列，以使目标浏览器并行下载各个js脚本；当监听到队列中位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，将位于队首的脚本标签插入到html文档，以使目标浏览器执行处于队首的脚本标签对应的js脚本；如果监听到处于队首的脚本标签对应的js脚本执行完毕，则将队列中处于队首的脚本标签的下一个脚本标签插入到html文档。

在实施中，如果判断得出目标浏览器不支持async属性的按序执行功能，则可以进一步判断目标浏览器是否为ie浏览器。如果目标浏览器为ie浏览器，则可以利用ie浏览器的特点，“ie浏览器在创建脚本标签后立即基于脚本的url地址对js脚本进行下载，并在将脚本标签插入html文档后才对js脚本进行执行”，对js脚本进行延迟加载。具体的，目标浏览器可以获取待延迟加载的各js脚本的url地址，然后可以基于获取的待延迟加载的各js脚本的url地址创建每个js脚本的脚本标签，之后，目标浏览器可以按照脚本执行顺序将创建的每个脚本标签放入队列中，即最先执行的js脚本对应的脚本标签置于队列的队首，最后执行的js脚本对应的脚本标签置于队列的队尾。与此同时，目标浏览器在检测到各个脚本标签被创建后，将会立即基于各个脚本标签中的url地址，并行下载各个js脚本，并对队列中各个脚本标签对应的js脚本的下载状态进行监听，例如监听readystate的参数值，其中，readystate＝loading表示下载中，readystate＝loaded表示下载完毕。当监听到队列中位于队首的脚本标签对应的js脚本下载完成时，例如readystate＝loaded时，目标浏览器可以将位于队首的脚本标签插入到html文档，这样，目标浏览器将会立即执行该处于队首的脚本标签对应的js脚本，并监听该脚本的执行状态。当监听到处于队首的脚本标签对应的js脚本执行完毕时，目标浏览器继续将处于队首的脚本标签的下一个脚本标签插入到html文档，以执行该下一个脚本标签对应的js脚本，并监听该下一个脚本标签对应的js脚本的执行状态，然后可以重复上述插入脚本标签、监听执行状态的处理过程，按照队列顺序继续插入队列中剩余的脚本标签，直至队列中的脚本标签全部插入到html文档。

进一步的，上述将队列中处于队首的脚本标签的下一个脚本标签插入到html文档的处理可以如下：如果监听到处于队首的脚本标签对应的js脚本执行完毕，则在队列中删除处于队首的脚本标签；当监听到队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，目标浏览器可以将当前位于队首的脚本标签插入到html文档，。

在实施中，目标浏览器在监听到处于队首的脚本标签对应的js脚本执行完毕时，可以将该处于队首的脚本标签从队列中删除，以防止该脚本标签重复插入html文档。这时，上述删除的脚本标签(原队首的脚本标签)的下一个脚本标签，将自动成为新队首的脚本标签，即当前位于队首的脚本标签。之后，目标浏览器可以对队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态进行监听，当监听到队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，目标浏览器可以将当前位于队首的脚本标签插入到html文档，这样，目标浏览器将会立即执行当前处于队首的脚本标签对应的js脚本，并监听该脚本标签对应的js脚本的执行状态，然后可以重复上述监听脚本下载状态、插入脚本标签以及监听执行状态的处理过程，按照队列顺序继续插入队列中剩余的脚本标签，直至队列中的脚本标签全部插入到html文档。

可选的，对于不支持async属性的按序执行功能的浏览器，如果该浏览器为非ie浏览器，其延迟加载js脚本的处理可以如下：如果目标浏览器不支持async属性的按序执行功能，且目标浏览器为非ie浏览器，则基于待延迟加载的各个js脚本的url地址创建各个用于下载js脚本的image标签，以使目标浏览器基于各个image标签并行下载各个js脚本；基于待延迟加载的各个js脚本的url地址创建每个js脚本的脚本标签，按照脚本执行顺序将每个脚本标签放入队列；当监听到队列中位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，将位于队首的脚本标签插入到html文档，以使目标浏览器执行处于队首的脚本标签对应的js脚本；如果监听到处于队首的脚本标签对应的js脚本执行完毕，则将队列中处于队首的脚本标签的下一个脚本标签插入到html文档。

在实施中，如果判断得出目标浏览器不支持async属性的按序执行功能，则可以进一步判断目标浏览器是否为ie浏览器。如果目标浏览器为非ie浏览器，则可以采用image预加载的方式对待延迟加载的js脚本进行并行下载，然后通过将各个js脚本的脚本标签按照脚本执行顺序插入到html文档，实现按序执行。具体的，目标浏览器可以获取待延迟加载的各js脚本的url地址，然后可以基于获取的待延迟加载的各js脚本的url地址创建各个用于下载js脚本的image标签，例如newimage().src＝“js脚本的url地址”，与此同时，目标浏览器可以基于各个image标签对各个js脚本进行并行下载。之后，目标浏览器可以基于获取的待延迟加载的各js脚本的url地址创建每个js脚本的脚本标签，并可以按照脚本执行顺序将创建的每个脚本标签放入队列中，即最先执行的js脚本对应的脚本标签置于队列的队首，最后执行的js脚本对应的脚本标签置于队列的队尾。

之后，目标浏览器可以对队列中各个脚本标签对应的js脚本的下载状态进行监听，例如脚本标签中cached的参数值，其中，cached＝true表示下载完成，cached＝false表示下载中，同时对下述处理中即将用到的参数waitnum和isexecuting进行说明，waitnum表示队列中等待插入html文档的脚本标签的数量，isexecuting表示插入到html文档的脚本标签对应的js脚本是否执行完毕，其中，isexecuting＝false表示执行完毕，isexecuting＝true表示执行中。这样，当监听到队列中位于队首的脚本标签对应的js脚本下载完成时，例如cached＝true，目标浏览器可以将位于队首的脚本标签插入到html文档，与此同时，目标浏览器将会立即执行该处于队首的脚本标签对应的js脚本，设置isexecuting＝true，并监听该脚本的执行状态。当监听到处于队首的脚本标签对应的js脚本执行完毕时，即isexecuting＝false，目标浏览器可以将该处于队首的脚本标签从队列中删除，并设置waitnum--，然后将处于原队首的脚本标签的下一个脚本标签插入到html文档，并设置isexecuting＝true，之后，目标浏览器按照脚本执行顺序继续执行该下一个脚本标签对应的js脚本，然后可以重复上述插入脚本标签、监听执行状态的处理过程，按照队列顺序继续插入队列中剩余的脚本标签，直至waitnum＝0，从而可以将队列中的脚本标签全部插入到html文档。

进一步的，上述将队列中处于队首的脚本标签的下一个脚本标签插入到html文档的处理可以如下：如果监听到处于队首的脚本标签对应的js脚本执行完毕，则在队列中删除处于队首的脚本标签；当监听到队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，目标浏览器可以将当前位于队首的脚本标签插入到html文档，。

在实施中，目标浏览器在监听到处于队首的脚本标签对应的js脚本执行完毕时，可以将该处于队首的脚本标签从队列中删除，并设置waitnum--，以防止该脚本标签重复插入html文档。这时，上述删除的脚本标签(原队首的脚本标签)的下一个脚本标签，将自动成为新队首的脚本标签，即当前位于队首的脚本标签。之后，目标浏览器可以对队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态进行监听，当监听到队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，目标浏览器可以将当前位于队首的脚本标签插入到html文档，这样，目标浏览器将会立即执行当前处于队首的脚本标签对应的js脚本，并监听该脚本标签对应的js脚本的执行状态，然后可以重复上述监听脚本下载状态、插入脚本标签以及监听执行状态、waitnum--的处理过程，按照队列顺序继续插入队列中剩余的脚本标签，直至waitnum＝0，即队列中的脚本标签全部插入到html文档。

可选的，对于不支持async属性的按序执行功能的浏览器，如果该浏览器为非ie浏览器，其延迟加载js脚本的处理还可以如下：如果目标浏览器不支持async属性的按序执行功能，且目标浏览器为非ie浏览器，且待延迟加载的js脚本为同域脚本，则基于待延迟加载的各个js脚本的url地址创建每个js脚本的脚本标签；按照脚本执行顺序将每个脚本标签放入队列，并对每个脚本标签发起ajax下载请求，以使目标浏览器并行下载各个js脚本；当监听到队列中位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，发起对位于队首的脚本标签对应的js脚本的eval执行请求；如果监听到处于队首的脚本标签对应的js脚本执行完毕，则发起对队列中处于队首的脚本标签的下一个脚本标签所对应的js脚本的eval执行请求。

在实施中，如果判断得出目标浏览器不支持async属性的按序执行功能，则可以进一步判断目标浏览器是否为ie浏览器。如果目标浏览器为非ie浏览器，且待延迟加载的js脚本为同域脚本(脚本url地址的协议、主域名、子域名、端口号中均相同)时，目标浏览器可以采用ajax请求方式进行对各延迟加载的js脚本进行并行下载，并采用eval执行。具体的，目标浏览器可以获取待延迟加载的各js脚本的url地址，然后可以基于获取的待延迟加载的各js脚本的url地址创建每个js脚本的脚本标签，并可以按照脚本执行顺序将创建的每个脚本标签放入队列中，即最先执行的js脚本对应的脚本标签置于队列的队首，最后执行的js脚本对应的脚本标签置于队列的队尾。这时，目标浏览器在检测到各个脚本标签被创建后，可以对每个脚本标签发起ajax下载请求，并行下载各个js脚本，并可以通过实时检测返回的ajax响应，对队列中各个脚本标签对应的js脚本的下载状态进行监听。当监听到队列中位于队首的脚本标签对应的js脚本下载完成时，目标浏览器可以将位于队首的脚本标签插入到html文档，然后发起对位于队首的脚本标签对应的js脚本的eval执行请求，并监听该脚本的执行状态。当监听到处于队首的脚本标签对应的js脚本执行完毕时，目标浏览器可以发起对队列中处于队首的脚本标签的下一个脚本标签对应的js脚本的eval执行请求，然后可以重复上述监听执行状态、发起eval执行请求的处理过程，直至队列中的脚本标签对应的js脚本全部执行完毕。

进一步的，上述发起对队列中处于队首的脚本标签的下一个脚本标签所对应的js脚本的eval执行请求的处理可以如下：如果监听到处于队首的脚本标签对应的js脚本执行完毕，则在队列中删除处于队首的脚本标签；当监听到队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，发起对当前处于队首的脚本标签所对应的js脚本的eval执行请求。

在实施中，目标浏览器在监听到处于队首的脚本标签对应的js脚本执行完毕时，可以将处于队首的脚本标签从队列中删除，这时，上述删除的脚本标签(原队首的脚本标签)的下一个脚本标签，将自动成为新队首的脚本标签，即当前位于队首的脚本标签。之后，目标浏览器可以对队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态进行监听，当监听到队列中当前位于队首的脚本标签对应的js脚本的脚本下载状态为下载完成时，目标浏览器可以发起对当前处于队首的脚本标签所对应的js脚本的eval执行请求，并监听该脚本标签对应的js脚本的执行状态，然后可以重复上述监听执行状态、删除脚本标签、发起eval执行请求的处理过程，直至队列中的脚本标签对应的js脚本全部执行完毕。

可选的，如果目标浏览器支持link标签的预下载功能，还可以进行如下处理：如果目标浏览器支持link标签的预下载功能，则基于待延迟加载的各个js脚本的url地址创建各个js脚本的link标签；按照脚本执行顺序将每个link标签插入到html文档的head部分，以使目标浏览器基于各个link标签并行下载各个js脚本。

在实施中，通过link标签的预下载功能可以实现各待延迟加载的js脚本的并行下载。具体的，可以将link元素中的rel属性设为preload，例如设置linkrel＝"preload"，这样，浏览器可以提前下载指定资源，如果是js脚本，则浏览器只下载js脚本，待满足脚本执行条件时再对脚本进行执行。这样，上述支持async属性的按序执行功能的浏览器，以及不支持async属性的按序执行功能的ie浏览器和非ie浏览器，如果支持link标签的预下载功能，则可以同时采用link标签的预下载功能对待延迟加载的js脚本进行并行下载，进一步缩短下载js脚本的时间。具体的，目标浏览器可以基于待延迟加载的各个js脚本的url地址创建各个js脚本的link标签，例如<linkrel＝"preload"href＝"待延迟加载的js脚本的url地址"as＝"script">，之后，目标浏览器可以按照脚本执行顺序将每个link标签插入到html文档的head部分，从而目标浏览器可以基于各个link标签并行下载各个js脚本。

在本实施例中，判断目标浏览器是否支持async属性的按序执行功能；如果支持，则基于待延迟加载的各个js脚本的url地址创建每个js脚本的脚本标签，并对每个脚本标签设置async＝false；按照各个js脚本的脚本执行顺序，依次将每个脚本标签插入到html文档，以使目标浏览器并行下载各个js脚本，并按照脚本执行顺序执行每个js脚本。这样，通过利用async属性的按序执行功能，既可以保证对待延迟加载的各js脚本的并行下载，使得后一个js脚本无需等待前一个js脚本执行完毕后才可以进行下载，又可以保证浏览器按照各js脚本的脚本执行顺序执行，从而可以充分利用cpu以及io的并行处理能力，有效缩短下载各js脚本的时间，提高js脚本的延迟加载效率。另外，对于浏览器不支持async属性的按序执行功能的情况，本发明实施例还提供了相应的延迟加载方案，具有较强的兼容性。

基于相同的技术构思，本发明实施例还提供了一种装置，如图3所示，所述装置包括：

判断模块301，用于判断目标浏览器是否支持async属性的按序执行功能；

控制模块302，用于如果支持，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并对每个所述脚本标签设置async＝false；

执行模块303，用于按照各个所述js脚本的脚本执行顺序，依次将每个所述脚本标签插入到html文档，以使所述目标浏览器并行下载各个所述js脚本，并按照所述脚本执行顺序执行每个所述js脚本。

可选的，所述判断模块301，具体用于：

获取记录有不支持async属性的按序执行功能的浏览器的预设浏览器名单；

如果所述预设浏览器名单中存在所述目标浏览器，则判断所述目标浏览器不支持async属性的按序执行功能，否则判断所述目标浏览器支持async属性的按序执行功能。

可选的，所述控制模块302，还用于：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为ie浏览器，则基于待延迟加载的各个js脚本的url地址创建每个所述js脚本的脚本标签，并按照所述脚本执行顺序将每个所述脚本标签放入队列，以使所述目标浏览器并行下载各个所述js脚本；

所述执行模块303模块，还用于：

当监听到所述队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述html文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述js脚本；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档。

可选的，所述控制模块302，还用于：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非ie浏览器，则基于待延迟加载的各个所述js脚本的url地址创建各个用于下载所述js脚本的image标签，以使所述目标浏览器基于各个所述image标签并行下载各个所述js脚本；

基于待延迟加载的各个所述js脚本的url地址创建每个所述js脚本的脚本标签，按照所述脚本执行顺序将每个所述脚本标签放入队列；

所述执行模块303，还用于：

当监听到所述队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述html文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述js脚本；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述html文档。

可选的，所述执行模块303，还用于：

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；

当监听到队列中当前位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，将所述当前位于队首的脚本标签插入到所述html文档。

可选的，所述控制模块302，还用于：

如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非ie浏览器，且待延迟加载的所述js脚本为同域脚本，则基于待延迟加载的各个所述js脚本的url地址创建每个所述js脚本的脚本标签；

按照所述脚本执行顺序将每个所述脚本标签放入队列，并对每个脚本标签发起ajax下载请求，以使所述目标浏览器并行下载各个所述js脚本；

所述执行模块303，还用于：

当监听到队列中位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，发起对所述位于队首的脚本标签对应的所述js脚本的eval执行请求；

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则发起对所述队列中所述处于队首的脚本标签的下一个所述脚本标签所对应的js脚本的eval执行请求。

可选的，所述执行模块303，还用于：

如果监听到所述处于队首的脚本标签对应的所述js脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；

当监听到所述队列中当前位于队首的脚本标签对应的所述js脚本的脚本下载状态为下载完成时，发起对所述当前处于队首的脚本标签所对应的js脚本的eval执行请求。

可选的，如图4所示，所述装置还包括预下载模块304，用于：

如果所述目标浏览器支持link标签的预下载功能，则基于待延迟加载的各个所述js脚本的url地址创建各个所述js脚本的link标签；

按照所述脚本执行顺序将每个所述link标签插入到所述html文档的head部分，以使所述目标浏览器基于各个所述link标签并行下载各个所述js脚本。

需要说明的是：上述实施例提供的延迟加载js脚本的装置在延迟加载js脚本时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的延迟加载js脚本的装置与延迟加载js脚本的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图5示出了一种终端的结构示意图。该终端可以用于实施上述实施例中提供的延迟加载js脚本的方法。

终端500可以包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、音频电路160、wifi(wirelessfidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源150等部件。本领域技术人员可以理解，图5中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可以包括触敏表面131以及其他输入设备132。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端500的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可以包括显示面板141。

音频电路160，包括扬声器161和传声器162可提供用户与终端500之间的音频接口。

wifi属于短距离无线传输技术，终端500通过wifi模块170可以帮助用户收发电子邮件浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。

处理器180是终端500的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端500的各种功能和处理数据，从而对手机进行整体监控。

终端500还包括给各个部件供电的电源150(比如电池)

终端500还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行述一个或者一个以上程序包含用于进行上述延迟加载js脚本的处理的指令。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。