一种页面处理方法、装置、电子设备及存储介质与流程

文档序号:25722513发布日期:2021-07-02 21:07阅读:88来源:国知局
一种页面处理方法、装置、电子设备及存储介质与流程

本公开涉及计算机技术领域,尤其涉及一种页面处理方法、装置、电子设备及存储介质。



背景技术:

在浏览器页面中,可以将预期要使用的网络资源声明为预加载,如此浏览器会在不影响当前页面加载的前提下,于空闲时间来进行加载。

相关技术在基于代码编译工具webpack构建的前端工程中,通常使用插件辅助页面构建插件html-webpack-plugin来自动声明资源为预加载。然而,相关技术中无法实现仅将每个页面确定会使用到的图片、视频等资源声明为预加载,对于不可能使用的资源不声明为预加载,从而导致了页面预加载过程中存在对于网络资源的浪费,降低了网络资源利用率以及预加载效率。



技术实现要素:

本公开提供一种页面处理方法、装置、电子设备及存储介质,以至少解决相关技术在页面预加载过程中网络资源利用率和预加载效率低的问题。本公开的技术方案如下:

根据本公开实施例的第一方面,提供一种页面处理方法,包括:

监听针对当前页面的开始处理事件;

在监听到所述开始处理事件时,确定所述当前页面依赖的文本资源标识;所述文本资源标识对应的文本资源存储在编译资源表中;

从所述编译资源表中获取与所述文本资源标识相匹配的文本资源;所述与所述文本资源标识相匹配的文本资源中包括所述当前页面对应的多媒体资源标识;

在所述文本资源中查找所述编译资源表中的各多媒体资源标识,若在所述文本资源中查找到所述多媒体资源标识,则确定所述多媒体资源标识对应的多媒体资源是所述当前页面依赖的目标资源;

在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性。

在一示例性的实施方式中,所述确定所述当前页面依赖的文本资源标识包括:

确定页面构建工具中的数据对象,所述页面构建工具用于构建所述当前页面的入口文件;

从所述数据对象中获取资源代码块;

从所述资源代码块中提取所述当前页面依赖的脚本文件标识和层叠样式标识,得到所述当前页面依赖的文本资源标识集;所述文本资源标识集中的文本资源标识包括所述脚本文件标识和层叠样式标识。

在一示例性的实施方式中,所述编译资源表以资源标识为键,所述资源标识对应的资源内容为值的形式记录有所述当前页面对应的应用中的所有页面所依赖的资源内容以及所述资源内容对应的资源标识;所述资源内容包括文本资源以及多媒体资源,所述资源标识包括与所述文本资源对应的文本资源标识以及与所述多媒体资源对应的多媒体资源标识;

所述从所述编译资源表中获取与所述文本资源标识相匹配的文本资源,包括:

遍历所述文本资源标识集中的文本资源标识;

对于遍历到的每个文本资源标识,以所述文本资源标识为键,确定所述编译资源表中与所述键相匹配的目标值;

获取所述目标值对应的资源内容,得到与所述文本资源标识相匹配的文本资源。

在一示例性的实施方式中,所述在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性,包括:

根据所述当前页面依赖的目标资源,生成链接标签;所述链接标签包括第一属性和第二属性,所述第一属性指示预加载,所述第二属性指示所述当前页面依赖的目标资源;

将所述链接标签插入到所述目标页面对应入口文件的头节点中。

在一示例性的实施方式中,在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性之前,所述方法还包括:

监听针对所述入口文件的链接标签更改事件;所述链接标签更改事件用于触发对所述入口文件的头节点中的链接标签的更改;

在监听到所述链接标签更改事件时,执行所述在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性的步骤。

在一示例性的实施方式中,所述监听针对当前页面的开始处理事件包括:

通过所述页面构建工具中的页面处理前钩子函数,监听针对当前页面的开始处理事件。

根据本公开实施例的第二方面,提供一种页面处理装置,包括:

第一监听单元,被配置为执行监听针对目标页面的开始处理事件;

