Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Web application page rendering optimization

An optimization method and web application technology, applied in special data processing applications, instruments, electrical and digital data processing, etc., can solve problems such as user blocking, reduce reflow, improve loading performance, and avoid excessively long reflow time.

Active Publication Date: 2015-09-23
CHINA STANDARD SOFTWARE
View PDF6 Cites 17 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

In addition, reflow in the browser is a user-blocking operation process. If the reflow process is too long, it will seriously affect the performance of user experience. Therefore, it is very necessary to effectively reduce the reflow time and improve the loading performance of web pages.

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Web application page rendering optimization
  • Web application page rendering optimization
  • Web application page rendering optimization

Examples

Experimental program
Comparison scheme
Effect test

Embodiment Construction

[0040]本发明是一种针对Web应用的页面渲染优化方法。该方法通过一个隐藏的基础节点内部绘制子节点直到该基础节点及其子节点构成一个有效状态，再批量渲染显示的方式来有效减少元素位置和尺寸的计算时间，以减少回流的产生，提高页面加载速度，达到优化Web应用的页面加载性能的目的。

[0041]如图1所示，为本发明方法的流程图，其总的过程包括先绘制并隐藏基础节点，当已添加的子节点元素使该基础节点达到预定的有效状态时，将该基础节点置为可见，此时浏览器再对基础节点及其已添加子节点元素组成的有效结构进行统一计算和渲染，从而减少了元素的重复计算和绘制的时间，减少回流，达到了优化Web应用页面加载性能的目的。

[0042]如图1所示，描述了一个Web UI针对用户的展示处理流程，具体如下所示：

[0043]S400：该步骤是引发一次页面渲染的触发动作，可以是一个Web站点或页面的首次请求，也可以是不同页面之间的跳转或当前页面的局部或全部刷新。

[0044]S401：该步骤的主要操作分两步，第一步是在对应的DOM树形结构中构建一个DOM节点，作为基础节点（相当于当前Web UI上一个主要元素承载容器或框架）；第二步则是通过修改该DOM节点的显示属性将该基础节点置为隐藏。

[0045]将基础节点设为隐藏，其方法包括两种，第一种是直接在该节点元素的style属性中添加"display:none”字段；第二种是给该节点元素添加一个CSS的class，前提是该class中定义了"display:none”的样式。

[0046]S402：在基础节点内部继续绘制其子节点，该子节点代表当前Web UI上的另一个有效元素或有效事件机制，以不断生成不同的页面组成成分。

[0047]这里所述的子节点可以是多种形式的，如可以是一个普通的DIV显示元素，INPUT输入框，也可以是一张图片（JPG、PNG、BIF等多种格式），一段视频或者音频，一段逻辑处理脚本（如JavaScript），还可以各种格式的响应数据（如JSON、XML），这些都可以是子节点，可以组成一个DOM基础节点。由于基础节点置为隐藏，故其内部的所有子节点也均处于隐藏状态。

[0048]S403：该步骤主要判断当前构建的元素组合（包括刚开始构建的基础节点和后续不断添加的子节点）是否构成一个预定的有效状态，若是进入S404；否则回退到步骤402继续于该基础...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention relates to a Web application page rendering optimization.The method comprises the following steps: firstly building a hidden DOM (document object model) node element; simultaneously drawing at least one subnode in the hidden DOM node element; continuously detecting whether the combination of the DOM node and the subnodes thereof forms an effective state while drawing the subnode; once the element combination of the DOM node element and the subnodes in the DOM node element forms a predetermined effective state, performing batch computing and rendering by a browser on the DOM node element and the subnodes in the DOM node element, and displaying to a user page in one time. The method can solve the problem that the return time is too long in an existing page element increment rendering method, so that the page loading time is effectively shortened, and the user experience performance of Web application pages is improved.

Description

technical field [0001] The invention relates to the technical field of Web performance optimization, in particular to a method for optimizing web application page loading. Background technique [0002] A webpage (Webpage) can also be called a Web document (Web document), which generally consists of a basic markup page and various Web resources or objects. The basic markup pages here are generally HTML pages, and Web resources or objects can be various, such as various scripting languages ​​(such as the most typical JavaScript), data resources (such as XML, JSON, etc.), cascading style sheets, pictures, etc. All of them can be components of a Web page, and a Web UI page with a complex page structure and many elements is called a page of a rich Web application. The role of the web browser is to parse HTML documents containing multiple complex resources and render and display such resources correctly on the web page. [0003] At present, the content loading method of a Web pa...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F17/30
Inventor 颜佩琼
Owner CHINA STANDARD SOFTWARE
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com