一种延迟加载JS脚本的方法和装置制造方法及图纸

本发明专利技术公开了一种延迟加载JS脚本的方法和装置，属于网页处理技术领域。所述方法包括：判断目标浏览器是否支持async属性的按序执行功能；如果支持，则基于待延迟加载的各个JS脚本的URL地址创建每个所述JS脚本的脚本标签，并对每个所述脚本标签设置async＝false；按照各个所述JS脚本的脚本执行顺序，依次将每个所述脚本标签插入到HTML文档，以使所述目标浏览器并行下载各个所述JS脚本，并按照所述脚本执行顺序执行每个所述JS脚本。采用本发明专利技术，可以提高JS脚本的延迟加载效率。

【技术实现步骤摘要】
一种延迟加载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＝fal本文档来自技高网...

【技术保护点】
1.一种延迟加载JS脚本的方法，其特征在于，所述方法包括：判断目标浏览器是否支持async属性的按序执行功能；如果支持，则基于待延迟加载的各个JS脚本的URL地址创建每个所述JS脚本的脚本标签，并对每个所述脚本标签设置async＝false；按照各个所述JS脚本的脚本执行顺序，依次将每个所述脚本标签插入到HTML文档，以使所述目标浏览器并行下载各个所述JS脚本，并按照所述脚本执行顺序执行每个所述JS脚本。

【技术特征摘要】
1.一种延迟加载JS脚本的方法，其特征在于，所述方法包括：判断目标浏览器是否支持async属性的按序执行功能；如果支持，则基于待延迟加载的各个JS脚本的URL地址创建每个所述JS脚本的脚本标签，并对每个所述脚本标签设置async＝false；按照各个所述JS脚本的脚本执行顺序，依次将每个所述脚本标签插入到HTML文档，以使所述目标浏览器并行下载各个所述JS脚本，并按照所述脚本执行顺序执行每个所述JS脚本。2.根据权利要求1所述的方法，其特征在于，所述判断目标浏览器是否支持async属性的按序执行功能，包括：获取记录有不支持async属性的按序执行功能的浏览器的预设浏览器名单；如果所述预设浏览器名单中存在所述目标浏览器，则判断所述目标浏览器不支持async属性的按序执行功能，否则判断所述目标浏览器支持async属性的按序执行功能。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为IE浏览器，则基于待延迟加载的各个所述JS脚本的URL地址创建每个所述JS脚本的脚本标签，并按照所述脚本执行顺序将每个所述脚本标签放入队列，以使所述目标浏览器并行下载各个所述JS脚本；当监听到队列中位于队首的脚本标签对应的所述JS脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述HTML文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述JS脚本；如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述HTML文档。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非IE浏览器，则基于待延迟加载的各个所述JS脚本的URL地址创建各个用于下载所述JS脚本的image标签，以使所述目标浏览器基于各个所述image标签并行下载各个所述JS脚本；基于待延迟加载的各个所述JS脚本的URL地址创建每个所述JS脚本的脚本标签，按照所述脚本执行顺序将每个所述脚本标签放入队列；当监听到队列中位于队首的脚本标签对应的所述JS脚本的脚本下载状态为下载完成时，将所述位于队首的脚本标签插入到所述HTML文档，以使所述目标浏览器执行所述处于队首的脚本标签对应的所述JS脚本；如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述HTML文档。5.根据权利要求3或4所述的方法，其特征在于，所述如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则将所述队列中所述处于队首的脚本标签的下一个所述脚本标签插入到所述HTML文档，包括：如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；当监听到队列中当前位于队首的脚本标签对应的所述JS脚本的脚本下载状态为下载完成时，将所述当前位于队首的脚本标签插入到所述HTML文档。6.根据权利要求1所述的方法，其特征在于，所述方法还包括：如果所述目标浏览器不支持async属性的按序执行功能，且所述目标浏览器为非IE浏览器，且待延迟加载的所述JS脚本为同域脚本，则基于待延迟加载的各个所述JS脚本的URL地址创建每个所述JS脚本的脚本标签；按照所述脚本执行顺序将每个所述脚本标签放入队列，并对每个脚本标签发起ajax下载请求，以使所述目标浏览器并行下载各个所述JS脚本；当监听到队列中位于队首的脚本标签对应的所述JS脚本的脚本下载状态为下载完成时，发起对所述位于队首的脚本标签对应的所述JS脚本的eval执行请求；如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则发起对所述队列中所述处于队首的脚本标签的下一个所述脚本标签所对应的JS脚本的eval执行请求。7.根据权利要求6所述的方法，其特征在于，所述如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则发起对所述队列中所述处于队首的脚本标签的下一个所述脚本标签所对应的JS脚本的eval执行请求，包括：如果监听到所述处于队首的脚本标签对应的所述JS脚本执行完毕，则在所述队列中删除所述处于队首的脚本标签；当监听到所述队列中当前位于队首的脚本标签对应的所述JS脚本的脚本下载状态为下载完成时，发起对所述当前处于队首的脚本标签所对应的JS脚本的eval执行请求。8.根据权利要求1-4任一项所述的方法，其特征在于，所述判断目标浏览器是否支持async属性的按序执行功能之前，还包括：如果所述目标浏览器支持link标签的预下载功能，则基于待延迟加载的各个所述JS脚本的URL地址创建各个所述JS脚本的link标签；按照所述脚本执行顺序将每个所述link标签插入到所述HTML文档的head部分，以使所述目标浏览器基于各个所述link标签并行下载各个所述JS脚本。9.一种延迟加载JS脚本的装置，其特征在于，所述装置包括：判断模块，用于判断目标浏览器是否支持async属性的按序执行功能；控制模块，用于如...

【专利技术属性】
技术研发人员：郑家兴，
申请(专利权)人：网宿科技股份有限公司，
类型：发明
国别省市：上海,31