CN102915308B

CN102915308B - 一种页面渲染的方法及装置

Info

Publication number: CN102915308B
Application number: CN201110220270.XA
Authority: CN
Inventors: 黄巧玲
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2011-08-02
Filing date: 2011-08-02
Publication date: 2016-03-09
Anticipated expiration: 2031-08-02
Also published as: HK1176434A1; CN102915308A

Abstract

本申请提供了一种页面渲染的方法及装置，其中，一种浏览器页面渲染的方法包括：浏览器自上而下渲染页面；当渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件；根据所述特征CSS文件渲染所述特征渲染区域。本申请可以保证在同一个页面中，引入多方代码不会相互影响和干扰，从而获得预期页面效果。

Description

一种页面渲染的方法及装置

技术领域

本申请涉及网页处理的技术领域，特别是涉及一种浏览器页面渲染的方法，一种用于页面渲染的浏览器，一种服务器页面渲染的方法，以及，一种用于页面渲染的服务器。

背景技术

打开网页的过程即是浏览器渲染的过程，渲染的方式是根据CSS(CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”)来渲染html(HypertextMarkupLanguage，超文本标记语言)。

具体而言，html是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如：文字如何处理，画面如何安排，图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。

CSS是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在html文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或html文档的某一部分，通常为文件头部分。这样通过仅仅编辑一个简单的CSS文档，外部样式表就可以同时改变站点中所有页面的布局和外观。不仅可使维护站点的外观更加容易，而且还可以使html文档代码更加简练，缩短浏览器的加载时间。

由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。网站开发者能够为每个html元素定义样式，并将之应用于所希望的任意多的页面中。如需进行全局的更新，只需简单地改变CSS样式，然后网站中的所有元素均会自动地更新。

采用现有的浏览器渲染技术，用户输入网址，浏览器向服务器发出请求，服务器端把html和CSS传给浏览器(即服务器端输出渲染好的html到浏览器)，浏览器开始根据CSS渲染html，渲染的顺序也是从上到下。具体渲染过程中，浏览器先解析html，构造一个内部文件树来代表所有显示的元素，然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样式，生成一个渲染树(rendertree)，当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点，从而生成整个页面。

以上现有技术中存在的问题是，在页面显示的过程中，有很多的CSS作用在页面元素上，这些CSS来自不同的地方。浏览器自己有默认的CSS，网页作者有自己写的CSS，还可能包括其它各种第三方的CSS，如用户通过开放的网络设计平台加入的CSS，CSS文件比较特殊，在其下载完成后，将和以前下载的所有CSS一起进行解析，解析完成后，将对此前所有元素(含以前已经渲染的)重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。在这种情况下，网页作者的样式和第三方的样式会在同一个级别被浏览器渲染，它们之间会存在相互影响和干扰，不能生成用户所希望效果的页面。

因此，目前需要本领域技术人员迫切解决的一个技术问题就是：如何创造性地提出一种页面渲染机制，用以保证在同一个页面中，引入多方代码不会相互影响和干扰，从而获得预期页面效果。

发明内容

本申请所要解决的技术问题是提供一种浏览器页面渲染方法和一种服务器页面渲染方法，用以保证在同一个页面中，引入多方代码不会相互影响和干扰，从而获得预期页面效果。

本申请还提供了一种浏览器页面渲染装置和一种服务器页面渲染装置，用以保证上述方法在实际中的应用及实现。

为了解决上述问题，本申请公开了一种浏览器页面渲染的方法，包括：

浏览器自上而下渲染页面；

当渲染到采用预设标识标记的特征渲染区域时，

获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件；

根据所述特征CSS文件渲染所述特征渲染区域。

优选的，所述特征渲染区域由超文本标记语言html标签定义，所述采用预设标识标记的特征渲染区域为，具有预设标识的类名的超文本标记语言html标签所对应的特征渲染区域。

优选的，所述特征渲染区域包括特征渲染元素，所述特征CSS文件中包括：具有所述预设标识作为前缀的CSS选择器。

优选的，所述获取特征CSS文件的步骤为，根据所述特征渲染区域对应html标签的类名，提取具有与所述类名匹配的标识为前缀的CSS选择器；

所述根据特征CSS文件渲染特征渲染区域的步骤为，根据所述特征CSS文件，渲染所述特征渲染区域的超文本标记语言html。

优选的，所述特征渲染区域还包括非特征渲染元素，所述的方法还包括：

