CN105630841A - 网页显示方法、网页发送方法、装置及系统 - Google Patents

Abstract

本申请实施例中提供了一种网页显示的方法、网页发送的方法、装置及系统，该网页显示方法包括：浏览器向服务器请求第一网页对应的内容单元；接收内容单元，内容单元包括待显示的内容；根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及以尺寸在第一网页的位置，显示渲染后的内容单元。采用本申请实施例中提供的方法，服务器仅需要将网页对应的内容单元中的待显示的内容发送至浏览器，由浏览器根据待显示的内容来确定内容单元在网页中的尺寸和位置并进行渲染和显示，降低了对服务器的依赖，便于开发和维护。

Description

网页显示方法、网页发送方法、装置及系统

技术领域

本申请涉及网页技术，特别涉及一种网页显示方法、网页发送方法、装置及系统。

背景技术

现有技术中，浏览器(可以呈现多媒体网页的应用程序或工具)显示网页的过程如下：服务器接收并存储各内容单元，该内容单元包括待显示的内容以及该内容在相应网页上的尺寸和位置信息。在浏览器需要显示网页时，向服务器请求加载该网页中的各内容单元，服务器将该内容单元发送至浏览器，浏览器对该内容单元进行渲染后，在相应的位置上以相应的尺寸进行显示。

采用现有技术中的网页显示方法，需要在服务器侧存储各网页中每个内容单元的尺寸和位置，导致对服务器的严重依赖，不便于网页开发。

发明内容

本申请实施例提供了一种网页显示的方法、网页发送的方法、装置及系统，用于解决现有技术中需要在服务器侧对网页中各内容单元的尺寸和位置进行设计和存储所导致的对服务器的依赖和开发不便。

根据本申请实施例的第一个方面，提供了一种网页显示方法，包括：浏览器向服务器请求第一网页对应的内容单元；接收内容单元，内容单元包括待显示的内容；根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及以尺寸在第一网页的位置，显示渲染后的内容单元。

根据本申请实施例的第二个方面，提供了一种网页发送方法，包括：服务器接收并存储第一网页对应的内容单元，内容单元包括待显示的内容；接收来自浏览器的对第一网页对应的内容单元的请求；查找第一网页对应的内容单元，并将内容单元中待显示的内容发送至浏览器，以用于浏览器根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及，以尺寸在第一网页的位置，显示渲染后的内容单元。

根据本申请实施例的第三个方面，提供了一种网页显示装置，应用于浏览器，包括：请求模块，用于向服务器请求第一网页对应的内容单元；接收模块，用于接收内容单元，内容单元包括待显示的内容；第一确定模块，用于根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及显示模块，用于以该尺寸在第一网页的相应位置，显示渲染后的内容单元。

根据本申请实施例的第四个方面，还提供了一种网页发送装置，应用于服务器，包括：内容接收和存储模块，用于接收并存储第一网页对应的内容单元，内容单元包括待显示的内容；请求接收模块，接收来自浏览器的对第一网页对应的内容单元的请求；查找和发送模块，用于查找第一网页对应的内容单元，并将内容单元中待显示的内容发送至浏览器，以用于浏览器根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及，以尺寸在第一网页的位置，显示渲染后的内容单元。

根据本申请实施例的第五个方面，提供了一种网页显示系统，包括：如前述的网页显示装置；以及如前述的网页发送装置。

采用本申请实施例中的网页显示方法，服务器仅需要将网页对应的内容单元中的待显示的内容发送至浏览器，由浏览器根据待显示的内容来确定内容单元在网页中的尺寸和位置并进行渲染和显示，降低了对服务器的依赖，便于开发和维护。

附图说明

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

图1为根据本申请实施例一的网页显示方法的流程图；

图2为根据本申请实施例二的网页发送方法的流程图；

图3为根据本申请实施例三的网页显示装置的示意图；

图4为根据本申请实施例四的网页发送装置的示意图；

图5为根据本申请实施例五的网页显示系统的示意图。

具体实施方式

为了使本申请实施例中的技术方案及优点更加清楚明白，以下结合附图对本申请的示例性实施例进行进一步详细的说明，显然，所描述的实施例仅是本申请的一部分实施例，而不是所有实施例的穷举。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

图1为本申请实施例一所示的网页显示方法的流程图。

如图1所示，该方法包括以下步骤：

步骤S102，浏览器向服务器请求第一网页对应的内容单元；

