Data display method and device, equipment, medium and program product

Abstract

The invention relates to a data display method and device, equipment, a medium and a program product. The data display method comprises the steps of obtaining a target component corresponding to a target page structure tag corresponding to to-be-displayed data, and configuring a tag type in the target component as the target page structure tag to obtain a configured target component; compiling the configured target component, and compiling the configured target component into a document object model structure corresponding to the target page structure tag; and performing page rendering on the to-be-displayed data based on the document object model structure, and displaying the to-be-displayed data, so that the configured target component can be compiled into the document object model structure corresponding to the target page structure label by configuring the label type of the target component. Therefore, the effect of retaining the original page structure label and characteristics of the to-be-displayed data is achieved, meanwhile, rendering of all the data is avoided by using the target component, and the fluency of data display is improved.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a data display method, apparatus, device, medium, and program product. Background Art

[0002] Data presentation plays a crucial role in big data presentation scenarios. Using a list-like page structure for data presentation can effectively manage large amounts of data, improve user interface usability and performance, while maintaining data readability and operability.

[0003] There are two main existing methods for displaying big data. One is to use container elements such as div tags to simulate list-like page structures, but this method loses the semantics and automatic layout characteristics of the native page structure, that is, it cannot maintain the native page structure tags; the other is to use the native page structure to render all data, but when the data volume is large, there are problems such as performance degradation and page lag.

[0004] Therefore, when displaying big data, how to ensure the smoothness of data display while maintaining the native tag structure is a technical problem that needs to be solved urgently. Summary of the Invention

[0005] In order to solve the above technical problems, the present disclosure provides a data display method, device, equipment, medium and program product.

[0006] A first aspect of the present disclosure provides a data presentation method, including:

[0007] Obtain the data to be displayed and the target page structure tag corresponding to the data to be displayed;

[0008] Determine a target component corresponding to a target page structure tag, configure a tag type in the target component to the target page structure tag, and obtain the configured target component, which is used to create a virtual list;

[0009] Compiling the configured target component into a document object model structure corresponding to the target page structure tag; rendering the data to be displayed based on the document object model structure, and displaying the data to be displayed.

[0010] A second aspect of the present disclosure provides a data display device, including:

[0011] An information acquisition module is used to obtain the data to be displayed and the target page structure tag corresponding to the data to be displayed;

[0012] A component configuration module is used to determine a target component corresponding to a target page structure tag, configure the tag type in the target component to the target page structure tag, and obtain the configured target component, which is used to create a virtual list;

[0013] The data display module is used to compile the configured target component and compile the configured target component into a document object model structure corresponding to the target page structure tag; based on the document object model structure, the page of the data to be displayed is rendered and the data to be displayed is displayed.

[0014] A third aspect of the present disclosure provides an electronic device, including:

[0015] processor;

[0016] a memory for storing executable instructions;

[0017] The processor is used to read executable instructions from the memory and execute the executable instructions to implement the data display method provided in the first aspect above.

[0018] A fourth aspect of an embodiment of the present disclosure provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the processor implements the data display method provided by the first aspect above.

[0019] A fifth aspect of an embodiment of the present disclosure provides a computer program product, which includes a computer program or instructions, and when the computer program or instructions are executed by a processor, implements the data display method as described in the first aspect above.

[0020] The technical solution provided by the embodiments of the present disclosure has the following advantages over the prior art:

[0021] The data display method, apparatus, device, medium and program product provided by the embodiments of the present disclosure can obtain the data to be displayed and determine the target page structure tag corresponding to the data to be displayed. After determining the target page structure tag, the target component corresponding to the target page structure tag is determined, and the tag type in the target component is configured as the target page structure tag, that is, the tag of the target component is designated as the target page structure tag corresponding to the data to be displayed, and the configured target component is obtained, wherein the target component is used to create a virtual list. After obtaining the configured target component, the configured target component is compiled, and the configured target component is compiled into a document object model structure corresponding to the target page structure tag; based on the document object model structure, the data to be displayed is rendered on the page, and the data to be displayed is displayed. Thus, by configuring the tag type of the target component as the target page structure tag corresponding to the data to be displayed, and compiling the configured target component into a document object model structure corresponding to the target page structure tag, and performing page rendering based on the document object model structure, it is ensured that the original page structure tag and tag structure characteristics of the data to be displayed are retained when performing page rendering and data display. At the same time, the target component implements the virtual list function, which can render the data in the visible area when rendering the page, avoiding the problem of rendering all the data, thereby improving system performance and the smoothness of data display. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0023] In order to more clearly illustrate the embodiments of the present disclosure or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0024] Figure 1 is a flow chart of a data display method provided by an embodiment of the present disclosure;

[0025] Figure 2 This is a schematic diagram of the structure of an application architecture diagram provided by an embodiment of the present disclosure;

[0026] Figure 3 is a flow chart of another data display method provided by an embodiment of the present disclosure;

[0027] Figure 4 is a structural diagram of a data display device provided by an embodiment of the present disclosure;

[0028] Figure 5It is a structural diagram of an electronic device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0029] In order to more clearly understand the above-mentioned objectives, features and advantages of the present disclosure, the scheme of the present disclosure will be further described below. It should be noted that the embodiments of the present disclosure and the features therein can be combined with each other in the absence of conflict.

[0030] In the following description, many specific details are set forth to facilitate a full understanding of the present disclosure, but the present disclosure may also be implemented in other ways different from those described herein; it is obvious that the embodiments in the specification are only part of the embodiments of the present disclosure, rather than all of the embodiments.

[0031] It should be understood that the various steps described in the method embodiments of the present disclosure may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this respect.

[0032] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.

[0033] It should be noted that the modifications of "one" and "multiple" mentioned in the present disclosure are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, they should be understood as "one or more".

[0034] Generally speaking, there are two main existing methods for displaying big data. One is to use container elements such as div tags to simulate the list-like page structure, but this method loses the semantics and automatic layout characteristics of the native page structure, that is, it cannot maintain the native page structure tags; the other is to use the native page structure to render all data, but when the data volume is large, there are problems such as performance degradation and page lag.

[0035] Therefore, when displaying big data, how to maintain the native tag structure while ensuring the smoothness of data display is a technical problem that needs to be solved. To address this problem, the embodiments of the present disclosure provide a data display method, which is described below in conjunction with specific embodiments.

[0036] Figure 1 This is a flowchart of a data display method provided by an embodiment of the present disclosure. The method can be executed by a data display device, which can be implemented in software and / or hardware. The data display device can be configured in an electronic device, such as a server or a terminal, wherein the terminal specifically includes a mobile phone, a computer or a tablet computer, etc.

[0037] like Figure 1 As shown, the data display method provided in this embodiment includes the following steps.

[0038] S110: Acquire data to be displayed and a target page structure tag corresponding to the data to be displayed.

[0039] In the embodiment of the present disclosure, the target page structure tag may be any list-like structure tag, such as a table structure tag, a select structure tag, a ul or li structure tag, etc., and is not limited here.

[0040] The data to be displayed can be any data that needs to be displayed, such as data that needs to be displayed in a list format.

[0041] In some embodiments of the present disclosure, an electronic device may receive a data display instruction from a user, obtain data to be displayed based on the data display instruction, and determine a target page structure tag corresponding to the data to be displayed based on attribute information of the data to be displayed. Specifically, when the data display instruction includes the data to be displayed, the electronic device parses the data display instruction to obtain the data to be displayed; when the data display instruction includes identification information corresponding to the data to be displayed, the electronic device may obtain the data to be displayed from a preset database based on the identification information.

