CN102902799A

CN102902799A - 一种基于WebKit的浏览器页面显示方法及其装置

Info

Publication number: CN102902799A
Application number: CN2012103850992A
Authority: CN
Inventors: 陈宇; 鄢斌
Original assignee: Nfs China Software Co ltd; Institute of Software of CAS
Current assignee: Nfs China Software Co ltd; Institute of Software of CAS
Priority date: 2012-10-12
Filing date: 2012-10-12
Publication date: 2013-01-30
Anticipated expiration: 2032-10-12
Also published as: CN102902799B

Abstract

本发明公开了一种基于WebKit的浏览器页面显示方法及其装置。该方法包括步骤：1）向服务器发送页面请求；2）本次请求的资源在本机如果有缓存且未过期则直接布局渲染，如果没有，从服务器下载页面资源，下载的同时，WebKit中的布局管理器对所请求的页面进行布局渲染；3）在所述布局渲染完成后，绘制并显示页面。本发明在使用嵌入式系统及性能一般的硬件环境的浏览器浏览页面时，能够减少页面下载时间，减少用户在使用过程中的不流畅感，优化用户体验。

Description

一种基于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）中对页面资源的下载是否完全；

6）如果下载完全，则判断所述下载时从服务器接收的expires字段设置的时间是否过期，以及判断HTTP响应期限是否超时，如果expires时间未过期、且两次页面请求之间的时间间隔未超过HTTP响应期限，那么不向服务器发送再次下载页面请求，而是返回成功状态，结束页面请求流程；

7）如果expires时间已过期、或者两次页面请求之间的时间间隔已超过HTTP响应期限，那么向服务器发送再次下载页面请求；

8）向服务器发送上次下载页面资源时接收的Last-Modified和Etag字段内容；

9）如果再次请求下载的页面资源未被修改，则向布局管理器发送网页未更新状态消息，布局管理器根据该网页未更新状态消息，不释放内存中已生成的DOM树和Render树，而是直接触发启动绘制过程的事件，进行页面绘制操作；

10）如果再次请求下载的页面资源已被修改，则释放内存中已生成的DOM树和Render树，重新生成修改后的DOM树和Render树，并重新绘制页面。

其中，当步骤4）中的对同一页面的再次请求来自于F5快捷键刷新时，跳过对expires时间和HTTP响应期限的判断，当下载完全时，直接向服务器发送再次下载页面的请求。

本发明还提供了一种基于WebKit的浏览器页面显示装置，该装置包括：

初次页面请求模块，用于向服务器发送页面请求；

初次页面下载模块，用于从服务器下载页面资源；

布局渲染模块，用于在下载的同时，使得WebKit中的布局管理器对所请求的页面进行布局渲染；以及

绘制模块，用于在所述布局渲染完成后，绘制并显示页面。所述绘制模块进一步包括：触发模块，用于在所述布局渲染完成后，触发一个事件，该事件启动绘制过程。

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

所述基于WebKit的浏览器页面显示装置进一步包括：

接收模块，用于接收用户对同一页面的再次请求；

第一判断模块，用于判断初次页面下载模块中对页面资源的下载是否完全；

成功状态返回模块，用于如果下载完全，则判断所述下载时从服务器接收的expires字段设置的时间是否过期，以及判断HTTP响应期限是否超时，如果expires时间未过期、且两次页面请求之间的时间间隔未超过HTTP响应期限，那么不向服务器发送再次下载页面请求，而是返回成功状态，结束页面请求流程；

再次页面请求模块，用于如果expires时间已过期、或者两次页面请求之间的时间间隔已超过HTTP响应期限，那么向服务器发送再次下载页面请求；

信息反馈模块，用于向服务器发送上次下载页面资源时接收的Last-Modified和Etag字段内容；

第二判断模块，用于如果再次请求下载的页面资源未被修改，则向布局管理器发送网页未更新状态消息，布局管理器根据该网页未更新状态消息，不释放内存中已生成的DOM树和Render树，而是直接触发启动绘制过程的事件，进行页面绘制操作；

重新绘制模块，用于如果再次请求下载的页面资源已被修改，则释放内存中已生成的DOM树和Render树，重新生成修改后的DOM树和Render树，并重新绘制页面。

其中，当接收模块中的对同一页面的再次请求来自于F5快捷键刷新时，还包括特殊请求响应模块，用于跳过对expires时间和HTTP响应期限的判断，当下载完全时，直接向服务器发送再次下载页面的请求。

浏览器从输入网页到网页显示的过程中，假设资源下载和布局管理器Layout的运行一共需要花费的时间为time1；布局渲染完成后，通过事件触发Paint，绘制页面，这一过程需要花费的时间为time2。若能控制time1或time2的值，就会对页面的浏览性能有一定提升。本发明中，由于资源下载和布局管理器Layout是同时运行的，因此能有效地控制time1的值。在使用嵌入式系统及性能一般的硬件环境的浏览器浏览页面时，能够减少用户在使用过程中的不流畅感，从而优化用户的使用体验。

