CN102737067A

CN102737067A - 输出网页的方法和系统

Info

Publication number: CN102737067A
Application number: CN2011100957705A
Authority: CN
Inventors: 张晗
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Singapore Holdings Pte Ltd
Priority date: 2011-04-15
Filing date: 2011-04-15
Publication date: 2012-10-17
Anticipated expiration: 2031-04-15
Also published as: CN102737067B; HK1171094A1

Abstract

本申请提供了一种输出网页的方法和系统，以解决现有技术中采用CSS Sprites方式优化网页性能时制作网页的效率较低的问题。该方法包括：网络服务设备接收网页浏览装置在解析网页代码时发送的背景请求信息，所述背景请求信息用于获取由多个图片合并而成的背景图片，并且包含所述多个图片的网络地址；网络服务设备根据所述多个图片的地址获取并且合并所述多个图片，然后将合并图片发送给所述网络浏览装置。根据本申请的技术方案，图片的合并工作是由网络服务设备完成，较人工的做法而言有较高的处理效率，由此提高了制作网页的效率。

Description

输出网页的方法和系统

技术领域

本申请涉及计算机网络技术，尤其涉及一种输出网页的方法和系统。

背景技术

在网页性能优化领域，公认的第一法则是减少HTTP请求的数量，而图片往往是网页上数量最多的第一大类请求，因此，如何在不影响图片展示效果的前提下减少图片请求的数量成为了一个关键问题。

目前，业界标准的做法被称为CSS Sprites，其基本原理如图1所示。图1是根据现有技术的CSS Sprites方法的示意图。CSS Sprites方法是利用了CSS可定位展示背景图片的特性，主要步骤为：1)先将网页涉及的多张图片按横向或纵向排列的方式合并成一张图片，如图中的图片11、图片12和图片13被合并成图片123；2)然后为本来该插入图片的网页元素绑定一段CSS，其中通过background-image:url(…)属性指定该元素的背景图片为1)中合并后的图片，并通过background-position:x y属性指定背景图片的起始展示位置(即图片左上角与包含图片的元素的左上角的相对位置)。经过如上两步，对多个图片的请求就变成了一个对合并后图片的请求，每次请求返回的图片是图片123，由展示位置的控制使得展示的内容最终为椭圆10中的内容，这样就达到了减少网页上HTTP请求数量的目的。

目前CSS Sprites是在开发阶段通过人工操作完成，对于人工操作而言，合并图片和编写CSS都是费时且容易出错的工作，因为定位背景图片需要精确的计算和逐像素的调试，并且每当有新图片加入或包含图片的元素内容调整时，都得重新进行图片的合并和CSS的开发，因此制作网页的效率较低，影响了新网页上线的效率。

在现有技术中，采用CSS Sprites方式优化网页性能时制作网页的效率较低，对于该问题，目前尚未提出有效解决方案。

发明内容

本申请的主要目的是提供一种输出网页的方法和系统，以解决现有技术中采用CSS Sprites方式优化网页性能时制作网页的效率较低的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种输出网页的方法。

本申请的输出网页的方法包括：网络服务设备接收网页浏览装置在解析网页代码时发送的背景请求信息，所述背景请求信息用于获取由多个图片合并而成的背景图片，并且包含所述多个图片的网络地址；网络服务设备根据所述多个图片的地址获取并且合并所述多个图片，然后将合并图片发送给所述网络浏览装置。

进一步地，在所述网络服务设备接收所述背景请求信息之前，还包括：所述网络服务设备接收所述网页浏览装置发送的获取网页的请求，然后所述将待合并的多个图片的尺寸、各个待合并图片在所述合并图片中的位置和所述合并图片的网络地址添加到用于响应该请求的网页代码中，再将所述网页代码发送给所述网页浏览装置。

进一步地，所述将待合并的多个图片的尺寸、各个待合并图片在所述合并图片中的位置和所述合并图片的网络地址添加到用于响应该请求的网页代码中包括：根据待输出的网页代码中的图片元素的信息得出CSS类，以及为每个图片元素绑定CSS类，并且将所述网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址；所述CSS类中包括与该CSS类绑定的各个图片元素的宽度和高度、所述合并图片的网络地址以及该图片元素在所述合并图片中的位置。