[0042] In other embodiments of the present disclosure, the electronic device can respond to the user's operation in real time. When it is determined that the user's operation is for data display, the electronic device obtains the data to be displayed based on the operation, and determines the target page structure tag corresponding to the data to be displayed based on the attribute information of the data to be displayed.

[0043] S120: Determine a target component corresponding to the target page structure tag, configure the tag type in the target component to the target page structure tag, and obtain the configured target component. The target component is used to create a virtual list.

[0044] In the embodiment of the present disclosure, the target component is used to create a virtual list, which can be understood as the target component can realize the function of the virtual list.

[0045] In the embodiments of the present disclosure, a component can be understood as a pre-set component for displaying data in a list-like structure tag. There are multiple components, and different page structure tag types correspond to different components. The target component corresponding to the page structure tag type can be determined based on the page structure tag type.

[0046] The following description takes the page structure tag as a table tag as an example.

[0047] Figure 2 This is a schematic diagram of an application architecture diagram provided by an embodiment of the present disclosure. Figure 2 The diagram in the figure is a structural diagram of an application component architecture diagram in which the page structure tag is a table tag.

[0048] like Figure 2 As shown, the table tag component, TableComponent, can include a virtual container, VirtualContainer, which includes a virtual placeholder component, VirtualPhantom, and a table component, Table. The table component, Table, includes a virtual outer container component, VirtualWrapper, and a virtual row content component, VirtualRows. In other words, when the page structure tag is a table tag, the corresponding target components include the virtual container, VirtualContainer; the virtual placeholder component, VirtualPhantom; the table component, VirtualWrapper; and the virtual row content component, VirtualRows.

[0049] Among them, the virtual container, VirtualContainer, is used to display the current actual visible area; the virtual placeholder component, VirtualPhantom, is used to display the scroll bar, determines the range of the actual visible area based on the scroll bar, and determines the display area according to the scroll bar position; the table component, table, is used to define rendering logic, style, and other information when rendering table tag data; the virtual outer container component, VirtualWrapper, and the virtual row content component, VirtualRows, are components used to render table tag data. Among them, the virtual outer container component, VirtualWrapper, can be used to limit the visible area of the list, listen for scroll events, and render the data into the table body, namely tbody; the virtual row content component, VirtualRows, can be used to render the actual row data, rendering the data into table rows, namely tr.

[0050] In the embodiment of the present disclosure, the target component is used to create a virtual list, which can be understood as the target component can realize the virtual list function. Among them, the virtual list is a technology for optimizing the performance of the front-end interface, which is suitable for scenes that display large amounts of data (such as long lists, tables, etc.). Its core idea is to only render the data in the user's currently visible area, rather than rendering all the data at once, thereby significantly reducing the number of DOM nodes and improving page smoothness and responsiveness.

[0051] In the embodiment of the present disclosure, configuring the tag type in the target component as the target page structure tag can be understood as specifying the tag type in the target component as the target page structure tag corresponding to the data to be displayed.

[0052] Specifically, after obtaining the data to be displayed and the target page structure tag corresponding to the data to be displayed, the electronic device can determine the target component corresponding to the target page structure tag based on the correspondence between the page structure tag and the component, modify the field used to characterize the tag type in the component code corresponding to the target component to the field corresponding to the target page structure tag, and then configure the tag type in the target component to the target page structure tag to obtain the configured target component.

[0053] For example, when the target page structure tag is a ul tag, the tagname field in the component code corresponding to the target component can be configured as ul, so that the target component can render data based on the page structure of the ul tag.

[0054] S130 , compiling the configured target component into a document object model structure corresponding to the target page structure tag; rendering the data to be displayed based on the document object model structure, and displaying the data to be displayed.

[0055] In the disclosed embodiments, the Document Object Model (DOM) structure is a tree-like representation of a document, as represented by the browser. The DOM structure consists of nodes, organized hierarchically to form a tree diagram. Each node represents an element, attribute, or text in the document.