过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器。

优选的，所述过滤特征CSS文件中非特征渲染元素对应的CSS选择器的步骤包括：

针对特征CSS文件中特征渲染元素对应的CSS选择器，添加第一标识的前缀；

针对特征CSS文件中非特征渲染元素对应的CSS选择器，添加第二标识的前缀；

从所述特征CSS文件中删除具有所述第二标识前缀的CSS选择器，和/或，保留具有所述第一标识前缀的CSS选择器。

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

过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器。

本申请还提供了一种用于页面渲染的浏览器，包括：

页面渲染模块，用于自上而下渲染页面；

特征CSS文件获取模块，用于在渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为为具有所述特征渲染区域相应标识的CSS文件；

特征渲染模块，用于根据所述特征CSS文件渲染所述特征渲染区域。

本申请还提供了一种服务器页面渲染的方法，包括：

在页面中设置特征渲染区域，并采用预设标识标记所述特征渲染区域；

接收浏览器发起的特征CSS文件获取请求，并依据所述请求向浏览器传送特征CSS文件；其中，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，所述浏览器用于根据所述特征CSS文件渲染所述特征渲染区域。

本申请还提供了一种用于页面渲染的服务器，包括：

特征区域设置模块，用于在页面中设置特征渲染区域，并采用预设标识标记所述特征渲染区域；

交互模块，用于接收浏览器发起的特征CSS文件获取请求，并依据所述请求向浏览器传送特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，所述浏览器用于根据所述特征CSS文件渲染所述特征渲染区域。

与现有技术相比，本申请具有以下优点：

本申请通过在页面中设置特征渲染区域，对特征渲染区域和CSS进行相应的标记，实现CSS文件和其在页面渲染的区域一一对应。浏览器对页面进行渲染的时候，针对不同的区域，提取对应的CSS文件进行渲染，由此，来自不同地方的CSS针对的只渲染页面中对应的区域，从而避免了各方CSS之间互相影响和干扰，获得预期的页面效果。

附图说明

图1是本申请的一种浏览器页面渲染的方法实施例1的流程图；

图2是本申请的一种浏览器页面渲染的方法实施例2的流程图；

图3是本申请的一种浏览器页面渲染的方法实施例3的流程图；

图4是本申请的一种用于页面渲染的浏览器实施例1的结构框图；

图5是本申请的一种用于页面渲染的浏览器实施例2的结构框图；

图6是本申请的一种用于页面渲染的浏览器实施例3的结构框图；

图7是本申请的一种服务器页面渲染的方法实施例的流程图；

图8是本申请的一种用于页面渲染的浏览器实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

为使本领域技术人员更好地理解本申请，以下对浏览器加载和解析页面的过程简单说明。

浏览器加载解析网页的顺序大致如下：

浏览器下载CSS文件的顺序是从上到下，网页渲染的顺序也是从上到下，下载和渲染是同时进行的。在渲染到页面的某一部分时，其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。

在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的(例如：JS脚本，CSS样式)，那么此时IE的下载过程会启用单独连接进行下载，并且在下载后进行解析，解析(JS、CSS中如有重定义，后定义函数将覆盖前定义函数)过程中，停止页面所有往下元素的下载。CSS文件比较特殊，在其下载完成后，将和以前下载的所有CSS元素一起进行解析，解析完成后，将对此前所有元素(含以前已经渲染的)重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

HTML页面加载和解析流程如下：

1.用户输入网址(假设是个html页面，并且是第一次访问)，浏览器向服务器发出请求，服务器返回html文件；

2.浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；

3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4.浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

5.浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要重新渲染这部分代码；

7.浏览器发现了一个包含一行Javascript代码的<script>标签，于是运行它；

8.Javascript脚本执行了这条语句，命令浏览器隐藏掉代码中的某个<div>(style.display＝”none”)。由于该元素的缺失，浏览器不得不重新渲染这部分代码；

9.浏览器继续载入html，继续进行渲染；

10.此时，若用户点击了界面中的“换肤”按钮，Javascript会使浏览器更换<link>标签的CSS路径；

11.此时，浏览器会重新下载各个<div><span><ul><li>元素，同时向服务器请求了新的CSS文件，重新渲染页面。

以上是浏览器打开页面的过程中，由于页面显示过程中有来自不同地方的CSS作用在页面元素上，所有的CSS下载完成进行解析之后将在同一个级别上被渲染，他们之间会存在相互影响和干扰，不能生成用户所希望的页面。

