网页的访问方法、装置和计算机设备
技术领域
本发明涉及网页处理技术领域,尤其涉及一种网页的访问方法、装置和计算机设备。
背景技术
随着科技的不断进步,互联网技术已经深入到人们生活中的各个方面。用户在通过浏览器查看网页资料时,网页响应的快慢直接影响着用户的使用体验。从服务商角度,服务器面临更多的服务请求,会导致服务器压力过大。因此,亟需一种解决办法,能够对网页响应速度进行优化,减轻服务器压力。目前,主要通过sessionLocalStorage对网页中的内容进行本地缓存。但是,其仅仅是个临时存储器。当页面关闭之后再重新打开的时候,之前缓存的数据就不会在被保留了。而且在同一个浏览器中,不同标签页中的sessionStorage之间的缓存数据是不共享的。该技术无法满足长期读取本地缓存文件的需求。另一种方法就是采用LocalStorage存储机制。LocalStorage的生命周期是永久的,关闭浏览器之后localStorage中的缓存数据也不会消失。LocalStorage中存储的数据直接存储到本地客户端,数据可以直接读取。但是,LoacalStorage本身是有存储上限的,仅为5M左右。因此,无法满足更大数据的存储需求。
发明内容
本发明的目的旨在至少在一定程度上解决上述的技术问题之一。
为此,本发明的第一个目的在于提出一种网页的访问方法,从用户角度,页面加载速度更快、对用户的操作响应更及时,提升用户使用体验;从服务商角度,能够减少页面的请求数量、减小请求所占的带宽、能够减轻服务器的压力,提升服务器响应速度。
本发明的第二个目的在于提出一种网页的访问装置。
本发明的第三个目的在于提出一种计算机设备。
本发明的第四个目的在于提出一种非临时性计算机可读存储介质。
为了实现上述目的,本发明第一方面实施例提出一种网页的访问方法,该方法包括:
接收网页访问请求,并根据所述网页请求确定待访问数据;
判断预先建立的SDK本地缓存中与所述待访问数据对应的缓存数据是否需要更新;
如果不需要更新,则直接从所述SDK本地缓存中获取所述缓存数据;
将所述缓存数据载入到浏览器中进行展示。
可选的,方法还包括:
如果需要更新,则向服务器请求获取更新后的数据;
将所述更新后的数据缓存至所述SDK本地缓存中,并将所述更新后的数据载入到所述浏览器中进行展示,所述缓存数据或所述更新后的数据包括样式文件和/或动态脚本文件。
可选的,预先建立SDK本地缓存,包括:
根据浏览器的类型采用不同的方法创建异步通信对象,其中,创建方法包括但不限于XMLHttpRequest、ActiveXobject;
利用回调函数将所述异步通信对象与对应的处理函数进行绑定;
初始化所述异步通信对象;
创建SDK本地缓存的缓存文件列表。
可选的,所述缓存文件列表包括ID和版本号,判断预先建立的SDK本地缓存中与所述待访问数据对应的缓存数据是否需要更新,包括:
根据所述待访问数据的ID从所述缓存文件列表中查找到对应的缓存数据;
根据所述缓存数据的版本号和所述待访问数据的版本号判断所述缓存数据是否需要更新。
可选的,所述缓存数据或所述更新后的数据为多个时,将所述缓存数据或所述更新后的数据载入到浏览器中进行展示,包括:
利用DocumentFragment方法,将所述缓存数据或所述更新后的数据对应的元素***至DOM树中。
本发明实施例的网页的访问方法,通过接收网页访问请求,并根据所述网页请求确定待访问数据,以及判断预先建立的SDK本地缓存中与所述待访问数据对应的缓存数据是否需要更新,如果不需要更新,则直接从所述SDK本地缓存中获取所述缓存数据,并将所述缓存数据载入到浏览器中进行展示,从用户角度,页面加载速度更快、对用户的操作响应更及时,提升用户使用体验;从服务商角度,能够减少页面的请求数量、减小请求所占的带宽、能够减轻服务器的压力,提升服务器响应速度。
为了实现上述目的,本发明第二方面实施例提出了一种网页的访问装置,包括:
确定模块,用于接收网页访问请求,并根据所述网页请求确定待访问数据;
判断模块,用于判断预先建立的SDK本地缓存中与所述待访问数据对应的缓存数据是否需要更新;
获取模块,用于如果不需要更新,则直接从所述SDK本地缓存中获取所述缓存数据;
载入模块,用于将所述缓存数据载入到浏览器中进行展示。
可选的,所述获取模块,还用于:如果需要更新,则向服务器请求获取更新后的数据;
所述载入模块,还用于:将所述更新后的数据缓存至所述SDK本地缓存中,并将所述更新后的数据载入到所述浏览器中进行展示,所述缓存数据或所述更新后的数据包括样式文件和/或动态脚本文件。
可选的,所述装置还包括建立模块,所述建立模块用于:
根据浏览器的类型采用不同的方法创建异步通信对象,其中,创建方法包括但不限于XMLHttpRequest、ActiveXobject;
利用回调函数将所述异步通信对象与对应的处理函数进行绑定;
初始化所述异步通信对象;
创建SDK本地缓存的缓存文件列表。
可选的,所述缓存文件列表包括ID和版本号,所述判断模块,用于:
根据所述待访问数据的ID从所述缓存文件列表中查找到对应的缓存数据;
根据所述缓存数据的版本号和所述待访问数据的版本号判断所述缓存数据是否需要更新。
可选的,所述缓存数据或所述更新后的数据为多个时,所述载入模块,用于:
利用DocumentFragment方法,将所述缓存数据或所述更新后的数据对应的元素***至DOM树中。
本发明实施例的网页的访问装置,通过接收网页访问请求,并根据所述网页请求确定待访问数据,以及判断预先建立的SDK本地缓存中与所述待访问数据对应的缓存数据是否需要更新,如果不需要更新,则直接从所述SDK本地缓存中获取所述缓存数据,并将所述缓存数据载入到浏览器中进行展示,从用户角度,页面加载速度更快、对用户的操作响应更及时,提升用户使用体验;从服务商角度,能够减少页面的请求数量、减小请求所占的带宽、能够减轻服务器的压力,提升服务器响应速度。
为了实现上述目的,本发明第三方面实施例提出了一种计算机设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时,实现如第一方面实施例所述的网页的访问方法。
为了实现上述目的,本发明第四方面实施例还提出了一种非临时性计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如第一方面实施例所述的网页的访问方法。
本发明附加的方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
构成本发明的一部分的说明书附图用来提供对本发明的进一步理解,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1是本发明一个实施例的网页的访问方法的流程图;
图2是本发明另一个实施例的网页的访问方法的流程图;
图3是预先建立SDK本地缓存的方法流程图;
图4是本发明一个实施例的网页的访问装置的结构示意图;
图5是本发明另一个实施例的网页的访问装置的结构示意图。
具体实施方式
需要说明的是,在不冲突的情况下,本发明中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
以下结合具体实施例对本发明作进一步详细描述,这些实施例不能理解为限制本发明所要求保护的范围。
现有技术中,通常是基于该请求向相应的服务器请求用户想要访问的网页内容,服务器将网页内容反馈至本地,再通过浏览器进行显示。但是,如果网页内容数据量过大如网页中***有视频、音频等文件,可能会导致网页的响应速度变慢。为了解决该问题,本发明提出一种网页的访问方法、装置和计算机设备。
下面参考附图描述本发明实施例的网页的访问方法、装置和计算机设备。
图1是本发明一个实施例的网页的访问方法的流程图,如图1所示,该方法包括以下步骤:
S1,接收网页访问请求,并根据网页请求确定待访问数据。
用户可通过本地的浏览器发出网页访问请求,对该网页访问请求进行解析可确定出用户想要获取的网页内容,即待访问数据。
S2,判断预先建立的SDK本地缓存中与待访问数据对应的缓存数据是否需要更新。
前面已经提到现有技术中是向服务器请求待访问数据,而本发明则是先从预先建立的SDK本地缓存中请求待访问数据。如果本地缓存中已经有该数据,那么就无需向服务器发出请求,既提高了浏览器的响应速度,又减轻了服务器的负担。然而,网络中的数据并不是一成不变的,因此需要对SDK本地缓存中的数据进行更新,才能满足用户最新的访问需求。
在本发明的一个实施例中,SDK本地缓存通过缓存文件列表对缓存数据进行管理,如resourceJavaScriptList。缓存数据列表中包括了ID和版本号等。通过ID可以得知相同ID的数据,再通过版本号确定相同ID的数据的版本的新旧。如采用时间戳来确定版本号。
具体地,可根据待访问数据的ID从缓存文件列表中查找到对应的缓存数据,然后根据缓存数据的版本号和待访问数据的版本号判断缓存数据是否需要更新。如果用户请求的待访问数据的版本号高于(时间晚于)SDK本地缓存中对应的缓存数据的版本号,则说明SDK本地缓存中对应的缓存数据需要更新,否则无需更新。
S3,如果不需要更新,则直接从SDK本地缓存中获取缓存数据。
也就是说,SDK本地缓存中对应的缓存数据为最新版本,可在本地直接提供给前端,无需向服务器发出请求,提高浏览器的响应速度,减轻服务器的负担。
S4,将缓存数据载入到浏览器中进行展示。
其中,缓存数据可以是CSS这样的样式文件,也可以是JS这样的动态脚本文件等。
例如,从SDK本地缓存中读取到的JS文件或CSS文件来写入到html页面中。同时支持内联、外联方式的JavaScript和CSS代码的写入,使得内容能够在浏览器中显示。
此外,在缓存数据为多个时,那么其对应的元素也为多个,而每个元素又对应DOM树中的一个节点。每生成一个节点,就会在DOM树中执行一次append***动作,那么生成多少个节点就会有多少个回流和重绘的动作,导致资源耗费过多,页面响应变慢。因此,在本发明的一个实施例中,利用DocumentFragment方法将多个元素一次性***至DOM树中,生成相应节点,在该过程中不会出现向DOM树中重复***元素节点的操作,即避免了浏览器对DOM进行多次的重构渲染,也就将多次的回流和重绘动作合并成了一次,无需生成更多的DOM树节点,高效可靠。
在本发明的另一个实施例中,如图2所示,还包括以下步骤:
S5,如果需要更新,则向服务器请求获取更新后的数据。
S6,将更新后的数据缓存至SDK本地缓存中,并将更新后的数据载入到浏览器中进行展示。
本实施例描述的是在需要更新的情况下,需要先对SDK本地缓存中的缓存数据进行更新,然后再将更新后的数据缓存至SDK本地缓存中,并将更新后的数据载入到浏览器中进行展示。同理,这些更新后的数据也可以是CSS样式文件,也可以是JS动态脚本文件等。
下面具体介绍一下预先建立SDK本地缓存的详细过程。如图3所示,具体包括以下步骤:
S31,创建异步通信对象。
可根据浏览器的类型采用不同的方法创建异步通信对象。具体地,首先可确定浏览器的类型。浏览器的类型可分为两种,第一类型可包括firefox、chrome、edge等遵循W3C标准的常规浏览器,第二类型可包括IE浏览器。两种类型的浏览器创建异步通信对象的方法不同。当浏览器为第一类型时,可通过XMLHttpRequest方法创建异步通信对象如xhr对象;当浏览器为第二类型时,可通过ActiveXobject方法创建异步通信对象。
Xhr对象能够在不重新加载页面的情况下更新网页,在页面已加载后的情况下从服务器请求数据、接收数据和在后台向服务器发送数据。
S32,利用回调函数将异步通信对象与对应的处理函数进行绑定。
在创建好异步通信对象之后,可开始进行readyState回调函数的处理,通过捕获当前xhr对象的请求状态onreadystatechange。当该请求状态的标识为200时,说明请求状态正常,可在回调callback中传入responseText字符串进行处理函数绑定。随后,在用get请求函数向服务器发送传送数据请求之前,调用para函数来进行参数转换。在上述过程中,将get请求函数前置目的是将xhr对象的状态改变时的回调函数提前,防止请求完成、状态改变,但没有为相应的事件赋上处理函数的情况发生。
S33,初始化异步通信对象。
通过init方法进初始化异步通信对象,并将创建好的xhr对象返回给Xhrfactory。
S34,创建SDK本地缓存的缓存文件列表。
缓存文件列表中的数据结构中要可包括ID、URL(需下载的JS文件和CSS文件的地址)以及TYPE(文件类型)。通过TYPE区分文件类型,主要是因为在获取到缓存的JS文件或CSS文件时,浏览器针对不同文件类型的解析方法是不同的。
通过上述方法,一个完整的SDK本地缓存就创建完成了。它的原理是先读取本地缓存文件,如果本地无法满足需求,再去调用服务器来更新本地的缓存文件。该SDK本地缓存只需维护自身的缓存文件列表,就可以在页面上缓存任何东西。已缓存的数据文件就无需去等待浏览器的请求和解析了,不用在等请求完成之后才看到所需的页面内容,优化了页面的响应速度。
本发明实施例的网页的访问方法,通过接收网页访问请求,并根据网页请求确定待访问数据,以及判断预先建立的SDK本地缓存中与待访问数据对应的缓存数据是否需要更新,如果不需要更新,则直接从SDK本地缓存中获取缓存数据,并将缓存数据载入到浏览器中进行展示,从用户角度,页面加载速度更快、对用户的操作响应更及时,提升用户使用体验;从服务商角度,能够减少页面的请求数量、减小请求所占的带宽、能够减轻服务器的压力,提升服务器响应速度。
为了实现上述实施例,本发明还提出了一种网页的访问装置。
图4是本发明一个实施例的网页的访问装置的结构示意图。
如图4所示,该装置包括确定模块41、判断模块42、获取模块43以及载入模块44。
确定模块41,用于接收网页访问请求,并根据网页请求确定待访问数据;
判断模块42,用于判断预先建立的SDK本地缓存中与待访问数据对应的缓存数据是否需要更新;
获取模块43,用于如果不需要更新,则直接从SDK本地缓存中获取缓存数据;
载入模块44,用于将缓存数据载入到浏览器中进行展示。
此外,获取模块43还用于:如果需要更新,则向服务器请求获取更新后的数据;载入模块44还用于:将更新后的数据缓存至SDK本地缓存中,并将更新后的数据载入到浏览器中进行展示。缓存数据或更新后的数据包括样式文件和/或动态脚本文件,如CSS文件和/或JS文件。
在另一个实施例中,如图5所示,该装置还包括建立模块45。
建立模块45用于:根据浏览器的类型采用不同的方法创建异步通信对象;利用回调函数将异步通信对象与对应的处理函数进行绑定;初始化异步通信对象;创建SDK本地缓存的缓存文件列表。其中,创建方法包括但不限于XMLHttpRequest、ActiveXobject。
缓存文件列表包括ID和版本号,判断模块42,具体用于:根据待访问数据的ID从缓存文件列表中查找到对应的缓存数据;根据缓存数据的版本号和待访问数据的版本号判断缓存数据是否需要更新。
缓存数据或更新后的数据为多个时,载入模块44,用于:利用DocumentFragment方法,将缓存数据或更新后的数据对应的元素***至DOM树中。
应当理解的是,本实施例的网页的访问装置与第一方面实施例的网页的访问方法的描述一致,此处不再赘述。
本发明实施例的网页的访问装置,通过接收网页访问请求,并根据网页请求确定待访问数据,以及判断预先建立的SDK本地缓存中与待访问数据对应的缓存数据是否需要更新,如果不需要更新,则直接从SDK本地缓存中获取缓存数据,并将缓存数据载入到浏览器中进行展示,从用户角度,页面加载速度更快、对用户的操作响应更及时,提升用户使用体验;从服务商角度,能够减少页面的请求数量、减小请求所占的带宽、能够减轻服务器的压力,提升服务器响应速度。
为了实现上述实施例,本发明还提出了一种计算机设备。
该计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时,实现如第一方面实施例的网页的访问方法。
为了实现上述实施例,本发明还提出了一种非临时性计算机可读存储介质。
该非临时性计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现如第一方面实施例的网页的访问方法。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
在流程图中表示或在此以其他方式描述的逻辑和/或步骤,例如,可以被认为是用于实现逻辑功能的可执行指令的定序列表,可以具体实现在任何计算机可读介质中,以供指令执行***、装置或设备(如基于计算机的***、包括处理器的***或其他可以从指令执行***、装置或设备取指令并执行指令的***)使用,或结合这些指令执行***、装置或设备而使用。就本说明书而言,"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行***、装置或设备或结合这些指令执行***、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下:具有一个或多个布线的电连接部(电子装置),便携式计算机盘盒(磁装置),随机存取存储器(RAM),只读存储器(ROM),可擦除可编辑只读存储器(EPROM或闪速存储器),光纤装置,以及便携式光盘只读存储器(CDROM)。另外,计算机可读介质甚至可以是可在其上打印程序的纸或其他合适的介质,因为可以例如通过对纸或其他介质进行光学扫描,接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得程序,然后将其存储在计算机存储器中。
应当理解,本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中,多个步骤或方法可以用存储在存储器中且由合适的指令执行***执行的软件或固件来实现。例如,如果用硬件来实现,和在另一实施方式中一样,可用本领域公知的下列技术中的任一项或他们的组合来实现:具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路,具有合适的组合逻辑门电路的专用集成电路,可编程门阵列(PGA),现场可编程门阵列(FPGA)等。
需要说明的是,在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外,在不相互矛盾的情况下,本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外,在不相互矛盾的情况下,本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。