[0056] Specifically, after obtaining the configured target component, the electronic device compiles the configured target component into a document object model structure corresponding to the target page structure tag. Based on the document object model structure, the electronic device then renders the data to be displayed on the page, retaining the structural characteristics of the native page tag of the data to be displayed without the need for additional simulation. The specific implementation method for page rendering is similar to the existing implementation method for page rendering and will not be elaborated here.

[0057] The structural characteristics of the native page tags may include semantic and automatic layout characteristics corresponding to the native page tags.

[0058] In the embodiment of the present disclosure, it is possible to obtain the data to be displayed, and determine the target page structure tag corresponding to the data to be displayed. After determining the target page structure tag, determine the target component corresponding to the target page structure tag, configure the tag type in the target component to the target page structure tag, that is, specify the tag of the target component as the target page structure tag corresponding to the data to be displayed, and obtain the configured target component, wherein the target component is used to create a virtual list. After obtaining the configured target component, compile the configured target component, and compile the configured target component into a document object model structure corresponding to the target page structure tag; based on the document object model structure, render the data to be displayed, and display the data to be displayed. Thus, by configuring the tag type of the target component to the target page structure tag corresponding to the data to be displayed, compiling the configured target component into a document object model structure corresponding to the target page structure tag, and performing page rendering based on the document object model structure, it is ensured that the original page structure tag and tag structure characteristics of the data to be displayed are retained when performing page rendering and data display. At the same time, the target component implements the virtual list function, which can render the data in the visible area when rendering the page, avoiding the problem of rendering all the data, thereby improving system performance and the smoothness of data display.

[0059] On the basis of the above-mentioned embodiments of the present disclosure, the configured target component is compiled, and the configured target component is compiled into a document object model structure corresponding to the target page structure tag, which can specifically include: compiling the component code corresponding to the configured target component based on a preset compilation technology to obtain a document object model structure, wherein the preset compilation technology is a virtual node compilation technology.

[0060] Among them, the preset compilation technology can be virtual node (VNode) compilation technology. VNode is a Document Object Model (DOM) node structure described by JavaScript object, including tag name, attributes, child nodes and other information. Virtual node (VNode) compilation technology can be understood as abstracting the real DOM into VNode, combining template parsing, abstract syntax tree (AST) conversion, rendering function generation and efficient Diff algorithm to achieve high-performance DOM update. The specific implementation method of compiling the component code of the target component based on virtual node compilation technology is similar to the existing implementation method of compilation based on virtual node compilation technology, and will not be repeated here.

[0061] In an embodiment of the present disclosure, page rendering of the data to be displayed is performed based on the document object model structure, which may specifically include: determining the target visible area range and the target data corresponding to the target visible area range; and page rendering and displaying the target data based on the document object model structure.

[0062] In the embodiment of the present disclosure, after obtaining the configured target component, the target component can be compiled to obtain a compiled file that can be recognized by a web page or browser. The compiled file includes a document object model structure corresponding to the target page structure tag, that is, by directly converting the target component into a native table tag, the integrity of the native tag DOM structure is ensured, so that the virtual list function is seamlessly integrated into the page structure corresponding to the data to be displayed, while maintaining all the native tag structure characteristics of the page structure tag (such as the automatic column width, cell alignment and other native characteristics of the table), and then based on the document object model structure corresponding to the target page structure tag, after the page rendering and display of the data to be displayed, the structural characteristics of the native page tag of the data to be displayed are retained, which is convenient for users to debug and maintain, and supports browser development tool inspection. At the same time, supporting native tag structure characteristics enables users to use the native page tag structure characteristics, and also facilitates users to expand complex functions.

[0063] In the embodiment of the present disclosure, the electronic device may further monitor the scrolling event in real time, and after monitoring the scrolling event, update the display page based on the scrolling event.

