Ultra-long list rendering method based on embedded platform

Abstract

The invention discloses a super-long list rendering method based on an embedded platform, which relates to the technical field of graphical user interface rendering, and comprises the following steps: setting the overall size of a list control and the size of a visible area, initializing the number of preloaded items, and calculating a start index and an end index according to a rolling position and the height of the list items; javaScript codes are executed through a Duktape engine to dynamically create virtual list items, real content is replaced, structural stability is kept through placeholder elements, rolling events are bound, virtual lists are updated in real time, loaded items are reused, user trends are predicted in combination with historical rolling behaviors, the list items are loaded in advance, high-performance rendering is achieved, the blank in the prior art is filled, and smooth experience is ensured.

Description

Technical Field

[0001] The invention relates to the technical field of graphical user interface rendering, in particular to an ultra-long list rendering method based on an embedded platform. Background Art

[0002] In embedded systems, graphical user interface rendering technology is crucial, especially for list controls that need to process large amounts of data. The traditional method of loading all list items at once leads to performance bottlenecks due to resource limitations. To solve this problem, paged loading, partial loading, and virtualization technologies have been introduced. Paged loading affects the continuous browsing experience, and partial loading is complex to implement. The success of virtualization technology on desktop and mobile platforms is difficult to directly transplant to resource-constrained embedded devices. Existing virtualization solutions are insufficiently optimized for embedded systems, and efficiency and experience still need to be improved. This highlights the urgent need to develop efficient, low-resource consumption list rendering technology specifically for embedded platforms. Summary of the invention

[0003] In view of the above existing problems, the present invention is proposed.

[0004] Therefore, the present invention provides an ultra-long list rendering method based on an embedded platform, which solves the problems of high resource consumption and poor user experience when rendering a long list in an embedded platform.

[0005] In order to solve the above technical problems, the present invention provides the following technical solutions:

[0006] In a first aspect, an embodiment of the present invention provides a method for rendering an ultra-long list based on an embedded platform, which includes setting the overall size and visible area size of a list control, and initializing variables of the number of preloaded items and the visible area size;

[0007] Calculate the index positions of the top and bottom list items in the visible area based on the current scroll position, the height of each list item, and the height of the visible area;

[0008] Use the Duktape engine to run JavaScript, calculate the height of the visible area, load list items, and update the list item array, dynamically create virtual list items, and replace the real list item content;

[0009] Use placeholder elements to maintain the list structure and move the current virtual list elements to the real visible area;

[0010] Initialize the placeholder element, calculate the virtual list elements on the first screen, bind the scroll event to JavaScript, and update the scrolling virtual list elements in real time;

[0011] By listening to scroll events, the loaded list items are reused and the list items in the visible area are dynamically updated;

[0012] Based on historical scrolling behavior and current scrolling speed, the user's scrolling direction and speed are predicted, and an intelligent prediction algorithm is used to load the list items in the next visible area in advance.

[0013] As a preferred solution of the method for rendering a super-long list based on an embedded platform described in the present invention, the overall size and visible area size of the list control are set, and the variables of the number of pre-loaded items and the size of the visible area are initialized. The specific operations are as follows:

[0014] Create a virtual list control on LVGL, obtain the screen size, and set the width W and height H of the virtual list control;

[0015] According to the screen resolution and user experience, set the height VH and width VW of the visible area;

[0016] In the initialization phase, the number of preloaded items is first set to P, and the preprocessor directive is used to fix the number of preloaded items. According to the set visible area size, the inner margin is controlled by adjusting the style of the control to indirectly set the visible area size.

[0017] As a preferred solution of the method for rendering a very long list based on an embedded platform described in the present invention, wherein: according to the current scrolling position, the height of each list item and the height of the visible area, the index positions of the top and bottom list items in the visible area are calculated, and the specific operations are as follows:

[0018] Calculate the start index and end index of the visible area by determining the current scroll position S, the height I of each list item, and the height VH of the visible area;

[0019] Based on the start index and end index positions of the visible area, the preload start index and the preload end index are calculated.

[0020] As a preferred solution of the method for rendering a super-long list based on an embedded platform described in the present invention, the Duktape engine is used to run JavaScript, calculate the visible area, load list items, and update the list item array, dynamically create virtual list items, and replace the real list item content. The specific operations are as follows:

[0021] In JavaScript, find the list item with an index between the start index and the end index to determine the current visible area;

[0022] Load data for list items whose indexes are between the preload start index and the preload end index;

[0023] In the Duktape engine, JavaScript is used to update the list item array. For the list items that already exist in the array, their contents are updated. For the newly added list items, HTML elements are dynamically created using DOM operations. After the list items are created, their contents are replaced with the real list items.

[0024] As a preferred solution of the method for rendering a super-long list based on an embedded platform described in the present invention, the list structure is maintained by using placeholder elements, and the current virtual list element is moved to the real visible area. The specific operations are as follows:

[0025] According to the current scroll position, calculate the starting index and ending index of the virtual list, determine the visible area of ​​the virtual list, use placeholder elements, correspond placeholder elements to each item in the virtual list, and update the position of the placeholder elements in real time when the user scrolls the list;

[0026] According to the latest start index and end index, load the data of the corresponding list item, update the corresponding DOM element for the list item data changes between the start index and the end index, map the updated virtual list item to the real list item, and replace the original content

[0027] As a preferred solution of the method for rendering a super-long list based on an embedded platform described in the present invention, the placeholder element is initialized, the virtual list element of the first screen is calculated, and the scrolling event is bound to JavaScript to update the scrolling virtual list element in real time. The specific operations are as follows:

[0028] After initializing the list, create a placeholder element for each item and calculate the range of the list items within the first screen based on the screen size and the height of the list items;

[0029] Register a scroll event listener on the virtual list container, listen to the event type in the LVGL system to detect the scroll action, and trigger the scroll update logic in JavaScript in the event callback function, calculate the new start index and end index, and update the list item data;

[0030] Update the data of the list item according to the index, and use the update data function to update the data in the local storage.

[0031] As a preferred solution of the method for rendering a super-long list based on an embedded platform described in the present invention, wherein: by monitoring the scrolling event, the loaded list items are reused, and the list items in the visible area are dynamically updated. The specific operations are as follows:

[0032] According to the current scroll position, calculate the new start index and end index, create a reusable list item pool, identify the status of each list item, and determine whether it is currently in the visible area and whether it has been recycled into the pool;

[0033] For list items that are now between the start index and the end index and were not in the visible area before, they are taken out of the pool and their content and position are updated. For list items that are now out of the start index and the end index range, they are marked as invisible and recycled into the list item pool. The user interface is updated synchronously using the request animation frame function.

[0034] As a preferred solution of the method for rendering a super-long list based on an embedded platform described in the present invention, the user's scrolling direction and speed are predicted based on historical scrolling behavior and current scrolling speed, and an intelligent prediction algorithm is used to load the list items of the next visible area in advance. The specific operations are as follows:

[0035] When the user scrolls the virtual list, the scrolling direction, scrolling speed and duration data are collected and recorded, and the user's scrolling direction and speed distribution are identified by time series analysis;

[0036] Based on the collected data, a prediction algorithm is used to predict where the user might scroll next based on the current scrolling speed and direction;

[0037] When a scroll event occurs, a prediction algorithm is used to estimate the start and end indexes of the next visible area, and the predicted range is dynamically adjusted according to the current scrolling speed and direction;

[0038] Once the next visible area is predicted, the data for that area is immediately loaded asynchronously from the server, caching the most recent and most frequently accessed data segments.

[0039] In a second aspect, an embodiment of the present invention provides a computer device, comprising a memory and a processor, wherein the memory stores a computer program, wherein: when the computer program is executed by the processor, any step of the method for rendering an extremely long list based on an embedded platform as described in the first aspect of the present invention is implemented.

[0040] In a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein: when the computer program is executed by a processor, any step of the method for rendering an extremely long list based on an embedded platform as described in the first aspect of the present invention is implemented.

[0041] The beneficial effects of the present invention are as follows: by using the Ducktap engine to run JavaScript on LVGL, efficient rendering and management of list controls are achieved, and only list items in the current visible area are rendered, thereby significantly reducing memory usage; in addition, the visible area is dynamically calculated and updated to ensure smooth scrolling of the list without lag, while utilizing the flexibility of JavaScript and the efficiency of the Ducktap engine to simplify the difficulty of implementing long list rendering, and providing a wealth of tunable parameters to allow developers to balance memory usage and rendering efficiency according to specific needs, and especially optimizing for embedded systems to ensure high-performance operation in resource-constrained environments, effectively filling the gap in the prior art for rendering ultra-long lists on embedded platforms. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0043] Figure 1 This is a flowchart of the method for rendering an extremely long list based on an embedded platform in Example 1.