正是由于本专利发明人发现了以上问题，因而创造性地提出本申请的核心构思之一在于，在页面中设置特征渲染区域，对特征渲染区域和定义该区域的CSS文件采用同样的标识进行标记，从而使得CSS文件和其要渲染的区域实现一一对应，不会互相干扰。

参考图1，示出了本申请的一种浏览器页面渲染的方法实施例1的流程图，具体可以包括以下步骤：

步骤101、浏览器自上而下渲染页面；

步骤102、当渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件。

在本申请实施例中，所述特征渲染区域可以为需要引入第三方前端代码的区域，即由第三方前端代码渲染的区域。例如，页面中的页头部分和页尾部分由当前页面的原始CSS渲染，而页头以下，页尾以上的部分需要由第三方前端代码渲染，则所述页头以下，页尾以上的区域即为当前页面的特征渲染区域。

当然，本领域技术人员根据实际情况在页面中任意设置特征渲染区域都是可行的，本申请对此无需加以限制。

在具体实现中，所述特征渲染区域可以由超文本标记语言html标签定义，具体而言，html标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，如<xxx>，结束标签是被括号包围的斜杠和元素名，如</xxx>。例如，开始<div>到结束</div>。在这种情况下，设置特征渲染区域的方法可以采用在某个标签加上属性class＝”xxx”的方法，那么，该标签从开始<xxx>到结束</xxx>里面的代码都是特征渲染区域。

在本申请的一种优选实施例中，

所述采用预设标识标记的特征渲染区域为，具有预设标识的类名的超文本标记语言html标签所对应的特征渲染区域。

例如，假设特征渲染区域是在html的某个div上，设置预设标识为：

tb-shop，那么，特征渲染区域对应的原始html为：

采用预设标识标记的特征渲染区域对应的html为：

本申请的一种优选实施例中，所述特征CSS文件中包括：具有所述预设标识作为前缀的CSS选择器。即特征CSS文件通过对原CSS文件中的各CSS选择器，添加预设标识的前缀获得。

所述原CSS文件可以理解为，第三方前端代码对应的CSS文件。例如，由用户通过开放的网络平台提交的，用于渲染页面中某一特征渲染区域的对应CSS文件。当然，所述原CSS文件也可以是从后台提供的，本申请对所述特征CSS文件的获取源不作限制。

当然，所述特征CSS文件也可以是从后台提供的，本申请对所述特征CSS文件的获取源不作限制。

在实际中，要使用CSS对html页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。html页面中的元素就是通过CSS选择器进行控制的。

CSS选择器可以分为：类别选择器、标签选择器、ID选择器等等。以类别选择器为例，类选择器根据类名来选择，前面以”.”来标志，如：

.demoDiv{

color:#FF0000；

}

在html中，元素可以定义一个class的属性。

如：

最后，用浏览器浏览可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。

在本优选实施例中，对各CSS选择器添加预设标识的前缀，可以理解为，在每条CSS选择器最前面，加上特性标记符(.xxx)

例如，原CSS文件包括如下内容：

针对原CSS文件中的各CSS选择器，添加.tb-shop的前缀后，转换成如下内容的特征CSS文件：

在本申请的一种优选实施例中，所述步骤102可以包括以下子步骤：

子步骤S11、根据所述特征渲染区域对应html标签的类名，提取具有与所述类名匹配的标识为前缀的CSS选择器；

例如，特征渲染区域的html添加类名为tb-shop，对应渲染该区域的CSS文件中各CSS选择器也添加了对应的前缀tb-shop，浏览器从上到下根据CSS渲染html，当渲染到特征渲染区域<divclass＝”tb-shop”>里面的元素时，需要从服务器端所有的CSS文件中查找并提取对应的加了tb-shop前缀的CSS选择器(转换后的CSS)。

步骤103、根据所述特征CSS文件渲染所述特征渲染区域。

在本申请的一种优选的实施例中，所述步骤103具体可以包括以下子步骤：

子步骤S21、根据所述特征CSS文件，渲染所述特征渲染区域的超文本标记语言html。

如上面的例子，提取对应的加了tb-shop前缀的CSS选择器后，可以根据该CSS选择器将所述添加类名为tb-shop的特征渲染区域渲染为该CSS选择器指定的样式。

