CN102915375A - 一种基于布局分区的网页加载方法 - Google Patents

Abstract

一种基于布局分区的网页加载方法，属浏览器技术领域。该方法包括：客户向服务器发送请求，客户与服务器建立TCP连接并获得HTML文件、CSS文件、各种资源文件，浏览器对各种文件解析分别生成DOM树、样式表，生成渲染树，布局管理器对渲染树进行布局，开始生成渲染布局树节点，每生成一个渲染布局树节点，就用增量绘制方式对浏览器界面进行绘制，直到整个渲染布局树全部绘制完成。本方法充分利用移动设备屏幕较小的特点，改变以往加载布局完全部网页内容再进行显示的方法，通过每生成一个渲染布局树节点就进行增量绘制，避免了用户打开网页时因为加载全部网页而长时间的界面空白，极大减少了等待时间，极大地提升了用户的体验。

Description

一种基于布局分区的网页加载方法

技术领域

本发明涉及浏览器技术领域，尤其是涉及用于移动设备上使用webkit引擎的浏览器的一种基于布局分区的网页加载方法。

背景技术

WebKit的前身是KDE小组的KHTML，其所包含的WebCore排版引擎和JSCore引擎来自于KDE的KHTML和KJS。Webkit作为一个开源的浏览器引擎，其优势在于高效稳定，兼容性好，且源代码结构清晰，易于维护。这些优势使其在手机、平板电脑等移动设备上应用十分广泛，例如Google的手机Android、Apple的iPhone,Nokia’s S60browser等所使用的浏览器内核引擎都是基于WebKit。

目前，基于webkit引擎的浏览器的加载方法是：

1、客户端发出请求；

2、客户进程与服务器建立TCP连接，客户端获取HTML文件、CSS文件、资源文件；

3、客户端浏览器通过W3C规范解析HTML文件生成DOM（文档对象模型）树、解析CSS文件生成样式表；

4、同时样式表附加（attach操作）到DOM树后生成对应的渲染（Render）树；

5、布局管理器布局（Layout）渲染树生成渲染布局（RenderLayer）树；

6、整棵渲染布局树完成生成后，绘制（Painting）渲染布局树，从而最终显示在屏幕上。

随着近几年的飞速发展，移动互联网已经蔚然成风，2011年全球活跃移动宽带用户已达12亿，优化移动设备迫在眉睫。由于移动设备的配置和网络连接速度等局限性，网页加载速度成为制约用户体验的重要因素。我们经常会遇到这样一种现象：用手机打开网页，首先经历界面长时间的空白，等加载（包括上段所提的获取、解析、附加、渲染、布局）结束后，网页显示出来。这种长时间的加载过程极大地影响用户的满意度。如专利号200910160977.9，发明名称为《一种嵌入式网页解析方法及使用该方法的网页浏览器和终端设备》的专利即属于此列。

发明内容

为克服现有技术中存在的不足和缺陷，以解决移动设备上长时间加载的问题，本发明提出了一种基于布局分区的网页加载方法，通过改进布局与绘制方法，利用移动设备本身屏幕较小的特点，基于渲染布局（RenderLayer）树从上到下进行分区绘制，大大缩短加载时间，提升了用户满意度。

本发明的技术方案是按以下方式实现的：

一种基于布局分区的网页加载方法，由移动终端来实现，该移动终端包括安装了webkit内核浏览器的手机、平板电脑以及嵌入式上网装置，采用的是基于ARM a9处理器，安装Android4.0操作系统的上网终端，通过该移动终端和网站之间建立TCP连接关系，该方法步骤如下：

1、移动终端中的浏览器向服务器发送请求，请求浏览器进程与服务器建立TCP连接；

2、服务器端应答，浏览器进程与服务器建立TCP连接，连接建立后，双方进程通过建立好的连接进行读写操作，从而浏览器内核获取HTML文件、CSS文件、资源文件；

