Supercharge Your Innovation With Domain-Expert AI Agents!

Implementation method of difference algorithm for quickly rendering virtual DOM in browser

An implementation method and browser technology, which can be used in network data browsing optimization, special data processing applications, other database retrieval, etc., can solve problems such as high performance overhead, and achieve the effect of improving rendering efficiency

Inactive Publication Date: 2021-01-26
SICHUAN CHANGHONG ELECTRIC CO LTD
View PDF0 Cites 1 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

Although this complexity is high, it is indeed a good algorithm, but in the actual front-end rendering scene, with the increase of DOM nodes, the performance overhead will be very large

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
  • Implementation method of difference algorithm for quickly rendering virtual DOM in browser
  • Implementation method of difference algorithm for quickly rendering virtual DOM in browser
  • Implementation method of difference algorithm for quickly rendering virtual DOM in browser

Examples

Experimental program
Comparison scheme
Effect test

Embodiment

[0025]A method for implementing a difference algorithm for fast rendering of virtual DOM in a browser, including:

[0026]Strategy 1: Layered comparison of virtual DOM trees:

[0027]Such asfigure 1 As shown, the virtual DOM tree hierarchical comparison mainly means that the traditional algorithm only compares the DOM nodes in the same color box, ignoring the cross-level movement operation of the DOM node, that is, the movement operation of all child nodes under the same parent node .

[0028]When it is found that the node no longer exists, the node and its child nodes will be completely deleted and will not be used for further comparison. In this way, only one traversal of the tree is required to complete the comparison of the entire DOM tree. As a result, the most direct improvement is that the complexity becomes linear growth instead of the original exponential growth.

[0029]If it really happens likefigure 2 The cross-level movement shown, for example, when a DOM and its child nodes are mo...

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 discloses an implementation method of a difference algorithm for quickly rendering a virtual DOM (Document Object Model) in a browser. The implementation method comprises the following steps of strategy 1, performing hierarchical comparison on a virtual DOM tree; strategy 2, comparison between components; and strategy 3, comparing elements. According to the method, the virtual DOM tree is converted into the minimum operation process of the real DOM tree, and complexity of a traditional difference algorithm is reduced from O (n^3) to O (n) by using three strategies.

Description

Technical field[0001]The present invention relates to the technical field of web front-end applications, in particular to a method for implementing a difference algorithm for fast rendering of a virtual DOM in a browser.Background technique[0002]Before the birth of jQuery, when the page needs to be updated, the DOM structure was obtained through the most primitive methods such as document.getElementById(), document.getElementByClassName(), etc., and then some functions such as innerHTML() were used to change the view.[0003]Because this kind of operation is the most native way to manipulate the DOM structure is extremely inefficient, so jQuery was born. With jQuery, it brings great convenience to developers, and it is no longer so difficult to manipulate the DOM. You only need to use a very simple $ symbol to get the corresponding DOM node. Therefore, after the emergence of jQuery, with its selector method and other features quickly became popular, becoming an essential JavaScript li...

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): G06F16/957
CPCG06F16/957
Inventor 刘强
Owner SICHUAN CHANGHONG ELECTRIC CO LTD
Features
  • R&D
  • Intellectual Property
  • Life Sciences
  • Materials
  • Tech Scout
Why Patsnap Eureka
  • Unparalleled Data Quality
  • Higher Quality Content
  • 60% Fewer Hallucinations
Social media
Patsnap Eureka Blog
Learn More

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

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