[0044] Figure 2 This is a process diagram for updating the virtual list position during scrolling in Example 1. DETAILED DESCRIPTION

[0045] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings.

[0046] In the following description, many specific details are set forth to facilitate a full understanding of the present invention, but the present invention may also be implemented in other ways different from those described herein, and those skilled in the art may make similar generalizations without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0047] Secondly, the term "one embodiment" or "embodiment" as used herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The term "in one embodiment" that appears in different places in this specification does not necessarily refer to the same embodiment, nor does it refer to a separate or selective embodiment that is mutually exclusive with other embodiments.

[0048] Example 1, reference Figure 1 and Figure 2, which is the first embodiment of the present invention, and provides a method for rendering a very long list based on an embedded platform, comprising the following steps:

[0049] S1. Set the overall size and visible area size of the list control, and initialize the variables of the number of preloaded items and the size of the visible area.

[0050] S1.1. Create a virtual list control on LVGL, obtain the screen size, and set the width W and height H of the virtual list control;

[0051] According to the screen resolution and user experience, set the height VH and width VW of the visible area;

[0052] In the initialization phase, the number of preloaded items is first set to P, and the preprocessor directive is used to fix the number of preloaded items. According to the set visible area size, the inner margin is controlled by adjusting the style of the control, and the visible area size is indirectly set;

[0053] Specifically, the number of preloaded items is set and calculated based on the screen resolution and the list item height; for example, if the screen resolution is 1080p and the average list item height is 50px, the preloaded items can be set to the screen height divided by the list item height, rounded up, to ensure that at least all items visible on the current screen are loaded.

[0054] S2. Calculate the index positions of the topmost and bottommost list items in the visible area according to the current scroll position, the height of each list item, and the height of the visible area.

[0055] S2.1. Calculate the start index and the end index of the visible area by determining the current scroll position S, the height I of each list item, and the height VH of the visible area;

[0056] Based on the start index and end index positions of the visible area, calculate the preload start index and the preload end index;

[0057] Specifically, calculate the height WH of the visible area, which includes the upper and lower buffers. To improve scrolling smoothness, WH should be greater than or equal to the actual visible height of the list items. For example, if the height of each list item is I, and you want the list to display at least N list items each time, then WH should be at least N*I.

[0058] Next, in the scroll event processing function, the start index SI and end index EI of the visible area are calculated according to the current scroll position S and the list item height I. The expression is:

[0059]

[0060] SI represents the starting index of the visible area, starting from the top of the list, and the index of the first list item reached after scrolling down S pixels;

[0061]

[0062] EI represents the end index of the visible area, starting from the top of the list, and the index of the first list item reached after scrolling down S+VH pixels;

[0063] Furthermore, considering the influence of the preloaded items, the start index PSI and the end index PEI of the preloaded list items are calculated according to the start index SI and the end index EI, as well as the number of preloaded items P. The expression is:

[0064] PSI = SI - P;

[0065] PEI=EI+P;

[0066] Where P is the number of preloaded items, which is usually a small positive integer (such as 1 or 2) to ensure that there is no noticeable delay when the list is scrolled; in addition, it is also necessary to ensure that PSI and PEI do not exceed the total number of list items. If PSI is less than zero, it should be set to zero; if PEI is greater than the total number of list items, it should be set to the total number of list items.

[0067] S3. Use the Duktape engine to run JavaScript, calculate the height of the visible area, load list items, and update the list item array, dynamically create virtual list items, and replace the real list item content.

[0068] S3.1. In JavaScript, find the list item whose index is between the start index and the end index to determine the current visible area;

[0069] Load data for list items whose indexes are between the preload start index and the preload end index;

[0070] In the Duktape engine, JavaScript is used to update the list item array. For the list items that already exist in the array, their contents are updated. For the newly added list items, DOM operations are used to dynamically create HTML elements. After the list items are created, the contents of the list items are replaced with the real list items.

[0071] Specifically, in JavaScript, use document.createElement('div') to create a new div element, and then use the appendChild() or insertBefore() method to add it to the appropriate position of the virtual list.

[0072] S4. Use placeholder elements to maintain the list structure and move the current virtual list element to the real visible area.

[0073] S4.1. Calculate the start index and end index of the virtual list according to the current scroll position, determine the visible area of ​​the virtual list, use placeholder elements, correspond placeholder elements to each item in the virtual list, and update the position of the placeholder elements in real time when the user scrolls the list;

[0074] According to the latest start index and end index, load the data of the corresponding list item, update the corresponding DOM element for the list item data changes between the start index and the end index, map the updated virtual list item to the real list item, and replace the original content;

[0075] Specifically, a mapping table is established between virtual list items and real list items, for example, using an object or Map data structure, where the key is the ID or index of the virtual list item and the value is the corresponding real list item DOM node reference. Each time an update is made, the DOM node in the mapping table is searched according to the latest index range and its content is updated.

[0076] S5. Initialize the placeholder element, calculate the virtual list element on the first screen, bind the scroll event to JavaScript, and update the scrolling virtual list element in real time.

[0077] S5.1. After initializing the list, create a placeholder element for each item and calculate the range of the list items within the first screen based on the screen size and the height of the list items.

[0078] Register a scroll event listener on the virtual list container, listen to the event type in the LVGL system to detect the scroll action, and trigger the scroll update logic in JavaScript in the event callback function, calculate the new start index and end index, and update the list item data;

[0079] Update the data of the list item according to the index, and use the update data function to update the data in the local storage.

[0080] S6. By listening to scroll events, the loaded list items are reused and the list items in the visible area are dynamically updated.

[0081] S6.1. Calculate the new start index and end index based on the current scroll position, create a reusable list item pool, identify the status of each list item, and determine whether it is currently in the visible area and whether it has been recycled into the pool;

[0082] For list items that are now between the start index and the end index and were not in the visible area before, they are taken from the pool and their content and position are updated. For list items that are now out of the range of the start index and the end index, they are marked as invisible, recycled into the list item pool, and the user interface is updated synchronously using the request animation frame function;

[0083] Specifically, create a list item pool object containing two queues: one for storing currently visible list items, and the other for storing invisible and reusable list items; when a list item leaves the visible area, move it from the "visible" queue to the "invisible" queue, and vice versa; when the list scrolls, take the list item from the "invisible" queue, update its content and position, and then put it into the "visible" queue.

[0084] S7. Based on historical scrolling behavior and current scrolling speed, predict the user's scrolling direction and speed, use an intelligent prediction algorithm, and load the list items in the next visible area in advance.

[0085] S7.1. When the user scrolls the virtual list, collect and record the scrolling direction, scrolling speed and duration data, and use time series analysis to identify the user's scrolling direction and speed distribution;

[0086] Based on the collected data, a prediction algorithm is used to predict where the user might scroll next based on the current scrolling speed and direction;

[0087] When a scroll event occurs, a prediction algorithm is used to estimate the start and end indexes of the next visible area, and the predicted range is dynamically adjusted according to the current scrolling speed and direction;

[0088] Once the next visible area is predicted, the data for that area is immediately loaded asynchronously from the server, caching the most recent and most frequently accessed data segments.

[0089] Specifically, we implement an intelligent prediction algorithm, select a prediction function, and input the scrolling direction, speed, and historical scrolling data. We can use a simple weighted moving average method to predict the next distance the user may scroll, or go a step further and use a machine learning model (such as LSTM) to consider the scrolling history pattern and make a more accurate prediction.

[0090] This embodiment also provides a computer device, which is suitable for the case of an ultra-long list rendering method based on an embedded platform, including: a memory and a processor; the memory is used to store computer-executable instructions, and the processor is used to execute computer-executable instructions to implement the ultra-long list rendering method based on an embedded platform as proposed in the above embodiment.

[0091] The computer device may be a terminal, and the computer device includes a processor, a memory, a communication interface, a display screen and an input device connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, an operator network, NFC (near field communication) or other technologies. The display screen of the computer device may be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device may be a touch layer covering the display screen, or a key, trackball or touchpad provided on the housing of the computer device, or an external keyboard, touchpad or mouse, etc.

[0092] The present embodiment also provides a storage medium having a computer program stored thereon, which, when executed by a processor, implements the method for rendering an extremely long list based on an embedded platform as proposed in the above embodiment; the storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as a static random access memory (SRAM), an electrically erasable programmable read-only memory (EEPROM), an erasable programmable read-only memory (EPROM), a programmable read-only memory (PROM), a read-only memory (ROM), a magnetic storage device, a flash memory, a disk or an optical disk.