在用户打开某一网页时，浏览器向服务器请求第一网页的内容单元。例如，浏览器接收用户的操作，输入www.tmall.com，打开天猫网站，或者用户从其他网页(例如，空白页、淘宝首页等)点击链接进入天猫首页时，浏览器向天猫服务器发出请求，要求服务器发送天猫首页对应的内容单元。

步骤S104，接收内容单元，该内容单元包括待显示的内容；

服务器根据网页的设计，依次向浏览器发送该网页对应的内容单元，在该内容单元中，至少包括待显示的内容。

例如，服务器向浏览器依次发送天猫商标、搜索栏、商品服务分类栏、首页广告等内容单元。

内容单元中的待显示的内容可以包括文字、图片、视频、音频等内容之一或组合。例如，天猫商标是一个内容单元，其中的内容仅包括天猫商标图片；而搜索栏作为一个内容单元，内容包括搜索框和搜索按钮等；而首页广告则是又一个内容单元，内容具体可包括广告图片、相应的广告文字及音频等。

步骤S106，根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；

例如，浏览器接受到天猫首页中的各内容单元后，进一步确定天猫商标的尺寸为(300x85)，放在网页左上方第一个；搜索栏的尺寸为(560x85)，放在天猫商标的右侧等等。

步骤S108，以该尺寸在该第一网页的该位置，显示渲染后的内容单元。

浏览器以上述尺寸对相应的内容单元进行渲染后，放置在相应的位置上。这样，用户就看到了天猫首页中的内容。

采用本实施例中所提供的网页显示方法，由浏览器来确定内容单元在第一网页中的尺寸和位置并进行渲染和显示，服务器仅需要向浏览器提供第一网页对应的内容单元的待显示的内容，降低了对服务器的依赖，便于开发和维护。

优选地，在具体实施时，为了提高用户体验，可以先在可视区域外对内容单元进行渲染定型。

例如，在浏览器可视区域外创建一个容器，该容器用于容纳各种内容，并将其中容纳的多个内容作为整体来进行处理。具体地，该容器的位置随着可视区域的变化而移动，但将总在可视区域之外的某一个固定位置上，例如，在可视区域右上角离页面顶端(0，-9999)。将从服务器接收到的内容单元放在上面创建的容器中根据确定出的尺寸进行初始化、渲染和定型后，放在网页对应的位置。

上述步骤S106中，根据待显示的内容和第一网页的布局方式，确定内容单元在第一网页中的尺寸和位置，具体可以采用如下方式：根据待显示的内容和第一网页的尺寸，确定内容单元在第一网页中的尺寸；获取内容单元的前一内容单元的尺寸和位置；根据内容单元尺寸和前一内容单元的尺寸和位置确定内容单元的位置。

在本申请实施例中，获取内容单元尺寸可采用现有技术中的常用方法，如JavaScript框架的jQuery、$(el).height()/width()；及HTMLElement.offsetHeight/offsetWidth，HTMLElement.clientHeight/clientWidth，HTMLElement.getBoundingClientRect()等。

如果在请求的内容单元之前，在网页上已经存在内容单元，那么在获取内容单元A的尺寸(高x宽)之后，进一步获取前一内容单元X的尺寸(高x宽)和位置。

如果A的宽和X的宽之和小于或等于网页的宽度，就将X放在A同行右侧；如果A的宽和X的宽之和超出了网页的宽度，就将渲染后的内容单元A放在X的下一行。

例如，作为天猫首页中第二个内容单元的搜索栏的尺寸和位置，其计算过程可以如下：

首先，采用HTMLElement.getBoundingClientRect()得到搜索栏的尺寸为(560x85)；然后，获得天猫商标的尺寸为(300x85)，在网页中的位置是(0，0)，由于天猫首页采用的是垂直布局，因此，进一步获取网页的宽度是990；此时，搜索栏的宽度加上天猫商标的宽度(860)不大于网页的宽度(990)，因此，将搜索栏放在天猫商标的右侧。

采用上述方法，浏览器能够确定内容单元的尺寸和位置，从而使得服务器仅需要向浏览器提供第一网页的内容单元中的待显示内容，降低了对服务器的依赖，便于开发和维护。

上述步骤S106中，根据待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置，还可以采用如下方式：根据待显示的内容和第一网页的尺寸，确定内容单元在第一网页中的尺寸；根据内容单元尺寸，确定内容单元的位置。

在打开某一网页时，网页中没有任何内容单元，此时可以根据内容单元的尺寸来确定内容单元的位置。