文本资源标识确定单元,被配置为执行在监听到所述开始处理事件时,确定所述当前页面依赖的文本资源标识;所述文本资源标识对应的文本资源存储在编译资源表中;

文本资源获取单元,被配置为执行从所述编译资源表中获取与所述文本资源标识相匹配的文本资源;所述与所述文本资源标识相匹配的文本资源中包括所述当前页面对应的多媒体资源标识;

页面依赖资源确定单元,被配置为执行在所述文本资源中查找所述编译资源表中的各多媒体资源标识,若在所述文本资源中查找到所述多媒体资源标识,则确定所述多媒体资源标识对应的多媒体资源是所述当前页面依赖的目标资源;

声明单元,被配置为执行在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性。

在一示例性的实施方式中,所述文本资源标识确定单元,包括:

数据对象确定单元,被配置为执行确定页面构建工具中的数据对象,所述页面构建工具用于构建所述当前页面的入口文件;

资源代码块获取单元,被配置为执行从所述数据对象中获取资源代码块;

提取单元,被配置为执行从所述资源代码块中提取所述当前页面依赖的脚本文件标识和层叠样式标识,得到所述当前页面依赖的文本资源标识集;所述文本资源标识集中的文本资源标识包括所述脚本文件标识和层叠样式标识。

在一示例性的实施方式中,所述编译资源表以资源标识为键,所述资源标识对应的资源内容为值的形式记录有所述当前页面对应的应用中的所有页面所依赖的资源内容以及所述资源内容对应的资源标识;所述资源内容包括文本资源以及多媒体资源,所述资源标识包括与所述文本资源对应的文本资源标识以及与所述多媒体资源对应的多媒体资源标识;

所述文本资源获取单元,包括:

遍历单元,被配置为执行遍历所述文本资源标识集中的文本资源标识;

值确定单元,被配置为执行对于遍历到的每个文本资源标识,以所述文本资源标识为键,确定所述编译资源表中与所述键相匹配的目标值;

第一获取单元,被配置为执行获取所述目标值对应的资源内容,得到与所述文本资源标识相匹配的文本资源。

在一示例性的实施方式中,所述声明单元,包括:

链接标签生成单元,被配置为执行根据所述当前页面依赖的目标资源,生成链接标签;所述链接标签包括第一属性和第二属性,所述第一属性指示预加载,所述第二属性指示所述当前页面依赖的目标资源;

插入单元,被配置为执行将所述链接标签插入到所述目标页面对应入口文件的头节点中。

在一示例性的实施方式中,所述装置还包括:

第二监听单元,被配置为执行监听针对所述入口文件的链接标签更改事件;所述链接标签更改事件用于触发对所述入口文件的头节点中的链接标签的更改;

执行单元,被配置为执行在监听到所述链接标签更改事件时,执行所述在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性的步骤。

在一示例性的实施方式中,所述第一监听单元,具体被配置为执行通过所述页面构建工具中的页面处理前钩子函数,监听针对当前页面的开始处理事件。

根据本公开实施例的第三方面,提供一种电子设备,包括:

处理器;

用于存储所述处理器可执行指令的存储器;

其中,所述处理器被配置为执行所述指令,以实现上述第一方面的页面处理方法。

根据本公开实施例的第四方面,提供一种计算机可读存储介质,当所述计算机可读存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行上述第一方面的页面处理方法。

根据本公开实施例的第五方面,提供一种计算机程序产品,包括计算机程序/指令,所述计算机程序/指令被处理器执行时实现上述第一方面的页面处理方法。

本公开的实施例提供的技术方案至少带来以下有益效果:

通过监听针对当前页面的开始处理事件,并在监听到该开始处理事件时确定当前页面依赖的文本资源标识,进而从编译资源表中获取与该文本资源标识相匹配的文本资源,并在该文本资源中查找编译资源表中的各多媒体资源标识,若在该文本资源中查找到某个多媒体资源标识,则确定该多媒体资源标识对应的多媒体资源是当前页面依赖的目标资源,进而在当前页面的入口文件中声明上述当前页面依赖的目标资源为预加载属性,实现了仅将当前页面确定使用到的多媒体资源声明为预加载,排除了对当前页面不可能使用的多媒体资源的预加载声明,从而在当前页面的预加载过程中仅对确定使用到的多媒体资源进行预加载,而对于不可能使用到的多媒体资源不进行预加载,避免了非必要资源预加载造成的网络资源的浪费,提高网络资源利用率以及页面预加载效率。

