CN106790687A

CN106790687A - 网页呈现方法、网页数据处理方法和服务器

Info

Publication number: CN106790687A
Application number: CN201710086773.XA
Authority: CN
Inventors: 徐志军; 伍芬尧
Original assignee: Chong Chong (beijing) Polytron Technologies Inc
Current assignee: Chong Chong (beijing) Polytron Technologies Inc
Priority date: 2017-02-17
Filing date: 2017-02-17
Publication date: 2017-05-31

Abstract

公开了一种网页呈现方法、和网页数据处理方法和服务器，通过在服务器端将开发获取的网页静态资源文件进行合并压缩为静态资源数据包，同时，根据静态资源数据包修改对应的网页超文本标记文件，并在接收到访问请求时向客户端反馈静态资源数据包的一致性摘要信息，由此，可以使得客户端浏览器以较小的空间对已经访问过的网页进行缓存，在再次访问时不需要重新向服务器进行请求，基于本地缓存的网页数据进行加载就可以实现网页呈现，本发明可以加快浏览器对网页的加载速度，同时减轻服务器的负担，较少对于网络带宽的占用和流量的消耗。

Description

网页呈现方法、网页数据处理方法和服务器

技术领域

本发明涉及互联网技术，具体涉及一种网页呈现方法、网页数据处理方法和服务器。

背景技术

随着互联网应用领域的不断扩展，通用计算机终端以及移动终端越来越多地依赖于网页来进行信息展示和人机交互。现有的浏览器支持使用HTML5(超文本标记语言5)、CSS3(层叠样式表3)、JavaScript等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且越来越多的基于网页(WEB)的应用通常是一个单页面应用，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JavaScript代码和CSS代码。通常，在前端开发中，会将网页的超文本标记文件(HTML)和超文本标记文件引用的基于其它语言的文本分别作为单独的文件存储。在超文本标记文件中对静态资源文件进行引用，以方便浏览器以增量方式加载来呈现。但是，随着网页越来越复杂，一个网页往往会引用大量的静态资源文件，这在拖慢网页加载速度的同时，会造成页面访问时对服务器的请求量剧增，在增加服务器负担的同时，占用服务器和终端侧的网络带宽，消耗终端的流量。

发明内容

有鉴于此，本发明提供一种网页呈现方法、网页数据处理方法和服务器，以加快浏览器对网页的加载速度，同时减轻服务器的负担，较少对于网络带宽的占用和流量的消耗。

根据本发明的第一方面，提供一种网页呈现方法，包括：

服务器将待展示网页的静态资源文件合并压缩为至少一个静态资源数据包并基于压缩获得的静态资源数据包修改网页的超文本标记文件；

客户端获取网页访问请求；

服务器根据所述网页访问请求生成响应头，所述响应头包括表征请求访问的网页的静态资源文件包的内容的一致性摘要信息；

客户端根据所述响应头中的一致性摘要信息检测所请求访问的网页数据是否缓存在本地；客户端在缓存有所请求访问的网页数据时，从缓存中读取缓存的网页的超文本标记文件以及被引用的静态资源数据包呈现所述网页。

优选地，所述方法还包括：

客户端在未缓存所请求访问的网页数据时，根据所述网页访问请求向所述服务器请求下载网页的超文本标记文件和被引用的静态资源文件包呈现所述网页；以及，

将下载超文本标记文件和静态资源数据包进行缓存。

优选地，将待展示网页的静态资源文件合并压缩为至少一个静态资源数据包包括：

根据引用关系将被引用的静态资源文件合并压缩为至少一个静态资源数据包；

在静态资源数据包的文件名中增加一致性摘要信息，所述一致性摘要信息用于唯一表征所述静态资源数据包的内容。

优选地，基于压缩获得的静态资源数据包修改网页的超文本标记文件包括：

根据所述静态资源数据包的路径以及与静态资源文件的对应关系修改网页的超文本标记文件中对于静态资源文件的引用内容。

优选地，客户端根据所述响应头中的一致性摘要信息检测所请求访问的网页数据是否缓存在本地包括：

检测本地是否缓存有文件名包括所述一致性摘要信息的静态资源数据包。