在本申请实施例中，获取内容单元尺寸仍然可采用现有技术中的常用方法，如JavaScript框架的jQuery、$(el).height()/widm()；及HTMLElemem.offsetHeight/offsetWidth，HTMLElement.clientHeight/clientWidth，HTMLElement.getBoundingClientRect()等。

例如，天猫商标作为首页中的第一个内容单元，将被放置在第一行最左例。后续其他内容单元以其作为位置参考。

采用上述方法，浏览器能够确定内容单元的尺寸和位置，从而使得服务器仅需要向浏览器提供第一网页的内容单元，这降低了对服务器的依赖，便于开发和维护。

可选地，服务器向浏览器发送的内容单元，除包括待显示内容之外，还包括内容单元与其他内容单元的相对位置。在浏览器接收到待显示内容和与其他内容单元的相对位置之后，首先可根据待显示的内容，确定内容单元在第一网页中的尺寸；如果其他内容单元在网页中的位置已经确定，那么就可获取该内容单元在第一网页中的位置，并根据该相对位置和该其他内容单元的位置，确定内容单元的位置；如果该其他内容单元的位置未确定，则根据内容单元尺寸和前一内容单元的尺寸和位置，确定内容单元的位置。

例如，服务器将搜索栏发送到浏览器，并可发送了搜索栏与首页广告的相对位置为搜索栏在首页广告的正上方。那么浏览器在确定了搜索栏的尺寸之后，进一步获取首页广告的位置，并将搜索栏放置在首页广告的正上方；如果首页广告的位置还没确定，那么就将搜索栏放在它的前一内容单元，即天猫商标的右侧。

这种根据相对位置来确定内容单元的位置的方式，提高了网页显示的灵活性。

在具体实施时，如果在服务器中已经存储了某些网页对应的各内容单元，这些内容单元在包括待显示的内容之外，还包括已经设计好的尺寸和位置，那么在浏览器接收到包括尺寸和位置信息的内容单元后，既可以按照设计好的尺寸和位置对该内容单元进行显示；也可以忽略服务器侧发来的尺寸和位置信息，由浏览器根据按照上述实施例中的方式，根据待显示的内容和网页的尺寸进行网页的显示；或者浏览器采用服务器侧发来的尺寸信息，而重新计算位置信息；或者浏览器采用服务器侧发来的位置信息，而重新计算尺寸信息；或者浏览器可参考服务器侧发来的尺寸和位置信息，重新计算尺寸和位置信息等。

发明人在研发过程中进一步注意到，现有技术中在浏览器进行网页显示时，一次性向服务器请求该网页中的所有内容单元，或者根据预先设置的规则陆续向服务器请求该网页中的所有内容单元，即使某些并未进入可视区域内容单元也被加载，导致浏览器所处客户端的网络流量、内存、CPU等资源被不必要的占用，影响用户体验。

为解决上述问题，浏览器可以仅向服务器请求第一网页可视区域内的内容单元。

在具体实施时，浏览器可以根据滚动条的位置或触控的操作来判断可视区域的范围。浏览器向服务器请求内容单元，服务器根据预先设计的编号等顺序信息依次将网页中内容单元发送至浏览器。浏览器在将可视区域填满后，停止向服务器发送请求。在用户操作滚动条或以触控的方式改变可视区域后，浏览器再向服务器发送请求，服务器再将下一批内容单元发送至浏览器。

例如，用户在打开天猫首页后，在未对滚动条进行操作时，浏览器向服务器发送请求，此时，服务器按照预先设计的编号，将天猫商标、搜索栏、商品服务分类、首页广告等内容单元发送至浏览器，浏览器在对这些内容单元进行显示后，发送可视区域已被填满，则不再向服务器发送请求。当用户操作滚动条向下滑时，浏览器再次向服务器发送请求，服务器再依次将热门品牌、各层商品展示等内容单元发送至浏览器进行显示。

浏览器仅向服务器请求可视区域内的内容单元，对于未进入可视区域内的内容单元，暂时不进行请求，这样能够避免客户端网络流量、内存、CPU等资源被不必要的占用，提升用户体验。

发明人在研发过程中进一步注意到，现有技术中在浏览器进行网页显示时，随着整个网页或多个网页陆续进入并离开可视区域，将使得浏览器中陆续载入该网页或该多个网页中的所有内容单元，导致客户端内存、CPU等资源占用严重，甚至导致程序卡死或主动关闭，用户体验较差。

为解决上述问题，根据本申请实施例一的网页显示方法可以进一步包括步骤，在内容单元离开可视区域后，浏览器释放该内容单元。

例如，在用户操作滚动条或以触控的形式将可视区域从页面最上方移动至“lF女装内衣”时，商品服务分类和首页广告内容单元离开可视区域，浏览器将释放这些内容单元。

在用户浏览时释放非可视区域内的内容单元，能够减少对内存、CPU等资源的持续占用，在持续载入大量内容单元后，不会对客户端带来高昂的性能损耗，保证客户端体验的稳定和流畅性。理论上，采用本申请实施例中的方案，能够实现无限内容单元的载入。

但是，如果浏览器将这些离开可视区域的内容单元从网页中彻底移出，那么随着用户的操作，在这些内容单元再次进入可视区域后，如果重新向服务器请求并再次进行位置和尺寸的计算，将导致资源占用量大，显示时间过长。

为解决上述问题，可以在浏览器释放所述内容单元之保存内容单元的尺寸和位置；在该内容单元再次进入可视区域时，浏览器在向服务器请求到该内容单元后，将渲染后的内容单元以保存的尺寸和位置进行显示。

在具体实施时，在网页中可以将与渲染后的该内容单元相同尺寸的空模块放置在该模块的相同位置，并把该内容单元放入内存；当该内容单元对应的空模块进入可视区域时，从内存中读取该内容单元，将进行渲染后，替换对应的空模块。

在释放内容单元之前，保存其尺寸和位置，以便在下次显示时，直接根据保存的尺寸和位置对该内容单元进行显示，能够减少浏览器的计算，减少延时。

发明人在研发过程中进一步注意到，随着互联网技术的发展，浏览器浏览网页的方式也呈现出多样性，丰富的网页浏览方式便捷了用户浏览网页的过程。但是，常见的网页一般是垂直布局的，发明人认为这种传统的浏览模式无法满足用户对创新浏览体验的要求。例如，对于天猫店铺，如果店铺首页和后院均采用垂直布局，用户将不能方便地分辨出当前网页是店铺的首页还是店铺后院。

为解决上述问题，浏览器向服务器请求与第一网页关联的第二网页对应的内容单元，并对第二网页的内容单元进行显示；该第二网页和第一网页布局方式不同。

常见的网页布局方式有垂直布局和横向布局两种。为使浏览器能够识别第一网页和第二网页的布局方式是垂直还是横向，可在服务器侧预先设置对应的布局方式。

在具体实施时，可以在服务器侧设置一用于标识网页的布局方式的标识，例如，标识位为1时，表示该网页是垂直布局；标识位为2时，表示该网页是横向布局；当该标识位为空时，默认为垂直布局。当浏览器将网页域名发往服务器请求加载该网页对应的内容单元时，服务器将内容单元发往浏览器时，同时将该标识位发往浏览器，浏览器根据该标识位识别网页的布局方式。如果浏览器未发现用于标识网页布局方式的标识位，则按默认方式进行布局。

第一网页与第二网页的关联形式有多种，例如，第一网页可以是店铺首页(用于展示商品信息等)，第二网页可以是该店铺的后院(用于与用户交流互动的页面等)；或者第一网页可以是店铺首页，第二网页可以是店铺首页某一商品的展示页面；或者第一网页是店铺后院，第二网页是店铺首页等。

采用本申请实施例中的方案，相互关联的第一网页和第二网页(例如店铺首页和后院)采用不同的布局形式，能够使浏览店铺的用户很方便的分辨当前浏览的是哪一个网页。

另外，横向布局网页能够满足用户对创新浏览体验的要求。同时，随着智能终端的大面积采用，左右滚动的横向布局页面切合用户智能终端的操作，提升了用户体验。

发明人在研发过程中进一步注意到，现有技术的网页显示方案只支持图片或视频内容单元，不支持各种类型的富媒体内容片段，导致展示的内容类型有限，无法给用户最丰富的展示体验。

为解决上述问题，内容单元可以是例如，图片、视频、音频、文字、操作按钮、菜单等的富媒体。富媒体包括可以与用户进行交互操作的模块模块，很好地解决了已有方案支持类型单一的问题，给用户带来更丰富的浏览体验。

图2为根据本申请实施例二的网页发送方法的流程图。

如图2所示，该方法包括以下步骤：

步骤S202，服务器接收并存储第一网页对应的内容单元，内容单元包括待显示的内容；

服务器接收用户针对网页上传的内容单元。例如，店主对店铺首页进行设计，希望在店铺首页中显示店铺商标、店内搜索栏、店铺公告、推荐商品、所有商品展示等；店主可将这些内容单元中的待显示内容上传至服务器，服务器将这些内容单元与店铺的域名关联存储。

