A browser front-end rendering display method under a BS architecture

A BS architecture and browser technology, applied in the field of remote sensing, can solve problems such as expensive, affecting user experience, and page freezes

Inactive Publication Date: 2019-05-10
CHINA SURVEY SURVEYING & MAPPING TECH
View PDF6 Cites 12 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

However, after the browser receives the first update DOM request, it cannot predict that there will be 9 subsequent update operations, so it will execute the process immediately, and finally execute the process 10 times
Obviously, for example, calculating the coordinate values ​​of DOM nodes is a waste of computing resources
When this calculati

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
  • A browser front-end rendering display method under a BS architecture
  • A browser front-end rendering display method under a BS architecture
  • A browser front-end rendering display method under a BS architecture

Examples

Experimental program
Comparison scheme
Effect test

Embodiment Construction

[0031] A browser front-end rendering display method under the BS architecture of the present invention is specifically as follows:

[0032] The first step is to construct a virtual DOM tree, use JavaScript objects to build a DOM tree, and add HTML language ul component templates to the DOM tree, construct an item under each ul component template, and its tree structure is as follows figure 2 Shown:

[0033] The second step is to define the DOM tree constructor Element, which needs to define the name tagname, attribute props and child nodes children of each node in the virtual DOM tree in the first step, and describe the first step in computer language through the constructed Element function The virtual DOM.

[0034] The third step is to present the virtual DOM tree on the front end of the browser. First, implement the render function. The function of the render function is to assign tagname and propName and propValue in props to each node of the virtual DOM tree. Secondly...

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 browser front-end rendering display method under a BS architecture. The method comprises the following steps: step 1, constructing a virtual DOM tree; Step 2, defining a DOMtree construction function Element; Step 3, presenting a virtual DOM tree at the front end of the browser; 4, comparing each level in one DOM with the same level in another DOM by using a comparisondiff algorithm of the virtual DOM and the real DOM; and 5, updating the real DOM tree to realize quick rendering of the front end of the browser. According to the invention, the problems of high-performance rendering and rapid display of the browser front end are solved.

Description

technical field [0001] The invention belongs to the technical field of remote sensing, and relates to a browser front-end rendering display method under the BS framework. Background technique [0002] In recent years, with the continuous development of the Internet, the requirements for the display efficiency of browser front-end pages are getting higher and higher. In the design of a large number of Internet system interfaces, various operational factors are constantly added, and it is no longer possible to simply rely on pictures. , video, animation, etc., but requires the ultra-high fluency of the front end to achieve various continuous and smooth operations. In the traditional mode, the engine workflow of the browser is basically the same, roughly divided into 5 steps as shown in the figure: create DOM tree – > create StyleRules – > build Render tree – > layout Layout – > draw Painting. [0003] When using the traditional native api or jQuery to manipulate t...

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): G06F8/38G06F16/957
Inventor 乔志远傅俏燕闵祥军隋正伟邵俊崔林
Owner CHINA SURVEY SURVEYING & MAPPING TECH
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products