优选地，客户端在缓存有所请求访问的网页数据且所述网页数据未过期时，从缓存中读取缓存的网页的超文本标记文件以及被引用的静态资源数据包呈现所述网页；

其中，所述网页数据过期期限从所述响应头中获取。

根据本发明的第二方面，提供一种网页数据处理方法，包括：

将待展示网页的静态资源文件合并压缩为至少一个静态资源数据包并基于压缩获得的静态资源数据包修改网页的超文本标记文件；

根据接收的网页访问请求生成响应头，所述响应头包括表征请求访问的网页的静态资源文件包的内容的一致性摘要信息；

根据请求向客户端发送修改后的超文本标记文件和所述静态资源数据包。

根据本发明的第三方面，提供一种服务器，用于向客户端提供网页数据，所述服务器包括：

处理器；以及，

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为执行如上所述的方法。

通过在服务器端将开发获取的网页静态资源文件进行合并压缩为静态资源数据包，同时，根据静态资源数据包修改对应的网页超文本标记文件，并在接收到访问请求时向客户端反馈静态资源数据包的一致性摘要信息，由此，可以使得客户端浏览器以较小的空间对已经访问过的网页进行缓存，在再次访问时不需要重新向服务器进行请求，基于本地缓存的网页数据进行加载就可以实现网页呈现，本发明可以加快浏览器对网页的加载速度，同时减轻服务器的负担，较少对于网络带宽的占用和流量的消耗。

附图说明

通过以下参照附图对本发明实施例的描述，本发明的上述以及其它目的、特征和优点将更为清楚，在附图中：

图1是现有技术的网页呈现方法的流程图；

图2是本发明实施例的网页呈现方法的流程图；

图3是本发明实施例将静态资源文件合并压缩为静态资源数据包的示意图；

图4是应用本发明实施例网页呈现方法时客户端一侧的流程图；

图5是本发明实施例的用于进行网页呈现的服务器的示意图。

具体实施方式

以下基于实施例对本发明进行描述，但是本发明并不仅仅限于这些实施例。在下文对本发明的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本发明。为了避免混淆本发明的实质，公知的方法、过程、流程、元件和电路并没有详细叙述。

此外，本领域普通技术人员应当理解，在此提供的附图都是为了说明的目的，并且附图不一定是按比例绘制的。

除非上下文明确要求，否则整个说明书和权利要求书中的“包括”、“包含”等类似词语应当解释为包含的含义而不是排他或穷举的含义；也就是说，是“包括但不限于”的含义。

在本发明的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。

下述具体表述的一些部分通过以下方面进行阐述，包括过程、步骤、逻辑模块、功能模块、处理、原理图，或者其他的符号化的表示，如编码、数据位、数据流、信号，或者计算机、处理器、控制器、器件或者存储器的波形等。这些描述和表述常被熟悉数据处理领域的技术人员用来向同行有效地解释他们的工作。这里的过程、流程、逻辑块、功能等，一般被认为是达到期望或预想结果的步骤或指示的自洽序列。步骤一般指物理量的物理操纵。通常，但非必要地，这些物理量采用电、磁、光学或量子信号等形式来表示，这些物理量能够被储存，转移，合并，比较，并可在计算机或数据处理系统中操作控制。主要为了通用性，通常把这些信号称作为位、波、波形、流、值、元素、符号、字母、术语、数字等类似的名称，在计算机程序或软件中则称之为代码(可能是目标代码，源代码或二进制代码)，这已经被证明是方便的。

图1是现有技术的网页呈现方法的流程图。如图1所示，在现有技术中，网页呈现按如下方式进行：

步骤S110、获取网页访问请求。

步骤S120、根据网页访问请求向网页服务器请求网页数据。

其中，存储在服务器端的网页数据包括网页的超文本标记文件和其引用的大量静态资源文件，例如CSS文件，JavaScript文件以及图片等。

步骤S130、根据下载获得的网页数据进行呈现。

也就是说，现有技术在每次加载网页时，都会向服务器请求网页数据文件，对于静态资源文件都需要进行重新下载。虽然，现有的浏览器也可以支持进行缓存，但是，如上所述，由于网页静态资源文件越来越多，使得服务器会接收到大量的资源下载请求，对带宽和服务器的计算能力都提出挑战。