步骤S204，接收来自浏览器的对第一网页对应的内容单元的请求；

浏览器接收用户的操作，例如，用户输入网址，打开店铺首页，或者用户从其他网页(例如空白页、淘宝首页、天猫首页等)点击链接进入店铺首页时，浏览器向服务器发出请求，要求服务器发送店铺首页对应的内容单元。服务器接收上述请求。

步骤S206，查找第一网页对应的内容单元，并将内容单元中待显示的内容发送至浏览器，以用于浏览器根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及，以该尺寸在该第一网页的该位置，显示渲染后的内容单元。

服务器查找该店铺首页对应的内容单元，例如，店铺商标、店内搜索栏、店铺公告、推荐商品、所有商品展示等；并将这些内容发送至浏览器。

采用本申请实施例二中的网页发送方法，由于服务器仅需要向浏览器提供第一网页对应的内容单元的待显示的内容，因此，在用户(例如，淘宝店铺店主等)进行店铺设计时，只需要将希望在店铺首页进行显示的内容上传至服务器，在后续由浏览器根据待显示的内容来计算尺寸和位置并进行显示，避免了现有技术中店主在上传待显示的内容之外，还需要对各内容单元的尺寸和位置进行设计带来的不便，便于开发和维护，且提高了用户体验。

可选地，内容单元还包括内容单元与其他内容单元的相对位置，服务器进一步将相对位置发送至浏览器。

例如，店主在网页设计时，希望将店铺公告放置在店内搜索栏的正下方。那么服务器将店铺商标、店内搜索栏、店铺公告、推荐商品、所有商品展示等发送至浏览器的同时，将店铺公告放置在店内搜索栏的正下方这一相对位置发送至浏览器。

通过在服务器侧对网页中各内容单元的相对位置进行设计，提高了网页设计的灵活性。

优选地，服务器根据来自浏览器的请求，将与第一网页关联的第二网页对应的内容单元发送至浏览器，其中，该第一网页和该第二网页布局方式不同。

第一网页与第二网页的关联形式有多种，例如，第一网页可以是店铺首页，第二网页可以是该店铺的后院；或者第一网页可以是店铺首页，第二网页可以是店铺首页某一商品的展示页面；或者第一网页是店铺后院，第二网页是店铺首页等。

在具体实施时，可以在服务器侧设置一用于标识网页的布局方式的标识，例如，标识位为1时，表示该网页是垂直布局；标识位为2时，表示该网页是横向布局；当该标识位为空时，默认为垂直布局。当浏览器将网页域名发往服务器请求加载该网页对应的内容单元时，服务器将内容单元发往浏览器时，同时将该标识位发往浏览器，浏览器根据该标识位识别网页的布局方式。

采用本申请实施例中的方案，店铺首页采用垂直布局的形式，后院采用横向布局，能够使浏览店铺的用户很方便的分辨当前浏览的是店铺的首页，还是店铺后院。

另外，横向布局网页能够满足用户对创新浏览体验的要求。同时，随着智能终端的大面积采用，左右滚动的横向布局页面切合用户智能终端的操作，提升了用户体验。

图3是根据本申请实施例三的网页显示装置的示意图。

如图3所示，根据本申请实施例三的一种网页显示装置300，应用于浏览器，该显示装置包括：请求模块301，用于向服务器请求第一网页对应的内容单元；接收模块302，用于接收内容单元，内容单元包括待显示的内容；第一确定模块303，用于根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及显示模块304，用于以该尺寸在第一网页的相应位置，显示渲染后的内容单元。

采用本实施例中所提供的网页显示装置，由浏览器来确定内容单元在第一网页中的尺寸和位置并进行渲染和显示，服务器仅需要向浏览器提供第一网页对应的内容单元的待显示的内容，降低了对服务器的依赖，便于开发和维护。

可选地，第一确定模块303可具体包括：第一尺寸确定子模块，用于根据待显示的内容，确定内容单元在第一网页中的尺寸；第一获取子模块，用于获取内容单元的前一内容单元的尺寸和位置；第一位置确定子模块，用于根据内容单元尺寸、前一内容单元的尺寸和位置确定内容单元的位置。

可选地，第一确定模块303也可具体包括：第二尺寸确定子模块，用于根据待显示的内容，确定内容单元在第一网页中的尺寸；第二位置确定子模块，用于根据内容单元尺寸，确定内容单元的位置。