进一步地，在所述网络服务设备将所述网页代码发送给所述网页浏览装置之后，并且在所述网络服务设备接收所述背景请求信息之前，还包括：根据所述网页浏览装置发送的用于获取图片元素处的前景图片的前景请求信息，向所述网页浏览装置发送所述透明图片。

进一步地，所述图片元素的信息包括所述图片元素的长、宽属性；所述得出CSS类包括：根据所述图片元素的长、宽属性生成CSS类。

进一步地，所述图片元素的信息包括所述图片元素的网络地址；所述得出CSS类包括：根据所述图片元素的网络地址读取图片，根据读取的图片生成CSS类。

进一步地，将选择的多个图片元素进行排列及合并包括：将选择的多个图片元素按格式或网络地址分组，并沿左右方向或上下方向按组排列，每组图片排列与合并之后得到一个所述合并图片。

进一步地，所述合并图片的格式为png格式或被合并图片的格式。

根据本申请的另一方面，提供了一种输出网页的系统。

本申请的输出网页的系统包括网页服务器和图片服务器，其中：网页服务器，用于接收网页浏览装置发送的获取网页的请求，以及生成网页代码然后发送给所述网页浏览装置；图片服务器，用于：接收网页浏览装置在解析网页代码时发送的背景请求信息，所述背景请求信息用于获取由多个图片合并而成的背景图片，并且包含所述多个图片的网络地址；根据所述多个图片的地址获取并且合并所述多个图片，然后将合并图片发送给所述网络浏览装置。

进一步地，所述网页服务器还用于：将待合并的多个图片的尺寸、各个待合并图片在所述合并图片中的位置和所述合并图片的网络地址添加到用于响应该请求的网页代码中。

进一步地，所述图片服务器还用于：根据所述网页浏览装置发送的用于获取图片元素处的前景图片的前景请求信息，向所述网页浏览装置发送透明图片。

进一步地，所述网页服务器还用于：根据待输出的网页代码中的图片元素的信息得出CSS类，以及为每个图片元素绑定CSS类，并且将所述网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址；所述CSS类中包括与该CSS类绑定的各个图片元素的宽度和高度、所述合并图片的网络地址以及该图片元素在所述合并图片中的位置。

进一步地，所述网页服务器还用于向所述图片服务器发送CSS请求，所述CSS请求用于获取所述待合并的多个图片中的各个图片元素的宽度和高度、所述合并图片的网络地址以及该图片元素在所述合并图片中的位置；所述图片服务器还用于按照所述CSS请求向所述网页服务器发送CSS类。

根据本申请的技术方案，能够将多个图片请求合并成一个，减少HTTP请求数量，缩短页面在浏览器中的加载时间；对合并后的图片进行无损压缩后可减小页面的总大小，进一步缩短页面在浏览器中的加载时间；页面开发时可使用标准的<img>标签来插入图片，无需预先合并图片和编写CSS，便于开发和调试。并且，在本申请实施例中，绑定CSS、合并图片请求、合并图片等都在服务器处理网页请求的过程中动态完成，无需开发阶段的人工操作；在网页上插入图片的原位进行前景和背景图片的替换，简化了CSS的定位计算。因此，采用本申请实施例的技术方案有助于优化网页性能并且提高制作网页的效率。

附图说明

说明书附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据现有技术的CSS Sprites方法的示意图；

图2是与本申请实施例有关的一种网络结构的示意图；

图3是根据本申请实施例的输出网页的方法的主要步骤的示意图；

图4是根据本申请实施例的输出网页的方法的一种具体流程的示意图

图5是根据本申请实施例的输出页面图片的过程的示意图；

图6是根据本申请实施例的输出网页的系统的可选结构的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图2是与本申请实施例有关的一种网络结构的示意图。如图2所示，网络服务设备21通过互联网22与多个终端23连接，终端23使用网页浏览装置例如浏览器能够从网络服务设备处获取网页。