图2是本发明实施例的网页呈现方法的流程图。如图2所示，本发明实施例的网页呈现方法包括如下步骤：

步骤S210、服务器将待展示网页的静态资源文件合并压缩为至少一个静态资源数据包并基于压缩获得的静态资源数据包修改网页的超文本标记文件。

图3是本发明实施例将静态资源文件合并压缩为静态资源数据包的示意图。在进行网页的前端开发时，网页数据会包括超文本标记文件、CSS文件、JavaScript文件以及图片文件。其中，超文本标记文件通常以.htm为扩展名或.html为扩展名，标准的超文本标记文件都具有一个基本的整体结构，标记一般都是成对出现(部分标记除外例如：<br/>)，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。超文本标记文件可以对网页的结构进行规划和限定，并通过引用静态资源改变网页内容的排版或引入特殊控件或构造动态效果。

例如，超文本标记文件可以引用CSS文件来改变网页内容的排版。在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和字体元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于超文本标记文件中或者通过单独的样式单文件存储。无论哪一种方式，样式表包含将样式应用到指定类型的元素的规则。外部使用时，样式表规则被放置在一个带有文件扩展名_css的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式表直接放在网页中，外部样式表保存在独立的文档中，网页通过一个特殊标签链接引用外部样式单。名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

同时，超文本标记文件可以引用JavaScript文件来增加网页的动态效果或增加交互控件。JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

随着网络带宽的增加和开发者对于网页效果的不断改进，现有的网页的复杂程度不断增加，同时由于很多网页通过程序自动生成，为了满足程序生成的需要，网页数据会被碎片化为大量的超文本标记文件和其引用的静态资源文件(例如CSS文件或JavaScript文件)。如果直接缓存这些文件，一方面会在本地存储大量小文件，这会增加终端侧的计算压力和存储压力，另一方面，大量的文件导致可能出现文件重名，从而导致浏览器在加载缓存文件时出错。

为了避免上述问题，本发明实施例对于开发获得的网页数据中的静态资源文件自动进行合并和压缩，减少文件的数量。如图3所示，下载获得的网页数据可能包括超文本标记文件index.html,以及多个CSS文件a.css,b.css,c.css等等，还包括多个JavaScript文件a.js,b.js,c.js等等。index.htm引用多个CSS文件和多个JavaScript文件中的至少一部分，CSS文件还可以相互引用，JavaScript文件也可以相互引用。由此，可以通过自动分析各文件之间的引用关系，将相互关联的静态资源文件进行合并和压缩。具体地，可以通过例如Webpack这样的网页数据压缩工具将上述网页数据的静态资源文件合并压缩为三个静态资源数据包app.d38e99c3.css，app.d38e99c3.js，vendor.c28a16b1.js。Webpack是现有的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

同时，由于静态资源数据包名称变化，所以，需要在超文本标记文件index.html中修改对于静态资源引用部分的内容，将原有的例如引用a.css的位置，修改为引用合并压缩后的app.d38e99c3.css，并更新文件的路径。

优选地，本实施例在每个静态资源数据包的文件名中增加与其数据内容对应的一致性摘要信息，所述一致性摘要信息为用于唯一表征数据内容的一个字符串，这通常可以通过例如MD5(消息摘要算法第五版，Message Digest Algorithm 5th)等散列算法计算获得。在信息安全技术中，经常需要验证消息的完整性，散列(Hash)函数提供了这一服务，它对不同长度的输入消息，产生固定长度的输出。这个固定长度的输出称为原输入消息的“散列”或“消息摘要”(Message digest)。MD5算法是典型的散列算法，例如，在文件名app.d38e99c3.css中，d38e99c3为其文件数据内容对应的MD5码。

由此，在管理人员更新服务器上的网页数据后，服务器对网页数据进行重新压缩获得静态资源数据包的内容发生变化，从而导致其文件名中的一致性摘要信息也发生变化，客户端缓存的静态资源数据包的名称和更新后的并不相同，由此，不会错误地将更新前的数据读取并呈现。可以最大限度保证客户端对于网页数据更新的准确性。