[0093] In summary, by using the Duktape engine to run JavaScript on LVGL, efficient rendering and management of list controls are achieved, and only list items in the current visible area are rendered, which significantly reduces memory usage. In addition, the visible area is dynamically calculated and updated to ensure smooth scrolling of the list without lag. At the same time, the flexibility of JavaScript and the efficiency of the Duktape engine are utilized to simplify the difficulty of implementing long list rendering. It also provides a wealth of tunable parameters, allowing developers to balance memory usage and rendering efficiency according to specific needs. It is especially optimized for embedded systems to ensure high performance in resource-constrained environments, effectively filling the gap in existing technologies for rendering ultra-long lists on embedded platforms.

[0094] Example 2

[0095] Referring to Table 1, which is the second embodiment of the present invention, in order to further verify the advancement of the present invention, experimental simulation data of a super-long list rendering method based on an embedded platform are provided.

[0096] The experiment selected two different list rendering technologies for comparison, the traditional list rendering method and the super-long list rendering method proposed in this invention. The experimental environment was set as an embedded device equipped with LVGL graphics library and Duktape JavaScript engine. The screen resolution was 720x1280, and the device had limited memory resources and computing power.

[0097] First, a virtual list containing 10,000 list items is created. Each list item contains a title and a descriptive text. Under the traditional method, all list item data is loaded into the memory at once when it is first loaded. Under the method of the present invention, only the number of pre-loaded items (P=10) and the list item data in the current visible area are loaded;

[0098] Next, during the experiment, a custom performance monitoring tool was used to monitor and record key indicators such as list rendering speed and memory usage in real time. To ensure the accuracy of the test results, each method was tested three times independently and the average value was taken as the final result.

[0099] Finally, we simulated the user's scrolling behavior at different speeds and recorded the list response time and memory consumption, as shown in Table 1:

[0100] Table 1 Experimental record table

[0101]

[0102]

[0103] As can be seen from the above table, the ultra-long list rendering method of the present invention is significantly superior to the traditional method in terms of list response time, memory consumption and average scrolling smoothness score. Specifically, the average list response time of the traditional method is 825ms, while the average response time of the method of the present invention is only 130ms, and the response speed is increased by about 6 times. In terms of memory consumption, the traditional method consumes an average of 12,500KB, while the method of the present invention only consumes 2,523KB, reducing memory usage by nearly 80%. In addition, in terms of the average scrolling smoothness score, the traditional method scored 6.2 points, while the method of the present invention reached 9.5 points, indicating that users can experience a smoother experience when scrolling the list.

[0104] The maximum delay time is also an important indicator for measuring the smoothness of list scrolling. The maximum delay of the traditional method reaches 1200ms, which means that in some cases, there is a significant delay between the user's scrolling operation and the screen response. In contrast, the maximum delay of the method of the present invention is only 210ms, which greatly reduces the sense of delay and improves the user experience.

[0105] It should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention, which should all be included in the scope of the claims of the present invention.

Claims

1. A very long list rendering method based on an embedded platform, characterized in that: include, Set the overall size and visible area size of the list control, and initialize the variables for the number of preloaded items and the size of the visible area; Calculate the index positions of the top and bottom list items in the visible area based on the current scroll position, the height of each list item, and the height of the visible area; Use the Duktape engine to run JavaScript, calculate the height of the visible area, load list items, and update the list item array, dynamically create virtual list items, and replace the real list item content; Use placeholder elements to maintain the list structure and move the current virtual list elements to the real visible area; Initialize the placeholder element, calculate the virtual list elements on the first screen, bind the scroll event to JavaScript, and update the scrolling virtual list elements in real time; By listening to scroll events, the loaded list items are reused and the list items in the visible area are dynamically updated; Based on historical scrolling behavior and current scrolling speed, the user's scrolling direction and speed are predicted, and an intelligent prediction algorithm is used to load the list items in the next visible area in advance.