应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理,并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种页面处理方法的流程图;

图2是根据一示例性实施例示出的确定当前页面依赖的文本资源标识的流程图;

图3是根据一示例性实施例示出的在当前页面的入口文件中声明当前页面依赖的目标资源为预加载属性的流程图;

图4是根据一示例性实施例示出的一种页面处理装置的框图;

图5是根据一示例性实施例示出的一种资源预加载插件的框图;

图6是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在浏览器页面中,可以将预期使用的网络资源声明为预加载,如此浏览器可以在不影响当前页面加载的前提下于空闲时间来进行声明为预加载的网络资源的提前加载,以提升页面的渲染性能。

相关技术中在基于代码编译工具webpack构建的前端工程中,通常使用默认的预加载插件preload-webpack-plugin辅助webpack中的页面构建插件html-webpack-plugin来自动声明资源为预加载。该preload-webpack-plugin插件仅支持4种形式的预加载声明,如果要声明图片、视频等多媒体资源为预加载,则必须采用全部资源allassets形式的声明,而在预加载声明形式为全部资源allassets时,如果应用中有多个页面则每个页面都会将全部资源声明为预加载,也即页面不会使用到的资源依然会被声明为预加载,无法实现仅将每个页面确定会使用到的图片、视频等多媒体资源声明为预加载,对于不可能使用的多媒体资源不声明为预加载,从而使得在页面预加载时需要将全部资源都进行预加载,导致了对网络资源的浪费,降低了网络资源的利用率。

鉴于此,本公开的实施例提供一种页面处理方法,通过该方法可以实现仅对页面确定会使用到的多媒体资源声明为预加载,排除了对页面不可能使用的多媒体资源的预加载声明,从而在该页面的预加载过程中仅对确定会使用到的多媒体资源进行预加载,而对于不可能使用到的多媒体资源不进行预加载,避免了非必要资源预加载造成的网络资源的浪费,提高了网络资源利用率以及预加载效率。

本公开实施例的页面处理方法可以实现为代码编译工具webpack中的一个插件,如可以称之为资源预加载插件,该资源预加载插件可以辅助代码编译工具webpack中的页面构建插件html-webpack-plugin(或者称之为页面构建工具)实现仅对页面中确定会使用到的目标资源声明为预加载。

实际应用中,在浏览器加载页面时,一些隐藏在文本资源如层叠样式css(cascadingstylesheets)和脚本文件javascript中的多媒体资源如图片、视频等,需要在文本资源解析之后才会被浏览器加载,因此在这种场景下有必要将文本资源中隐藏的确定会被相应页面使用到的多媒体资源如图片、视频等声明为预加载。基于此,本公开实施例中通过资源预加载插件声明的目标资源为层叠样式css(cascadingstylesheets)和脚本文件javascript中确定会被相应页面使用到的多媒体资源,通常文本资源中的图片、视频等多媒体资源一般为二进制形式,因此这些多媒体资源也可以称之为二进制资源。

请参阅图1,其所示为根据一示例性实施例示出的一种页面处理方法的流程图,如图1所示,该方法包括以下步骤:

在步骤s11中,监听针对当前页面的开始处理事件。

其中,当前页面是代码编译工具webpack所编译应用中的一个页面,且该页面是代码编译工具webpack中的页面构建插件html-webpack-plugin当前将要处理的页面。示例性的,上述代码编译工具webpack所编译的应用中可以包括多个页面,该多个页面可以是超文本标记语言(hypertextmarkuplanguage,html)描述的页面。

示例性的,在代码编译工具webpack中,页面构建插件html-webpack-plugin用于构建一个页面的入口html文件,该页面构建插件html-webpack-plugin中还提供了一些可以被其他插件调用的钩子函数hook,其中包括页面处理前钩子函数htmlwebpackpluginbeforehtmlprocessing,该页面处理前钩子函数在页面构建插件html-webpack-plugin处理一个html页面之前被调起。