3、浏览器内核通过W3C规范解析HTML文件生成DOM（文档对象模型）树、解析CSS文件生成样式表；DOM树由DOM元素及属性节点组成，其元素和HTML文件的标签基本上是一一对应的，样式表则决定了每个DOM元素最终的显示形式；

4、浏览器内核产生DOM树的同时，样式表附加（attach操作）到DOM树后生成对应的渲染（Render）树；构建DOM树时，当DOM元素构建完成，通过Element::attach()方法，将样式表attach到DOM元素中,生成渲染树的RenderObject对象，渲染树由所有包含颜色和大小属性的矩形可见元素组成，是整个文档的可视化表示；

5、布局管理器在对渲染树布局过程中，结合样式表、图片资源，产生渲染布局（RenderLayer）树的一个节点，这一步中将确定这个节点及其所对应的渲染树的渲染对象的所有子元素在屏幕上的确切坐标；

6、布局管理器判断是否产生完一个RenderLayer节点，若是，进行第7步；否则，等待，布局管理器继续检测直到新节点产生；布局管理器判断的原理是，由于一个渲染布局树的节点对应渲染树的一个特殊的渲染对象，渲染布局树的节点的子节点将对应着渲染树的渲染对象子节点的子集，所以，如果渲染树的渲染对象为根的树实现遍历，那么说明渲染布局树的这一节点已经完成产生；

7、渲染引擎将这一个RenderLayer节点采用增量方式绘制出来，增量绘制的原理是，绘制新产生的这个节点之前，渲染引擎比较之前产生的RenderLayer树的节点有无因这个变化产生影响，如果产生影响，渲染引擎将变化的节点所对应的区块与新的区块一起重新绘制；如果旧的节点没有发生任何变化，那么渲染引擎只对新增节点对应的区块进行绘制；

8、与第7步同时，布局管理器判断是否渲染树全部布局排版转化为渲染布局树，若否，回到步骤5；若是，整个网页绘制工作结束。

这样，一个网页由原来整体加载的方式转化为基于布局（RenderLayer）的分区加载方法，对于一个数据量较大的网页的加载工作来说，提升的速度是非常可观的。

所述的TCP是Transmission Control Protocol的缩写，为传输控制协议，TCP是一种面向连接（连接导向）的、可靠的、基于字节流的运输层（Transport layer）通信协议。

所述的W3C是万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会，是国际著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

所述的CSS是Cascading Style Sheet的缩写。译作“层叠样式表单”或“级联样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

所述的HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

本发明所采用的DOM树是一种文档对象模型，（简单介绍该文档对象模型。）是W3C组织推荐的处理可扩展置标语言的标准编程接口，是表示和处理一个HTML或XML文档的常用方法。可以把DOM认为是页面上数据和结构的一个树形表示。

所述的RenderLayer节点含义如下：经过步骤4，DOM树不断结合CSS文件生成Render树，而后步骤5中，布局管理器开始根据浏览器界面大小对Render树进行布局。布局管理器将Render树中的元素映射成一个一个浏览器界面中的图形方块，并赋给他们位置坐标和大小。这样，其中最大的那些组成整个网页界面的方块都是RenderLayer节点，而这些节点的子节点所对应的图形块，都在其父节点所对应图形块的内部。

在上述步骤6中，所述判断一个RenderLayer节点生成结束的判断方法是：由于一个Render Tree和一个RenderLayer Tree的节点是一个多对一的关系，并且，一个RenderLayer被建立之后，其所在的RenderObject对象的所有后代均包含在该RenderLayer，除非这些后代需要建立自己的RenderLayer。所以，当一个Render Tree中的某节点所有元素都已经完成向RenderLayer Tree的节点的映射后，则可以判定这个RenderLayer节点生成完成。