本领域技术人员易于想到的是，采用本申请实施例，可以在页面中设置多个特征渲染区域，只需要通过预设标识将各个特征渲染区域与对应的特征CSS文件关联，在浏览器进行页面渲染时，就可以使特征CSS文件作用于同一标识的特征渲染区域。例如，.xxx开头的CSS适用于<divclass＝”xxx”>里面的内容；.yyy开头的CSS适用于<divclass＝”yyy”>里面的内容。

参考图2，示出了本申请的一种浏览器页面渲染的方法实施例2的流程图，具体可以包括以下步骤：

步骤201、浏览器自上而下渲染页面；

步骤202、当渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件；

步骤203、过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器。

第三方提供的CSS会包含任何css规范允许的css代码，下载CSS文件后，后端(java)会读取整个css文件，并逐行进行转换，在此转换之前，需要过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器。具体的实现中，可以按照预置的属性取值列表对CSS文件进行逐行校验，目的是去除一些不安全的CSS文件和未知问题，如果css属性不对应预置的取值里，则进行整条.class过滤。

为使本领域技术人员更好地理解本申请，以下提供一种预置属性取值列表的示例：

属性	取值
		background-attachment	scroll\|fixed
background-clip	border-box\|padding-box\|content-box\|no-clip
		background-color	color
background-image	none\|url
		background-origin	border\|padding\|content
background-position	left\|center\|right\|top\|center\|bottom\|length\|percentage
		background-repeat	repeat\|repeat-x\|repeat-y\|no-repeat
boarder	border-width\|border-style\|border-color
		border-bottom	border-bottom-width\|order-bottom-style\|border-bottom-color
border-bottom-color	color\|transparent

步骤204、根据所述特征CSS文件渲染所述特征渲染区域。

参考图3，示出了本申请的一种浏览器页面渲染的方法实施例3的流程图，具体可以包括以下步骤：

步骤301、浏览器自上而下渲染页面。

步骤302、当渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为定义具有所述特征渲染区域相应标识的CSS文件。

在本实施例中，所述特征渲染区域可以包括特征渲染元素和非特征渲染元素，在具体实现中，特征渲染元素可以为特征渲染区域中需要引入第三方代码进行渲染的元素，非特征渲染元素可以为特征渲染区域中需要用原始CSS代码进行渲染的元素，例如，对于设置在页头和页尾之间的特征渲染区域而言，用户自定义设置的页面特效可以由特征渲染元素表征；页面中的基本布局可以由非特征渲染元素表征。

步骤303、过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器。

步骤304、过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器。

在本申请的一种优选的实施例中，所述步骤304具体可以包括以下子步骤：

子步骤S31、针对特征CSS文件中特征渲染元素对应的CSS选择器，添加第一标识的前缀；

例如，对特征渲染元素可以添加命名shop-box；

子步骤S32、针对特征CSS文件中非特征渲染元素对应的CSS选择器，添加第二标识的前缀；

例如，对非特征渲染元素可以添加命名tb-；

子步骤S33、从所述特征CSS文件中删除具有所述第二标识前缀的CSS选择器，和/或，保留具有所述第一标识前缀的CSS选择器。

例如，对特征渲染元素可以添加命名shop-box，对非特征渲染元素可以添加命名tb-后，保留具有shop-box前缀的CSS选择器；过滤掉具有tb-前缀的CSS选择器；过滤掉具有tb-前缀的CSS选择器同时保留具有shop-box前缀的CSS选择器。

步骤305、根据所述特征CSS文件渲染所述特征渲染区域。

综上所述，本申请提供了一种浏览器页面渲染的方法，通过在页面中设置特征渲染区域，对特征渲染区域和CSS进行相应的标记，实现CSS文件和其在浏览器页面渲染的区域一一对应。浏览器对页面进行渲染的时候，针对不同的区域，提取对应的CSS文件进行渲染，由此，来自不同地方的CSS针对的只渲染页面中对应的区域，从而避免了各方CSS之间互相影响和干扰，获得预期的页面效果。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

参考图4，示出了本申请的一种用于页面渲染的浏览器实施例1的结构框图，具体可以包括以下模块：

页面渲染模块401，用于自上而下渲染页面。

特征CSS文件获取模块402，用于在渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件；

特征渲染模块403，用于当根据所述特征CSS文件渲染所述特征渲染区域。

