本申请实施例示出一种基于cobalt的页面渲染方法，服务器，客户端及系统。本申请实施例示出的技术方案第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片的存储位置。由于本申请实施例示出的技术方案的第二CSS文件中的背景属性中包括图片的存储位置，在后续渲染的过程中，可以基于所述图片的存储位置，找到相应的图片，进而实现图片的渲染。可见本申请实施例示出的技术方案可以有效的解决Cobalt浏览器无法针对图片标签有效解析的缺点，可以达到的图片展示效果。可以达到的图片展示效果。可以达到的图片展示效果。
【技术实现步骤摘要】
基于cobalt的页面渲染方法，服务器，客户端及系统
[0001]本申请涉及显示画面
，尤其涉及基于cobalt的页面渲染方法，服务器，客户端及系统。
技术介绍
[0002]通常，页面的渲染过程通过渲染系统实现。图1为一示例性的渲染系统，所述渲染系统包括服务器1和客户端2。从图1中可以看出，服务器1接收来自于客户端2的页面加载请求，基于所述页面加载请求将页面内容返回给客户端2。所述页面内容用HTML(Hyper Text Markup Language，超文本标记语言)文件和CSS(Cascading Style Sheet，层叠样式表)文件承载，所述HTML文件为页面显示的元素对象，包括文字图片等信息，所述CSS文件可以配合各种脚本语言动态地对网页各元素进行格式化处理。客户端2设置有HTML解析器21，CSS解析器22(Cascading Style Sheet，层叠样式表)，渲染树构建模块23，布局模块24和UI25(User Interface，用户界面)。客户端2在接收到页面内容后，首先，HTML解析器21将接收到的HTML文件解析成DOM树(Document Object Model，文件对象模型)，其中，DOM树的结构可以参阅图2，生成DOM树的过程包括：HTML解析器21将HTML文件转化DOM树形式的网盘可读取的字节内容，其中字节内容的展示格式为：【标签】+【元素对象】的格式。CSS解析器22基于CSS文件将DOM树中的各个元素对象加上样式信息，生成CSSOM树；然后，渲染树构建单元23将DOM树与CSSOM树合并后，生成另外一棵用于渲染的树-渲染树，布局模块24对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置；最后，UI25的后端层将渲染树的每一个节点渲染绘制出来生成渲染后的页面。
[0003]通常客户采用不同的浏览器进行页面的渲染，相应的渲染过程存在一定的差异，Cobalt浏览器，因其具有以最少的资源消耗提供丰富的应用程序开发环境，以及使用灵活多变web形式实现流畅的交互操作等优点，而广泛的应用与客户端。
[0004]Cobalt浏览器，虽然可以以最少的资源消耗为页面的渲染提供丰富的应用程序开发环境，但是，在实际渲染的过程中，由于Cobalt浏览器对HTML文件的各种标签的支持性差，如果，HTML文件包含图片相关的标签，UI在对相关图片进行渲染的时候无法将相应的图片进行展示。
技术实现思路
[0005]为了解决上述技术问题本申请实施例示出一种基于cobalt的页面渲染方法，服务器，客户端及系统。
[0006]本申请实施例第一方面示出一种基于cobalt的页面渲染系统，包括客户端和与所述客户端相连接的服务器；
[0007]所述服务器被配置为：配置HTML文件和第一CSS文件，所述HTML文件不包括图片信息；
[0008]在所述第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片
的存储位置；
[0009]建立所述HTML文件与所述第二CSS文件之间的联系，生成页面内容；
[0010]建立页面加载请求与所述页面内容之间的对应关系；
[0011]接收客户端发送的页面加载请求，基于页面加载请求与所述页面内容之间的对应关系，发送相应的页面内容至客户端；
[0012]所述客户端被配置为：向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的页面内容；
[0013]解析HTML文件，生成DOM树；
[0014]根据DOM树和第二CSS文件，生成CSSOM树，所述CSSOM树包括：与所述DOM树各元素对象对应的样式信息和背景属性；
[0015]合并所述CSSOM树和所述DOM树，生成渲染树；
[0016]将渲染树的每一个节点和背景属性渲染绘制，生成显示页面。
[0017]本申请实施例第二方面示出一种基于cobalt的页面渲染的服务器，所述服务器被配置为：
[0018]配置HTML文件和第一CSS文件，所述HTML文件不包括图片信息；
[0019]在所述第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片的存储位置；
[0020]建立所述HTML文件与所述第二CSS文件之间的联系，生成页面内容；
[0021]建立页面加载请求与所述页面内容之间的对应关系；
[0022]接收客户端发送的页面加载请求，基于页面加载请求与所述页面内容之间的对应关系，发送相应的页面内容至客户端。
[0023]本申请实施例第三方面示出一种基于cobalt的页面渲染的终端，所述客户端被配置为：向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的页面内容；
[0024]解析HTML文件，生成DOM树；
[0025]根据DOM树和第二CSS文件，生成CSSOM树，所述CSSOM树包括：与所述DOM树各元素对象对应的样式信息和背景属性；
[0026]合并所述CSSOM树和所述DOM树，生成渲染树；
[0027]将渲染树的每一个节点和背景属性渲染绘制，生成显示页面。
[0028]本申请实施例第四方面示出一种基于cobalt的页面渲染方法，所述方法应用于服务器端，其特征在于，包括：
[0029]配置HTML文件和第一CSS文件，所述HTML文件不包括图片信息；
[0030]在所述第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片的存储位置；
[0031]建立所述HTML文件与所述第二CSS文件之间的联系，生成页面内容；
[0032]建立页面加载请求与所述页面内容之间的对应关系；
[0033]接收客户端发送的页面加载请求，基于页面加载请求与所述页面内容之间的对应关系，发送相应的页面内容至客户端。
[0034]本申请实施例第五方面示出一种基于cobalt的页面渲染方法，应用于客户端，包
括：
[0035]向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的页面内容，所述页面内容包括：HTML文件和第二CSS文件，所述HTML文件不包括图片信息，所述第二CSS文件包括：背景属性，其中，所述背景属性包括图片的存储位置；
[0036]解析HTML文件，生成DOM树；
[0037]根据DOM树和第二CSS文件，生成CSSOM树，所述CSSOM树包括：与所述DOM树各元素对象对应的样式信息和背景属性；
[0038]合并所述CSSOM树和所述DOM树，生成渲染树；
[0039]将渲染树的每一个节点和背景属性渲染绘制，生成显示页面。
[0040]由以上技术方案可以看出，本申请实施例示出一种基于cobalt的页面渲染方法，服务器，客户端及系统。本申请实施例示出的技术方案中，服务器在第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片的存储位置。由于本申本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于cobalt的页面渲染系统，包括客户端和与所述客户端相连接的服务器，其特征在于：所述服务器被配置为：配置HTML文件和第一CSS文件，所述HTML文件不包括图片信息；在所述第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片的存储位置；建立所述HTML文件与所述第二CSS文件之间的联系，生成页面内容；建立页面加载请求与所述页面内容之间的对应关系；接收客户端发送的页面加载请求，基于页面加载请求与所述页面内容之间的对应关系，发送相应的页面内容至客户端；所述客户端被配置为：向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的页面内容；解析HTML文件，生成DOM树；根据DOM树和第二CSS文件，生成CSSOM树，所述CSSOM树包括：与所述DOM树各元素对象对应的样式信息和背景属性；合并所述CSSOM树和所述DOM树，生成渲染树；将渲染树的每一个节点和背景属性渲染绘制，生成显示页面。2.一种基于cobalt的页面渲染的服务器，其特征在于，所述服务器被配置为：配置HTML文件和第一CSS文件，所述HTML文件不包括图片信息；在所述第一CSS文件中添加背景属性，生成第二CSS文件，所述背景属性包括图片的存储位置；建立所述HTML文件与所述第二CSS文件之间的联系，生成页面内容；建立页面加载请求与所述页面内容之间的对应关系；接收客户端发送的页面加载请求，基于页面加载请求与所述页面内容之间的对应关系，发送相应的页面内容至客户端。3.一种基于cobalt的页面渲染的终端，其特征在于，所述客户端被配置为：向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的页面内容，其中，所述页面内容包括：HTML文件和第二CSS文件，所述HTML文件不包括图片信息，所述第二CSS文件包括：背景属性，其中，所述背景属性包括图片的存储位置；解析HTML文件，生成DOM树；根据DOM树和第二CSS文件，生成CSSOM树，所述CSSOM树包括：与所述DOM树各元素对象对应的样式信息和背景属性；合并所述CSSOM树和所述DOM树，生成渲染树；将渲染树的每一个节点和背景属性渲染绘制，生成显示页面。4.一种基于cobalt的页面渲染方法，所述方法应用于服务器端，其特征在于，包括：配置HTML文件和...
【专利技术属性】
技术研发人员：王良，
申请(专利权)人：青岛海信传媒网络技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。