静态资源的加载方法及装置与流程

文档序号:16146924发布日期:2018-12-05 16:36阅读:164来源:国知局
本申请涉及计算机
技术领域
,尤其涉及一种静态资源的加载方法及装置。
背景技术
随着信息技术的快速发展,用户通过网页浏览可以获取越来越多的信息,并且网页展示给用户的内容也越来越丰富,因此,现在的网页中包含越来越多的静态资源。例如,该静态资源可以是脚本语言(javascript,js)文件、层叠样式表(cascadingstylesheets,css)文件等。一般的,用户在进行网页浏览时,需要向服务器发送请求,以从服务器获取相应的网页内容。并且,服务器返回给用户的内容包括静态资源和动态资源。如果用户在进行网页浏览时,每次都从服务器获取所访问网页的静态资源进行加载,在网络较差的情况下,会使得网页加载很慢,加大移动终端白屏时间。尤其是针对移动终端连接非无线保真(wireless-fidelity,wi-fi)网络的情况下,网络延迟很大,从而导致在304或者200情况下,网页的静态资源加载很慢,从而导致网页加载很慢,加大移动终端的白屏时间,使得用户体验较差。因此,有必要提出一种静态资源的加载方法,以改善现阶段网页加载所存在的问题。技术实现要素:本申请实施例的目的是提供一种静态资源的加载方法及装置,以改善现阶段在进行网页加载时所存在的问题。为解决上述技术问题,本申请实施例是这样实现的:本申请实施例提供了一种静态资源的加载方法,应用于移动终端,该方法包括:响应于用户对浏览器的目标网页的访问请求,获取所述目标网页所对应的静态资源表;其中,所述静态资源表中存储有所述目标网页需要加载的静态资源的相关信息;根据所述相关信息在浏览器的本地数据中查找与所述静态资源表相对应的静态资源;若存在未查找到的静态资源,则从服务器获取未查找到的静态资源;按照所述静态资源表中所述静态资源的加载顺序加载得到的所述静态资源。本申请还实施例提供了一种静态资源的加载装置,应用于移动终端,该装置包括:第一获取模块,用于响应于用户对浏览器的目标网页的访问请求,获取所述目标网页所对应的静态资源表;其中,所述静态资源表中存储有所述目标网页需要加载的静态资源的相关信息;查找模块,用于根据所述相关信息在浏览器的本地数据中查找与所述静态资源表相对应的静态资源;第二获取模块,用于若存在未查找到的静态资源,则从服务器获取未查找到的静态资源;加载模块,用于按照所述静态资源表中所述静态资源的加载顺序加载得到的所述静态资源。本申请实施例还提供了一种静态资源的加载设备,包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如上述静态资源的加载方法的步骤。本申请实施例提供了一种计算机可读存储介质,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如上述静态资源的加载方法的步骤。通过本申请实施例提供的技术方案,在接收到用户对目标网页的访问请求,并获取到目标网页所对应的静态资源表后,可以在浏览器的本地数据中查找与静态资源表相对应的静态资源,若是,存在未查找到的静态资源,则再从服务器获取未查找到的静态资源,最后加载得到的静态资源。本申请实施例中,通过从浏览器的本地数据中获取目标网页所需要加载的静态资源,可以减少或者避免从服务器获取静态资源,减少了网络状态对静态资源加载所产生的影响,提高了在网络较差或者网络延迟较大的情况下静态资源的加载速度,从而提高了网页的加载速度,减少了移动终端的白屏时间,提高了用户的体验感;另外,由于减少了从服务器获取的静态资源的数量,还可以减少用户访问网页所消耗的流量。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。图1为本申请实施例提供的静态资源的加载方法的第一种方法流程图;图2为本申请实施例提供的静态资源的加载方法中,本地数据中静态资源的一种存储页面的示意图;图3为本申请实施例提供的静态资源的加载方法的第二种方法流程图;图4为本申请实施例提供的静态资源的加载方法的第三种方法流程图;图5为本申请实施例提供的静态资源的加载装置的模块组成示意图;图6为本申请实施例提供的静态资源的加载设备的结构示意图。具体实施方式为了使本
技术领域
的人员更好地理解本申请实施例中的技术方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。本申请实施例的思想在于,利用移动终端上浏览器的本地存储(localstorage)的存储特性,将浏览器网页上的静态资源存储在浏览器的本地数据中,这样,当用户打开浏览器上的某个网页时,可以直接从浏览器的本地数据中获取该网页所需要加载的静态资源,避免了或者减少了从服务器获取的静态资源的数量,使得在网速较慢或者网络延迟较大的情况下,可以提高静态资源的加载速度,从而提高网页的加载速度,减少移动终端的白屏时间;另外,由于减少了从服务器获取的静态资源的数量,从而可以降低用户在访问网页时所消耗的流量。基于此思想,本申请实施例提供了一种静态资源的加载方法,该方法可以应用于移动终端。其中,上述移动终端可以是手机、平板电脑、计算机等。图1为本申请实施例提供的静态资源的加载方法的第一种方法流程图,图1所示的方法,至少包括如下步骤:步骤102,响应于用户对浏览器的目标网页的访问请求,获取目标网页所对应的静态资源表;其中,该静态资源表中存储有上述目标网页需要加载的静态资源的相关信息。本申请实施例提供的静态资源的加载方法的执行主体为移动终端,具体的,可以为安装在移动终端上的静态资源的加载装置,如加载器等。需要说明的是,本申请实施例提供的方法主要应用于浏览器上的网页被访问时,需要加载被访问的网页的场景下。具体的,针对浏览器上的目标网页被访问,可以是用户直接通过浏览器客户端进行目标网页的访问,例如,用户在浏览器客户端输入访问请求;也可以是用户通过其他客户端链接到浏览器的目标网页,例如,用户在使用其他客户端时,通过打开其他用户分享的链接,进行目标网页的访问。当然,上述只是列举了两种用户访问浏览器的目标网页的具体应用场景,除此之外,用户还可以通过其他方式访问浏览器的目标网页,用户访问浏览器上的目标网页的具体场景并不局限于此,本申请实施例并不对用户通过何种途径访问浏览器的目标网页进行限制。其中,在本申请实施例中所涉及到的浏览器可以是安装在移动终端上的任意一种浏览器。上述目标网页指的是用户所要请求的某个网页。在本申请实施例中,当安装在浏览器上的静态资源的加载装置接收到用户对目标网页的访问请求时,首先需要获取目标网页所对应的静态资源表。所谓静态资源,一般指的是固定的文本或者图片,例如,可以是网页上的css文件、js文件等。在具体实施时,目标网页所对应的静态资源表可以在前端工程化开发的过程中生成。例如,可以在前端工程化开发的过程中,通过模块打包器(webpack)、fils3以及手动添加等方式打包js文件、css文件等静态资源。例如,在一种具体实施方式中,在进行前端工程化开发的过程中,会确定出每个网页所对应的js文件、css文件等静态资源,以及静态资源的加载顺序,然后,将确定好的静态资源表放入网页的超文本标记语言(hypertextmarkuplanguage,html)标签中,这样,在加载网页的html的时候,就会将静态资源表嵌入html里。当然,上述只是介绍了其中一种生成静态资源表的具体过程,静态资源表还可以通过现有技术中的其他方式生成,具体生成方式并不局限于,此处不再一一赘述静态资源表的生成方法。因此,在具体实施时,静态资源的加载装置可以直接从目标网页的html中获取嵌入在其内的静态资源表。具体的,在本申请实施例中,上述静态资源表中一般存储有目标网页需要加载的静态资源的相关信息,其中,该相关信息用于标识目标网页所需要的静态资源。在一种具体实施方式中,上述相关信息可以包括静态资源的标识和版本号等。其中,上述静态资源的标识可以为静态资源的名称、静态资源的统一资源定位符(uniformresourcelocator,url)等,只要是可以标识该静态资源即可。在静态资源的加载的过程中,各个静态资源在进行加载时存在依赖关系,因此,静态资源的加载存在先后顺序。比如,目标网页需要加载的静态资源为静态资源1、静态资源2和静态资源3三个静态资源,静态资源1的加载需要依赖静态资源2和静态资源3,即静态资源1需要在静态资源2和静态资源3已经加载的基础上进行加载。在该种情况下,为了避免静态资源加载时出错,在进行静态资源的加载时,需要先加载静态资源2和静态资源3,然后再加载静态资源1。在本申请实施例中,为了保证获取到目标网页的静态资源后,后续在进行静态资源加载的过程中,能够按照各个静态资源的加载顺序进行静态资源的加载,本申请实施例中的上述静态资源表中存储有每个静态资源所对应的加载顺序。在一种具体实施方式中,静态资源表中可以存储有每个静态资源所对应的加载顺序、静态资源的标识以及静态资源的版本号。其中,一种可能的静态资源表的具体形式如表1所示。表1静态资源的标识加载顺序静态资源的版本号静态资源12版本1静态资源21版本2静态资源33版本1在上述表1中以静态资源1、静态资源2以及静态资源3三个静态资源为例进行举例说明,具体实施中,静态资源表中的静态资源的个数是根据目标网页所设置的,并不局限于。另外,在上述表1中,只是示例性的说明静态资源表的可能形式。上述表1中每个静态资源的标识、所对应的加载顺序以及静态资源的版本号只是示例性说明,并不能代表真实数据,也并不构成对本申请实施例的限定。在上述表1所示的情形中,则是在每个静态资源后面标出该静态资源的加载顺序,这样,后续在进行目标网页的静态资源的加载时,可以按照上述给出的静态资源的加载顺序进行静态资源的加载,从而可以避免静态资源加载时出错的情况的发生。除了上述表1所列的静态资源表的具体形式外,在静态资源表的另外一种具体形式中,可以直接按照各个静态资源的加载顺序将静态资源进行排序,因此,静态资源表的另外一种可能的具体形式如表2所示。表2静态资源的标识静态资源的版本号静态资源2版本1静态资源1版本1静态资源3版本1在表2所示的静态资源表中,并不没有标记各个静态资源所对应的加载顺序,直接将各个静态资源按照其加载的顺序进行排序。采用表2所示的静态资源表的具体形式,即提供了静态资源的加载顺序,避免后续静态资源加载时出错,还减少了静态资源表中的数据量(不需要存储各个静态资源的加载顺序),节省了空间。在本申请实施例中,存储在静态资源表中的静态资源的版本号可以使用md5版本号。步骤104,根据上述相关信息在浏览器的本地数据中查找与静态资源表相对应的静态资源。在本申请实施例中,当通过上述步骤102获取到目标网页所对应的静态资源表后,则需要在浏览器的本地数据中查找与静态资源表相对应的静态资源。在本申请实施例中,当获取到目标网页所对应的静态资源表后,首先在浏览器的本地数据中查找与静态资源表相对应的静态资源,若是在本地数据中存在与静态资源表相对应的静态资源,则直接从本地数据中获取该静态资源即可,这样可以避免从服务器获取该静态资源,减少或者避免了静态资源的加载受到网络情况的影响;同时,由于可以从本地数据中获取到静态资源,还可以减少从服务器获取静态资源的数量,从而减少了从服务器获取的数据量,进而降低用户在浏览网页时的流量消耗。需要说明的是,在浏览器的本地数据中可能存在目标网页所需要的所有的静态资源,也可能只存在部分目标网页所需要的静态资源。若是浏览器的本地数据中存储有静态资源表中的所有静态资源,则只需要从本地数据中获取静态资源表中的静态资源即可。若是浏览器的本地数据中只存储有目标网页需要的部分静态资源,即存在未在本地数据中查找到的静态资源,这时则需要执行步骤106。另外,需要指出的是,上述所提到的未在本地数据中查找到的静态资源,可以是在浏览器的本地数据中不存在该静态资源,也可能是在浏览器的本地数据中所存储的该静态资源的版本号与目标网页所需要的静态资源的版本号不一致。为便于理解,下述将详细介绍上述根据相关信息在浏览器的本地数据中查找与静态资源表相对应的静态资源的具体过程。在一种具体实施方式中,上述静态资源的相关信息包括静态资源的标识以及静态资源的版本号;其中,上述静态资源的标识可以是静态资源的名称或者静态资源的url。相应的,在步骤104中,根据相关信息在浏览器的本地数据中查找与静态资源表相对应的静态资源,具体包括如下步骤(1)和步骤(2);步骤(1)、根据静态资源表中各个静态资源的标识在本地数据中查找该标识对应的静态资源。步骤(2)、判断查找到的上述静态资源的版本号与静态资源表中存储的该静态资源的版本号是否一致;若是,则确定查找到的静态资源为静态资源表所对应的静态资源。在本申请实施例中,在浏览器的本地数据中存储有该浏览器各个网页所对应的静态资源,具体的,可以存储静态资源的标识、静态资源的版本号以及静态资源的具体内容。其中,静态资源在本地数据中一种可能的存储页面如图2所示。当然,图2只是示例性介绍静态资源的存储形式,并未对所存储的静态资源的具体内容进行限定。在图2所示的情况中,在浏览器的本地数据中,在每个静态资源的存储页面上均存储有该静态资源的标识(该标识可以是静态资源的名称或者url)、该静态标识所对应的静态资源的版本号以及该静态资源的具体内容;其中,静态资源的具体内容可以是js文件、css文件等。在本申请实施例中,在浏览器的本地数据中,静态资源的版本号可以使用md5版本号。在一种具体实施方式中,静态资源以键-值(key-value)的形式存储在浏览器的本地数据中;其中,上述key包括静态资源的标识;上述值包括静态资源的版本号。当然,在本地数据中存储的静态资源除了静态资源的标识以及静态资源的版本号外,还包括静态资源的具体内容。其中,上述静态资源的具体内容可以是js文件和/或css文件。在一种具体实施方式中,存储在浏览器的本地数据中的静态资源可以是在用户第一次访问该网页时进行存储的。例如,当用户第一次访问浏览器的目标网页时,从服务器获取该网页所需要加载的静态资源,并在获取到目标网页的静态资源后,一方面加载该静态资源,另外一方面将获取到的静态资源按照预设形式存储在浏览器的本地数据中。其中,上述预设形式则指的是以key-value的形式存储该静态资源的标识和版本号。具体的,在获取到目标网页的静态资源后,确定出目标网页所对应的各个静态资源的标识以及版本号,将静态资源的标识作为key值,将该静态资源的版本号作为value值,然后,以key-value的形式将该将该资源的标识和版本号写入浏览器的本地数据中,然后,再将该静态资源的具体内容写入该静态资源所对应页面。这样,当用户第二次或者第三次等再次访问该目标网页时,就可以直接从浏览器的本地数据中获取目标网页所对应的静态资源。具体的,在上述步骤(1)中,可以先在浏览器的本地数据中查找是否存在与静态资源表中的静态资源的标识相匹配的静态资源,若是未查找到与静态资源表中的静态资源的标识相匹配的静态资源,则说明在本地数据中不存在该静态资源;若是查找到与静态资源表中的静态资源的标识相匹配的静态资源,则说明在本地数据中存在与该静态资源的标识相匹配的静态资源。但是,查找到的静态资源是否为目标网页所需要的静态资源,还需要通过步骤(2)进行进一步的验证。即判断查找到的静态资源的版本号与静态资源列表中存储的该静态资源的版本号是否一致,若是一致,则将从本地数据中查找到的静态资源确定为与静态资源表相对应的静态资源,否则,则认为在本地数据中未查找到该静态资源。在本申请实施例中,为了提高静态资源的查找速度,从而提高静态资源的加载速度,在步骤104中,可以同时并行进行多个静态资源的查找,这样可以大大缩短在本地数据中查找静态资源的时间。步骤106,若存在未查找到的静态资源,则从服务器获取未查找到的静态资源。在本申请实施例中,若是存在在浏览器的本地数据中未查找到的静态资源,则需要从服务器获取该静态资源。具体的,在本申请实施例中,上述步骤106中,从服务器获取未查找到的静态资源,具体包括如下过程:向服务器发送静态资源获取请求;其中,该请求中携带有静态资源的标识和静态资源的版本号;接收服务器返回的静态资源。具体的,在本申请实施例中,在向服务器发送静态资源获取请求时,可以通过可扩展超文本传输请求(xmlhttprequest,xhr)对象向服务器请求静态资源。在一种具体实施方式中,若是在步骤106中同时并行在浏览器的本地数据中查找多个静态资源,同时,确定出多个未查找到的静态资源,则向服务器发送的请求中,可以同时携带有未查找到的多个静态资源的标识和版本号,以便同时从服务器获取多个静态资源。步骤108,按照静态资源表中静态资源的加载顺序加载得到的静态资源。在本申请实施例中,当从浏览器的本地数据、或者从浏览器的本地数据以及服务器两者一起获取得到目标网页所需要加载的静态资源后,则开始加载静态资源。另外,在本申请实施例中,为了避免出现静态资源加载出错的问题,在加载静态资源时需要按照静态资源表中给出的静态资源的加载顺序进行静态资源的加载。为便于理解,下述将详细介绍上述步骤108中,静态资源的加载过程。在一种具体实施方式中,静态资源的具体内容为js文件,在该种情况下,对静态资源进行解析可以得出该静态资源所对应的js文件。相应的,上述步骤108中按照静态资源表中静态资源的加载顺序加载得到的静态资源,具体包括步骤一和步骤二;步骤一、将得到的每个静态资源所对应的js文件按照静态资源表中静态资源的加载顺序生成js文件队列;步骤二、按照上述js文件队列中js文件的排列顺序执行js文件。在本申请实施例中,在解析出获取到的每个静态资源中的js文件后,按照静态资源表中给出的各个静态资源的加载顺序将所有的js文件进行排序,生成js文件队列。需要说明的是,在js文件队列中,各个js文件在队列中的排列顺序就是该js文件所对应的静态资源的加载顺序。因此,当确定出目标网页所对应的js队列后,按照上述js文件队列中各个js文件的排列顺序执行js文件。在一种具体实施方式中,可以通过js控制js文件的执行,这样,在加载静态资源时,可以避免刷新,在浏览器的地址栏中重新进行输入从而造成的304请求。在本申请实施例中,通过按照静态资源的加载顺序执行静态资源所对应的js文件,可以避免出现静态资源加载出错的问题。当然,除了上述所介绍的情况外,在上述静态资源中,还有可能存储有目标网页所对应的css文件,因此,若是从静态资源中解析出的文件同时存在css文件和js文件时,上述步骤108中,按照静态资源表中静态资源的加载顺序加载得到的静态资源具体包括如下过程:解析得到的静态资源,得到静态资源中的css文件和js文件,然后将解析出的css文件和js文件进行排序,将所有的css文件排列在js文件的前面,得到第一文件序列;然后将第一文件序列中的所有的js文件按照静态资源表中静态资源的加载顺序进行排序,得到第二文件序列;最后,按照第二文件序列中所有文件的顺序进行执行。具体的,在进行css文件加载的过中,在加载完一个css文件时,可以先将加载的css文件在页面上隐藏起来,当所有的css文件都加载完成后再进行显示,这样,可以防止异步css所造成的网页页面错乱的问题。另外,在本申请实施例中,若是存在在浏览器的本地数据中未查找到的静态资源,则需要从服务器获取该静态资源。在该种情况下,为了便于用户在下次访问网页加载该静态资源时,可以直接从浏览器的本地数据中获取该静态资源,在本申请实施例中,当从服务器获取未查找到的静态资源之后,本申请实施例提供的方法还包括:将从服务器获取到的静态资源写入浏览器的本地数据中。具体的,在本申请实施例中,在将从服务器获取到的静态资源写入浏览器的本地数据的过程在前述已经进行了详细描述,具体写入过程可参考前述描述,此处不再赘述。在本申请实施例中,通过将从服务器获取到的未查找到的静态资源写入浏览器的本地数据中,可以不断扩展浏览器本地数据中静态资源的存储量,这样,当用户再次进行目标网页的访问时,可以从浏览器的本地数据中获取到更多的静态资源,从而减少从服务器获取静态资源的数量,进一步提高网络状态较差情况下,静态资源的加载速度;同时,还可以进一步降低用户访问目标网页时的流量消耗量。另外,针对苹果移动设备操作(ios)系统的移动终端,ios的网页视图(webview)在浏览器的本地存储中都是进行文件存储,并且,本地存储被清理的记录较低。这样,在浏览器退出程序后台时,在浏览器的本地存储的资源不会消失,从而解决了ios系统中退进程缓存失效的缺陷。另外,将静态资源存储在浏览器的本地数据中时,都是以文件为单位进行的存储,因此,缓存失效率较低。为便于理解本申请实施例提供的静态资源的加载方法,下述将通过具体实施例介绍本申请实施例提供的静态资源的加载方法。图3为本申请实施例提供的静态资源的加载方法的第二种方法流程图,图3所示的方法,至少包括如下步骤:步骤302,接收用户对目标网页的访问请求。其中,用户在访问目标网页时,可以直接通过浏览器客户端进行目标网页的访问,也可以通过其他应用程序客户端链接到目标网页进行访问。步骤304,获取目标网页所对应的静态资源表;其中,在静态资源表中存储有目标网页需要加载的静态资源的相关信息。其中,上述静态资源的相关信息至少包括静态资源的版本号,以及静态资源的标识,该静态资源的标识可以是静态资源的名称、静态资源的url等。步骤306,根据静态资源表中各个静态资源的名称在浏览器的本地数据中查找是否存在该名称相对应的静态资源;若存在,则执行步骤308,否则,执行步骤312。步骤308,判断查找到的静态资源的版本号与静态资源表中该静态资源的版本号是否一致;若一致,则执行步骤310;否则执行步骤312。步骤310,从浏览器的本地数据中获取该静态资源。步骤312,向服务发送静态资源获取请求;该静态资源获取请求中携带有需要获取的静态资源的名称和静态资源的版本号。步骤314,接收服务器返回的静态资源。步骤316,解析静态资源,得到每个静态资源所对应的js文件。步骤318,将得到的每个js文件按照静态资源表中静态资源的加载顺序进行排序,生成js文件队列。步骤320,按照js文件队列中js文件的排列顺序执行js文件。具体的,上述步骤320中,执行js文件的过程实际上就是静态资源的加载过程。图3所示静态资源的加载方法中各个步骤的具体实现过程与图1、图2所对应实施例中静态资源的加载方法中各个步骤的具体实现过程相同,因此,图3所示实施例中各个步骤的具体实现过程可参考图1、图2所对应实施例,具体过程不再赘述。在某些情况下,静态资源的具体内容中还包括css文件,针对该种情况,图4示出了本申请实施例提供的静态资源的加载方法的第三种方法流程图,图4所示的方法,至少包括如下步骤:步骤402,接收用户对目标网页的访问请求。其中,用户在访问目标网页时,可以直接通过浏览器客户端进行目标网页的访问,也可以通过其他应用程序客户端链接到目标网页进行访问。步骤404,获取目标网页所对应的静态资源表;其中,在静态资源表中存储有目标网页需要加载的静态资源的相关信息。其中,上述静态资源的相关信息至少包括静态资源的版本号,以及静态资源的标识,该静态资源的标识可以是静态资源的名称、静态资源的url等。步骤406,根据静态资源表中各个静态资源的名称在浏览器的本地数据中查找是否存在该名称相对应的静态资源;若存在,则执行步骤408,否则,执行步骤412。步骤408,判断查找到的静态资源的版本号与静态资源表中该静态资源的版本号是否一致;若一致,则执行步骤410;否则执行步骤412。步骤410,从浏览器的本地数据中获取该静态资源。步骤412,向服务发送静态资源获取请求;该静态资源获取请求中携带有需要获取的静态资源的名称和静态资源的版本号。步骤414,接收服务器返回的静态资源。步骤416,解析静态资源,得到静态资源中的css文件,以及每个静态资源所对应的js文件。步骤418,将css文件排列在所有的js文件前面,并将所有的js文件按照静态资源表中静态资源的加载顺序进行排序,生成文件队列。步骤420,按照文件队列中所有文件的排列顺序依次执行各个文件。在本申请实施例中,由于css文件与目标网页的显示有关系,目标网页在进行数据展示时,为了防止出现页面错乱的问题,需要先将css文件加载完成才可以进行页面内容的展示,因此,需要先执行css文件再执行js文件。图4所对应实施例中各个步骤的具体实现过程与图1、图2所对应实施例中静态资源的加载方法中各个步骤的具体实现过程相同,因此,图3所示实施例中各个步骤的具体实现过程可参考图1、图2所对应实施例,具体过程不再赘述。本申请实施例提供的静态资源的加载方法,在接收到用户对目标网页的访问请求,并获取到目标网页所对应的静态资源表后,可以在浏览器的本地数据中查找与静态资源表相对应的静态资源,若是,存在未查找到的静态资源,则再从服务器获取未查找到的静态资源,最后加载得到的静态资源。本申请实施例中,通过从浏览器的本地数据中获取目标网页所需要加载的静态资源,可以减少或者避免从服务器获取静态资源,减少了网络状态对静态资源加载所产生的影响,提高了在网络较差或者网络延迟较大的情况下静态资源的加载速度,从而提高了网页的加载速度,减少了移动终端的白屏时间,提高了用户的体验感;另外,由于减少了从服务器获取的静态资源的数量,还可以减少用户访问网页所消耗的流量。对应上述静态资源的加载方法,本申请实施例还提供了一种静态资源的加载装置,用于执行本申请实施例提供的静态资源的加载方法,该装置可以应用于移动终端,图5为本申请实施例提供的静态资源的加载装置的模块组成示意图,图5所示的装置,包括:第一获取模块501,用于响应于用户对浏览器的目标网页的访问请求,获取上述目标网页所对应的静态资源表;其中,上述静态资源表中存储有上述目标网页需要加载的静态资源的相关信息;查找模块502,用于根据上述相关信息在浏览器的本地数据中查找与上述静态资源表相对应的静态资源;第二获取模块503,用于若存在未查找到的静态资源,则从服务器获取未查找到的静态资源;加载模块504,用于按照上述静态资源表中上述静态资源的加载顺序加载得到的上述静态资源。可选地,本申请实施例提供的装置,还包括:写入模块,用于将从服务器获取到的静态资源写入上述浏览器的本地数据中。可选地,上述加载模块504,包括:生成单元,用于将得到的每个静态资源所对应的脚本语言js文件按照上述静态资源表中静态资源的加载顺序生成js文件队列;执行单元,用于按照上述js文件队列中上述js文件的排列顺序执行上述js文件。可选地,上述静态资源的相关信息包括静态资源的标识以及静态资源的版本号;相应的,上述查找模块502,包括:查找单元,用于根据上述静态资源表中各个静态资源的标识在上述本地数据中查找与上述标识对应的静态资源;判断单元,用于判断查找到的上述静态资源的版本号与上述静态资源表中存储的该静态资源的版本号是否一致;确定单元,用于若查找到的上述静态资源的版本号与静态资源表中存储的该静态资源的版本号一致,则确定查找到的上述静态资源为与上述静态资源表相对应的静态资源。可选地,上述静态资源以键-值key-value的形式存储在上述浏览器的本地数据中;其中,上述key包括静态资源的标识;上述value包括上述静态资源的版本号。可选地,上述第二获取模块503,包括:发送单元,用于向上述服务器发送静态资源获取请求;其中,上述静态资源获取请求中携带有上述静态资源的标识和静态资源的版本号;接收单元,用于接收上述服务器返回的上述静态资源。本申请实施例提供的静态资源的加载装置中,各个模块及单元均能实现上述方法实施例中相对应的各个具体步骤,各个模块及单元的具体功能可参考上述方法实施例,此处不再赘述。本申请实施例提供的静态资源的加载装置,在接收到用户对目标网页的访问请求,并获取到目标网页所对应的静态资源表后,可以在浏览器的本地数据中查找与静态资源表相对应的静态资源,若是,存在未查找到的静态资源,则再从服务器获取未查找到的静态资源,最后加载得到的静态资源。本申请实施例中,通过从浏览器的本地数据中获取目标网页所需要加载的静态资源,可以减少或者避免从服务器获取静态资源,减少了网络状态对静态资源加载所产生的影响,提高了在网络较差或者网络延迟较大的情况下静态资源的加载速度,从而提高了网页的加载速度,减少了移动终端的白屏时间,提高了用户的体验感;另外,由于减少了从服务器获取的静态资源的数量,还可以减少用户访问网页所消耗的流量。进一步地,基于上述静态资源的加载方法,本申请实施例还提供了一种静态资源的加载设备,图6为本申请实施例提供的静态资源的加载设备的结构示意图。如图6所示,静态资源的加载设备可因配置或性能不同而产生比较大的差异,可以包括一个或一个以上的处理器601和存储器602,存储器602中可以存储有一个或一个以上存储应用程序或数据。其中,存储器602可以是短暂存储或持久存储。存储在存储器602的应用程序可以包括一个或一个以上模块(图示未示出),每个模块可以包括对静态资源的加载设备中的一系列计算机可执行指令。更进一步地,处理器601可以设置为与存储器602通信,在静态资源的加载设备上执行存储器602中的一系列计算机可执行指令。静态资源的加载设备还可以包括一个或一个以上电源603,一个或一个以上有线或无线网络接口604,一个或一个以上输入输出接口605,一个或一个以上键盘606等。在一个具体的实施例中,静态资源的加载设备包括处理器,存储器,存储在存储器上并可在所述处理器上运行的计算机程序,该计算机程序被处理器执行时实现上述静态资源的加载方法实施例的各个过程,具体包括以下步骤:响应于用户对浏览器的目标网页的访问请求,获取上述目标网页所对应的静态资源表;其中,上述静态资源表中存储有上述目标网页需要加载的静态资源的相关信息;根据上述相关信息在浏览器的本地数据中查找与上述静态资源表相对应的静态资源;若存在未查找到的静态资源,则从服务器获取未查找到的静态资源;按照上述静态资源表中上述静态资源的加载顺序加载得到的上述静态资源。可选地,计算机可执行指令在被执行时,上述从服务器获取未查找到的静态资源之后,上述方法还包括:将从服务器获取到的静态资源写入上述浏览器的本地数据中。可选地,计算机可执行指令在被执行时,上述按照上述静态资源表中上述静态资源的加载顺序加载得到的上述静态资源,包括:将得到的每个静态资源所对应的脚本语言js文件按照上述静态资源表中静态资源的加载顺序生成js文件队列;按照上述js文件队列中上述js文件的排列顺序执行上述js文件。可选地,计算机可执行指令在被执行时,上述静态资源的相关信息包括上述静态资源的标识以及静态资源的版本号;上述根据上述相关信息在浏览器的本地数据中查找与上述静态资源表相对应的静态资源,包括:根据上述静态资源表中各个静态资源的标识在上述本地数据中查找与上述标识对应的静态资源;判断查找到的上述静态资源的版本号与上述静态资源表中存储的该静态资源的版本号是否一致;若是,则确定查找到的上述静态资源为与上述静态资源表相对应的静态资源。可选地,计算机可执行指令在被执行时,上述静态资源以键-值key-value的形式存储在上述浏览器的本地数据中;其中,上述key包括静态资源的标识;上述value包括上述静态资源的版本号。可选地,计算机可执行指令在被执行时,上述从服务器获取未查找到的静态资源,包括:向上述服务器发送静态资源获取请求;其中,上述静态资源获取请求中携带有上述静态资源的标识和静态资源的版本号;接收上述服务器返回的上述静态资源。本申请实施例提供的静态资源的加载设备,在接收到用户对目标网页的访问请求,并获取到目标网页所对应的静态资源表后,可以在浏览器的本地数据中查找与静态资源表相对应的静态资源,若是,存在未查找到的静态资源,则再从服务器获取未查找到的静态资源,最后加载得到的静态资源。本申请实施例中,通过从浏览器的本地数据中获取目标网页所需要加载的静态资源,可以减少或者避免从服务器获取静态资源,减少了网络状态对静态资源加载所产生的影响,提高了在网络较差或者网络延迟较大的情况下静态资源的加载速度,从而提高了网页的加载速度,减少了移动终端的白屏时间,提高了用户的体验感;另外,由于减少了从服务器获取的静态资源的数量,还可以减少用户访问网页所消耗的流量。进一步地,基于上述静态资源的加载方法,本申请实施例还提供了一种存储介质,用于存储计算机可执行指令,一种具体的实施例中,该存储介质可以为u盘、光盘、硬盘等,该存储介质存储的计算机可执行指令在被处理器执行时,能实现以下流程:响应于用户对浏览器的目标网页的访问请求,获取上述目标网页所对应的静态资源表;其中,上述静态资源表中存储有上述目标网页需要加载的静态资源的相关信息;根据上述相关信息在浏览器的本地数据中查找与上述静态资源表相对应的静态资源;若存在未查找到的静态资源,则从服务器获取未查找到的静态资源;按照上述静态资源表中上述静态资源的加载顺序加载得到的上述静态资源。可选地,该存储介质存储的计算机可执行指令在被处理器执行时,上述从服务器获取未查找到的静态资源之后,上述方法还包括:将从服务器获取到的静态资源写入上述浏览器的本地数据中。可选地,该存储介质存储的计算机可执行指令在被处理器执行时,上述按照上述静态资源表中上述静态资源的加载顺序加载得到的上述静态资源,包括:将得到的每个静态资源所对应的脚本语言js文件按照上述静态资源表中静态资源的加载顺序生成js文件队列;按照上述js文件队列中上述js文件的排列顺序执行上述js文件。可选地,该存储介质存储的计算机可执行指令在被处理器执行时,上述静态资源的相关信息包括上述静态资源的标识以及静态资源的版本号;上述根据上述相关信息在浏览器的本地数据中查找与上述静态资源表相对应的静态资源,包括:根据上述静态资源表中各个静态资源的标识在上述本地数据中查找与上述标识对应的静态资源;判断查找到的上述静态资源的版本号与上述静态资源表中存储的该静态资源的版本号是否一致;若是,则确定查找到的上述静态资源为与上述静态资源表相对应的静态资源。可选地,该存储介质存储的计算机可执行指令在被处理器执行时,上述静态资源以键-值key-value的形式存储在上述浏览器的本地数据中;其中,上述key包括静态资源的标识;上述value包括上述静态资源的版本号。可选地,该存储介质存储的计算机可执行指令在被处理器执行时,上述从服务器获取未查找到的静态资源,包括:向上述服务器发送静态资源获取请求;其中,上述静态资源获取请求中携带有上述静态资源的标识和静态资源的版本号;接收上述服务器返回的上述静态资源。本申请实施例提供的存储介质存储的计算机可执行指令在被处理器执行时,在接收到用户对目标网页的访问请求,并获取到目标网页所对应的静态资源表后,可以在浏览器的本地数据中查找与静态资源表相对应的静态资源,若是,存在未查找到的静态资源,则再从服务器获取未查找到的静态资源,最后加载得到的静态资源。本申请实施例中,通过从浏览器的本地数据中获取目标网页所需要加载的静态资源,可以减少或者避免从服务器获取静态资源,减少了网络状态对静态资源加载所产生的影响,提高了在网络较差或者网络延迟较大的情况下静态资源的加载速度,从而提高了网页的加载速度,减少了移动终端的白屏时间,提高了用户的体验感;另外,由于减少了从服务器获取的静态资源的数量,还可以减少用户访问网页所消耗的流量。本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。以上所述仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1