2. The method for rendering a very long list based on an embedded platform according to claim 1, characterized in that: Set the overall size and visible area size of the list control, and initialize the variables of the number of preloaded items and the size of the visible area. The specific operations are as follows: Create a virtual list control on LVGL, obtain the screen size, and set the width W and height H of the virtual list control; According to the screen resolution and user experience, set the height VH and width VW of the visible area; In the initialization phase, the number of preloaded items is first set to P, and the preprocessor directive is used to fix the number of preloaded items. According to the set visible area size, the inner margin is controlled by adjusting the style of the control to indirectly set the visible area size.

3. The method for rendering a very long list based on an embedded platform as claimed in claim 2, characterized in that: According to the current scroll position, the height of each list item, and the height of the visible area, calculate the index position of the top and bottom list items in the visible area. The specific operations are as follows: Calculate the start index and end index of the visible area by determining the current scroll position S, the height I of each list item, and the height VH of the visible area; Based on the start index and end index positions of the visible area, the preload start index and the preload end index are calculated.

4. The method for rendering a very long list based on an embedded platform as claimed in claim 3, characterized in that: Use the Duktape engine to run JavaScript, calculate the visible area, load list items, and update the list item array. Dynamically create virtual list items and replace the real list item content. The specific operations are as follows: In JavaScript, find the list item with an index between the start index and the end index to determine the current visible area; Load data for list items whose indexes are between the preload start index and the preload end index; In the Duktape engine, JavaScript is used to update the list item array. For the list items that already exist in the array, their contents are updated. For the newly added list items, DOM operations are used to dynamically create HTML elements. After the list items are created, the contents of the list items are replaced with the real list items.

5. The method for rendering a very long list based on an embedded platform as claimed in claim 4, characterized in that: Use placeholder elements to maintain the list structure and move the current virtual list elements to the real visible area. The specific operations are as follows: According to the current scroll position, calculate the starting index and ending index of the virtual list, determine the visible area of ​​the virtual list, use placeholder elements, correspond placeholder elements to each item in the virtual list, and update the position of the placeholder elements in real time when the user scrolls the list; According to the latest start index and end index, the data of the corresponding list item is loaded, and the corresponding DOM element is updated for the list item data changes between the start index and the end index. The updated virtual list item is mapped to the real list item to replace the original content.

6. The method for rendering a very long list based on an embedded platform as claimed in claim 5, characterized in that: Initialize the placeholder element, calculate the virtual list element on the first screen, bind the scroll event to JavaScript, and update the scrolling virtual list element in real time. The specific operations are as follows: After initializing the list, create a placeholder element for each item and calculate the range of the list items within the first screen based on the screen size and the height of the list items; Register a scroll event listener on the virtual list container, listen to the event type in the LVGL system to detect the scroll action, and trigger the scroll update logic in JavaScript in the event callback function to calculate the new start index and end index and update the list item data. Update the data of the list item according to the index, and use the update data function to update the data in the local storage.

7. The method for rendering a very long list based on an embedded platform as claimed in claim 6, characterized in that: By listening to scroll events, reusing loaded list items, and dynamically updating list items in the visible area, the specific operations are as follows: According to the current scroll position, calculate the new start index and end index, create a reusable list item pool, identify the status of each list item, and determine whether it is currently in the visible area and whether it has been recycled into the pool; For list items that are now between the start index and the end index and were not in the visible area before, they are taken out of the pool and their content and position are updated. For list items that are now out of the start index and the end index range, they are marked as invisible and recycled into the list item pool. The user interface is updated synchronously using the request animation frame function.

8. The method for rendering a very long list based on an embedded platform as claimed in claim 7, characterized in that: Based on historical scrolling behavior and current scrolling speed, the user's scrolling direction and speed are predicted, and an intelligent prediction algorithm is used to load the list items in the next visible area in advance. The specific operations are as follows: When the user scrolls the virtual list, the scrolling direction, scrolling speed and duration data are collected and recorded, and the user's scrolling direction and speed distribution are identified by time series analysis; Based on the collected data, a prediction algorithm is used to predict where the user might scroll next based on the current scrolling speed and direction; When a scroll event occurs, a prediction algorithm is used to estimate the start and end indexes of the next visible area, and the predicted range is dynamically adjusted according to the current scrolling speed and direction; Once the next visible area is predicted, the data for that area is immediately loaded asynchronously from the server, caching the most recent and most frequently accessed data segments.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method for rendering a very long list based on an embedded platform according to any one of claims 1 to 8 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for rendering a very long list based on an embedded platform according to any one of claims 1 to 8 are implemented.

Images