在上述步骤7中，直接将这一个RenderLayer节点绘制出来这一步骤中，因为Html使用基于流的布局模型，这样大部分时间都是以单一的途径进行几何计算，从而流中较晚进行布局的元素不会影响到前面元素的几何特性。从而布局可以在文档中从右向左、自上而下进行。这样，当后续节点计算出来后进行绘制时，如果采用增量绘制方案（即一些渲染对象以不影响整棵树的方式改变，改变的渲染对象使其在屏幕上的矩形区域失效，这将导致操作系统将其看作dirty区域，并产生一个绘制事件，操作系统将这些区域合并为一个，进行重绘），基本不会影响到之前绘制的节点，最大程度上减少了重复劳动。

Webkit在布局过程中，有以下两个特点：

1、一个RenderLayer节点被建立之后，其所在的RenderObject对象的所有后代均包含在该RenderLayer节点中，除非这些后代需要建立自己的RenderLayer节点。而后代的RenderLayer节点的父亲就是自己最近的祖先所在的不同的RenderLayer，这样，它们也构成了一颗RenderLayer树。这种树形结构对于基于布局分区加载方法的分区和控制是非常有利的。

2、渲染树（Render树）中的元素叫做渲染对象（RenderObject），当渲染对象被创建并添加到树中，他们并没有位置和大小，而这些值的计算过程就是layout。Html使用基于流的布局模型，这样大部分时间都是以单一的途径进行几何计算，从而流中较晚进行布局的元素不会影响到前面元素的几何特性。从而布局可以在文档中从右向左、自上而下进行。

利用以上两个特点，为了实现前述目标，我们的加载方案如下：

本发明当用户浏览器解析完服务器传递的HTML、CSS等文件产生渲染树后，布局管理器对渲染树进行布局处理生成多个渲染布局树节点。每完成一个渲染布局树节点的生成工作，立即绘制这个节点。与此同时，布局管理器继续布局下一个节点。这样，浏览器可以实现基于布局分区由上至下逐渐加载，弥补了传统移动设备浏览器整个网页全部布局完后进行绘制所导致的浏览器打开网页期间界面长时间空白的不足，大幅度提升了用户的满意度。

本发明具有以下特点：

1、在用户使用浏览器打开网页时，按照从上到下顺序网页可以迅速地加载打开，避免了长时间的空白界面，减少了用户等待时间。

2、本发明充分利用了移动设备屏幕较小的特点，分区显示可以很快绘制完整个屏幕，这样无需等待整个网页加载；当用户准备浏览网页其他部分时，其他部分则会利用用户浏览第一屏的时间陆续完成加载。

3、本发明应用广泛，在智能手机、平板电脑、嵌入式设备上都能大幅度减少用户等待加载的时间，尤其在网速较低或设备性能较差时，起到提高用户满意度的作用。

附图说明

具体实施方式

下面结合实施例对本发明做进一步说明，但不限于此。

实施例：

一种基于布局分区的网页加载方法，由移动终端来实现，该移动终端包括安装了webkit内核浏览器的手机、平板电脑以及嵌入式上网装置，采用的是基于ARM a9处理器，安装Android4.0操作系统的上网终端，通过该移动终端和网站之间建立TCP连接关系，该方法步骤如下：

1、移动终端中的浏览器向服务器发送请求，请求浏览器进程与服务器建立TCP连接；

2、服务器端应答，浏览器进程与服务器建立TCP连接，连接建立后，双方进程通过建立好的连接进行读写操作，从而浏览器内核获取HTML文件、CSS文件、资源文件；

3、浏览器内核通过W3C规范解析HTML文件生成DOM（文档对象模型）树、解析CSS文件生成样式表；DOM树由DOM元素及属性节点组成，其元素和HTML文件的标签基本上是一一对应的，样式表则决定了每个DOM元素最终的显示形式；

4、浏览器内核产生DOM树的同时，样式表附加（attach操作）到DOM树后生成对应的渲染（Render）树；构建DOM树时，当DOM元素构建完成，通过Element::attach()方法，将样式表attach到DOM元素中,生成渲染树的RenderObject对象，渲染树由所有包含颜色和大小属性的矩形可见元素组成，是整个文档的可视化表示；