本申请实施例中，由网络服务设备完成图片的合并操作，从而得到背景图片然后提供给网页浏览装置，具体步骤如图3所示，图3是根据本申请实施例的输出网页的方法的主要步骤的示意图。

步骤S31：网络服务设备接收网页浏览装置发送的背景请求信息。

本步骤中的背景请求信息是在网页浏览装置解析网页代码时生成并发送，用来获取由多个图片合并而成的背景图片，并且包含上述多个图片的网络地址。

步骤S33：网络服务设备根据多个图片的地址获取并且合并多个图片。

步骤S35：网络服务设备将合并图片发送给网络浏览装置。

从上述的步骤S31至S35可以看出，因为图片的合并工作是由网络服务设备完成，较人工的做法而言有较高的处理效率，由此提高了制作网页的效率。以下对本申请实施例的方案作具体说明。图4是根据本申请实施例的输出网页的方法的一种具体流程的示意图，如图4所示，该方法可由网络服务设备执行，主要包括如下步骤：

步骤S41：接收网页浏览装置发送的获取网页的请求；

步骤S43：根据待输出的网页代码中的图片元素的信息得出CSS类，以及为每个图片元素绑定CSS类，并且将网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址；

步骤S45：将CSS类根据上述绑定添加到待输出的网页代码中；

步骤S47：将待输出的网页代码发送给网页浏览装置。

步骤S43中的图片元素是网页代码中的字段，浏览器在处理到网页代码中的图片元素时，输出(例如在屏幕上显示)对应于该图片元素的图片。图片元素的网络地址可以是图片的URL，图片的URL是通过互联网访问该图片的唯一地址，例如：

http://img.alibaba.com/images/eng/style/icon/refine_icon_video.gif

上述的透明图片是人眼不可见的图片，作为前景图，它被展示在网页上之后无法从视觉上覆盖展示在同一网页相同位置的背景图，从而使该背景图展现在人眼前。

步骤S43中的CSS类是CSS代码的一种标准组织方式，示例如下：

cssl{

background:url(″…″)

}

其中cssl称为类名，一个类可以包含若干形如：“[属性名]:[属性值]”的属性内容。在本实施例中，对于第n个图片元素，CSS类的内容主要是图片的尺寸及位置信息，属性内容具体有四项，属性名的含义如下：

1、width(宽度)：第n个url所指向图片的宽度；

2、height(高度)：第n个url所指向图片的高度；

3、background-image(背景图片)：url(url1|url2|...|urln.png)；

4、background-position(第n个url所指向图片在合并图片中的位置)：-(url1到urln-1所指向图片的宽度之和)px 0px。这里采用了左右合并图片的形式。

在步骤S43中，将网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址，并且在与该图片元素绑定的CSS类中选择了背景图片以及对应于该图片元素的图片在合并图片中的位置。这样，浏览器在按常规方式(具体在下文中结合图5加以说明)处理网页代码时，就能够实现在网页上插入图片的原位进行前景和背景图片的替换，这里的前景图片是通过<img src＝””>标签中src所指向的图片，背景图是通过CSS中的background属性中url所指向的图片，从展示效果的角度看，前景图将覆盖在同一位置的背景图，这种原位替换的方式无需计算背景图片的位置，能够简化CSS的定位计算。

并且在本实施例中，绑定CSS、合并图片请求、合并图片等都在服务器处理网页请求的过程中动态完成，无需开发阶段的人工操作，有助于提高网页开发的效率。

以下对本实施例中网页浏览装置处理网页代码的流程加以说明。图5是根据本申请实施例的输出页面图片的过程的示意图。根据图5的流程，能够实现网页浏览装置解析网页代码例如HTML代码并且根据解析结果向网络服务设备发送相应的请求，以及网络服务设备响应该请求的过程中实现在网页图片的原位进行前景背景替换，具体包括如下步骤：

