Web end long list rendering method

A long list, fixed-length technology, applied in the web field, can solve the problem of long list loading lag

Active Publication Date: 2020-07-07
SICHUAN CHANGHONG ELECTRIC CO LTD
View PDF5 Cites 9 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0003] In order to solve the problems existing in the prior art, the object of the present invention is to provide a long list rendering method on the Web side. The present invention uses a new scrolling monitoring method and a DOM operation algorithm to optimize the problem of long list loading lag

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 end long list rendering method
  • Web end long list rendering method
  • Web end long list rendering method

Examples

Experimental program
Comparison scheme
Effect test

Embodiment

[0034] This embodiment can be used in conjunction with frameworks such as vue and react, and the best solution is to package it as a component. Implement this component to create a root node as the parent node to contain all other content. The fixed width and height are defined by the user, and the height is also the height of the viewable area viewHeight. The data to be displayed is stored in the array data. The rendering function used to render the data is the html template Defined by the user. At the same time, dada needs to be monitored, and the data monitoring function of vue and react can be used to reinitialize the page when the data changes. The length of the data needs to be long enough to render at least three pages in height, otherwise no operation is performed and all are rendered at one time.

[0035] The parent node contains five sub-nodes which are the first monitoring node, the content of the invisible area above beforeOffset, the content of the visible area o...

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 a Web end long list rendering method. The method comprises the steps of performing page layout, wherein a fixed length list is set in a root node; setting a data array needingto be rendered by a user, the height of a view and a rendering function needed for rendering data, and the height of the whole page is calculated according to the length of the transmitted data arrayand the height of each rendered datum in the DOM node; calculating the minimum number of data required by each page of content in the fixed length list; respectively adding a head monitoring node anda tail monitoring node in front of and behind the fixed length list; secondly, adding a monitoring event to the head monitoring node and the tail monitoring node by using an Intersection Observer object, starting to pull down to update data when the head monitoring element monitoring event is triggered, and on the contrary, starting to slide up to update data when the tail monitoring element monitoring event is triggered; according to the method, a new rolling monitoring method and a DOM operation algorithm are used for optimizing the problem of long list loading lag.

Description

technical field [0001] The invention relates to the field of web technologies, in particular to a long list rendering method at the web end. Background technique [0002] When the application needs to display a large amount of data, it is often necessary to render a long list. When the page is continuously turned and loaded, the content of the page will increase, and the page will gradually appear stuck when loading more and updating. Especially on the web page, the performance of the application is not as good as that of other clients, and the creation and update of the DOM is also time-consuming. Therefore, after rendering a large number of DOM nodes on the page, the loading and updating of data will become very slow Dayton, poor performance. At present, the most commonly used solutions are data lazy loading and simulated virtual list loading. Lazy loading is to load a part of the data each time, so that it will be very fast at the beginning and the page is very smooth, b...

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
Patent Type & Authority Applications(China)
IPC IPC(8): G06F8/38
CPCG06F8/38
Inventor 苏云祥祁家林
Owner SICHUAN CHANGHONG ELECTRIC CO LTD
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

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

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap