Data rendering method and data rendering device
By combining pagination processing and dynamic rendering based on user input in data rendering, the problems of slow speed and page lag when rendering large amounts of data in the prior art are solved, and a more efficient rendering rate and a better user experience are achieved.
Patent Information
- Application Number
- CN202411741909.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-29
- Publication Date
- 2025-03-28
AI Technical Summary
In the prior art, when rendering large amounts of data, the pagination display method causes slow data rendering and may cause page stuttering.
By paginating the data to be rendered, and when rendering the target page, the sub-rendering data group is processed based on the preset initial rendering data amount, and the rendered target page is output. In addition, in response to the user's first input, the rendered target page is updated based on the sub-rendering data set, and the page rendering is combined with the rendering based on the user's first input.
It improves the rendering rate, reduces page lag during data rendering, and effectively reduces the amount of data loaded on the target page, reduces memory usage, and ensures the performance of memory and processors.
Smart Images
Figure CN119719535A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the technical field of data rendering, and in particular, relates to a data rendering method and a data rendering device. Background Art
[0002] With the development of technology, more and more companies need to customize the development of the required systems for statistics of various data. Many projects need to render a large amount of data in the process of data statistics. In the related technology, a large amount of data is mainly rendered by paging the data. However, when the data is increasing, the above rendering method is slow and will cause page freezes. Summary of the invention
[0003] The present application aims to solve at least one of the technical problems existing in the related art. To this end, the present application proposes a data rendering method and a data rendering device, which combine page rendering with rendering based on the user's first input, improve the rendering rate, and reduce page freezes during data rendering.
[0004] In a first aspect, the present application provides a data rendering method, the method comprising:
[0005] Paging the data to be rendered based on the preset data display quantity corresponding to the page to be rendered, obtaining sub-rendering data groups corresponding to each of the pages to be rendered;
[0006] Based on a preset initial rendering data amount corresponding to a target page in the pages to be rendered, processing the sub-rendering data group, and outputting a rendered target page;
[0007] Receiving a first input from a user on the rendered target page;
[0008] In response to the first input, the rendered target page is updated based on the sub-rendering data group.
[0009] According to the data rendering method of the present application, the data to be rendered is displayed in pages by presetting the data display quantity, and in the process of rendering the target page, the initial rendering data amount is preset to render part of the data that can be displayed on the target page to obtain the rendered target page, and based on the user's first input, the rendered target page is continuously updated, and the paging rendering and rendering based on the user's first input are combined to improve the rendering rate and reduce page freezes during the data rendering process.
[0010] According to the data rendering method of the present application, the method of processing the sub-rendering data group based on the preset initial rendering data amount corresponding to the target page in the page to be rendered, and outputting the rendered target page includes:
[0011] Based on the page number of the target page, acquiring a sub-rendering data group corresponding to the target page;
[0012] Extracting the sub-rendering data of the preset initial rendering data amount from the sub-rendering data group corresponding to the target page;
[0013] The target page is rendered based on the sub-rendering data of the preset initial rendering data amount, and the rendered target page is output.
[0014] According to the data rendering method of the present application, the step of acquiring a sub-rendering data group corresponding to the target page based on the page number of the target page includes:
[0015] Storing the data to be rendered in a cache;
[0016] Based on the page number of the target page and the preset data display quantity, a sub-rendering data group corresponding to the target page is obtained from the to-be-rendered data in the cache.
[0017] According to the data rendering method of the present application, in response to the first input, updating the rendered target page based on the sub-rendering data group includes:
[0018] In response to the first input, determining incremental rendering data matching the first input from unrendered sub-data in the sub-rendering data group;
[0019] The rendered target page is rendered based on the incremental rendering data to update the rendered target page.
[0020] According to the data rendering method of the present application, in response to the first input, determining the incremental rendering data matching the first input from the unrendered sub-data in the sub-rendering data group includes:
[0021] In the case where the first input is a sliding input, incremental rendering data matching the first input is determined from the unrendered sub-data based on the sliding amplitude corresponding to the first input.
[0022] According to the data rendering method of the present application, determining the incremental rendering data matching the first input from the unrendered sub-data based on the sliding amplitude corresponding to the first input includes:
[0023] Determining the incremental rendering data amount based on the sliding amplitude and the preset sliding amplitude rendering quantity;
[0024] The unrendered incremental data in the unrendered sub-data that is consistent with the incremental rendering data amount is determined as the incremental rendering data that matches the first input.
[0025] In a second aspect, the present application provides a data rendering device, the device comprising:
[0026] A first processing module, configured to page the data to be rendered based on the preset data display quantity corresponding to the page to be rendered, and obtain a sub-rendering data group corresponding to each of the pages to be rendered;
[0027] A second processing module, configured to process the sub-rendering data group based on a preset initial rendering data amount corresponding to a target page in the pages to be rendered, and output a rendered target page;
[0028] A third processing module, configured to receive a first input from a user on the rendered target page;
[0029] A fourth processing module is configured to update the rendered target page based on the sub-rendering data group in response to the first input.
[0030] According to the data rendering device of the present application, the data to be rendered is displayed in pages by presetting the data display quantity, and in the process of rendering the target page, by presetting the initial rendering data amount, part of the data that can be displayed on the target page is rendered to obtain the rendered target page, and based on the user's first input, the rendered target page is continuously updated, and the paging rendering and rendering based on the user's first input are combined to improve the rendering rate and reduce page freezes during the data rendering process.
[0031] In a third aspect, the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the data rendering method as described in the first aspect above is implemented.
[0032] In a fourth aspect, the present application provides a non-transitory computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the data rendering method as described in the first aspect above is implemented.
[0033] In a fifth aspect, the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the data rendering method as described in the first aspect above.
[0034] The above one or more technical solutions in the embodiments of the present application have at least one of the following technical effects:
[0035] The data to be rendered is displayed in pages by presetting the number of data displays, and in the process of rendering the target page, the initial rendering data amount is preset to render part of the data that the target page can display, to obtain the rendered target page, and based on the user's first input, the rendered target page is continued to be updated, and the paging rendering and rendering based on the user's first input are combined to improve the rendering rate and reduce page freezes during data rendering.
[0036] Furthermore, by caching the data to be rendered obtained in the background and not rendering it directly to the page to be rendered, when rendering the target page, based on the page number of the target page and the preset data display quantity, the sub-rendering data group corresponding to the target page is obtained from the cache, thereby effectively reducing the amount of data loaded by the target page, reducing memory usage, ensuring the performance of memory and processor, and alleviating the problem of rendering crashes on the page to be rendered.
[0037] Furthermore, through the page of the target page, the sub-rendering data group corresponding to the target page is obtained from the sub-rendering data group, and all the data required for rendering the target page is effectively obtained. Based on the preset initial rendering data volume, the sub-rendering data required for the first rendering of the target page is extracted from the sub-rendering data group, and the sub-rendering data is rendered to the target page, effectively reducing the amount of rendering data involved in each rendering and improving the rendering rate.
[0038] Furthermore, by responding to the first input, the user's further rendering requirements for the rendered target page are effectively received; the incremental rendering data matching the first input is determined from the unrendered sub-data in the sub-rendering data group corresponding to the target page, the incremental rendering data is rendered to the rendered target page, and the updated rendered target page is obtained. Based on the actual needs of the user, the rendered target page is updated, thereby improving the flexibility of page rendering, reducing the amount of data for a single rendering, and improving rendering efficiency.
[0039] Additional aspects and advantages of the present application will be given in part in the description below, and in part will become apparent from the description below, or will be learned through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS
[0040] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the description of the embodiments in conjunction with the following drawings, in which:
[0041] Figure 1 This is one of the flowcharts of the data rendering method provided in the embodiment of the present application;
[0042] Figure 2 This is the second flow chart of the data rendering method provided in the embodiment of the present application;
[0043] Figure 3This is the third flow chart of the data rendering method provided in the embodiment of the present application;
[0044] Figure 4 is a structural schematic diagram of a data rendering device provided in an embodiment of the present application;
[0045] Figure 5 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0046] The following will be combined with the drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.
[0047] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.
[0048] The data rendering method, data rendering device, electronic device and readable storage medium provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings through specific embodiments and their application scenarios.
[0049] The data rendering method may be applied to a terminal, and may be specifically executed by hardware or software in the terminal.
[0050] The terminal includes but is not limited to portable communication devices such as mobile phones or tablet computers. It should also be understood that in some embodiments, the terminal may not be a portable communication device, but a desktop computer.
[0051] The terminal may include one or more other physical user interface devices such as a physical keyboard, mouse, and joystick.
[0052] The data rendering method provided in the embodiment of the present application may be executed by an electronic device or a functional module or functional entity in the electronic device that can implement the data rendering method. The electronic devices mentioned in the embodiment of the present application include but are not limited to mobile phones, tablet computers, computers, cameras, and wearable devices. The data rendering method provided in the embodiment of the present application is described below using an electronic device as an example of the execution subject.
[0053] like Figure 1 As shown, the data rendering method includes: step 110, step 120, step 130 and step 140.
[0054] Step 110, paging the data to be rendered based on the preset data display quantity corresponding to the page to be rendered, and obtaining a sub-rendering data group corresponding to each page to be rendered;
[0055] In this step, the page to be rendered is a page that requires data rendering.
[0056] The page to be rendered may include one or more pages.
[0057] The preset data display quantity is the maximum amount of data that can be displayed on the preset to-be-rendered page.
[0058] The preset data display quantity can be based on user customization, such as setting the preset data display quantity to 100 or 200, etc., and can also be determined based on actual conditions, which is not limited in this application.
[0059] The preset data display quantity can be expressed as m.
[0060] The data to be rendered is all the data that needs to be displayed in the page to be rendered.
[0061] The actual amount of data to be rendered may be determined based on the actual data request of the user.
[0062] The total number of data to be rendered can be expressed as total.
[0063] The sub-rendering data group is a data group obtained by grouping the data to be rendered according to a preset data display quantity.
[0064] In the actual execution process, when a data request from a user is received, the to-be-rendered data corresponding to the data request can be obtained from the background interface based on the data request, and the total number of to-be-rendered data can be determined.
[0065] After determining the total number of data to be rendered, a division operation is performed on the total number of data to be rendered and the preset data display number m to obtain the number of pages, and based on the number of pages, the data to be rendered is divided into sub-rendering data groups corresponding to the number of pages.
[0066] For example, when the total number of data to be rendered is 1000 and the preset data display quantity is 100, the data to be rendered may be divided into 10 pages to be rendered for rendering, that is, the data to be rendered may be divided into 10 sub-rendering data groups.
[0067] Step 120: based on the preset initial rendering data volume corresponding to the target page in the to-be-rendered pages, process the sub-rendering data group and output the rendered target page;
[0068] In this step, the target page is any page among the pages to be rendered.
[0069] The target page may be the page currently selected by the user.
[0070] For example, if the pages to be rendered include 10 pages, the target page may be the first page to be rendered or the third page to be rendered.
[0071] The preset initial rendering data volume is the data volume that needs to be rendered when the preset target page is rendered for the first time.
[0072] The preset initial rendering data volume can be based on user customization. For example, the preset initial rendering data volume can be 10 or 20, etc. The preset initial rendering data volume can also be determined based on the actual request, which is not limited in this application.
[0073] It should be noted that the preset initial rendering data amount is less than or equal to the preset data display amount.
[0074] The rendered target page is a display page obtained by rendering at least part of the data in the sub-rendering data group to the target page.
[0075] During the actual execution process, based on the actual situation of the target page where the user is located, a sub-rendering data group corresponding to the target page can be selected from multiple sub-rendering data groups, and based on the preset initial rendering data volume, the sub-rendering data group corresponding to the target page can be processed to render the target page and output the rendered target page.
[0076] Step 130: receiving a first input from a user on the rendered target page;
[0077] In this step, the first input is used to input a user's control operation on the target page.
[0078] The first input may be in at least one of the following ways:
[0079] First, the first input may be a touch operation, including but not limited to a click operation, a slide operation, and a press operation.
[0080] In this implementation, receiving the first input from the user may be receiving a touch operation of the user in the display area of the terminal display screen.
[0081] In order to reduce the user error operation rate, the effective area of the first input can be limited to a specific area, such as the upper middle area of the target page interface; or when the target page interface is displayed, the target control is displayed on the current interface, and the first input can be implemented by touching the target control; or the first input can be set to a continuous multiple tapping operation on the display area within a target time interval.
[0082] Secondly, the first input may be a physical key input.
[0083] In this embodiment, a physical button corresponding to the rendering target page is provided on the terminal body, and receiving the user's first input can be receiving the operation of the user pressing the corresponding physical button; the first input can also be a combined operation of pressing multiple physical buttons at the same time.
[0084] Third, the first input may be voice input.
[0085] In this implementation, upon receiving a voice message such as "incrementally render the current page", the terminal may trigger the incremental display of data in the target page.
[0086] Of course, in other embodiments, the first input may also be in other forms, including but not limited to character input, etc., which can be determined according to actual needs and is not limited in this embodiment of the present application.
[0087] Step 140: In response to the first input, update the rendered target page based on the sub-rendering data group.
[0088] In this step, in the actual execution process, after receiving the first input from the user, the rendered target page may be further rendered based on the actual situation of the first input and the sub-rendering data group.
[0089] For example, when the first input is the user pressing the down arrow key on the keyboard, the data in the sub-rendering data group not displayed on the rendered target page can be rendered to the rendered target page to update the rendered target page.
[0090] For another example, when the first input is a user voice input of "continue rendering", the data in the sub-rendering data group that is not displayed on the rendered target page can also be rendered to the rendered target page to update the rendered target page.
[0091] The data to be rendered can be displayed in the target page in a table-based or directly embedded form.
[0092] During the research and development process, the inventor found that more and more companies need to customize the development of the required systems for statistics of various data. Many projects need to render a large amount of data during the data statistics process. In the related art, a large amount of data is mainly rendered by paging the data. However, when the data is increasing, the above rendering method renders the data slowly and causes page freezes.
[0093] The present application pages the data to be rendered by displaying the preset data quantity corresponding to the page to be rendered, so as to display the data to be rendered in pages, thereby alleviating the page jamming caused by the one-time loading of the data to be rendered; in the process of rendering the target page in the page to be rendered, based on the preset initial rendering data quantity, the sub-rendering data group is processed to render the target page, effectively reducing the amount of data rendered each time, improving the rendering rate, and alleviating the page jamming problem caused by completing the rendering of the target page in one time; after obtaining the rendered target page, the data in the sub-rendering data group continues to be rendered to the rendered target page based on the user's first input, so as to continuously update the rendered target page, combine paging rendering with rendering based on the user's first input, render the page to be rendered in steps, reduce the amount of data rendered at one time, improve the rendering rate, and reduce the occurrence of page jamming.
[0094] According to the data rendering method provided in the embodiment of the present application, the data to be rendered is displayed in pages by presetting the data display quantity, and in the process of rendering the target page, by presetting the initial rendering data amount, part of the data that can be displayed on the target page is rendered to obtain the rendered target page, and based on the user's first input, the rendered target page is continuously updated, and the paging rendering and rendering based on the user's first input are combined to improve the rendering rate and reduce page freezes during the data rendering process.
[0095] In some embodiments, step 120 may further include:
[0096] Based on the page number of the target page, obtain the sub-rendering data group corresponding to the target page;
[0097] Extracting sub-rendering data of a preset initial rendering data amount from the sub-rendering data group corresponding to the target page;
[0098] The target page is rendered based on the sub-rendering data of the preset initial rendering data amount, and the rendered target page is output.
[0099] In this embodiment, the page number of the target page is the page number where the target page is located.
[0100] In the actual execution process, after the data to be rendered is paginated, a page turning number can be configured so that the user can turn the page and jump from the current page to other pages.
[0101] For example, if the current page is page 1, the user clicks the page number 3 to jump to page 3.
[0102] In the actual execution process, the page of the target page can be determined based on the page number displayed on the target page.
[0103] In the actual execution process, after the page number of the target page is obtained, the sub-rendering data group corresponding to the target page is extracted from the sub-rendering data group.
[0104] Continuing with the example that the total number of data to be rendered is 1000 and the preset number of data displayed is 100, the data to be rendered can be divided into 10 pages for display, that is, the data to be rendered can be divided into 10 sub-rendering data groups in sequence. When the page number of the target page is 3, the third sub-rendering data group is obtained from the 10 sub-rendering data groups.
[0105] After obtaining the third group of sub-rendering data, extract the sub-rendering data of the preset initial rendering data amount from the third group of sub-rendering data. For example, the preset initial rendering data amount is 10, extract the first 10 sub-rendering data from the third group of sub-rendering data, render the first 10 sub-rendering data into the target page, and obtain the rendered target page.
[0106] According to the data rendering method provided in the embodiment of the present application, through the page of the target page, the sub-rendering data group corresponding to the target page is obtained from the sub-rendering data group, and all the data required for rendering the target page is effectively obtained. Based on the preset initial rendering data amount, the sub-rendering data required for the first rendering of the target page is extracted from the sub-rendering data group, so that the sub-rendering data is rendered to the target page, effectively reducing the amount of rendering data involved in each rendering and improving the rendering rate.
[0107] In some embodiments, based on the page number of the target page, obtaining the sub-rendering data group corresponding to the target page may also include:
[0108] Store the data to be rendered in the cache;
[0109] Based on the page number of the target page and the preset data display quantity, a sub-rendering data group corresponding to the target page is obtained from the to-be-rendered data in the cache.
[0110] In this embodiment, the cache is a predefined array or a predefined collection, etc.
[0111] In the actual execution process, taking the user query data scenario as an example, based on the actual needs of the user query data, the data to be rendered is obtained from the background interface. The data to be rendered is not directly rendered into the page to be rendered, but the obtained data to be rendered is first stored in the cache.
[0112] For example, store the data to be rendered in a variable named storeArr.
[0113] In the process of rendering the target page, based on the page number of the target page and the preset data display quantity, the amount of data that needs to be rendered before the target page is determined, and the preset data display quantity after the amount of data that needs to be rendered in the cache is obtained, and the preset data display quantity is displayed.
[0114] Taking the case where the amount of data corresponding to the user query scenario is 1000, the page number of the target page is 1, and the preset number of data displays is 100 as an example, 1000 pieces of data can be obtained through the background data interface and stored in the cache. In the process of rendering the first page to be rendered, the first 100 pieces of data are obtained from the cache to obtain the sub-rendering data group corresponding to the first page.
[0115] Taking the case where the amount of data corresponding to the user query scenario is 1000, the page number of the target page is 3, and the preset data display quantity is 100 as an example, 1000 pieces of data can be obtained through the background data interface and the 1000 pieces of data can be stored in the cache. In the process of rendering the 3rd page to be rendered, it is determined based on the page number 3 that there are 2 pages of to-be-rendered pages before the target page, and the 2 pages of to-be-rendered pages require 200 pieces of to-be-rendered data. At this time, the 201st to 300th pieces of data can be obtained from the cache to obtain the sub-rendering data group corresponding to the 3rd page.
[0116] like Figure 2 As shown, in the actual execution process, the data to be rendered is obtained, the data to be rendered is paged, the obtained data to be rendered is stored in the cache, and the sub-rendering data of the preset initial rendering data amount is rendered to the target page. Based on the user's first input, the data to be rendered is loaded from the cache, and the rendered target page is rendered; when the user jumps to other pages, the data to be rendered is processed based on the jump page number.
[0117] The inventors discovered during the research and development process that in the process of data rendering, the rendering of data with a large amount of data mainly adopts the scrolling loading method. However, scrolling loading requires loading the data on the same page. The more content is loaded, the more memory will be occupied, which will cause loss of memory and processor performance and may cause the page to be rendered to crash.
[0118] This application caches the data to be rendered obtained in the background instead of directly rendering it to the page to be rendered. When rendering the target page, based on the page number of the target page and the preset data display quantity, the sub-rendering data group corresponding to the target page is obtained from the cache, thereby effectively reducing the amount of data loaded by the target page, reducing memory usage, ensuring the performance of memory and processor, and alleviating the problem of rendering crashes on the page to be rendered.
[0119] According to the data rendering method provided in the embodiment of the present application, by caching the data to be rendered, the amount of data loaded by the target page is effectively reduced, the memory usage is reduced, and the problem of rendering crash of the page to be rendered is alleviated.
[0120] In some embodiments, step 140 may further include:
[0121] In response to a first input, determining incremental rendering data matching the first input from unrendered sub-data in the sub-rendering data group;
[0122] The rendered target page is rendered based on the incremental rendering data to update the rendered target page.
[0123] In this embodiment, the unrendered sub-data are data that are not displayed in the rendered target page.
[0124] The incremental rendering data is data that is further added based on the display data of the target page after rendering.
[0125] During the actual execution process, after obtaining the rendered target page, the user can operate the rendered target page, that is, make a first input. By responding to the user's first input, the user's operation requirements for the rendered target page are determined, and data rendering for the rendered target page continues.
[0126] For example, the rendered target page displays 10 pieces of data, and receives a first input from the user. In response to the first input, 10 pieces of data are added to the rendered target page.
[0127] For another example, the rendered target page displays 10 pieces of data, and a first input from the user is received. In response to the first input, all other data that can be displayed on the rendered target page are rendered into the rendered target page.
[0128] According to the data rendering method provided in the embodiment of the present application, by responding to the first input, the user's further rendering requirements for the rendered target page are effectively received; the incremental rendering data matching the first input is determined from the unrendered sub-data in the sub-rendering data group corresponding to the target page, the incremental rendering data is rendered to the rendered target page, and the updated rendered target page is obtained. Based on the actual needs of the user, the rendered target page is updated, the flexibility of page rendering is improved, the amount of data for a single rendering is reduced, and the rendering efficiency is improved.
[0129] In some embodiments, determining the incremental rendering data matching the first input from the unrendered sub-data in the sub-rendering data group may further include:
[0130] In the case where the first input is a sliding input, incremental rendering data matching the first input is determined from unrendered sub-data based on the sliding amplitude corresponding to the first input.
[0131] In this embodiment, the sliding input is the user sliding a mouse or sliding a scroll bar of a target page.
[0132] The sliding amplitude is the amplitude by which the user slides the mouse or the amplitude by which the scroll bar of the target page slides.
[0133] In the actual execution process, the incremental rendering data matching the first input may be determined from the unrendered sub-data in the sub-rendering data group based on the stop position of the first input sliding amplitude in the rendered target page.
[0134] Taking the sliding input by the user by sliding the mouse as an example, when the user slides the mouse once, certain data can be added to the rendered target page.
[0135] Continuing with the example of the user inputting by sliding the mouse, when the user slides the data mouse once and the mouse stops at the 2 / 3 position from the 1 / 2 position of the rendered target page, the data in the blank position before the 2 / 3 position can be filled to update the rendered target page.
[0136] According to the data rendering method provided in the embodiment of the present application, by determining that the first input is a sliding input, and using the sliding amplitude corresponding to the sliding input, incremental rendering data matching the first input is determined from unrendered sub-data, and the incremental rendering data is rendered to the rendered target page, thereby improving the flexibility of page rendering.
[0137] In some embodiments, based on the sliding amplitude corresponding to the first input, determining the incremental rendering data matching the first input from the unrendered sub-data may further include:
[0138] Determine the amount of incremental rendering data based on the sliding amplitude and the preset sliding amplitude rendering quantity;
[0139] The unrendered incremental data in the unrendered sub-data that is consistent with the incremental rendering data amount is determined as the incremental rendering data that matches the first input.
[0140] In this embodiment, the preset sliding amplitude rendering quantity is the amount of rendering data corresponding to the preset sliding amplitude.
[0141] The preset sliding amplitude rendering number can be based on user customization. For example, when the mouse is slid once, the preset sliding amplitude rendering number is 10 or 20; for example, when the mouse wheel is slid a distance of 5 mm, the preset sliding amplitude rendering number is 10 or 20. The preset sliding amplitude rendering number can also be determined based on actual conditions, and this application does not limit it.
[0142] The preset sliding range rendering quantity may be the same as the preset initial rendering data quantity.
[0143] In the case where the preset sliding amplitude rendering quantity and the preset initial rendering data volume are the same, the preset sliding amplitude rendering quantity and the preset initial rendering data volume may both be expressed as n.
[0144] The incremental rendering data volume is the amount of data further rendered based on the data displayed on the rendered target page.
[0145] The unrendered incremental data is part of the unrendered sub-data.
[0146] In the actual execution process, when the user slides the mouse once, 10 incremental rendering data can be determined from the unrendered sub-data.
[0147] During the actual execution process, when the rendered target page displays 10 pieces of data, and a user's sliding operation is received, it can be determined that the amount of incremental rendering data is 10, and 10 pieces of unrendered incremental data can be determined from the unrendered sub-data. The 10 unrendered incremental data are determined as 10 pieces of incremental rendering data, and the 10 incremental rendering data are rendered to the rendered target page.
[0148] It is understandable that the user can make multiple first inputs.
[0149] For example, when the user slides the mouse three times, the amount of incremental rendering data may be 30, and 30 pieces of incremental rendering data may be determined from the unrendered sub-data.
[0150] In the actual execution process, the 30 incremental rendering data can be determined in batches and rendered to the rendered target page, that is, 10 incremental rendering data are rendered each time until the rendering of 30 incremental rendering data is completed to obtain an updated rendered target page.
[0151] In the actual implementation process, it can be based on the following formula:
[0152] (p-1)*(m / n)+1
[0153] Determine query start information of the sub-rendering data group corresponding to the target page.
[0154] Among them, p is the page number of the target page; m is the preset data display quantity; n is the preset sliding amplitude rendering quantity.
[0155] It can be understood that, when the preset sliding amplitude rendering quantity is the same as the preset initial rendering data quantity, the target page is rendered m / n times, ie, the rendering of the target page is completed.
[0156] When the user's first input is the i-th time, data in the unrendered sub-data with array index ranging from (i-1)*n<=index to index<=i*n-1 can be rendered to the rendered target page.
[0157] It should be noted that when the data that can actually be rendered on the target page of the last mouse slide is less than the preset sliding amplitude rendering quantity, the sliding rendering event is stopped.
[0158] like Figure 3 As shown, during the actual execution process, the user can pre-define parameters m, n, p, i, total and storeArr to set the preset data display quantity, the preset sliding amplitude rendering quantity, the preset initial rendering data volume, the page number and scrolling amplitude of the target page, the total number of data to be rendered and the cache array.
[0159] The data to be rendered is obtained from the background interface, and the data to be rendered is cached, and the data to be rendered of a preset initial rendering data amount is rendered to the target page, and further based on the first input, incremental rendering data is obtained from the cached data to be rendered to update the rendered target page.
[0160] In the scenario where the user queries data, the data to be rendered is paged and the paging is queried. When the user clicks a corresponding page number, the target page of the corresponding page number is rendered with data combining paging and the first input.
[0161] When the amount of data that can be rendered by the number of times the user slides the mouse reaches the maximum amount of data that can be displayed on the target page, the rendering of the target page is completed.
[0162] The following takes the example of rendering the data to be rendered in the target page in the form of a table as an example.
[0163] In the actual execution process, you can choose to use Element as the front-end framework component to create the required Element components.
[0164] The Element component includes a table component, a paging component, and a monitoring method for the first input of the table, such as a sliding monitoring method, to obtain the sliding position information of the target page.
[0165] Use Vue's state manager to manage the data status within the component, define and initialize state variables where you need to store and update the data to be rendered.
[0166] Use Element's table sliding monitoring method to obtain the sliding position information of the target page in real time.
[0167] When the sliding position information of the target page meets the paging conditions, the state returned by the state manager getter is used to update the data to be rendered.
[0168] Use the Element table to manage the data rendering inside the component. Define and initialize the table display data where the data to be rendered needs to be stored and updated. Then use the paging parameters and interface data to manage the data to be rendered.
[0169] The acquired data to be rendered is dynamically displayed on the page to be rendered according to the preset data display quantity and the preset sliding amplitude rendering quantity. The components Table, el-table-infinite-scroll and pagination are used to efficiently process the data to be rendered and the sliding information of the target page. The data rendering process with large data volume can be realized by using the method of sliding rendering and paging linkage.
[0170] According to the data rendering method provided in the embodiment of the present application, the infinite scrolling rendering method is effectively converted into a method of rendering a certain amount of data to be rendered each time through the sliding amplitude and the preset sliding amplitude rendering number, thereby alleviating the page jamming caused by continuous scrolling rendering of a large amount of data.
[0171] The data rendering method provided in the embodiment of the present application can be executed by a data rendering device. In the embodiment of the present application, the data rendering device provided in the embodiment of the present application is described by taking the data rendering method executed by the data rendering device as an example.
[0172] The embodiment of the present application also provides a data rendering device.
[0173] like Figure 4 As shown, the data rendering device includes: a first processing module 410 , a second processing module 420 , a third processing module 430 and a fourth processing module 440 .
[0174] The first processing module 410 is used to page the data to be rendered based on the preset data display quantity corresponding to the page to be rendered, and obtain the sub-rendering data group corresponding to each page to be rendered;
[0175] The second processing module 420 is used to process the sub-rendering data group based on the preset initial rendering data amount corresponding to the target page in the to-be-rendered page, and output the rendered target page;
[0176] The third processing module 430 is used to receive a first input from a user on the rendered target page;
[0177] The fourth processing module 440 is configured to update the rendered target page based on the sub-rendering data group in response to the first input.
[0178] According to the data rendering device provided in the embodiment of the present application, the data to be rendered is displayed in pages by presetting the number of data displays, and in the process of rendering the target page, by presetting the initial rendering data amount, part of the data that can be displayed on the target page is rendered to obtain the rendered target page, and based on the user's first input, the rendered target page is continued to be updated, and the paging rendering and rendering based on the user's first input are combined to improve the rendering rate and reduce page freezes during the data rendering process.
[0179] In some embodiments, the second processing module 420 may also be used to:
[0180] Based on the page number of the target page, obtain the sub-rendering data group corresponding to the target page;
[0181] Extracting sub-rendering data of a preset initial rendering data amount from the sub-rendering data group corresponding to the target page;
[0182] The target page is rendered based on the sub-rendering data of the preset initial rendering data amount, and the rendered target page is output.
[0183] In some embodiments, the second processing module 420 may also be used to:
[0184] Store the data to be rendered in the cache;
[0185] Based on the page number of the target page and the preset data display quantity, a sub-rendering data group corresponding to the target page is obtained from the to-be-rendered data in the cache.
[0186] In some embodiments, the fourth processing module 440 may also be used to:
[0187] In response to a first input, determining incremental rendering data matching the first input from unrendered sub-data in the sub-rendering data group;
[0188] The rendered target page is rendered based on the incremental rendering data to update the rendered target page.
[0189] In some embodiments, the fourth processing module 440 may also be used to:
[0190] In the case where the first input is a sliding input, incremental rendering data matching the first input is determined from unrendered sub-data based on the sliding amplitude corresponding to the first input.
[0191] In some embodiments, the fourth processing module 440 may also be used to:
[0192] Determine the amount of incremental rendering data based on the sliding amplitude and the preset sliding amplitude rendering quantity;
[0193] The unrendered incremental data in the unrendered sub-data that is consistent with the incremental rendering data amount is determined as the incremental rendering data that matches the first input.
[0194] The data rendering device in the embodiment of the present application can be an electronic device, or a component in the electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal, or it can be other devices other than a terminal. Exemplarily, the electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-mounted electronic device, a mobile Internet device (Mobile Internet Device, MID), an augmented reality (augmented reality, AR) / virtual reality (virtual reality, VR) device, a robot, a wearable device, an ultra-mobile personal computer (ultra-mobile personal computer, UMPC), a netbook or a personal digital assistant (personal digital assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (personal computer, PC), a television (television, TV), a teller machine or a self-service machine, etc., which is not specifically limited in the embodiment of the present application.
[0195] The data rendering device in the embodiment of the present application may be a device having an operating system. The operating system may be an Android operating system, an IOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.
[0196] The data rendering device provided in the embodiment of the present application can achieve Figures 1 to 3 To avoid repetition, the various processes implemented by the method embodiment are not described here.
[0197] In some embodiments, Figure 5As shown, an embodiment of the present application also provides an electronic device 500, including a processor 501, a memory 502, and a computer program stored in the memory 502 and executable on the processor 501. When the program is executed by the processor 501, each process of the above-mentioned data rendering method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.
[0198] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.
[0199] An embodiment of the present application also provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the above-mentioned data rendering method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.
[0200] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.
[0201] An embodiment of the present application also provides a computer program product, including a computer program, which implements the above-mentioned data rendering method when executed by a processor.
[0202] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.
[0203] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned data rendering method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.
[0204] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.
[0205] It should be noted that, in this article, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise one..." do not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.
[0206] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the relevant technology, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.
[0207] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.
[0208] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "illustrative embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials, or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.
[0209] Although the embodiments of the present application have been shown and described, those skilled in the art will appreciate that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present application, and that the scope of the present application is defined by the claims and their equivalents.
Claims
1. A data rendering method, characterized in that: include: Paging the data to be rendered based on the preset data display quantity corresponding to the page to be rendered, obtaining sub-rendering data groups corresponding to each of the pages to be rendered; Based on a preset initial rendering data amount corresponding to a target page in the pages to be rendered, processing the sub-rendering data group, and outputting a rendered target page; Receiving a first input from a user on the rendered target page; In response to the first input, the rendered target page is updated based on the sub-rendering data group.
2. The data rendering method according to claim 1, characterized in that: The step of processing the sub-rendering data group based on a preset initial rendering data amount corresponding to a target page in the to-be-rendered pages, and outputting a rendered target page, comprises: Based on the page number of the target page, acquiring a sub-rendering data group corresponding to the target page; Extracting the sub-rendering data of the preset initial rendering data amount from the sub-rendering data group corresponding to the target page; The target page is rendered based on the sub-rendering data of the preset initial rendering data amount, and the rendered target page is output.
3. The data rendering method according to claim 2, characterized in that: The acquiring, based on the page number of the target page, a sub-rendering data group corresponding to the target page, comprises: Storing the data to be rendered in a cache; Based on the page number of the target page and the preset data display quantity, a sub-rendering data group corresponding to the target page is obtained from the to-be-rendered data in the cache.
4. The data rendering method according to any one of claims 1 to 3, characterized in that: In response to the first input, updating the rendered target page based on the sub-rendering data group includes: In response to the first input, determining incremental rendering data matching the first input from unrendered sub-data in the sub-rendering data group; The rendered target page is rendered based on the incremental rendering data to update the rendered target page.
5. The data rendering method according to claim 4, characterized in that: In response to the first input, determining the incremental rendering data matching the first input from the unrendered sub-data in the sub-rendering data group comprises: In the case where the first input is a sliding input, incremental rendering data matching the first input is determined from the unrendered sub-data based on the sliding amplitude corresponding to the first input.
6. The data rendering method according to claim 5, characterized in that: The determining, based on the sliding amplitude corresponding to the first input, from the unrendered sub-data, the incremental rendering data matching the first input includes: Determining the incremental rendering data amount based on the sliding amplitude and the preset sliding amplitude rendering quantity; The unrendered incremental data in the unrendered sub-data that is consistent with the incremental rendering data amount is determined as the incremental rendering data that matches the first input.
7. A data rendering device, characterized in that: include: A first processing module, configured to page the data to be rendered based on the preset data display quantity corresponding to the page to be rendered, and obtain a sub-rendering data group corresponding to each of the pages to be rendered; A second processing module, configured to process the sub-rendering data group based on a preset initial rendering data amount corresponding to a target page in the pages to be rendered, and output a rendered target page; A third processing module, configured to receive a first input from a user on the rendered target page; A fourth processing module is configured to update the rendered target page based on the sub-rendering data group in response to the first input.
8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the data rendering method according to any one of claims 1 to 6 is implemented.
9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the data rendering method according to any one of claims 1 to 6 is implemented.
10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the data rendering method according to any one of claims 1 to 6 is implemented.