[发明专利]一种基于WebKit的浏览器页面显示方法及其装置

说明书

技术领域

本发明属于互联网技术领域，尤其涉及一种基于WebKit的浏览器页面显示方法及其装置。

背景技术

在WebKit中，主要通过Webcore和JavaScriptCore处理接收到的内容，创建版面样式，显示文本、图片、表格单元和其他数据类型的内容。一个Http请求在WebKit中的主要流程如下：

用户从浏览器界面开始输入URL地址，然后界面把URL发送到渲染进程，渲染进程再进行处理，把网络连接地址变成一个资源的消息，通过IPC机制把消息发送到资源下载进程。下载进程中的函数把消息变成一个网络下载请求，创建一个下载任务，完成设置定时器、启动下载任务等一系列操作，并向服务器发送下载请求。浏览器不断的向服务器发送下载请求直到资源下载完全或下载超时为止，服务器响应HTTP请求后返回给本地HTML/XHTML源数据。如果是第一次请求并顺利访问，服务器会在响应HTTP请求后返回为200的状态，同时会返回给浏览器一些headers集合（例如Last-Modified和Etag等）和相应请求资源，浏览器接收到这些信息后会将资源缓存在本地目录中并保存这些头（headers）信息，当浏览器获得返回给本地的HTML/XHTML数据后，通过DOM（Document ObjectModel）把HTML文本解析成DOM树。当用户请求的网页里面包含JavaScript脚本，并随HTML文件一起传送到客户端浏览器上时，其中HTML文本中的JavaScript将由JavaScriptCore解析执行。通过布局管理器Layout对DOM树中的可视元素排版，分配位置、高度、宽度，再由CSS（Cascading Style Sheet）规定输出的特性，比如颜色、字体等，通过渲染（Render）进行视觉化表达，最终绘制（Paint）显示给客户端用户。

WebKit对一个网页首先下载资源，然后进行布局，最后在屏幕上绘制，这是三步完成的，也就是布局（Layout）和绘制（Paint）是分开的，这是因为，如果在绘制步骤之前没有执行过布局步骤，那么图形库将不知道在哪里写字或显示图像。其中布局管理器Layout负责确定Render树（渲染树）中每个叶子和中间节点的位置。在Layout过程结束以后，WebKit启动绘制（Paint）过程，负责把Render树中各个叶子节点，在相应的位置绘制出来。WebKit把具体绘制的工作，交给第三方图形工具库去完成。常用的第三方图形工具库包括QT，GTK+，Wx，Skia，Cairo等等。

Layout过程是根据浏览器要显示的页面大小而定的，也就是，下载下来的HTML文件和相应资源后触发相应操作进行布局，布局完成后再绘制（Paint）到浏览器的页面上，当同一网页第二次请求或有刷新动作时，布局管理器Layout就要进行一次布局，然后再Paint到页面上。Layout是一个计算量很繁重的过程，主要体现在估算完每个Render Tree节点的宽度尤其是高度以后，需要相应调整这个节点的前辈节点以及左邻右舍兄弟节点的位置。当重复请求同一页面或刷新时，浏览器向服务器又发送一遍请求并下载相同资源，以及Layout完成后，布局出的效果是完全一样的，但这一过程多做很多冗余的工作，频繁占有系统资源，也会给用户带来浏览页面不顺畅的感觉。

发明内容

为了克服上述缺陷，本发明提供一种基于WebKit的浏览器页面显示方法，包括：

1）向服务器发送页面请求；

2）从服务器下载页面资源，下载的同时，WebKit中的布局管理器对所请求的页面进行布局渲染；

3）在所述布局渲染完成后，绘制并显示页面。具体为：在所述布局渲染完成后，触发一个事件，该事件启动绘制过程。

所述布局渲染的步骤进一步包括：把从服务器返回的HTML文本解析生成DOM树，同时生成Render树，使得DOM树和Render树是同时增长的。DOM树和Render树的生成步骤具体包括：把DOM树中的可视元素排版，分配位置、高度、宽度，再由CSS规定输出的特性，由渲染器进行视觉化表达，生成Render树。所述输出的特性包括颜色、字体。

其中，当所请求的页面中包含JavaScript脚本，并随HTML文本一起从服务器返回到客户端浏览器上时，所述HTML文本中的JavaScript脚本由JavaScriptCore解析并执行。

所述基于WebKit的浏览器页面显示方法进一步包括步骤：

4）接收用户对同一页面的再次请求；

5）判断步骤2）中对页面资源的下载是否完全；