可选地，内容单元还包括内容单元与其他内容单元的相对位置，第一确定模块303也可具体包括：第三尺寸确定子模块，用于根据待显示的内容，确定内容单元在第一网页中的尺寸；第三位置确定子模块，用于在其他内容单元的位置已经确定时，获取其他内容单元在第一网页中的位置，并根据相对位置、其他内容单元的位置确定内容单元的位置；第四位置确定子模块，用于在其他内容单元的位置未确定时，根据内容单元尺寸和前一内容单元的尺寸和位置，确定内容单元的位置。

在具体实施时，第一确定模块303的结构可以是上述三种可选方案之一，也可以是该三种方案的任意组合。在任意组合时，上述第一尺寸确定子模块/第二尺寸确定子模块/第三尺寸确定子模块可以分别设置在各自所属的第一确定模块中，也可以合设，只要能够实现内容单元的尺寸确定功能，并将确定后的尺寸输出至相应的其他模块即可。

优选地，网页发送装置还包括：释放模块，用于在内容单元离开可视区域后，浏览器释放内容单元。

在具体实施时，浏览器可以根据滚动条的位置或触控的操作来判断可视区域的范围。

在用户浏览时释放非可视区域内的内容单元，能够减少对内存、CPU等资源的持续占用，在持续载入大量内容单元后，不会对客户端带来高昂的性能损耗，保证客户端体验的稳定和流畅性。

优选地，网页发送装置还包括：保存模块，用于在浏览器释放内容单元之前，保存内容单元的尺寸和位置；第二确定模块，在内容单元再次进入可视区域时，浏览器根据保存的内容单元的尺寸和位置，确定内容单元的尺寸和位置。

在具体实施时，在网页中可以将与渲染后的该内容单元相同尺寸的空模块放置在该模块的相同位置，并把该内容单元放入内存；当该内容单元对应的空模块进入可视区域时，从内存中读取该内容单元，将进行渲染后，替换对应的空模块。

在释放内容单元之前，保存其尺寸和位置，以便在下次显示时，直接根据保存的尺寸和位置对该内容单元进行显示，能够减少浏览器的计算，减少延时。

优选地，请求模块301还用于向服务器请求与第一网页关联的第二网页的内容单元，并由显示模块304对第二网页的内容单元进行显示；其中，第二网页和第一网页布局方式不同。

常见的网页布局方式有垂直布局和横向布局两种。为使浏览器能够识别第一网页和第二网页的布局方式是垂直还是横向，可在服务器侧预先设置对应的布局方式。

采用本申请实施例中的方案，相互关联的第一网页和第二网页(例如店铺首页和后院)采用不同的布局形式，能够使浏览店铺的用户很方便的分辨当前浏览的是哪一个网页。

图4是根据本申请实施例四的网页发送装置的示意图。

如图4所示，根据本申请实施例四的网页发送装置400，应用于服务器，网页发送装置400包括：内容接收和存储模块401，用于接收并存储第一网页对应的内容单元，内容单元包括待显示的内容；请求接收模块402，接收来自浏览器的对第一网页对应的内容单元的请求；查找和发送模块403，用于查找第一网页对应的内容单元，并将内容单元中待显示的内容发送至浏览器，以用于浏览器根据待显示的内容，确定内容单元在第一网页中的尺寸和位置；以及，以该尺寸在第一网页的该位置，显示渲染后的内容单元。

内容接收和存储模块401接收用户针对网页上传的内容单元。例如，店主对店铺首页进行设计，希望在店铺首页中显示店铺商标、店内搜索栏、店铺公告、推荐商品、所有商品展示等；店主可将这些内容单元中的待显示内容上传至服务器，内容接收和存储模块401将这些内容单元与店铺的域名关联存储。

在请求接收模块402接收到来自浏览器的对第一网页对应的内容单元的请求时，查找和发送模块403查找该店铺首页对应的内容单元，例如，店铺商标、店内搜索栏、店铺公告、推荐商品、所有商品展示等；并将这些内容发送至浏览器。

采用本申请实施例四中的网页发送装置，由于仅需要向浏览器提供第一网页对应的内容单元的待显示的内容，因此，在用户(例如，淘宝店铺店主等)进行店铺设计时，只需要将希望在店铺首页进行显示的内容上传至服务器侧，在后续由浏览器根据待显示的内容来计算尺寸和位置并进行显示，避免了现有技术中店主在上传待显示的内容之外，还需要对各内容单元的尺寸和位置进行设计带来的不便，便于开发和维护，且提高了用户体验。