[0064] Figure 3 is a flow chart of another data display method provided by an embodiment of the present disclosure, such as Figure 3 As shown, the data display method may further include the following steps:

[0065] S310: After monitoring the user's scrolling operation, determine a scrolling offset corresponding to the scrolling operation.

[0066] In the embodiment of the present disclosure, the scrolling operation includes a mouse scrolling operation and a scroll bar dragging operation.

[0067] In some embodiments of the present disclosure, when the scrolling operation is a mouse scrolling operation, the distance that the displayed data is moved in the vertical or horizontal direction due to the mouse scrolling operation is determined and determined as the scrolling offset.

[0068] In other embodiments of the present disclosure, when the scrolling operation is a scroll bar dragging operation, the drag start position and drag end position corresponding to the scroll bar dragging operation are determined, and the distance between the drag start position and the drag end position is determined as the scroll offset.

[0069] S320: Determine the range of the visible area based on the scroll offset.

[0070] Specifically, after determining the scroll offset, the electronic device performs area calculation based on the scroll offset and the visible area range before scrolling to obtain the visible area range corresponding to the scrolling operation.

[0071] S330: Determine target display data corresponding to the visible area range.

[0072] In an embodiment of the present disclosure, after determining the visible area range corresponding to the scrolling operation, the electronic device determines target display data according to the data of the visible area range before the scrolling and the visible area range corresponding to the scrolling operation.

[0073] Among them, determining the target display data corresponding to the visible area range may specifically include: determining the starting position information corresponding to the visible area range, and the number of rows to be rendered corresponding to the visible area range; and determining the target display data based on the starting position information and the number of rows to be rendered.

[0074] Specifically, the electronic device can determine the height and width corresponding to the visible area range, as well as the starting position information corresponding to the visible area range based on the target component; and determine the number of rows to be rendered based on the height corresponding to the visible area range, determine the display data corresponding to the starting position information, and then determine the target display data based on the display data and the number of rows to be rendered.

[0075] In some examples, when the rows of data to be displayed are of equal height, determining the number of rows to be rendered based on the height of the visible area can specifically include: obtaining a target row height for the data to be displayed; and determining the number of rows to be rendered based on the ratio of the height of the visible area to the target row height. This allows the number of rows to be rendered to be determined directly based on the ratio of the height of the visible area to the target row height when the rows of data to be displayed are of equal height, speeding up the calculation of the number of rows to be rendered.

[0076] In other examples, when the row heights corresponding to the data to be displayed are not equal, the number of rows to be rendered is determined based on the height corresponding to the visible area range, which may specifically include: obtaining the number of cached rows and the row height of each row; calculating the average row height based on the number of rows and the row height; and determining the number of rows to be rendered based on the average row height and the height corresponding to the visible area range.

[0077] Specifically, the electronic device can manage the state of rendered data, that is, cache the row height and number of rows corresponding to the rendered data. When the row heights corresponding to the data to be displayed are not uniform, the electronic device can obtain the number of cached rows and the row height of each row from the cache, determine the ratio of the total height corresponding to all rendered rows to the number of rows as the average row height, and divide the height corresponding to the visible area by the average height to obtain the number of rows to be rendered. As a result, when the row heights corresponding to the data to be displayed are not uniform, the number of rows to be rendered can be determined based on the number of cached rows and the average row height corresponding to the row height, thereby improving the accuracy of determining the number of rows to be rendered.

[0078] In some other examples, in order to improve the user experience and avoid problems such as incomplete display when the user scrolls quickly, a preset number of cache lines is set, and page rendering is performed using the preset number of cache lines.

[0079] Among them, determining the number of rows to be rendered based on the range of the visible area can specifically include: when the row heights corresponding to the data to be displayed are of the same height, determining the number of rows to be rendered based on the preset number of cache rows and the range of the visible area; when the row heights corresponding to the data to be displayed are not of the same height, obtaining the preset number of cache rows; determining the number of rows to be rendered based on the preset number of cache rows, the average row height and the range of the visible area.

