Optimization for rendering web pages

Patent metadata

Field	Value
Publication number	US-9965451-B2
Application number	US-201514734042-A
Country	US
Kind code	B2
Filing date	Jun 9, 2015
Priority date	Jun 9, 2015
Publication date	May 8, 2018
Grant date	May 8, 2018

Abstract

In one embodiment, there is provided a method for rendering a web page. The method comprises parsing a Hypertext Markup Language (HTML) document for a web page to generate a Document Object Model (DOM) tree. The method further comprises rendering elements in the DOM tree in a higher-to-lower sequence based on their z-index attributes from a style sheet corresponding to the HTML document. The method further comprises skipping rendering for an element with a lower z-index attribute than an element with a higher z-index attribute if the element with the lower z-index attribute is below the element with the higher z-index attribute and would not be seen by a user viewing the web page.

First claim

What is claimed is:

1. A system for rendering a web page comprising:
one or more computer processors;
one or more computer readable storage media; and
program instructions stored on the one or more computer readable storage media for execution by at least one of the one or more processors to perform actions of:
parsing a Hypertext Markup Language (HTML) document for a web page, wherein the HTML document includes elements of the web page;
parsing a style sheet corresponding to the HTML document, wherein the style sheet includes a set of attributes that define the styles of each of the elements;
generating a Document Object Model (DOM) tree, wherein:
the structure of the DOM tree is organized based on the set of attributes, wherein each of the attributes in the set of attributes corresponds to a branch of the DOM tree; and
the DOM tree includes hidden elements and non-hidden elements, wherein:
the structure of the DOM tree is further organized such that the hidden elements and the non-hidden elements are assigned to separate branches; and
the non-hidden elements are organized based on their z-index attributes from the style sheet corresponding to the HTML document;

rendering the non-hidden elements in the DOM tree in a higher-to-lower sequence based on their z-index attributes, wherein rendering the non-hidden elements is based, at least in part, on:
identifying a first position of a first non-hidden element;
identifying a second position and an opacity value of a second non-hidden element, wherein the second non-hidden element has a higher z-index attribute than the first non-hidden element;
determining, based on the first position and the second position, that the first non-hidden element is encompassed by the second non-hidden element; and
determining that the second non-hidden element has an opacity value such that the first non-hidden element is viewable on the web page.

2. The system according to claim 1 , wherein the set of attributes includes at least one of visibility, display, attributes related to position, attributes related to transform, attributes related to perspective, or opacity.

3. The system according to claim 1 , wherein the rendering includes layout computing and painting of elements in the DOM tree.

4. The system according to claim 3 , wherein the program instructions stored on the computer readable storage media further comprise program instructions for execution by at least one of the one or more processors to perform actions of:
performing layout computing once a layout of an element changes, during running of a JavaScript thread initiated automatically or in response to a user operation on the web page; and
painting all elements whose layouts have changed at once, based on a final result of the layout computing, in the JavaScript thread.

5. The system according to claim 3 , wherein the program instructions stored on the computer readable storage media further comprise program instructions for execution by at least one of the one or more processors to perform actions of:
caching data corresponding to layout computing and painting of a portion of the elements in the DOM tree based on an analysis of repeated user operations on the web page; and
using the cached data in lieu of performing layout computing and painting of the portion of the elements when the portion of the elements are to be rendered.

6. The system according to claim 1 , wherein the program instructions stored on the computer readable storage media further comprise program instructions for execution by at least one of the one or more processors to perform actions of:
swapping, in response to a change in the style of a portion of the elements included in the DOM tree, a portion of the non-hidden elements with a portion of the hidden elements; and
rendering the portion of the non-hidden elements in the modified DOM tree in a higher-to-lower sequence based on their z-index attributes.

7. A computer program product for rendering a web page, the computer program product comprising one or more computer readable storage media and program instructions stored on the one or more computer readable storage media, the program instructions being executable by one or more computer processors to perform actions of:
parsing a Hypertext Markup Language (HTML) document for a web page, wherein the HTML document includes elements of the web page;
parsing a style sheet corresponding to the HTML document, wherein the style sheet includes a set of attributes that define the styles of each of the elements;
generating a Document Object Model (DOM) tree, wherein:
the structure of the DOM tree is organized based on the set of attributes, wherein each of the attributes in the set of attributes corresponds to a branch of the DOM tree; and
the DOM tree includes hidden elements and non-hidden elements, wherein:
the structure of the DOM tree is further organized such that the hidden elements and the non-hidden elements are assigned to separate branches; and
the non-hidden elements are organized based on their z-index attributes from the style sheet corresponding to the HTML document;

rendering the non-hidden elements in the DOM tree in a higher-to-lower sequence based on their z-index attributes, wherein rendering the non-hidden elements is based, at least in part, on:
identifying a first position of a first non-hidden element;
identifying a second position and an opacity value of a second non-hidden element, wherein the second non-hidden element has a higher z-index attribute than the first non-hidden element;
determining, based on the first position and the second position, that the first non-hidden element is encompassed by the second non-hidden element; and
determining that the second non-hidden element has an opacity value such that the first non-hidden element is viewable on the web page.

8. The computer program product according to claim 7 , wherein the set of attributes includes at least one of visibility, display, attributes related to position, attributes related to transform, attributes related to perspective, or opacity.

9. The computer program product according to claim 7 , wherein the rendering includes layout computing and painting of the elements, and wherein the program instructions stored on the one or more computer readable storage media further comprise program instructions being executable by one or more computer processors to perform actions of:
performing layout computing once a layout of an element changes, during running of a JavaScript thread initiated automatically or in response to a user operation on the web page; and
painting all elements whose layouts have changed at once, based on a final result of the layout computing, in the JavaScript thread.

10. The computer program product according to claim 9 , wherein the program instructions stored on the one or more computer readable storage media further comprise program instructions being executable by one or more computer processors to perform actions of:
caching data corresponding to layout computing and painting of a portion of the elements in the DOM tree based on an analysis of repeated user operations on the web page; and
using the cached data in lieu of performing layout computing and painting of the portion of the elements when the portion of the elements are to be rendered.

11. The computer program product according to claim 7 , wherein the program instructions stored on the one or more computer readable storage media further comprise program instructions being executable by one or more computer processors to perform actions of:
swapping, in response to a change in the style of a portion of the elements in

Assignees

• IBM

Inventors

• Zhou Xiang

Classifications

• G06F40/154

  Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets · CPC title

• G06F16/9577 Primary

  Optimising the visualization of content, e.g. distillation of HTML documents · CPC title

• G06F40/186

  Templates · CPC title

• G06F40/14

  Tree-structured documents (parsing G06F40/205; validation G06F40/226) · CPC title

• G06F40/137

  Hierarchical processing, e.g. outlines · CPC title