具体地，步骤S210包括：

步骤S211、根据引用关系将被引用的静态资源文件合并压缩为至少一个静态资源数据包。

步骤S212、在静态资源数据包的文件名中增加一致性摘要信息，所述一致性摘要信息用于唯一表征所述静态资源数据包的内容。

步骤S213、根据所述静态资源数据包的路径以及与静态资源文件的对应关系修改网页的超文本标记文件中对于静态资源文件的引用内容。

步骤S220、客户端获取网页访问请求。

客户端获取到网页访问请求后，会向服务发送该请求。

步骤S230、服务器根据所述网页访问请求生成响应头，所述响应头包括表征请求访问的网页的静态资源文件包的内容的一致性摘要信息。

在本实施例中，响应头是服务器针对网页访问请求回复的HTTP信令头。一方面，是否允许客户端进行网页数据的缓存是由服务器发送给客户端的响应头限定的，服务器可以在响应头的Cache-Control(缓存控制)字段中控制客户端是否能够进行网页数据缓存，还可以限定更新最长时间。另一方面，服务器还可以在响应头的ETag字段中嵌入所述一致性摘要信息。

如上所述，所述一致性摘要信息为用于唯一表征数据内容的一个字符串，这通常可以通过例如MD5(消息摘要算法第五版，Message Digest Algorithm 5th)等散列算法计算获得。

客户端接收到所述响应头后，可以基于该一致性摘要信息判断网页数据是否缓存在本地。

步骤S240、客户端检测所请求访问的网页数据是否缓存在本地，如果是，则执行步骤S250，如果否，则执行步骤S260。

具体地，在检测缓存的网页数据时，还可以检测网页数据是否超期。也即，缓存网页数据的时间距离当前时间是否超出了预先设定的时间期限。如果超期，则认为本地未缓存可供呈现的网页数据。由此，可以防止将间隔时间较长的缓存的网页数据加载呈现而不能呈现最新的网页。

步骤S250、在缓存有所请求访问的网页数据时，从缓存中读取缓存的网页的超文本标记文件以及被引用的静态资源数据包呈现所述网页。

对应地，在文件名中设置有一致性摘要信息时，在读取缓存中的静态资源数据包时，可以利用一致性摘要信息对静态资源数据包进行一致性检测，以防止静态资源数据包被篡改或缓存出错导致网页不能正常呈现。也就是说，步骤S250可以包括：

步骤S251、根据静态资源数据包的文件名中的一致性摘要信息对静态资源数据包进行一致性验证。

步骤S252、在一致性摘要信息与静态资源数据包内容对应时，载入缓存的超文本标记文件和被引用的静载资源数据包呈现网页。

步骤S260、在未缓存所请求访问的网页数据时，根据所述网页访问请求下载网页的超文本标记文件和被引用的静态资源数据包呈现所述网页。

具体地，在客户端检测发现未缓存网页数据时，回向服务器发送下载请求，服务器可以根据请求向客户端发送修改后的超文本标记文件和对应的静态资源数据包。客户端根据下载获得的网页数据呈现网页。图4是本发明一个优选实施方式的网页呈现方法的流程图。在应用本发明的网页呈现方法的移动终端上，在步骤S410，第一次请求访问特定网页。在步骤S420，检测发现本地没有缓存所请求的网页数据。在步骤S430，向网页服务器请求网页数据。在步骤S440，终端侧获取到网页服务器的响应，下载获得网页数据。在步骤S450，终端侧呈现网页数据，并对网页数据进行缓存。在步骤S460，终端侧再次请求访问上述网页。在步骤S470，检测发现本地缓存有所请求的网页数据且并未超期。在步骤S480，读取缓存的网页数据进行页面呈现。

由此，本发明实施例