[0080] The preset number of cache lines can be understood as pre-rendering the preset number of cache lines above and below the normal viewing area. For example, if the preset number of cache lines is 3, then 3 lines will be pre-rendered above and below the normal viewing area.

[0081] Specifically, when the row heights corresponding to the display data of the electronic device are equal, after calculating the ratio of the height corresponding to the visible area range to the target row height, the sum of the ratio and twice the preset cache row number is determined as the final number of rows to be rendered. When the row heights corresponding to the data to be displayed are not equal, after calculating the ratio of the height corresponding to the visible area range divided by the average height, the sum of the ratio of the height corresponding to the visible area range to the average height and twice the preset cache row number is determined as the final number of rows to be rendered. At this time, the data corresponding to the visible area range and the data corresponding to the three rows above and below the visible area range are determined as the target display data. Therefore, by setting the preset number of cache rows, that is, setting the smart cache area, a certain number of rows can be pre-rendered above and below on the basis of the original visible area range, thereby avoiding problems such as incomplete display when the user scrolls faster, thereby improving the user experience.

[0082] S340: Render the target display data on a page based on the document object model structure corresponding to the configured target component, and display the target display data.

[0083] In the embodiment of the present disclosure, the specific implementation method of rendering the target display data on the page based on the document object model structure corresponding to the configured target component and displaying the target display data is similar to the existing implementation method of page rendering and displaying data, which will not be repeated here.

[0084] In the embodiment of the present disclosure, after monitoring a scrolling operation, the scroll offset of the scrolling operation can be determined, and the visible area range can be determined based on the scroll offset. After determining the visible area range, different strategies are used to calculate the number of rows to be cached corresponding to the visible area range based on the type of row height corresponding to the data to be displayed, and then the target display data is determined based on the number of rows to be cached, thereby improving the accuracy of determining the target display data, thereby improving the accuracy of data display, and enhancing the user experience.

[0085] Figure 4 It is a structural diagram of a data display device provided by an embodiment of the present disclosure.

[0086] In the embodiments of the present disclosure, the data display device may be provided in an electronic device and may be understood as a functional module of the electronic device. Specifically, the electronic device may be a server or a terminal, wherein the terminal specifically includes a mobile phone, a computer, or a tablet computer, etc., without limitation herein.

[0087] like Figure 4 As shown, the data display device 400 may include an information acquisition module 410 , a component configuration module 420 and a data display module 430 .

[0088] The information acquisition module 410 may be used to acquire the data to be displayed and the target page structure tag corresponding to the data to be displayed.

[0089] The component configuration module 420 can be used to determine the target component corresponding to the target page structure tag, configure the tag type in the target component to the target page structure tag, and obtain the configured target component, which is used to create a virtual list.

[0090] The data display module 430 can be used to compile the configured target component into a document object model structure corresponding to the target page structure tag; render the page of the data to be displayed based on the document object model structure, and display the data to be displayed.

[0091] In the embodiment of the present disclosure, it is possible to obtain the data to be displayed, and determine the target page structure tag corresponding to the data to be displayed. After determining the target page structure tag, determine the target component corresponding to the target page structure tag, configure the tag type in the target component to the target page structure tag, that is, specify the tag of the target component as the target page structure tag corresponding to the data to be displayed, and obtain the configured target component, wherein the target component is used to create a virtual list. After obtaining the configured target component, compile the configured target component, and compile the configured target component into a document object model structure corresponding to the target page structure tag; based on the document object model structure, render the data to be displayed, and display the data to be displayed. Thus, by configuring the tag type of the target component to the target page structure tag corresponding to the data to be displayed, compiling the configured target component into a document object model structure corresponding to the target page structure tag, and performing page rendering based on the document object model structure, it is ensured that the original page structure tag and tag structure characteristics of the data to be displayed are retained when performing page rendering and data display. At the same time, the target component implements the virtual list function, which can render the data in the visible area when rendering the page, avoiding the problem of rendering all the data, thereby improving system performance and the smoothness of data display.