步骤S51：网页浏览装置向网络服务设备发送第一请求信息；该第一请求信息用于获取图片元素处的前景图片；本步骤及以下各步骤中的网络服务设备可以是图片服务器，本步骤中的图片元素可以是HTML文件中<img>标签所标记的对象，以浏览器为例，浏览器依序解析HTML中各个标签，当解析到<img>标签时即根据标签标记的对象(本步骤中，对象内容为指定当前需要获取前景图片，以及该前景图片的网络地址)时，生成上述第一请求信息。

步骤S53：网络服务设备向网页浏览装置发送透明图片；本步骤中的透明图片可以保存在图片服务器内。

步骤S55：网页浏览装置向网络服务设备发送第二请求信息；该第二请求信息用于获取图片元素处的背景图片；类似于步骤S51中的处理方式，网页浏览装置例如浏览器解析HTML文件，当解析到用于获取背景图片的标签时生成第二请求信息，因为CSS类是用于处理网页背景图片，所以第二请求信息中包含了CSS类的内容，具体包括背景图片的网络位置(由前文所述的CSS类的4项属性内容得到)，以及第二请求信息获取的背景图片(由前文所述的CSS类的第1、2和4项内容)，从CSS类的属性内容可以看出该背景图片是合并图片中的一部分。

步骤S57：网络服务设备生成合并图片然后发送给网页浏览装置。因为网页浏览装置请求的是背景图片，所以该合并图片将作为背景图片被网页浏览装置输出(例如在屏幕上显示)，并且在输出背景图片时，按照前文的第1、2和4项在合并图片中定位出第n个url指向的图片，然后输出定位出的图片作为背景。可以看出，由于前景为透明图片，所以该背景图片得以展现在人眼前。

在步骤S57中，网络服务设备生成合并图片时，可通过解析第二请求信息中的URL得到，该第二请求信息请求的合并图片的URL形如(从CSS属性的第3项也可看出)：

http://img.com/img1|img2|img3.gif

解析时根据分隔符“|”分段，得到img1，img2，img3即是要合并的图片。在生成合并图片时，如果网页中的图片太多，可以对图片进行分组，例如按图片格式或网络地址分组，即合并成少数几个图片，这样浏览装置发送相应数量的图片请求。

对于合并图片的格式，除全部使用PNG格式保存合并图片外，也可根据被合并图片的格式来决定，例如被合并图片都是JPG格式，那么可用JPG格式来保存合并图片；又如被合并图片都是GIF格式，就可用GIF格式来保存，但由于GIF格式只支持256色，因此合并后的图片色彩可能有损失。

在实际的网络架构中，网络服务设备可能包括网页服务器和图片服务器，这两种服务器可以集成在一台计算机上，也可以是独立的计算机。本申请实施例中，前述步骤S43中的得出CSS类的工作可以由网页服务器生成，也可以由图片服务器生成，以下对此作具体说明。

得出CSS类的一种方式是由网页服务器生成CSS请求然后发送给图片服务器，由图片服务器解析该请求，得出CSS类然后返回给网页服务器。具体是，网页服务器在输出网页代码例如HTML文件的过程中，每当要输出形如<img src＝”url”.../>的图片元素时，执行如下操作：

步骤1、将图片元素的url加入待合并列表，若待合并列表中已有该url则不重复加入，该待合并列表可以是保存在网页服务器的内存中；

步骤2、将图片元素的url替换为一个透明图片的url，该透明图片的url可以预先设定；

步骤3、给图片元素绑定一个CSS类，这里的CSS类的名称可以采用上述待合并列表中的url的编号。

当所有图片元素都替换完成后，遍历待合并列表，发送形如url1|url2|...|urln.css的CSS请求到图片服务器，待图片服务器根据该请求返回CSS后，再将该返回的CSS插入到待输出的HTML文件的头部。这里的CSS请求中的符号“|”也可以选择其他的字符，只要url本身不包含该字符即可。