可选地，内容单元还包括内容单元与其他内容单元的相对位置，查找和发送模块403还用于将相对位置发送至浏览器。

例如，店主在网页设计时，希望将店铺公告放置在店内搜索栏的正下方。那么在将店铺商标、店内搜索栏、店铺公告、推荐商品、所有商品展示等发送至浏览器的同时，将店铺公告放置在店内搜索栏的正下方这一相对位置发送至浏览器。

通过在服务器侧对网页中各内容单元的相对位置进行设计，提高了网页设计的灵活性。

优选地，查找和发送模块403还用于根据来自浏览器的请求，将与第一网页关联的第二网页对应的内容单元发送至浏览器，其中，第二网页和第一网页布局方式不同。

第一网页与第二网页的关联形式有多种，例如，第一网页可以是店铺首页，第二网页可以是该店铺的后院；或者第一网页可以是店铺首页，第二网页可以是店铺首页某一商品的展示页面；或者第一网页是店铺后院，第二网页是店铺首页等。

在具体实施时，内容接收和存储模块401中还可以接收和存储用户设置的用于标识网页的布局方式的标识，例如，标识位为1时，表示该网页是垂直布局；标识位为2时，表示该网页是横向布局；当该标识位为空时，默认为垂直布局。当浏览器将网页域名发往服务器请求加载该网页对应的内容单元时，查找和发送模块403将内容单元发往浏览器时，同时将该标识位发往浏览器，浏览器根据该标识位识别网页的布局方式。

采用本申请实施例中的方案，相互关联的第一网页和第二网页(例如店铺首页和后院)采用不同的布局形式，能够使浏览店铺的用户很方便的分辨当前浏览的是哪一个网页。

另外，横向布局网页能够满足用户对创新浏览体验的要求。同时，随着智能终端的大面积采用，左右滚动的横向布局页面切合用户智能终端的操作，提升了用户体验。

图5是根据本申请实施例五的网页显示系统的示意图。

如图5所示，根据本申请实施例五的网页显示系统5包括：网页显示装置300；以及网页发送装置400。

采用本申请实施例五中的网页显示系统，由于网页发送装置仅需要向网页显示装置提供第一网页对应的内容单元的待显示的内容，因此，在用户(例如，淘宝店铺店主等)进行店铺设计时，只需要将希望在店铺首页进行显示的内容上传至服务器侧的网页发送装置，在后续由浏览器上的网页显示装置根据待显示的内容来计算尺寸和位置并进行显示，避免了现有技术中店主在上传待显示的内容之外，还需要对各内容单元的尺寸和位置进行设计带来的不便，便于开发和维护，且提高了用户体验。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (21)

1.一种网页显示方法，其特征在于，包括：

浏览器向服务器请求第一网页对应的内容单元；

接收所述内容单元，所述内容单元包括待显示的内容；

根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置；以及

以所述尺寸在所述第一网页的所述位置，显示渲染后的所述内容单元。

2.如权利要求1所述的方法，其特征在于，根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置具体包括：

根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸；

获取所述内容单元的前一内容单元的尺寸和位置；

根据所述内容单元尺寸、所述前一内容单元的尺寸和位置确定所述内容单元的位置。

3.如权利要求1所述的方法，其特征在于，根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置，具体包括：

根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸；

根据所述内容单元尺寸，确定所述内容单元的位置。

4.如权利要求1所述的方法，其特征在于，所述内容单元还包括所述内容单元与其他内容单元的相对位置，根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置具体包括：

根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸；

若所述其他内容单元的位置已经确定，则获取所述其他内容单元在所述第一网页中的位置，并根据所述相对位置、所述其他内容单元的位置确定所述内容单元的位置；

若所述其他内容单元的位置未确定，则根据所述内容单元尺寸和所述前一内容单元的尺寸和位置，确定所述内容单元的位置。

5.如权利要求1所述的方法，其特征在于，还包括：

在所述内容单元离开可视区域后，浏览器释放所述内容单元。

6.如权利要求5所述的方法，其特征在于，

在所述浏览器释放所述内容单元之前，保存所述内容单元的尺寸和位置；

在所述内容单元再次进入可视区域时，所述浏览器根据保存的所述内容单元的尺寸和位置，确定所述内容单元的尺寸和位置。

7.如权利要求1所述的方法，其特征在于，还包括：

所述浏览器向所述服务器请求与所述第一网页关联的第二网页的内容单元，并对所述第二网页的内容单元进行显示；