[0092] In some embodiments of the present disclosure, the data display module 430 may be specifically used to compile the component code corresponding to the configured target component based on a preset compilation technology to obtain a document object model structure, wherein the preset compilation technology is a virtual node compilation technology.

[0093] In some embodiments of the present disclosure, the data display device 400 may further include a scroll monitoring module.

[0094] The scroll monitoring module can be used to determine the scroll offset corresponding to the scroll operation after monitoring the user's scroll operation;

[0095] Determine the visible area based on the scroll offset;

[0096] Determine the target display data corresponding to the visual area range;

[0097] The target display data is rendered on the page based on the document object model structure corresponding to the configured target component, and the target display data is displayed.

[0098] In some embodiments of the present disclosure, the scroll monitoring module may be specifically used to determine the starting position information corresponding to the visible area range and the number of rows to be rendered corresponding to the visible area range;

[0099] The target display data is determined based on the starting position information and the number of rows to be rendered.

[0100] In some embodiments of the present disclosure, the scroll monitoring module may also be specifically used to obtain the number of cached rows and the height of each row;

[0101] Calculate the average row height based on the number of rows and row height;

[0102] The number of rows to render is determined based on the average row height and the height of the visible area.

[0103] In some embodiments of the present disclosure, the scroll monitoring module may also be specifically used to obtain a preset number of cache lines;

[0104] The number of rows to be rendered is determined based on the preset number of cached rows, the average row height, and the visible area range.

[0105] It should be noted that Figure 4 The data display device 400 shown can execute each step in the above method embodiment and realize each process and effect in the above method embodiment, which will not be described in detail here.

[0106] Figure 5 It is a structural diagram of an electronic device provided by an embodiment of the present disclosure.

[0107] In the embodiments of the present disclosure, Figure 5 The electronic device shown may be a server or a terminal, wherein the terminal specifically includes a mobile phone, a computer, or a tablet computer, etc., which is not limited here.

[0108] like Figure 5 As shown, the electronic device may include a processor 510 and a memory 520 storing computer program instructions.

[0109] Specifically, the processor 510 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present disclosure.

[0110] Memory 520 may include a large-capacity memory for information or instructions. By way of example, and not limitation, memory 520 may include a hard disk drive (HDD), a floppy disk drive, flash memory, an optical disk, a magneto-optical disk, magnetic tape, or a Universal Serial Bus (USB) drive, or a combination of two or more of these. Where appropriate, memory 520 may include removable or non-removable (or fixed) media. Where appropriate, memory 520 may be internal or external to the integrated gateway device. In certain embodiments, memory 520 is non-volatile solid-state memory. In certain embodiments, memory 520 includes read-only memory (ROM). Where appropriate, the ROM may be mask-programmed ROM, programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable PROM (EEPROM), electrically alterable ROM (EAROM), or flash memory, or a combination of two or more of these.

[0111] The processor 510 reads and executes the computer program instructions stored in the memory 520 to perform the steps of the data presentation method provided in the embodiment of the present disclosure.

[0112] In one example, the electronic device may further include a transceiver 530 and a bus 540. Figure 5 As shown, the processor 510 , the memory 520 and the transceiver 530 are connected via a bus 540 and communicate with each other.

[0113] The bus 540 includes hardware, software, or both. By way of example and not limitation, the bus may include an Accelerated Graphics Port (AGP) or other graphics bus, an Extended Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industrial Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a memory bus, a MicroChannel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local Bus (VLB) bus, or other suitable buses, or a combination of two or more of these. Where appropriate, the bus 540 may include one or more buses.

[0114] The embodiments of the present disclosure further provide a computer-readable storage medium, which may store a computer program. When the computer program is executed by a processor, the processor implements the data presentation method provided by the embodiments of the present disclosure.