在图片服务器方面，收到网页服务器发送的CSS请求后，解析该请求，读取CSS中各个第n个url指向的图片，并且生成以及输出CSS，其中包括了n个CSS类，每个CSS类包括属性如前文所述。

以上对于网页服务器生成和发送CSS请求、图片服务器生成CSS的方式作出了说明。另外得出CSS的另一种方式是在网页服务器上进行。如果采用这种方式，则可在开发页面时将图片的长、宽属性写入网页代码例如HTML文件中，这样网页服务器在输出HTML文件的过程中只执行前述的步骤1-3，无需再发CSS请求，而是根据图片长、宽属性得出上述CSS类的内容。

在上述步骤2的替换操作中，除在原位用<img...>标签替换外，还可用<span style＝”display:inline-block”...>替换。另外，在网页服务器或图片服务器进行图片合并时，除了上述的左右合并的形式，另外还可以上下合并图片，也就是将CSS类中的第4项属性background-position设为0px-(第一个至第n-1个图片的高度之后)px即可。

以下再对本申请实施例中的输出网页的系统作出说明。图6是根据本申请实施例的输出网页的系统的可选结构的示意图，图6中的输出网页的系统60能够响应于网页浏览装置发送的获取网页的请求，向网页浏览装置发送网页。如图6所示，输出网页的系统60主要包括网页服务器61和图片服务器62。网页服务器61主要用于接收网页浏览装置发送的获取网页的请求，以及生成网页代码然后发送给网页浏览装置；图片服务器62主要用于接收网页浏览装置在解析网页代码时发送的背景请求信息，该背景请求信息用于获取由多个图片合并而成的背景图片，并且包含多个图片的网络地址；根据多个图片的地址获取并且合并上述多个图片，然后将合并图片发送给网络浏览装置。网页服务器61还可以用于将待合并的多个图片的尺寸、各个待合并图片在合并图片中的位置和合并图片的网络地址添加到用于响应该请求的网页代码中，这样网页浏览装置可以根据该网络地址获取合并图片以及在输出的网页中按待合并的多个图片的尺寸、各个待合并图片在合并图片中的位置输出图片。

图片服务器62还可用于根据网页浏览装置发送的用于获取图片元素处的前景图片的前景请求信息，向网页浏览装置发送透明图片。这样，当网页浏览装置获取到背景图片后，在前景为透明图片的位置处，背景图片得以展示在人眼前。

网页服务器61可以根据待输出的网页代码中的图片元素的信息得出CSS类，以及为每个图片元素绑定CSS类，并且将网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址；该CSS类中包括与该CSS类绑定的各个图片元素的宽度和高度、合并图片的网络地址以及该图片元素在所述合并图片中的位置。另外网页服务器61也可以利用CSS请求来得到CSS类，即网页服务器61还可用于向图片服务器62发送CSS请求，该CSS请求用于获取待合并的多个图片中的各个图片元素的宽度和高度、合并图片的网络地址以及该图片元素在合并图片中的位置，这样图片服务器62还用于按照该CSS请求向网页服务器61发送CSS类。

根据本申请实施例的技术方案，能够将多个图片请求合并成一个，减少HTTP请求数量，缩短页面在浏览器中的加载时间；对合并后的图片进行无损压缩后可减小页面的总大小，进一步缩短页面在浏览器中的加载时间；页面开发时可使用标准的<img>标签来插入图片，无需预先合并图片和编写CSS，便于开发和调试。并且，在本申请实施例中，绑定CSS、合并图片请求、合并图片等都在服务器处理网页请求的过程中动态完成，无需开发阶段的人工操作；在网页上插入图片的原位进行前景和背景图片的替换，简化了CSS的定位计算。因此，采用本申请实施例的技术方案有助于优化网页性能并且提高制作网页的效率。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

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

Claims

1.一种输出网页的方法，其特征在于，包括：

网络服务设备接收网页浏览装置在解析网页代码时发送的背景请求信息，所述背景请求信息用于获取由多个图片合并而成的背景图片，并且包含所述多个图片的网络地址；