其中，所述第二网页和所述第一网页布局方式不同。

8.一种网页发送方法，其特征在于，包括：

服务器接收并存储第一网页对应的内容单元，所述内容单元包括待显示的内容；

接收来自浏览器的对所述第一网页对应的内容单元的请求；

查找所述第一网页对应的内容单元，并将所述内容单元中所述待显示的内容发送至浏览器，以用于所述浏览器根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置；以及，以所述尺寸在所述第一网页的所述位置，显示渲染后的所述内容单元。

9.根据权利要求8所述的方法，其特征在于，所述内容单元还包括所述内容单元与其他内容单元的相对位置，所述服务器进一步将所述相对位置发送至所述浏览器。

10.根据权利要求8所述的方法，其特征在于，所述服务器根据来自浏览器的请求，将与所述第一网页关联的第二网页对应的内容单元发送至所述浏览器，其中，所述第二网页和所述第一网页布局方式不同。

11.一种网页显示装置，应用于浏览器，其特征在于，包括：

请求模块，用于向服务器请求第一网页对应的内容单元；

接收模块，用于接收所述内容单元，所述内容单元包括待显示的内容；

第一确定模块，用于根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置；以及

显示模块，用于以所述尺寸在所述第一网页的所述位置，显示渲染后的所述内容单元。

12.如权利要求11所述的装置，其特征在于，所述第一确定模块具体包括：

第一尺寸确定子模块，用于根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸；

第一获取子模块，用于获取所述内容单元的前一内容单元的尺寸和位置；

第一位置确定子模块，用于根据所述内容单元尺寸、所述前一内容单元的尺寸和位置确定所述内容单元的位置。

13.如权利要求11所述的装置，其特征在于，所述第一确定模块具体包括：

第二尺寸确定子模块，用于根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸；

第二位置确定子模块，用于根据所述内容单元尺寸，确定所述内容单元的位置。

14.如权利要求11所述的装置，其特征在于，所述内容单元还包括所述内容单元与其他内容单元的相对位置，所述第一确定模块具体包括：

第三尺寸确定子模块，用于根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸；

第三位置确定子模块，用于在所述其他内容单元的位置已经确定时，获取所述其他内容单元在所述第一网页中的位置，并根据所述相对位置、所述其他内容单元的位置确定所述内容单元的位置；

第四位置确定子模块，用于在所述其他内容单元的位置未确定时，根据所述内容单元尺寸和所述前一内容单元的尺寸和位置，确定所述内容单元的位置。

15.如权利要求11所述的装置，其特征在于，还包括：

释放模块，用于在所述内容单元离开可视区域后，浏览器释放所述内容单元。

16.如权利要求15所述的装置，其特征在于，还包括：

保存模块，用于在所述浏览器释放所述内容单元之前，保存所述内容单元的尺寸和位置；

第二确定模块，在所述内容单元再次进入可视区域时，所述浏览器根据保存的所述内容单元的尺寸和位置，确定所述内容单元的尺寸和位置。

17.如权利要求11所述的装置，其特征在于，所述请求模块还用于向所述服务器请求与所述第一网页关联的第二网页的内容单元，并由所述显示模块对所述第二网页的内容单元进行显示；其中，所述第二网页和所述第一网页布局方式不同。

18.一种网页发送装置，应用于服务器，其特征在于，包括：

内容接收和存储模块，用于接收并存储第一网页对应的内容单元，所述内容单元包括待显示的内容；

请求接收模块，接收来自浏览器的对所述第一网页对应的内容单元的请求；

查找和发送模块，用于查找所述第一网页对应的内容单元，并将所述内容单元中所述待显示的内容发送至浏览器，以用于所述浏览器根据所述待显示的内容，确定所述内容单元在所述第一网页中的尺寸和位置；以及，以所述尺寸在所述第一网页的所述位置，显示渲染后的所述内容单元。

19.根据权利要求18所述的装置，其特征在于，所述内容单元还包括所述内容单元与其他内容单元的相对位置，所述查找和发送模块还用于将所述相对位置发送至所述浏览器。

20.根据权利要求18所述的装置，其特征在于，所述查找和发送模块还用于根据来自浏览器的请求，将与所述第一网页关联的第二网页对应的内容单元发送至所述浏览器，其中，所述第二网页和所述第一网页布局方式不同。

21.一种网页显示系统，其特征在于，包括：

如权11-17中任一项所述的网页显示装置；以及

如权18-20中任一项所述的网页发送装置。