[0115] The above-mentioned storage medium may, for example, include a memory 520 of computer program instructions, and the above-mentioned instructions may be executed by the processor 510 of the electronic device to complete the data presentation method provided in the embodiment of the present disclosure. Alternatively, the storage medium may be a non-transitory computer-readable storage medium, for example, a non-transitory computer-readable storage medium may be a ROM, a random access memory (RAM), a compact disc read-only memory (CD-ROM), a magnetic tape, a floppy disk, an optical data storage device, etc.

[0116] The embodiments of the present disclosure also provide a computer program product, which includes a computer program or instructions. When the computer program or instructions are executed by a processor, it implements the data display method provided by the embodiments of the present disclosure, and can implement the various processes and effects in the above-mentioned embodiments of the present disclosure, which will not be repeated here.

[0117] The foregoing description is intended only to provide specific embodiments of the present disclosure, intended to enable those skilled in the art to understand and implement the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the embodiments described herein, but rather to be construed in the broadest manner consistent with the principles and novel features disclosed herein.

Claims

1. A data display method, characterized in that: include: Obtaining data to be displayed and a target page structure tag corresponding to the data to be displayed; Determining a target component corresponding to the target page structure tag, configuring a tag type in the target component to the target page structure tag, and obtaining a configured target component, wherein the target component is used to create a virtual list; Compiling the configured target component into a document object model structure corresponding to the target page structure tag; rendering the data to be displayed based on the document object model structure, and displaying the data to be displayed.

2. The method according to claim 1, characterized in that The step of compiling the configured target component into a document object model structure corresponding to the target page structure tag includes: The component code corresponding to the configured target component is compiled based on a preset compilation technology to obtain the document object model structure, wherein the preset compilation technology is a virtual node compilation technology.

3. The method according to claim 1, characterized in that The method further comprises: After monitoring a user's scrolling operation, determining a scrolling offset corresponding to the scrolling operation; Determine the range of the visible area based on the scroll offset; Determining target display data corresponding to the visible area range; The target display data is page rendered based on the document object model structure corresponding to the configured target component, and the target display data is displayed.

4. The method according to claim 3, characterized in that The determining of target display data corresponding to the visible area range includes: Determine the starting position information corresponding to the visible area range and the number of rows to be rendered corresponding to the visible area range; The target display data is determined based on the starting position information and the number of rows to be rendered.

5. The method according to claim 4, characterized in that Determining the number of rows to be rendered corresponding to the visible area range includes: Get the number of cached rows and the height of each row; Calculate an average row height based on the number of rows and the row height; The number of rows to be rendered is determined based on the average row height and the range of the visible area.

6. The method according to claim 5, characterized in that The determining the number of rows to be rendered based on the average row height and the visible area range includes: Get the preset number of cache lines; The number of rows to be rendered is determined based on the preset number of cache rows, the average row height, and the range of the visible area.

7. A data display device, characterized in that: include: An information acquisition module is used to acquire data to be displayed and a target page structure tag corresponding to the data to be displayed; a component configuration module, configured to determine a target component corresponding to the target page structure tag, configure the tag type in the target component to the target page structure tag, and obtain the configured target component, wherein the target component is used to create a virtual list; The data display module is used to compile the configured target component and compile the configured target component into a document object model structure corresponding to the target page structure tag; based on the document object model structure, the page of the data to be displayed is rendered and the data to be displayed is displayed.

8. An electronic device, characterized in that: include: processor; a memory for storing executable instructions; The processor is configured to read the executable instructions from the memory and execute the executable instructions to implement the data display method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that The storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the data presentation method according to any one of claims 1 to 6.

10. A computer program product comprising a computer program or instructions, characterized in that: When the computer program or instruction is executed by a processor, the data presentation method according to any one of claims 1 to 6 is implemented.

Images