因此,上述步骤s11在实施时,可以通过本公开实施例中的第一预设钩子函数可以是用于构建目标页面的页面构建插件html-webpack-plugin中提供的页面处理前钩子函数htmlwebpackpluginbeforehtmlprocessing,可以通过页面构建工具html-webpack-plugin中提供的页面处理前钩子函数htmlwebpackpluginbeforehtmlprocessing来监听针对当前页面的开始处理事件。

在步骤s12中,在监听到所述开始处理事件时,确定所述当前页面依赖的文本资源标识,所述文本资源标识对应的文本资源存储在编译资源表中。

示例性的,当上述页面处理前钩子函数htmlwebpackpluginbeforehtmlprocessing触发时,表明监听到当前页面的开始处理事件,此时资源预加载插件可以确定当前页面依赖的文本资源标识,该文本资源标识用于唯一标识当前页面依赖的文本资源,该文本资源可以包括javascript脚本文件和层叠样式css文件。

在一示例性的实施方式中,上述步骤s12在确定当前页面依赖的文本资源标识时可以包括图2中的以下步骤:

在步骤s121中,确定页面构建工具中的数据对象。

其中,所述页面构建工具用于构建所述目标页面的入口文件,具体的,该页面构建工具可以是用于构建目标html页面的入口文件的页面构建插件html-webpack-plugin。

在步骤s122中,从所述数据对象中获取资源代码块。

在步骤s123中,从所述资源代码块中提取所述当前页面依赖的脚本文件标识和层叠样式标识,得到所述当前页面依赖的文本资源标识集;所述文本资源标识集中的文本资源标识包括所述脚本文件标识和层叠样式标识。

具体的,页面构建插件html-webpack-plugin会暴露出一个数据对象htmlplugindata,在该数据对象中通过资源代码块htmlplugindata.assets.chunks存储当前页面所依赖的全部脚本文件标识和层叠样式标识,但该资源代码块并不存储其他非文本资源(如图片资源、动画资源等多媒体资源)的相关资源标识,从而从该资源代码块htmlplugindata.assets.chunks中提取当前页面依赖的脚本文件标识和层叠样式标识即可得到当前页面依赖的文本资源标识集。需要说明的是,上述资源代码块htmlplugindata.assets.chunks中仅包括文本资源标识,并不包括该文本资源标识对应的文本资源,文本资源标识对应的文本资源存储在编译资源表中,关于该编译资源表将在后续步骤中进行介绍。

示例性的,该文本资源标识可以是文本资源的名称,如可以是javascript脚本文件的文件名、css文件的文件名。

实际应用中,对于javascript脚本文件和css文件,二者在资源代码块htmlplugindata.assets.chunks中的结构是不同的。对于javascript脚本文件,是单一的javascript脚本文件名,而对于css文件是多个css文件名构成的数组,因此通过资源代码块htmlplugindata.assets.chunks可以提取到当前页面依赖的文本资源标识集,该文本资源标识集可以包括一个javascript脚本文件名和多个css文件名。

在步骤s13中,从所述编译资源表中获取与所述文本资源标识相匹配的文本资源。

其中,所述与所述文本资源标识相匹配的文本资源中包括所述当前页面对应的多媒体资源标识。

具体的,在代码编译工具webpack编译当前页面对应的应用的过程中,可以从该代码编译工具webpack的上下文中获取到一个编译对象即compilation对象,该编译对象代表了一次单一的webpack编译和生成编译资源的过程,在该编译对象中通过一个编译资源表compilation.assets记录当前页面对应的应用中的所有页面所依赖的资源内容以及所述资源内容对应的资源标识,其中的资源内容包括文本资源以及多媒体资源,资源标识包括与文本资源对应的文本资源标识以及与多媒体资源对应的多媒体资源标识,也就是说,该编译资源表compilation.assets在记录时并不区分页面,其记录的是编译应用中的所有页面的所依赖的所有资源(即文本资源和多媒体资源)。