在本申请的一种优选的实施例中，所述特征渲染区域由超文本标记语言html标签定义，所述采用预设标识标记的特征渲染区域为，具有预设标识的类名的超文本标记语言html标签所对应的特征渲染区域。在本申请的一种优选的实施例中，所述特征CSS文件中包括具有所述预设标识作为前缀的CSS选择器。在本申请的一种优选的实施例中，所述特征CSS获取模块包括CSS选择器提取子模块，用于根据所述特征渲染区域对应的html标签的类名，提取具有与所述类名匹配的标识为前缀的CSS选择器。

在本申请的一种优选的实施例中，所述特征渲染模块可以包括：

特征CSS文件渲染子模块，用于根据所述特征CSS文件，渲染所述特征渲染区域的超文本标记语言html。

参考图5，示出了本申请的一种用于页面渲染的浏览器实施例2的结构框图，具体可以包括以下模块：

页面渲染模块501，用于自上而下渲染页面；

特征CSS文件获取模块502，用于在渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件；

CSS文件过滤模块503，用于过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器；

特征渲染模块504，根据所述特征CSS文件渲染所述特征渲染区域。

参考图6，示出了本申请的一种用于页面渲染的浏览器实施例3的结构框图，具体可以包括以下模块：

页面渲染模块601，用于自上而下渲染页面；

特征CSS文件获取模块602，用于在渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件；

CSS文件过滤模块603，用于在按照预置规则采用预设标识对特征CSS文件进行转换之前，过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器；

非特征CSS文件过滤模块604，用于在按照预置规则采用预设标识对特征CSS文件进行转换之前，过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器；

特征渲染模块605，根据所述特征CSS文件渲染所述特征渲染区域。

在本申请的一种优选的实施例中，所述非特征CSS文件过滤模块可以包括：

第一标识添加子模块，用于针对特征CSS文件中特征渲染元素对应的CSS选择器，添加第一标识的前缀；

第二标识添加子模块，用于针对特征CSS文件中非特征渲染元素对应的CSS选择器，添加第二标识的前缀；

删除子模块，用于从所述特征CSS文件中删除具有所述第二标识前缀的CSS选择器，和/或，保留具有所述第一标识前缀的CSS选择器。

由于所述装置实施例基本相应于前述图1、图2和图3所示的方法实施例，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此就不赘述了。

参考图7，示出了本申请的一种服务器页面渲染的方法实施例的流程图，具体可以包括以下步骤：

步骤701、在页面中设置特征渲染区域，并采用预设标识标记所述特征渲染区域；

步骤702、接收浏览器发起的特征CSS文件获取请求，并依据所述请求向浏览器传送特征CSS文件；其中，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，所述浏览器用于根据所述特征CSS文件渲染所述特征渲染区域。

例如，对特征渲染区域添加预设标识为tb-shop，对相应的渲染特征渲染区域的CSS文件也添加同样的标识tb-shop，即为特征CSS文件。浏览器渲染到该特征渲染区域时，向服务器发出提取特征CSS文件的请求，服务器根据这个请求向浏览器传送具有tb-shop标识的特征CSS文件，，浏览器根据具有tb-shop标识的CSS文件渲染具有tb-shop标识的特征渲染区域，从而实现了CSS文件与其对应渲染的页面区域一一对应。

在本申请的一种优选的实施例中，所述特征渲染区域可以由超文本标记语言html标签定义，所述采用预设标识标记特征渲染区域的步骤可以包括：

子步骤S41、针对所述特征渲染区域对应的超文本标记语言html标签，添加预设标识的类名。例如对特征渲染区域的html添加类名为tb-shop。

在本申请的一种优选的实施例中，所述特征渲染区域包括特征渲染元素，所述特征CSS文件中包括：具有所述预设标识作为前缀的CSS选择器。即特征CSS文件通过对CSS文件中的各CSS选择器，添加预设标识的前缀获得，例如，添加.tb-shop的前缀，从而与具有同样tb-shop前缀的特征渲染区域实现一一对应。

参考图8，示出了本申请的一种服务器页面渲染的装置实施例的结构框图，具体可以包括以下模块：

特征区域设置模块801，用于在页面中设置特征渲染区域，并采用预设标识标记所述特征渲染区域；

交互模块802，用于接收浏览器发起的特征CSS文件获取请求，并依据所述请求向浏览器传送特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，所述浏览器用于根据所述特征CSS文件渲染所述特征渲染区域。