以上的详细描述通过使用方框图、流程图和/或示例，已经阐述了设备和/或方法的众多实施例。在这种方框图、流程图和/或示例包含一个或多个功能和/或操作的情况下，本领域技术人员应理解，这种方框图、流程图或示例中的每一功能和/或操作可以通过各种硬件、软件、固件或实质上它们的任意组合来单独和/或共同实现。在一个实施例中，本发明所述主题的若干部分可以通过专用集成电路(ASIC)、现场可编程门阵列(FPGA)、数字信号处理器(DSP)、或其他集成格式来实现。然而，本领域技术人员应认识到，这里所公开的实施例的一些方面在整体上或部分地可以等同地实现在集成电路中，实现为在一台或多台计算机上运行的一个或多个计算机程序(例如，实现为在一台或多台计算机系统上运行的一个或多个程序)，实现为在一个或多个处理器上运行的一个或多个程序(例如，实现为在一个或多个微处理器上运行的一个或多个程序)，实现为固件，或者实质上实现为上述方式的任意组合，并且本领域技术人员根据本发明，将具备设计电路和/或写入软件和/或固件代码的能力。此外，本领域技术人员将认识到，本发明的机制能够作为多种形式的程序产品进行分发，并且无论实际用来执行分发的信号承载介质的具体类型如何，本发明所述主题的示例性实施例均适用。信号承载介质的示例包括但不限于：可记录型介质，如软盘、硬盘驱动器、紧致盘(CD)、数字视频盘(DVD)、数字磁带、计算机存储器等；以及传输型介质，如数字和/或模拟通信介质(例如，光纤光缆、波导、有线通信链路和/或信道、无线通信链路和/或信道等)。

图5是本发明实施例的服务器的示意图。如图5所示，所述服务器5包括通用的计算机硬件结构，其至少包括处理器51和存储器52。处理器51和存储器52通过总线53连接。存储器52适于存储处理器51可执行的指令或程序。处理器51可以是独立的微处理器，也可以是一个或者多个微处理器集合。由此，处理器51通过执行存储器52所存储的指令，从而执行如上所述的本发明实施例的方法流程实现对于网页的呈现。总线53将上述多个组件连接在一起，同时将上述组件连接到显示控制器54和显示装置以及输入/输出(I/O)装置55。输入/输出(I/O)装置55可以是鼠标、键盘、调制解调器、网络接口、触控输入装置、体感输入装置、打印机以及本领域公知的其他装置。典型地，输入/输出装置55通过输入/输出(I/O)控制器56与系统相连。

以上所述仅为本发明的优选实施例，并不用于限制本发明，对于本领域技术人员而言，本发明可以有各种改动和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种网页呈现方法，包括：

客户端获取网页访问请求；

客户端根据所述响应头中的一致性摘要信息检测所请求访问的网页数据是否缓存在本地；

客户端在缓存有所请求访问的网页数据时，从缓存中读取缓存的网页的超文本标记文件以及被引用的静态资源数据包呈现所述网页。

2.根据权利要求1所述的网页呈现方法，其特征在于，所述方法还包括：

将下载超文本标记文件和静态资源数据包进行缓存。

3.根据权利要求2所述的网页呈现方法，其特征在于，将待展示网页的静态资源文件合并压缩为至少一个静态资源数据包包括：

4.根据权利要求3所述的网页呈现方法，其特征在于，基于压缩获得的静态资源数据包修改网页的超文本标记文件包括：

5.根据权利要求3或4所述的网页呈现方法，其特征在于，客户端根据所述响应头中的一致性摘要信息检测所请求访问的网页数据是否缓存在本地包括：

6.根据权利要求1所述的网页呈现方法，其特征在于，客户端在缓存有所请求访问的网页数据且所述网页数据未过期时，从缓存中读取缓存的网页的超文本标记文件以及被引用的静态资源数据包呈现所述网页；

其中，所述网页数据过期期限从所述响应头中获取。

7.一种网页数据处理方法，包括：

8.根据权利要求7所述的网页数据处理方法，其特征在于，将待展示网页的静态资源文件合并压缩为至少一个静态资源数据包包括：

9.根据权利要求8所述的网页数据处理方法，其特征在于，基于压缩获得的静态资源数据包修改网页的超文本标记文件包括：

10.一种服务器，用于向客户端提供网页数据，所述服务器包括：

处理器；以及，

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为执行如权利要求7-9中任一项所述的方法。