实际应用中,上述编译资源表compilation.assets以资源标识为键,资源标识对应的资源内容为值的形式记录当前页面对应的应用中的所有页面所依赖的资源内容以及资源内容对应的资源标识,基于此,在一个示例性的实施方式中,上述步骤s13在实施时可以包括以下步骤:

(1)遍历当前页面依赖的文本资源标识集。

(2)对于遍历到的每个文本资源标识,以该文本资源标识为键,确定编译资源表中与该键相匹配的目标值。

(3)获取上述目标值对应的资源内容,得到与上述文本资源标识相匹配的文本资源,那么,在遍历结束时可以得到文本资源标识集中各文本资源标识对应的文本资源。

由于文本资源标识指向的是当前页面依赖的文本资源,通过上述步骤可以从当前编译过程涉及的所有页面中准确找到当前页面所依赖的文本资源,也即当前页面所依赖的javascript脚本文件和css文件。

在步骤s14中,在所述文本资源中查找所述编译资源表中的各多媒体资源标识,若在所述文本资源中查找到所述多媒体资源标识,则确定所述多媒体资源标识对应的多媒体资源是所述当前页面依赖的目标资源。

由于编译资源表记录的是当前页面对应的应用中的所有页面所依赖的资源内容以及资源内容对应的资源标识,也即出现在编译资源表中的资源标识肯定是所编译应用中的某个页面依赖的资源对应的资源标识,也即该资源标识对应的资源在上述某个页面中肯定会被使用到,而编译资源表中的资源内容包括文本资源和多媒体资源,资源内容对应的资源标识包括文本资源标识和多媒体资源标识,那么,通过在当前页面依赖的文本资源中查找编译资源表中的各多媒体资源,若在当前页面依赖的文本资源中查找到编译资源表中的某个多媒体资源标识,则可以确定该多媒体资源标识对应的多媒体资源是当前页面依赖的目标资源。

在步骤s15中,在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性。

在一示例性的实施方式中,在当前页面的入口文件中声明当前页面依赖的目标资源为预加载属性时,可以包括图3中的以下步骤:

在步骤s151中,根据所述当前页面依赖的目标资源,生成链接标签。

其中,所述链接标签包括第一属性和第二属性,所述第一属性指示预加载,所述第二属性指示所述当前页面依赖的目标资源。

在步骤s152中,将所述链接标签插入到所述目标页面对应入口文件的头节点中。

示例性的,在当前页面是html页面时,可以在该html页面的入口文件的头节点head中通过link标签对预加载资源进行声明,在该link标签中可以通过rel属性(即第一属性)指示预加载,通过href属性(即第二属性)指示当前页面依赖的目标资源。

基于此,在一示例性的实施方式中,如图4提供的另一种页面处理方法的流程图,在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性之前,该方法还可以包括以下步骤:

在步骤s16中,监听针对所述入口文件的链接标签更改事件。

其中,所述链接标签更改事件用于触发对所述入口文件的头节点中的链接标签的更改。在监听到所述链接标签更改事件时,可以执行本公开实施例中的前述步骤s15,在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性。

实际应用中,页面构建插件html-webpack-plugin中提供的钩子函数包括链接标签更改钩子函数htmlwebpackpluginalterassettags,以该链接标签更改钩子函数htmlwebpackpluginalterassettags的触发作为切入点可以对当前页面的入口文件的头节点中的链接标签进行更改。因此,可以通过页面构建工具中提供的链接标签更改钩子函数htmlwebpackpluginalterassettags来监听针对当前页面的入口文件的链接标签更改事件。

本公开的实施例实现了仅将当前页面确定使用到的多媒体资源声明为预加载,排除了对当前页面不可能使用的多媒体资源的预加载声明,从而在当前页面的预加载过程中仅对确定使用到的多媒体资源进行预加载,而对于不可能使用到的多媒体资源不进行预加载,避免了非必要资源预加载造成的网络资源的浪费,提高网络资源利用率以及页面预加载效率。