网络服务设备根据所述多个图片的地址获取并且合并所述多个图片，然后将合并图片发送给所述网络浏览装置。

2.根据权利要求1所述的方法，其特征在于，在所述网络服务设备接收所述背景请求信息之前，还包括：

所述网络服务设备接收所述网页浏览装置发送的获取网页的请求，然后所述将待合并的多个图片的尺寸、各个待合并图片在所述合并图片中的位置和所述合并图片的网络地址添加到用于响应该请求的网页代码中，再将所述网页代码发送给所述网页浏览装置。

3.根据权利要求2所述的方法，其特征在于，所述将待合并的多个图片的尺寸、各个待合并图片在所述合并图片中的位置和所述合并图片的网络地址添加到用于响应该请求的网页代码中包括：

根据待输出的网页代码中的图片元素的信息得出CSS类，以及为每个图片元素绑定CSS类，并且将所述网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址；所述CSS类中包括与该CSS类绑定的各个图片元素的宽度和高度、所述合并图片的网络地址以及该图片元素在所述合并图片中的位置。

4.根据权利要求3所述的方法，其特征在于，在所述网络服务设备将所述网页代码发送给所述网页浏览装置之后，并且在所述网络服务设备接收所述背景请求信息之前，还包括：

根据所述网页浏览装置发送的用于获取图片元素处的前景图片的前景请求信息，向所述网页浏览装置发送所述透明图片。

5.根据权利要求3所述的方法，其特征在于，

所述图片元素的信息包括所述图片元素的长、宽属性；

所述得出CSS类包括：根据所述图片元素的长、宽属性生成CSS类。

6.根据权利要求3所述的方法，其特征在于，

所述图片元素的信息包括所述图片元素的网络地址；

所述得出CSS类包括：根据所述图片元素的网络地址读取图片，根据读取的图片生成CSS类。

7.根据权利要求1至6中任一项所述的方法，其特征在于，将选择的多个图片元素进行排列及合并包括：将选择的多个图片元素按格式或网络地址分组，并沿左右方向或上下方向按组排列，每组图片排列与合并之后得到一个所述合并图片。

8.根据权利要求1至6中任一项所述的方法，其特征在于，所述合并图片的格式为png格式或被合并图片的格式。

9.一种输出网页的系统，其特征在于，包括网页服务器和图片服务器，其中：

网页服务器，用于接收网页浏览装置发送的获取网页的请求，以及生成网页代码然后发送给所述网页浏览装置；

图片服务器，用于：

接收网页浏览装置在解析网页代码时发送的背景请求信息，所述背景请求信息用于获取由多个图片合并而成的背景图片，并且包含所述多个图片的网络地址；

根据所述多个图片的地址获取并且合并所述多个图片，然后将合并图片发送给所述网络浏览装置。

10.根据权利要求9所述的系统，其特征在于，所述网页服务器还用于：将待合并的多个图片的尺寸、各个待合并图片在所述合并图片中的位置和所述合并图片的网络地址添加到用于响应该请求的网页代码中。

11.根据权利要求9所述的系统，其特征在于，所述图片服务器还用于：根据所述网页浏览装置发送的用于获取图片元素处的前景图片的前景请求信息，向所述网页浏览装置发送透明图片。

12.根据权利要求10所述的系统，其特征在于，所述网页服务器还用于：根据待输出的网页代码中的图片元素的信息得出CSS类，以及为每个图片元素绑定CSS类，并且将所述网页代码中的图片元素的网络地址替换为预设的透明图片的网络地址；所述CSS类中包括与该CSS类绑定的各个图片元素的宽度和高度、所述合并图片的网络地址以及该图片元素在所述合并图片中的位置。

13.根据权利要求10所述的系统，其特征在于，

所述网页服务器还用于向所述图片服务器发送CSS请求，所述CSS请求用于获取所述待合并的多个图片中的各个图片元素的宽度和高度、所述合并图片的网络地址以及该图片元素在所述合并图片中的位置；

所述图片服务器还用于按照所述CSS请求向所述网页服务器发送CSS类。