5、布局管理器在对渲染树布局过程中，结合样式表、图片资源，产生渲染布局（RenderLayer）树的一个节点，这一步中将确定这个节点及其所对应的渲染树的渲染对象的所有子元素在屏幕上的确切坐标；

6、布局管理器判断是否产生完一个RenderLayer节点，若是，进行第7步；否则，等待，布局管理器继续检测直到新节点产生；布局管理器判断的原理是，由于一个渲染布局树的节点对应渲染树的一个特殊的渲染对象，渲染布局树的节点的子节点将对应着渲染树的渲染对象子节点的子集，所以，如果渲染树的渲染对象为根的树实现遍历，那么说明渲染布局树的这一节点已经完成产生；

7、渲染引擎将这一个RenderLayer节点采用增量方式绘制出来，增量绘制的原理是，绘制新产生的这个节点之前，渲染引擎比较之前产生的RenderLayer树的节点有无因这个变化产生影响，如果产生影响，渲染引擎将变化的节点所对应的区块与新的区块一起重新绘制；如果旧的节点没有发生任何变化，那么渲染引擎只对新增节点对应的区块进行绘制；

8、与第7步同时，布局管理器判断是否渲染树全部布局排版转化为渲染布局树，若否，回到步骤5；若是，整个网页绘制工作结束。

Claims (1)

1.一种基于布局分区的网页加载方法，由移动终端来实现，该移动终端包括安装了webkit内核浏览器的手机、平板电脑以及嵌入式上网装置，采用的是基于ARM a9处理器，安装Android4.0操作系统的上网终端，通过该移动终端和网站之间建立TCP连接关系，该方法步骤如下：

1）移动终端中的浏览器向服务器发送请求，请求浏览器进程与服务器建立TCP连接；

2）服务器端应答，浏览器进程与服务器建立TCP连接，连接建立后，双方进程通过建立好的连接进行读写操作，从而浏览器内核获取HTML文件、CSS文件、资源文件；

3）浏览器内核通过W3C规范解析HTML文件生成DOM树、解析CSS文件生成样式表；DOM树由DOM元素及属性节点组成，其元素和HTML文件的标签基本上是一一对应的，样式表则决定了每个DOM元素最终的显示形式；

4）浏览器内核产生DOM树的同时，样式表附加到DOM树后生成对应的渲染树；构建DOM树时，当DOM元素构建完成，通过Element::attach()方法，将样式表attach到DOM元素中,生成渲染树的RenderObject对象，渲染树由所有包含颜色和大小属性的矩形可见元素组成，是整个文档的可视化表示；

5）布局管理器在对渲染树布局过程中，结合样式表、图片资源，产生渲染布局树的一个节点，这一步中将确定这个节点及其所对应的渲染树的渲染对象的所有子元素在屏幕上的确切坐标；

6）布局管理器判断是否产生完一个RenderLayer节点，若是，进行第7）步；否则，等待，布局管理器继续检测直到新节点产生；布局管理器判断的原理是，由于一个渲染布局树的节点对应渲染树的一个特殊的渲染对象，渲染布局树的节点的子节点将对应着渲染树的渲染对象子节点的子集，所以，如果渲染树的渲染对象为根的树实现遍历，那么说明渲染布局树的这一节点已经完成产生；

7）渲染引擎将这一个RenderLayer节点采用增量方式绘制出来，增量绘制的原理是，绘制新产生的这个节点之前，渲染引擎比较之前产生的RenderLayer树的节点有无因这个变化产生影响，如果产生影响，渲染引擎将变化的节点所对应的区块与新的区块一起重新绘制；如果旧的节点没有发生任何变化，那么渲染引擎只对新增节点对应的区块进行绘制；

8）与第7）步同时，布局管理器判断是否渲染树全部布局排版转化为渲染布局树，若否，回到步骤5）；若是，整个网页绘制工作结束。