图4是根据一示例性实施例示出的一种页面处理装置的框图。参照图5,该页面处理装置500包括第一监听单元410,文本资源标识确定单元420,文本资源获取单元430,页面依赖资源确定单元440和声明单元450。

该第一监听单元410,被配置为执行监听针对目标页面的开始处理事件;

该文本资源标识确定单元420,被配置为执行在监听到所述开始处理事件时,确定所述当前页面依赖的文本资源标识;所述文本资源标识对应的文本资源存储在编译资源表中;

该文本资源获取单元430,被配置为执行从所述编译资源表中获取与所述文本资源标识相匹配的文本资源;所述与所述文本资源标识相匹配的文本资源中包括所述当前页面对应的多媒体资源标识;

该页面依赖资源确定单元440,被配置为执行在所述文本资源中查找所述编译资源表中的各多媒体资源标识,若在所述文本资源中查找到所述多媒体资源标识,则确定所述多媒体资源标识对应的多媒体资源是所述当前页面依赖的目标资源;

该声明单元450,被配置为执行在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性。

在一示例性的实施方式中,该文本资源标识确定单元420,包括:

数据对象确定单元,被配置为执行确定页面构建工具中的数据对象,所述页面构建工具用于构建所述当前页面的入口文件;

资源代码块获取单元,被配置为执行从所述数据对象中获取资源代码块;

提取单元,被配置为执行从所述资源代码块中提取所述当前页面依赖的脚本文件标识和层叠样式标识,得到所述当前页面依赖的文本资源标识集;所述文本资源标识集中的文本资源标识包括所述脚本文件标识和层叠样式标识。

在一示例性的实施方式中,所述编译资源表以资源标识为键,所述资源标识对应的资源内容为值的形式记录有所述当前页面对应的应用中的所有页面所依赖的资源内容以及所述资源内容对应的资源标识;所述资源内容包括文本资源以及多媒体资源,所述资源标识包括与所述文本资源对应的文本资源标识以及与所述多媒体资源对应的多媒体资源标识;

该文本资源获取单元430,包括:

遍历单元,被配置为执行遍历所述文本资源标识集中的文本资源标识;

值确定单元,被配置为执行对于遍历到的每个文本资源标识,以所述文本资源标识为键,确定所述编译资源表中与所述键相匹配的目标值;

第一获取单元,被配置为执行获取所述目标值对应的资源内容,得到与所述文本资源标识相匹配的文本资源。

在一示例性的实施方式中,该声明单元450,包括:

链接标签生成单元,被配置为执行根据所述当前页面依赖的目标资源,生成链接标签;所述链接标签包括第一属性和第二属性,所述第一属性指示预加载,所述第二属性指示所述当前页面依赖的目标资源;

插入单元,被配置为执行将所述链接标签插入到所述目标页面对应入口文件的头节点中。

在一示例性的实施方式中,所述装置还包括:

第二监听单元,被配置为执行监听针对所述入口文件的链接标签更改事件;所述链接标签更改事件用于触发对所述入口文件的头节点中的链接标签的更改;

执行单元,被配置为执行在监听到所述链接标签更改事件时,执行所述在所述当前页面的入口文件中声明所述当前页面依赖的目标资源为预加载属性的步骤。

在一示例性的实施方式中,该第一监听单元410,具体被配置为执行通过所述页面构建工具中的页面处理前钩子函数,监听针对当前页面的开始处理事件。

需要说明的是,上述实施例提供的装置,在实现其功能时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。

示例性的,本公开实施例的页面处理装置可以是一个资源预加载插件,该资源预加载插件可以辅助代码编译工具webpack中的页面构建插件html-webpack-plugin以基于本公开实施例的页面处理方法实现仅对html页面中确定使用的图片、动画等多媒体资源声明为预加载。

如图5是根据一示例性实施例示出的一种资源预加载插件的框图,如图5所示,该资源预加载插件可以包括html切入模块和资源筛选模块。