本申请可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本申请所提供的一种浏览器页面渲染方法和一种服务器渲染方法，以及，一种浏览器页面渲染装置和一种服务器渲染装置进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

1.一种浏览器页面渲染的方法，其特征在于，包括：

浏览器自上而下渲染页面；

当渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，实现所述特征CSS文件和其在页面渲染的特征渲染区域一一对应，所述特征渲染区域包括特征渲染元素和非特征渲染元素，所述特征渲染元素为特征渲染区域中需要引入第三方代码进行渲染的元素，所述非特征渲染元素为特征渲染区域中需要用原始CSS代码进行渲染的元素，所述特征CSS文件通过对原CSS文件中的各CSS选择器，添加预设标识的前缀获得；

过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器；

根据所述特征CSS文件渲染所述特征渲染区域，以使所述特征CSS文件作用于同一标识的特征渲染区域。

2.根据权利要求1所述的方法，其特征在于，所述特征渲染区域由超文本标记语言html标签定义，所述采用预设标识标记的特征渲染区域为，具有预设标识的类名的超文本标记语言html标签所对应的特征渲染区域。

3.根据权利要求2所述的方法，其特征在于，所述获取特征CSS文件的步骤为，根据所述特征渲染区域对应html标签的类名，提取具有与所述类名匹配的标识为前缀的CSS选择器；

4.根据权利要求1所述的方法，其特征在于，所述过滤特征CSS文件中，非特征渲染元素对应的CSS选择器的步骤包括：

5.根据权利要求3或4所述的方法，还包括：

过滤掉所述特征CSS文件中不符合预定义属性的CSS选择器。

6.一种用于页面渲染的浏览器，其特征在于，包括：

页面渲染模块，用于自上而下渲染页面；

特征CSS文件获取模块，用于在渲染到采用预设标识标记的特征渲染区域时，获取特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，实现所述特征CSS文件和其在页面渲染的特征渲染区域一一对应，所述特征渲染区域包括特征渲染元素和非特征渲染元素，所述特征渲染元素为特征渲染区域中需要引入第三方代码进行渲染的元素，所述非特征渲染元素为特征渲染区域中需要用原始CSS代码进行渲染的元素，所述特征CSS文件通过对原CSS文件中的各CSS选择器，添加预设标识的前缀获得；

非特征CSS文件过滤模块，用于过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器；

特征渲染模块，用于根据所述特征CSS文件渲染所述特征渲染区域，以使所述特征CSS文件作用于同一标识的特征渲染区域。

7.一种服务器页面渲染的方法，其特征在于，包括：

在页面中设置特征渲染区域，并采用预设标识标记所述特征渲染区域，其中，所述特征渲染区域包括特征渲染元素和非特征渲染元素，所述特征渲染元素为特征渲染区域中需要引入第三方代码进行渲染的元素，所述非特征渲染元素为特征渲染区域中需要用原始CSS代码进行渲染的元素；

接收浏览器发起的特征CSS文件获取请求，并依据所述请求向浏览器传送特征CSS文件；其中，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，实现所述特征CSS文件和其在页面渲染的特征渲染区域一一对应，所述特征CSS文件通过对原CSS文件中的各CSS选择器，添加预设标识的前缀获得；所述浏览器用于过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器；根据所述特征CSS文件渲染所述特征渲染区域，以使所述特征CSS文件作用于同一标识的特征渲染区域。

8.一种用于页面渲染的服务器，其特征在于，包括：

特征区域设置模块，用于在页面中设置特征渲染区域，并采用预设标识标记所述特征渲染区域，其中，所述特征渲染区域包括特征渲染元素和非特征渲染元素，所述特征渲染元素为特征渲染区域中需要引入第三方代码进行渲染的元素，所述非特征渲染元素为特征渲染区域中需要用原始CSS代码进行渲染的元素；

交互模块，用于接收浏览器发起的特征CSS文件获取请求，并依据所述请求向浏览器传送特征CSS文件，所述特征CSS文件为具有所述特征渲染区域相应标识的CSS文件，实现所述特征CSS文件和其在页面渲染的特征渲染区域一一对应，所述特征CSS文件通过对原CSS文件中的各CSS选择器，添加预设标识的前缀获得；所述浏览器用于过滤所述特征CSS文件中，非特征渲染元素对应的CSS选择器；根据所述特征CSS文件渲染所述特征渲染区域，以使所述特征CSS文件作用于同一标识的特征渲染区域。