附图说明

此处的说明附图用来提供对本发明的进一步理解，本发明中提供的附图仅用于帮助理解本发明，并不对本发明进行任何限定，附图包括：

图1从URL连接请求发送到下载进程的过程

图2WebKit体系结构图

图3DOM树和Render树生成及对应关系

图4依据本发明的优化了的页面刷新流程图

具体实施方式

此部分将结合附图，详细说明本发明的实现过程。

图1示出了依据本发明的从浏览器输入URL到向服务器发送连接请求这段期间的主要流程，先创建DocumentLoader对象，然后进行安全策略处理，创建MainLoader对象，在设置下载请求后，对Expires字段和HTTP响应期限进行判断，如果Expires字段没有过期，且第二次请求和初次请求的请求间隔时间不超过HTTP响应期限，则跳出请求流程，不做后续操作。

图2示出了WebKit结构图，当服务器返回资源后，浏览器开始下载，此时进入WebKit操作流程。WebKit中下载进程下载资源并通知布局管理器Layout进行布局渲染，布局管理器Layout通过DOM把HTML文本解析成DOM树。当用户请求的网页里面包含JavaScript脚本，并随HTML文件一起传送到客户端浏览器上时，其中HTML文本中的JavaScript将由JavaScriptCore解析执行。通过布局管理器Layout对DOM树中的可视元素排版，分配位置、高度、宽度，再由CSS规定输出的特性，比如颜色、字体等，由渲染器Render进行视觉化表达。DOM树和Render树是同时增长的，参见图3示例，布局渲染结束后，开始Paint绘制页面。WebKit把具体绘制的工作，交给第三方图形工具库去完成。图形库就是根据Render树进行绘制的。

图3示出了DOM树和Render树的生成及对应关系。其中，DOM树的Document对应于Render树的RenderView，DOM树的HTML对应于Render树的RenderBlock，DOM树的Body对应于Render树的RenderBody，DOM树的Div对应于Render树的子RenderBlock，DOM树的Canvas对应于Render树的RenderHTMLCanvas。

图2至图3描述了依据本发明的基于WebKit浏览器的页面下载的内部细节，图4示出了依据本发明的优化了的页面刷新流程。

浏览器第一次请求某一页面时，如果访问顺利，服务器将返回请求成功的状态200，并发送给浏览器一些信息：

HTTP/x.x 200OK

Server：XXX

Last-Modified：XXXXXX（最后一次修改时间）

Etag：“XXXX”（资源的唯一状态标识）

Expires:XXXXXX（指定资源在浏览器缓存中的过期时间）

浏览器在接收到这些信息后，开始下载网页资源，并保存在本地目录中，与此同时，WebKit中的布局管理器Layout开始布局渲染，在渲染完成后，对页面进行绘制。

优化之前，当浏览器第二次请求同一页面时，WebKit的布局管理器Layout会先释放之前内存中生成完全的DOM树和Render树，重新读取本地资源，重新生成DOM树和Render树，再触发事件开始Paint操作。

优化之后，设置HTTP响应头使其HTTP响应期限为X分钟（10<X<50，例如设置为30分钟），当浏览器第二次请求同一页面时，浏览器创建MainLoader对象，设置下载请求；判断上一次资源下载的状态和下载超时的状况，如果上一次资源下载完全而不是下载超时退出，那么获取上次资源下载时从服务器接收的Expires字段；判断服务器给此Expires字段设置的时间是否过期，如果时间已过期则读取请求协议头文件，进入请求下载流程；如果时间未过期，则获取HTTP响应期限，判断两次页面请求之间的时间间隔是否超过HTTP响应期限，如果响应期限已超时，则进入请求下载流程；如果响应期限没有超时，则不创建资源请求消息，不向服务器发送下载请求，并返回成功状态，结束浏览器请求流程。

也就是说，如果Expires字段设置的时间已过期，或者Expires字段设置的时间没有过期但两次页面请求的间隔时间超过了HTTP响应期限，则浏览器创建资源请求消息，并向服务器发送HTTP请求，进入请求下载流程。

请求下载流程包括：发送上次资源下载时接收的Last-Modified和Etag字段内容；如果请求下载的资源未被修改，服务器将返回304状态码（HTTP/x.x 304Not Modified），内容为空，此时浏览器创建的下载进程不做下载动作，而是向布局管理器Layout发送网页未更新状态消息；发送网页未更新状态消息成功后，下载进程退出；布局管理器Layout接收到下载进程发送的网页未更新状态消息，则不释放内存中已生成的DOM树和Render树，而是直接触发启动绘制过程的事件，进行页面绘制操作。

如果请求下载的资源有变化（被修改），那么服务器将不会返回304状态码。此时，执行刷新流程。这里的刷新流程包括：释放内存中之前生成的DOM树和Render树，重新生成修改后的DOM树和Render树，并重新绘制页面。该刷新流程与本发明所述的第一次网页请求的流程类似，在本地浏览器下载资源的同时把内容传给布局管理器Layout进行布局和渲染。