其中,html切入模块负责与页面构建插件html-webpack-plugin进行通信以在适当的时机切入到对html页面的处理过程之中。具体的,该html切入模块可以通过页面构建插件html-webpack-plugin中的页面处理前钩子函数htmlwebpackpluginbeforehtmlprocessing以及链接标签更改钩子函数htmlwebpackpluginalterassettags分别监听页面构建插件html-webpack-plugin对于当前html页面的开始处理事件和链接标签更改事件。当html切入模块监听到对当前html页面的开始处理事件时,调用资源筛选模块,以通过资源筛选模块准确地确定该当前html页面确定使用的图片、动画等多媒体资源。当html切入模块监听到对当前html页面的链接标签更改事件时,将确定的该当前html页面确定使用的图片、动画等多媒体资源以link标签的形式插入到当前html页面的入口文件的head节点内。由此可知,该html切入模块可以用于实现上述页面处理装置400中第一监听单元410和声明单元450的相关功能。

资源筛选模块负责确定当前html页面确定使用的图片、动画等多媒体资源,也即该资源筛选模块可以用于实现上述页面处理装置中文本资源标识确定单元420,文本资源获取单元430,页面依赖资源确定单元440的相关功能。

本公开实施例的页面处理装置通过监听针对当前页面的开始处理事件,并在监听到该开始处理事件时确定当前页面依赖的文本资源标识,进而从编译资源表中获取与该文本资源标识相匹配的文本资源,并在该文本资源中查找编译资源表中的各多媒体资源标识,若在该文本资源中查找到某个多媒体资源标识,则确定该多媒体资源标识对应的多媒体资源是当前页面依赖的目标资源,进而在当前页面的入口文件中声明上述当前页面依赖的目标资源为预加载属性,实现了仅将当前页面确定使用到的多媒体资源声明为预加载,排除了对当前页面不可能使用的多媒体资源的预加载声明,从而在当前页面的预加载过程中仅对确定使用到的多媒体资源进行预加载,而对于不可能使用到的多媒体资源不进行预加载,避免了非必要资源预加载造成的网络资源的浪费,提高网络资源利用率以及页面预加载效率。

关于上述实施例中的装置,其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述,此处将不做详细阐述说明。

在一示例性的实施方式中,还提供了一种电子设备,包括处理器;用于存储处理器可执行指令的存储器;其中,处理器被配置为执行存储器上所存放的指令时,实现上述任一实施方式中提供的页面处理方法。

该电子设备可以是终端、服务器或者类似的运算装置,以该电子设备是终端为例,图6是根据一示例性实施例示出的一种用于页面处理的电子设备的框图,具体来讲:

所述终端可以包括rf(radiofrequency,射频)电路610、包括有一个或一个以上计算机可读存储介质的存储器620、输入单元630、显示单元640、传感器650、音频电路660、wifi(wirelessfidelity,无线保真)模块670、包括有一个或者一个以上处理核心的处理器680、以及电源690等部件。本领域技术人员可以理解,图6中示出的终端结构并不构成对终端的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。其中:

rf电路610可用于收发信息或通话过程中,信号的接收和发送,特别地,将基站的下行信息接收后,交由一个或者一个以上处理器680处理;另外,将涉及上行的数据发送给基站。通常,rf电路610包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(sim)卡、收发信机、耦合器、lna(lownoiseamplifier,低噪声放大器)、双工器等。此外,rf电路610还可以通过无线通信与网络和其他终端通信。所述无线通信可以使用任一通信标准或协议,包括但不限于gsm(globalsystemofmobilecommunication,全球移动通讯系统)、gprs(generalpacketradioservice,通用分组无线服务)、cdma(codedivisionmultipleaccess,码分多址)、wcdma(widebandcodedivisionmultipleaccess,宽带码分多址)、lte(longtermevolution,长期演进)、电子邮件、sms(shortmessagingservice,短消息服务)等。

存储器620可用于存储软件程序以及模块,处理器680通过运行存储在存储器620的软件程序以及模块,从而执行各种功能应用以及数据处理。存储器620可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、功能所需的应用程序等;存储数据区可存储根据所述终端的使用所创建的数据等。此外,存储器620可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地,存储器620还可以包括存储器控制器,以提供处理器680和输入单元630对存储器620的访问。

