[发明专利]输出网页的方法和系统

说明书

技术领域

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

背景技术

在网页性能优化领域，公认的第一法则是减少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格式或被合并图片的格式。

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