通过F5快捷键刷新页面时，情况有所不同：该流程获取上次资源下载的状态，判断资源下载是否完全，是否下载超时退出；但不判断Expires字段和HTTP响应期限，而是直接向服务器发送HTTP请求，进入F5键刷新模式下的请求下载流程。该请求下载流程具体包括：发送上次资源下载时所接收的LastModified和Etag字段内容；如果请求下载的资源未被修改，服务器会返回304状态码（HTTP/x.x 304Not Modified），内容为空，此时浏览器创建的下载进程不做下载动作，而是向布局管理器Layout发送网页未更新状态消息，发送网页未更新状态消息成功后，下载进程退出；布局管理器Layout接收到下载进程发送的网页未更新状态消息，则不释放内存中已生成的DOM树和Render树，而是直接触发启动绘制过程的事件，进行页面绘制操作。

应当知道，浏览器第一次向服务器请求获取页面资源时，服务器会返回请求成功的状态200，接着浏览器创建下载进程进行页面资源下载。如果网络等原因导致资源下载不顺利、不完全，下载进程定时器时间完成，则会返回下载超时状态，布局管理器会根据已有的下载内容进行布局排版及绘制。

当第二次请求加载或F5刷新页面时，浏览器获取上次资源下载状态为下载超时，则重新向服务器发送下载请求，重新获取资源，重新布局渲染及绘制，保证浏览器页面显示完整内容。

这样的处理流程可以使嵌入式系统或性能不强的硬件环境中的WebKit浏览器，在多次加载或F5刷新页面时性能提升，用户体验良好，并保证优化后的页面资源的完整。

以上是对本发明的优选实施例进行的详细描述，但本领域的普通技术人员应该意识到，在本发明的范围内和精神指导下，各种改进、添加和替换都是可能的，例如调整接口调用顺序、改变消息格式和内容、使用不同的编程语言（如C、C++、Java等）实现等。这些都在本发明的权利要求所限定的保护范围内。

Claims

1.一种基于WebKit的浏览器页面显示方法，其特征在于，该方法包括以下步骤：

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

3）在所述布局渲染完成后，绘制并显示页面。

2.如权利要求1所述的方法，所述布局渲染的步骤进一步包括：

把从服务器返回的HTML文本解析生成DOM树，同时生成Render树，使得DOM树和Render树是同时增长的。

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

4.如权利要求2所述的方法，其中DOM树和Render树的生成步骤具体包括：

把DOM树中的可视元素排版，分配位置、高度、宽度，再由CSS规定输出的特性，由渲染器进行视觉化表达，生成Render树。

5.如权利要求4所述的方法，其中所述输出的特性包括颜色、字体。

6.如权利要求1所述的方法，所述步骤3）具体包括：

在所述布局渲染完成后，触发一个事件，该事件启动绘制过程。

7.如权利要求1所述的方法，进一步包括步骤：

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

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

7）如果expires时间已过期、或者两次页面请求之间的时间间隔已超过HTTP响应期限，那么向服务器发送再次下载页面请求。

8.如权利要求7所述的方法，进一步包括：

9.如权利要求7所述的方法，其中，当步骤4）中的对同一页面的再次请求来自于F5快捷键刷新时，跳过对expires时间和HTTP响应期限的判断，当下载完全时，直接向服务器发送再次下载页面的请求。

10.一种基于WebKit的浏览器页面显示装置，其特征在于，该装置包括：

初次页面请求模块，用于向服务器发送页面请求；

初次页面下载模块，用于从服务器下载页面资源；

绘制模块，用于在所述布局渲染完成后，绘制并显示页面。

11.如权利要求10所述的装置，其中所述布局渲染模块进一步包括：

树生成模块，用于把从服务器返回的HTML文本解析生成DOM树，同时生成Render树，使得DOM树和Render树是同时增长的。

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

13.如权利要求11所述的装置，其中树生成模块具体用于：

14.如权利要求13所述的装置，其中所述输出的特性包括颜色、字体。

15.如权利要求10所述的装置，所述绘制模块具体包括：

触发模块，用于在所述布局渲染完成后，触发一个事件，该事件启动绘制过程。

16.如权利要求10所述的装置，进一步包括：

接收模块，用于接收用户对同一页面的再次请求；

再次页面请求模块，用于如果expires时间已过期、或者两次页面请求之间的时间间隔已超过HTTP响应期限，那么向服务器发送再次下载页面请求。

17.如权利要求16所述的装置，进一步包括：

18.如权利要求16所述的装置，其中，当接收模块中的对同一页面的再次请求来自于F5快捷键刷新时，还包括特殊请求响应模块，用于跳过对expires时间和HTTP响应期限的判断，当下载完全时，直接向服务器发送再次下载页面的请求。