输入单元630可用于接收输入的数字或字符信息,以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地,输入单元630可包括触敏表面631以及其他输入设备632。触敏表面631,也称为触摸显示屏或者触控板,可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面631上或在触敏表面631附近的操作),并根据预先设定的程式驱动相应的连接装置。可选的,触敏表面631可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器680,并能接收处理器680发来的命令并加以执行。此外,可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面631。除了触敏表面631,输入单元630还可以包括其他输入设备632。具体地,其他输入设备632可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元640可用于显示由用户输入的信息或提供给用户的信息以及所述终端的各种图形用户接口,这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元640可包括显示面板641,可选的,可以采用lcd(liquidcrystaldisplay,液晶显示器)、oled(organiclight-emittingdiode,有机发光二极管)等形式来配置显示面板641。进一步的,触敏表面631可覆盖显示面板641,当触敏表面631检测到在其上或附近的触摸操作后,传送给处理器680以确定触摸事件的类型,随后处理器680根据触摸事件的类型在显示面板641上提供相应的视觉输出。其中,触敏表面631与显示面板641可以两个独立的部件来实现输入和输入功能,但是在某些实施例中,也可以将触敏表面631与显示面板641集成而实现输入和输出功能。

所述终端还可包括至少一种传感器650,比如光传感器、运动传感器以及其他传感器。具体地,光传感器可包括环境光传感器及接近传感器,其中,环境光传感器可根据环境光线的明暗来调节显示面板641的亮度,接近传感器可在所述终端移动到耳边时,关闭显示面板641和/或背光。作为运动传感器的一种,重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小,静止时可检测出重力的大小及方向,可用于识别终端姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等;至于所述终端还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器,在此不再赘述。

音频电路660、扬声器661,传声器662可提供用户与所述终端之间的音频接口。音频电路660可将接收到的音频数据转换后的电信号,传输到扬声器661,由扬声器661转换为声音信号输出;另一方面,传声器662将收集的声音信号转换为电信号,由音频电路660接收后转换为音频数据,再将音频数据输出处理器680处理后,经rf电路610以发送给比如另一终端,或者将音频数据输出至存储器620以便进一步处理。音频电路660还可能包括耳塞插孔,以提供外设耳机与所述终端的通信。

wifi属于短距离无线传输技术,所述终端通过wifi模块670可以帮助用户收发电子邮件、浏览网页和访问流式媒体等,它为用户提供了无线的宽带互联网访问。虽然图6示出了wifi模块670,但是可以理解的是,其并不属于所述终端的必须构成,完全可以根据需要在不改变发明的本质的范围内而省略。

处理器680是所述终端的控制中心,利用各种接口和线路连接整个终端的各个部分,通过运行或执行存储在存储器620内的软件程序和/或模块,以及调用存储在存储器620内的数据,执行所述终端的各种功能和处理数据,从而对终端进行整体监控。可选的,处理器680可包括一个或多个处理核心;优选的,处理器680可集成应用处理器和调制解调处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等,调制解调处理器主要处理无线通信。可以理解的是,上述调制解调处理器也可以不集成到处理器680中。

所述终端还包括给各个部件供电的电源690(比如电池),优选的,电源可以通过电源管理系统与处理器680逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源690还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出,所述终端还可以包括摄像头、蓝牙模块等,在此不再赘述。具体在本实施例中,终端还包括有存储器,以及一个或者一个以上的程序,其中一个或者一个以上程序存储于存储器中,且经配置以由一个或者一个以上处理器执行。上述一个或者一个以上程序包含用于执行上述方法实施例提供的页面处理方法的指令。

在一示例性的实施方式中,还提供了一种包括指令的计算机可读存储介质,例如包括指令的存储器620,上述指令可由装置600的处理器680执行以完成上述方法。可选地,计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。

在示例性的实施方式中,还提供了一种计算机程序产品,包括计算机程序/指令,所述计算机程序/指令被处理器执行时实现上述任一实施方式中提供的页面处理方法。

本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。

应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1