An applet-oriented picture resource recycling method, device and medium

Abstract

The application relates to the technical field of artificial intelligence, and discloses a picture resource recycling method and device for a small program and a medium, which comprises the following steps: obtaining picture resources of a target small program, extracting metadata corresponding to each picture in the picture resources, and encapsulating the metadata into a picture component; determining a picture visible area of the target small program based on the access demand of a target user, determining picture attribute values corresponding to the metadata in the picture component through a visible timestamp of the picture visible area; calculating the space-time weight of each picture in the picture resources according to the picture attribute values, screening the pictures in the picture resources according to the space-time weight and the picture attribute values, and obtaining candidate pictures for recycling; listening to the memory state of the target small program, determining a picture recycling proportion threshold of the target small program according to the memory state; determining a target recycling picture in the candidate pictures for recycling according to the picture recycling proportion threshold, and performing a recycling operation on the target recycling picture. The application can improve the picture memory utilization rate.

Description

Technical Field

[0001] This invention relates to the field of artificial intelligence technology, and in particular to a method, device and medium for image resource recycling in mini-programs. Background Technology

[0002] With the diversification of smart devices, the memory capacity of smartphones, tablets and other devices varies. As a lightweight application running in the host software, the memory space that can be allocated to mini programs is limited. For example, some mini programs need to load a large number of images. If idle images are not recycled in time, it can easily cause memory overflow.

[0003] Existing image resource recycling technologies rely on developers manually destroying image resources by monitoring the page lifecycle. However, these technologies cannot handle dynamically loaded scenarios or evict the least accessed resources based on timestamps. For example, in e-commerce mini-programs, product list pages and detail pages need to display a large number of high-definition images. When users quickly scroll through the product list, images in non-visible areas are still consuming memory and network resources, causing page lag and loading timeouts. Therefore, the impact of resource size on memory is not considered, resulting in a low memory utilization rate due to neglecting resource size in image memory management. Summary of the Invention

[0004] This invention provides a method, device, and medium for image resource recycling in mini-programs, with the main purpose of solving the problem of low memory utilization caused by ignoring resource size in image memory management.

[0005] To achieve the above objectives, the present invention provides a method for image resource recycling in mini-programs, comprising: Obtain the image resources of the target mini-program, extract the metadata corresponding to each image in the image resources, and encapsulate the metadata into an image component; The visible area of ​​the image in the target mini-program is determined based on the access needs of the target user, and the image attribute value corresponding to the metadata in the image component is determined by the visible timestamp of the visible area of ​​the image. The spatiotemporal weight of each image in the image resource is calculated based on the image attribute values. The images in the image resource are then filtered based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling. Monitor the memory status of the target mini-program and determine the image recycling ratio threshold of the target mini-program based on the memory status; The target image to be recycled is determined from the candidate images for recycling based on the image recycling ratio threshold, and the recycling operation is performed on the target image to be recycled.

[0006] Optionally, determining the visible area of ​​the target mini-program's images based on the target user's access needs includes: The access page of the target mini-program is determined based on the access requirements of the target users; Listen for scroll events of the accessed page and determine the page scroll distance based on the scroll events; Identify the layout position information in the access page, and determine the image viewing area of ​​the target mini-program based on the layout position information and the page scroll distance.

[0007] Optionally, determining the image attribute value corresponding to the metadata in the image component through the visible timestamp of the visible area of ​​the image includes: The image observer component is invoked based on the image's visible area; The viewport overlap ratio of the image component is determined using the image observer component; The visible timestamp and visual attribute values ​​of the image component are determined based on the viewport crossover ratio; Monitor the target user's actions and determine the lock attribute value of the image component in the visible area of ​​the image based on the actions. The image component's metadata is assigned attribute values ​​based on the visible timestamp, the visible attribute value, and the locked attribute value to obtain the image attribute value.

[0008] Optionally, calculating the spatiotemporal weight of each image in the image resource based on the image attribute values ​​includes: Identify the image size in the image attribute values; The spatiotemporal weight of each image in the image resource is calculated based on the visible timestamp of the visible area of ​​the image and the image size.

[0009] Optionally, the step of filtering images in the image resource based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling includes: Identify the visible attribute values ​​and locked attribute values ​​in the image attribute values; When the visibility attribute value of an image in the image resource is a preset first target attribute, the images in the image resource are collected into a first image set; When the locked attribute value of an image in the image resource is the second target attribute, the images in the image resource are collected into a second image set; The first image set and the second image set are deleted from the image resources to obtain the target image set; Extract the spatiotemporal weight of each image in the target image set, and sort each image in the target image set in descending order of the spatiotemporal weight; Each image in the sorted target image set is used as a candidate image for recycling.

[0010] Optionally, determining the image recycling ratio threshold of the target mini-program based on the memory state includes: The memory usage of the target mini-program is determined based on the memory status. The memory status is classified according to the memory occupancy rate and the preset occupancy threshold to obtain the memory status level; Identify the memory release ratio corresponding to the memory status level, and determine the image recycling ratio threshold of the target mini-program based on the memory release ratio.

[0011] Optionally, determining the target image to be recycled from the candidate images based on the image recycling ratio threshold includes: Calculate the target memory usage of all images in the candidate images for recycling; The target memory release amount of the candidate images to be recycled is calculated based on the image recycling ratio threshold and the target memory occupancy rate. The memory release amount of the candidate images to be recycled is calculated according to the image order of the candidate images to be recycled; When the amount of memory released for the images equals the amount of memory released for the target, the candidate images for recycling will be used as the target images for recycling.

[0012] Optionally, the step of performing the recovery operation on the target image includes: Identify the original image attributes corresponding to the target recycled image; Destroy the original image corresponding to each of the target recycled images one by one, and update the original image attribute of the destroyed target recycled image to the thumbnail attribute; After the destruction operation, determine whether the target user has a page rollback request; When a target user makes a page rollback request, the original image lazy loading is triggered based on the original image attributes, and the metadata in the image component is updated based on the original image lazy loading. When the target user does not have a page rollback request, the image placeholder status in the target mini-program is determined based on the thumbnail attribute. Based on the image placeholder status, the page layout parameters in the target mini-program are locked, and the image display status in the target mini-program is updated according to the page layout parameters.

[0013] To address the above problems, the present invention also provides an electronic device, the electronic device comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, which enables the at least one processor to perform the image resource recycling method for mini-programs described above.

[0014] To address the aforementioned problems, the present invention also provides a computer-readable storage medium storing at least one computer program, which is executed by a processor in an electronic device to implement the image resource recycling method for mini-programs described above.

[0015] This invention abstracts scattered image data into unified component objects, achieving standardized resource management. It delineates visible areas based on user access needs, marks image visibility duration with timestamps, and updates image attribute values. This ensures that images within the visible area are currently the resources to be rendered, while images outside the visible area are potential reclaimable resources, preventing the reclamation of images currently being viewed and guaranteeing a better user experience. A spatiotemporal weight is obtained through a linear combination of a time decay coefficient and a size penalty factor, quantifying image reclamation priority. Normal, warning, and emergency states and corresponding reclamation ratio thresholds are defined, and dynamic control through these thresholds prevents mini-program crashes due to insufficient memory, improving stability. A target memory release amount ensures that reclamation operations meet memory optimization requirements while avoiding excessive reclamation. Therefore, the image resource reclamation method, device, and medium proposed in this invention for mini-programs can solve the problem of low memory utilization caused by neglecting resource size in image memory management. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating a method for image resource recycling in mini-programs according to an embodiment of the present invention. Figure 2 This is a schematic diagram of the process for monitoring the visibility of image elements according to an embodiment of the present invention; Figure 3 This is a schematic diagram of the spatiotemporal weight calculation process provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of an image filtering process provided in an embodiment of the present invention; Figure 5 This is a schematic diagram of a memory pressure detection process provided in an embodiment of the present invention; Figure 6 This is a flowchart illustrating memory pressure levels according to an embodiment of the present invention; Figure 7 This is a schematic diagram of the thumbnail collaborative loading process provided in an embodiment of the present invention; Figure 8This is a schematic diagram of the structure of an electronic device that implements the image resource recycling method for mini-programs according to an embodiment of the present invention.

[0017] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0018] It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0019] This application provides a method for image resource recycling in mini-programs. The executing entity of this method includes, but is not limited to, at least one of the following electronic devices that can be configured to execute the method provided in this application: a server, a terminal, etc. In other words, the image resource recycling method for mini-programs can be executed by software or hardware installed on a terminal device or a server device, and the software can be a blockchain platform. The server includes, but is not limited to, a single server, a server cluster, a cloud server, or a cloud server cluster. The server can be an independent server or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms.

[0020] Reference Figure 1 The diagram shown is a flowchart illustrating a method for image resource recycling in mini-programs according to an embodiment of the present invention. In this embodiment, the image resource recycling method for mini-programs includes: S1. Obtain the image resources of the target mini-program, extract the metadata corresponding to each image in the image resources, and encapsulate the metadata into an image component.

[0021] In this embodiment of the invention, the image resources refer to various image files used for display, interaction, or function implementation in the development of mini-programs. They are image files stored in binary data form that can be rendered and displayed by mini-programs and are one of the core elements of interface visual design and information transmission.

[0022] In detail, image resources of the target mini-program can be obtained from a pre-stored storage area using computer statements with data scraping capabilities (such as Java statements, Python statements, etc.), where storage includes, but is not limited to, databases and blockchains.

[0023] Furthermore, in order to identify and manage image resources, image metadata is modeled, which determines the metadata corresponding to each image in the image resource.

[0024] In this embodiment of the invention, the data structure of each image in the image resource is interface ImageMeta {lastVisibleTime: number; imageSize: number; isInViewport: boolean; isPinned: boolean;}, where the metadata includes lastVisibleTime, which is the last visible timestamp of the image (ms); imageSize, which is the image size (KB); isInViewport, which indicates whether the image is located in the visible area; and isPinned, which indicates whether the image is manually locked (e.g., the user is editing it).

[0025] In detail, the metadata corresponding to each image in the image resource can be retrieved from a pre-stored storage area using computer statements with data scraping capabilities (such as Java statements, Python statements, etc.), where storage includes, but is not limited to, databases and blockchains.

[0026] Furthermore, image elements are encapsulated into components, each containing meta metadata, enabling developers to efficiently use and manage image resources in different scenarios.

[0027] In this embodiment of the invention, the image component is a reusable code unit that encapsulates image resources and related metadata together, providing a unified interface and behavior. That is, designing component interfaces and component templates, loading elements into component interfaces and component templates, and obtaining image components.

[0028] In detail, image elements can be encapsulated using preset encapsulation plugins, including but not limited to Javascript encapsulation plugins and jQuery encapsulation plugins; after encapsulating the image elements, the encapsulation parameters can be obtained, including but not limited to the objects, classes, and methods of the backup package.

[0029] For example, by using cloud object storage to store original product images, thumbnails, and high-resolution detail images, resources can be shared across multiple terminals (mini-programs and apps). Mini-programs can obtain image resources on demand through cloud APIs (such as wx.cloud.getTempFileURL), avoiding local storage pressure. AI image recognition tools are used to extract product image metadata in batches, automatically identify image size and format, and calculate size. The importance of images is analyzed through user browsing behavior data, and the visualization time is dynamically updated. The metadata of high-click-rate product images is encapsulated into a priority loading component to ensure that popular product images are quickly rendered on the first screen when users enter the mini-program, reducing bounce rate.

[0030] Furthermore, based on user goals, it is possible to identify which pages and images in the target mini-program are of core interest, avoiding a one-size-fits-all approach to loading. Moreover, mini-programs have limited memory and network resources; blindly loading all images would cause page lag. By focusing on the visible area based on user needs, on-demand loading can be achieved, improving page smoothness.

[0031] S2. Determine the visible area of ​​the target mini-program's images based on the access needs of the target user, and determine the image attribute values ​​corresponding to the metadata in the image component through the visible timestamp of the visible area.

[0032] In this embodiment of the invention, the visible image area refers to the image area currently within the user's visible range on the mini-program page, that is, the part of the image that the user can directly see on the current screen, excluding areas hidden outside the screen due to page scrolling or layout.

[0033] In this embodiment of the invention, determining the visible area of ​​the target mini-program's images based on the target user's access requirements includes: The access page of the target mini-program is determined based on the access requirements of the target users; Listen for scroll events of the accessed page and determine the page scroll distance based on the scroll events; Identify the layout position information in the access page, and determine the image viewing area of ​​the target mini-program based on the layout position information and the page scroll distance.

[0034] In detail, through user research (questionnaires, interviews), behavioral data (click heatmaps, page dwell time), or business scenario segmentation, the core tasks of the target users are clearly defined. For example, e-commerce users will browse product list pages and view product detail pages. User needs are then mapped to specific pages. For example, the need to purchase clothing corresponds to product list pages and product detail pages. The clothing images on these pages are the key visible area management objects. The scroll event provided by the mini program is used to obtain the page scrolling status in real time. When the user scrolls the page, the event will return parameters such as scrollTop (scrolling distance from the top of the page) and scrollLeft (scrolling distance from the left side of the page) to calculate the scrolling distance. The scrolling distance represents the number of pixels that the top of the page scrolls down. For example, if the initial state of the page is scrollTop=0, after the user scrolls down 100px, scrollTop=100. This value is used to determine whether the image has entered the visible area.

[0035] Specifically, the physical location information of image nodes is obtained using the mini-program API, including the pixel values ​​of the top and bottom of the image relative to the top of the page, as well as the image's width and height. Visibility is then determined by combining this with the scroll distance. Assuming the screen height is screenHeight and the page scroll distance is scrollTop, the logic for determining the visible area of ​​an image is as follows: if the top position of the image is less than or equal to scrollTop + screenHeight and the bottom position is greater than or equal to scrollTop, the image is considered to be in the visible area; otherwise, the image is considered to be outside the visible area. This allows the visible area of ​​images in the target mini-program to be determined based on user access requirements.

[0036] Furthermore, to ensure that images currently being viewed by users, such as product images being previewed, are not recycled and to avoid lag caused by frequent reloading, it is necessary to analyze each image component based on its image attribute values, so that resource allocation is more aligned with user behavior.

[0037] In this embodiment of the invention, the image attribute value refers to the attribute in the image component metadata that is related to the visual state and the basic image.

[0038] In this embodiment of the invention, determining the image attribute value corresponding to the metadata in the image component through the visible timestamp of the visible area of ​​the image includes: The image observer component is invoked based on the image's visible area; The viewport overlap ratio of the image component is determined using the image observer component; The visible timestamp and visual attribute values ​​of the image component are determined based on the viewport crossover ratio; Monitor the target user's actions and determine the lock attribute value of the image component in the visible area of ​​the image based on the actions. The image component's metadata is assigned attribute values ​​based on the visible timestamp, the visible attribute value, and the locked attribute value to obtain the image attribute value.

[0039] In detail, the `createIntersectionObserver` API is used to set an observer for each image. The `this` pointer indicates the instance of the current page or component, which is used to specify the context of the observer and determine whether the image has entered the visible area. That is, when the image component is initialized, the observer is created and associated with the target image node. This is achieved by designing the `observeAll` field corresponding to the configuration object. Setting `observeAll` to `true` means that the observer will observe all elements that match the selector, not just the first matching element. Based on `relativeToViewport()`, the reference area for observation is specified as the viewport, which is the page area visible to the user. `observe('.image-item', callback)` is used to start observing all elements with the class name `.image-item`. The `data-id` attribute value of the observed element is obtained through `res.dataset.id` and assigned to the variable `id`. `res.intersectionRatio` represents the intersection ratio between the observed element and the viewport. The intersection ratio represents the proportion of the area of ​​the overlapping part of the image and the viewport to the total area of ​​the image. The intersection ratio directly reflects the visibility of the image and is used to determine whether the image needs to be loaded or updated for visibility time.

[0040] Specifically, when `res.intersectionRatio` is greater than 0, it means that at least part of the element has entered the viewport; when `res.intersectionRatio` is less than or equal to 0, it means that the element has completely left the viewport. The current timestamp is recorded as `lastVisibleTime`, and the image's visibility attribute value is analyzed. The visibility timestamp (`lastVisibleTime`) is the time point (milliseconds) when the image last entered the visible area, used to calculate the time decay factor in the weight formula. The visibility attribute (`isVisible`) is a boolean value indicating whether the image is currently within the visible area, affecting the loading strategy. The system also captures user interaction with the image, such as clicking to preview or long-pressing to zoom in, to determine whether the user has locked the image. The locking attribute (`isLocked`) is a boolean value indicating whether the image has been locked by user operations (such as previewing or zooming) to prevent it from being reclaimed. When `isLocked = true`, even if the image leaves the visible area, it will not be reclaimed, ensuring smooth user operation. The calculated `lastVisibleTime`, `isVisible`, and `isLocked` are then synchronized to the image component's metadata, allowing the generation of attribute values ​​for each image.

[0041] Reference Figure 2The diagram illustrates the process of monitoring the visibility of image elements. It involves modeling image metadata, constructing image-related metadata, and creating an observer to track the image. This is a tool used to observe the state of image elements, periodically monitoring their visibility, and iterating through the image elements to examine each type of element contained within them. Visibility listeners are bound, setting up a mechanism to monitor whether image elements are visible. The current visibility state of an image element is determined; if it is confirmed to be visible, the last visible time (lastVisibleTime) is updated; if it is not visible, it is marked for recycling and the image is marked to leave the viewport.

[0042] Furthermore, since mini-programs have limited memory at runtime, it is necessary to use unified metrics to determine the importance of images and avoid the blindness of manually configuring recycling strategies. The recycling priority can be adjusted in real time based on user behavior (such as browsing and clicking) and image attributes (such as size), rather than a fixed strategy.

[0043] S3. Calculate the spatiotemporal weight of each image in the image resource based on the image attribute values, and filter the images in the image resource based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling.

[0044] In this embodiment of the invention, the spatiotemporal weight refers to a quantitative indicator for measuring the priority of image resource recycling. By comprehensively considering the time dimension of the image, i.e., the last visible time and the spatial dimension, i.e., the size, the higher the weight value, the less important the image is, and the more it should be recycled or uninstalled.

[0045] In this embodiment of the invention, calculating the spatiotemporal weight of each image in the image resource based on the image attribute values ​​includes: Identify the image size in the image attribute values; Calculate the spatiotemporal weight of each image in the image resource based on the visible timestamp of the visible area of ​​the image and the image size: in, The spatiotemporal weights are... The time decay coefficient, As a size penalty factor, For the current time, The visible timestamp, The image size is specified.

[0046] In detail, the visible timestamp refers to the last time the image appeared. This time is assigned when the image is rendered and can be obtained through IntersectionObserver or scroll event listeners. The image size refers to the physical size of the image, which can be obtained through the local file system or HTTP headers.

[0047] Specifically, the time decay coefficient controls the degree of influence of the time factor, with a default value of 0.7, while the size penalty factor controls the degree of influence of the size factor, with a default value of 0.3. The time interval (milliseconds) is converted to seconds before being used in the calculation; longer intervals have higher weights. Image sizes (KB) are converted to MB to eliminate unit differences; higher weight values ​​indicate less important images, which are then prioritized for recycling. Furthermore, this can be adjusted based on the business scenario. and It can flexibly handle different types of images.

[0048] Reference Figure 3 The diagram illustrates the spatiotemporal weight calculation process. For the calculation of spatiotemporal weights, the current time data is first collected, and then the influencing factors related to the time dimension are calculated based on the obtained current time. Size factor related to image dimensions The time factor and size factor are combined and calculated according to the set weight allocation rules to obtain the final weight value used for measurement (i.e., time-space weight).

[0049] Furthermore, mini-programs have strict memory limits during runtime, and indiscriminate recycling can lead to a decline in user experience. A filtering mechanism ensures that only the safest resources are released, avoiding the recycling of images that users may need immediately (such as images they are about to scroll to or are currently previewing), thus reducing reload latency.

[0050] In this embodiment of the invention, the candidate images for recycling refer to the set of images that are marked by the system as having resources that can be released preferentially, based on the spatiotemporal weight and attribute values ​​(visibility, lock status) of the images when the mini program is running.

[0051] In this embodiment of the invention, the step of filtering images in the image resource according to the spatiotemporal weight and the image attribute value to obtain candidate images for recycling includes: Identify the visible attribute values ​​and locked attribute values ​​in the image attribute values; When the visibility attribute value of an image in the image resource is a preset first target attribute, the images in the image resource are collected into a first image set; When the locked attribute value of an image in the image resource is the second target attribute, the images in the image resource are collected into a second image set; The first image set and the second image set are deleted from the image resources to obtain the target image set; Extract the spatiotemporal weight of each image in the target image set, and sort each image in the target image set in descending order of the spatiotemporal weight; Each image in the sorted target image set is used as a candidate image for recycling.

[0052] In detail, the visibility and locking attribute values ​​are identified. The visibility attribute value indicates whether the image is within the visible area, while the locking attribute value indicates whether the image has been locked by user operation. That is, images with isVisible = false are filtered out, meaning they are not currently within the visible area. Even if these images are reclaimed, the user will not immediately notice. Images with isLocked = true are also filtered out, such as images that are being previewed, zoomed in, or edited. These images are actively operated by the user, and reclaiming them may cause anomalies. The first image set (visible images) and the second image set (locked images) are excluded from all images, resulting in a set of images that are neither visible nor locked. The target image set is then sorted in descending order of weight, with higher weights being reclaimed first.

[0053] In addition, refer to Figure 4 The diagram shows the process of image filtering. Images that meet certain conditions are selected from a large number of images as candidates. The candidate images are then sorted from high to low according to a pre-set weighting rule based on their spatiotemporal weight. The sorted images are processed one by one to perform recycling operations. Finally, the WebP format thumbnails of the recycled images are selected and retained as the images left after the final recycling process.

[0054] Specifically, the system protects images that the user is currently interacting with by locking attributes, preventing flickering or reloading caused by accidental recycling. The recycling priority is adjusted in real time based on user behavior, such as accelerating the recycling of invisible images when scrolling quickly. In addition, it combines spatiotemporal weights to prioritize the recycling of large-sized images that have not been used for a long time, thereby achieving efficient memory utilization.

[0055] For example, based on historical order data (access volume during the midday peak of 11:00-13:00 and the evening peak of 17:00-19:00 in the past 3 months), differentiated weight calculation rules are set for different time periods. During peak hours, users frequently swipe to browse nearby merchants. Images of the top 20 best-selling merchants within 3km are loaded quickly, while images of low-selling merchants beyond 5km are freed up. The cloud manages image resources through Kubernetes containerization, synchronizing the isInViewport (visibility attribute) and isPinned (locked attribute) of images in real time. Images of merchants currently on the screen (isInViewport=true) and images of stores saved by the user (isPinned=true) are excluded. The remaining images are sorted in descending order of spatiotemporal weight, and the "top 40% by weight" are selected as candidates for recycling (such as large-size images of merchants beyond 5km during the early morning hours).

[0056] Furthermore, since mini-programs may crash when memory is insufficient, the monitoring state can trigger a recycling strategy in advance to avoid abnormal exits, and adjust image quality, animation effects, etc. in real time according to the memory pressure to ensure smooth application operation.

[0057] S4. Monitor the memory status of the target mini-program and determine the image recycling ratio threshold of the target mini-program based on the memory status.

[0058] In this embodiment of the invention, the memory state refers to the device memory usage during the mini-program's runtime. Memory warning events can be listened to via wx.onMemoryWarning, and a three-level memory state for the target mini-program can be defined, as shown below. Figure 5 The diagram shows the process flow of memory stress detection. The three memory states are: Normal (memory usage <70%): periodic detection, triggering a scan every 30 seconds; Warning (70% ≤ memory usage <90%): immediately release 20% of non-core memory; Emergency (memory usage ≥90%): forcibly release 50% of memory and suspend unnecessary preloading.

[0059] Furthermore, different memory pressures require different recycling efforts, and the specific amount of images to be recycled can be determined based on the memory status.

[0060] In this embodiment of the invention, the image recycling ratio threshold refers to the proportion of image resources that need to be recycled according to the current memory state in the mini-program's memory management, relative to the total image resources.

[0061] In this embodiment of the invention, determining the image recycling ratio threshold of the target mini-program based on the memory state includes: The memory usage of the target mini-program is determined based on the memory status. The memory status is classified according to the memory occupancy rate and the preset occupancy threshold to obtain the memory status level; Identify the memory release ratio corresponding to the memory status level, and determine the image recycling ratio threshold of the target mini-program based on the memory release ratio.

[0062] In detail, memory usage rate refers to the memory space currently occupied by the target mini-program. The memory usage rate is compared with a memory usage threshold to determine the memory status level: memory usage <70%, memory status level is normal; 70% ≤ memory usage <90%, memory status level is warning; memory usage ≥90%, memory status level is emergency. (Refer to...) Figure 6The diagram shows the flow chart for memory pressure levels. When the memory level is normal, the memory release ratio is 20%; when the memory status level is warning, the memory release ratio is 20%; and when the memory status level is emergency, the memory release ratio is 50%. Thus, the image recycling ratio threshold for the target mini-program can be determined: the memory release ratio is 20%, and the image recycling ratio threshold is 20%; the memory release ratio is 50%, and the image recycling ratio threshold is 50%.

[0063] Furthermore, the recycling ratio threshold clarifies the amount of memory that needs to be released, preventing excessive image recycling from causing frequent reloading during subsequent browsing and affecting the user experience. It ensures that the amount of memory released is just enough to meet the current memory pressure requirements, avoiding resource waste or insufficient release.

[0064] S5. Determine the target image to be recycled from the candidate images based on the image recycling ratio threshold, and perform a recycling operation on the target image.

[0065] In this embodiment of the invention, the target recycled images refer to the set of images that need to be actually uninstalled, selected from the candidate recycled images based on memory release requirements.

[0066] In this embodiment of the invention, determining the target image to be recovered from the candidate images based on the image recovery ratio threshold includes: Calculate the target memory usage of all images in the candidate images for recycling; The target memory release amount of the candidate images to be recycled is calculated based on the image recycling ratio threshold and the target memory occupancy rate. The memory release amount of the candidate images to be recycled is calculated according to the image order of the candidate images to be recycled; When the amount of memory released for the images equals the amount of memory released for the target, the candidate images for recycling will be used as the target images for recycling.

[0067] In detail, the target memory usage rate refers to the proportion of the total memory usage of candidate images to the total memory of images in the mini program. The target memory release amount = total memory of images in the mini program × image release ratio threshold. For example, if the total memory of images is 100MB and the release ratio threshold is 30%, then the target release amount is 30MB. The candidate images are sorted in descending order according to their spatiotemporal weights, with higher weights being released first. The memory usage of each image is accumulated sequentially until the cumulative value reaches or exceeds the target release amount. When the cumulative released memory is greater than or equal to the target release amount, the currently counted candidate images are the target images to be released. That is, the target release amount is calculated based on the memory pressure level. For example, in emergency mode, 50% of the current memory is released. The candidate list is traversed, and the memory released is accumulated until the target value is reached.

[0068] In addition, if the last image causes the release volume to exceed the target value, a strategy can be selected based on the business scenario: either include the image to ensure sufficient release volume, or remove the image to avoid over-release.

[0069] Furthermore, the candidate list is traversed, and memory is released cumulatively until the target value is reached, while WebP format thumbnails (≤10KB) are retained. Thumbnails are mainly used for images outside the visible area. The images may not have been loaded yet, or they may have been loaded and recycled.

[0070] In this embodiment of the invention, the recycling operation performed on the target image refers to releasing memory by destroying the original image resources or replacing them with thumbnails.

[0071] In this embodiment of the invention, the operation of retrieving the target image includes: Identify the original image attributes corresponding to the target recycled image; Destroy the original image corresponding to each of the target recycled images one by one, and update the original image attribute of the destroyed target recycled image to the thumbnail attribute; After the destruction operation, determine whether the target user has a page rollback request; When a target user makes a page rollback request, the original image lazy loading is triggered based on the original image attributes, and the metadata in the image component is updated based on the original image lazy loading. When the target user does not have a page rollback request, the image placeholder status in the target mini-program is determined based on the thumbnail attribute. Based on the image placeholder status, the page layout parameters in the target mini-program are locked, and the image display status in the target mini-program is updated according to the page layout parameters.

[0072] In detail, the original image attributes include key metadata of the original image, such as src: original image URL (remote) or path (local), size: original image size (KB), etc., and destroy the original image corresponding to the target recycled image one by one, and replace the metadata src of the image component with the thumbnail URL and mark it as a thumbnail. The thumbnail is for the user experience, so that the user's page can maintain the original layout after the user has not loaded an image or the image has been recycled.

[0073] Specifically, by listening to the `onPageScroll` event or route event of the mini-program, it is determined whether the user scrolls back the page. When the user scrolls back the page, if the image enters the visible area, the original image is reloaded, the metadata is updated to the original image attributes, and `lastVisibleTime` is reset. Lazy loading controls memory growth at the source. When the user scrolls to a certain area, the image elements in that area are loaded. When the user leaves that area, a memory alert is used to determine whether images not currently in the visible area need to be recycled. When the target user does not have a page scrollback request, the transition state of the thumbnail display remains in place, thus implementing a dual caching mechanism for the original image and the thumbnail. This destroys the original image to release a large amount of memory, while using a low-occupancy thumbnail to maintain the integrity of the interface. When recycling, the thumbnail replaces the original image to avoid blank flickering. When scrolling back, the original image is lazy-loaded to restore details and reduce perceived latency.

[0074] Furthermore, referring to Figure 7 The diagram shows the process of thumbnail collaborative loading. After the original image is destroyed, the image recycling action has ended, or in order to maintain the stability of the placeholder layout, the src is replaced with a Base64 thumbnail. When the user scrolls back to the recycled area, the original image is automatically lazy-loaded and the metadata is updated. If it is determined that no rollback is needed, the current placeholder state is maintained (using a Base64 thumbnail as a placeholder, without loading the original image), and the temporary state of page layout and resource display is maintained.

[0075] For example, in the scenario of timely image recycling in a food delivery mini-program, popular merchant images during lunch / dinner peak hours (such as the top 10 best-selling items within 3km) can be statistically analyzed, and images are automatically recycled during off-peak hours. The cloud switches high-priority images based on the weather, such as images for "Rainy Day Special Offers". The mini-program only retains images relevant to the current time period. Based on the user's historical order time and preferences, images of nearby hot pot restaurants are loaded 30 minutes in advance. Images of non-target merchants are recycled first. During peak hours, the memory of non-popular merchant images is released to ensure that users can quickly swipe to view nearby merchants. Images from off-peak hours such as early morning are significantly recycled, reducing the mini-program's background memory usage.

[0076] Furthermore, in the scenario of efficient temporary image recycling in customer service, when the conversation between customer service and user ends (e.g., the problem has been resolved), the collection of the problem screenshot uploaded by the user is automatically triggered. Before recycling, screenshots containing user nicknames and mobile phone numbers are desensitized (e.g., blurred) and then completely deleted. Temporary images are only retained for 2 hours, and are forcibly recycled after the timeout, without occupying long-term memory, avoiding the long-term retention of problem screenshots uploaded by users, protecting user privacy. During peak customer service conversation periods (e.g., a surge in after-sales inquiries), temporary image memory is released to ensure normal loading of new conversations (improving customer service response speed).

[0077] like Figure 8The diagram shown is a structural schematic of an electronic device that implements a method for recycling image resources for mini-programs, according to an embodiment of the present invention.

[0078] The electronic device may include a processor 10, a memory 11, a communication bus 12, and a communication interface 13. It may also include a computer program stored in the memory 11 and capable of running on the processor 10, such as an image resource recycling program for a mini-program.

[0079] In some embodiments, the processor 10 may be composed of integrated circuits, such as a single packaged integrated circuit or multiple integrated circuits with the same or different functions, including combinations of one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and various control chips. The processor 10 is the control unit of the electronic device, connecting various components of the entire electronic device through various interfaces and lines. It executes programs or modules stored in the memory 11 (e.g., executing an image resource recycling program for a mini-program) and calls data stored in the memory 11 to perform various functions of the electronic device and process data.

[0080] The memory 11 includes at least one type of readable storage medium, including flash memory, portable hard drive, multimedia card, card-type memory (e.g., SD or DX memory), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 11 can be an internal storage unit of an electronic device, such as a portable hard drive. In other embodiments, the memory 11 can be an external storage device of the electronic device, such as a plug-in portable hard drive, Smart Media Card (SMC), Secure Digital (SD) card, Flash Card, etc. Furthermore, the memory 11 can include both internal and external storage units of the electronic device. The memory 11 can be used not only to store application software and various types of data installed on the electronic device, such as code for image resource recycling programs for mini-programs, but also to temporarily store data that has been output or will be output.

[0081] The communication bus 12 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. This bus can be divided into an address bus, a data bus, a control bus, etc. The bus is configured to enable communication between the memory 11 and at least one processor 10, etc.

[0082] The communication interface 13 is used for communication between the aforementioned electronic device and other devices, including a network interface and a user interface. Optionally, the network interface may include a wired interface and / or a wireless interface (such as a Wi-Fi interface, Bluetooth interface, etc.), typically used to establish communication connections between the electronic device and other electronic devices. The user interface may be a display, an input unit (such as a keyboard), or optionally, a standard wired or wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, or an OLED (Organic Light-Emitting Diode) touchscreen, etc. The display may also be appropriately referred to as a screen or display unit, used to display information processed in the electronic device and to display a visual user interface.

[0083] The figure only shows an electronic device with components. Those skilled in the art will understand that the structure shown in the figure does not constitute a limitation on the electronic device and may include fewer or more components than shown, or combine certain components, or have different component arrangements.

[0084] For example, although not shown, the electronic device may also include a power supply (such as a battery) to power the various components. Preferably, the power supply can be logically connected to the at least one processor 10 through a power management device, thereby enabling functions such as charging management, discharging management, and power consumption management. The power supply may also include one or more DC or AC power supplies, recharging devices, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components. The electronic device may also include various sensors, Bluetooth modules, Wi-Fi modules, etc., which will not be described in detail here.

[0085] It should be understood that the embodiments described are for illustrative purposes only and are not limited to this structure in the scope of the patent application.

[0086] The image resource recycling program for the mini-program stored in the memory 11 of the electronic device is a combination of multiple instructions. When run in the processor 10, it can achieve the following: Obtain the image resources of the target mini-program, extract the metadata corresponding to each image in the image resources, and encapsulate the metadata into an image component; The visible area of ​​the image in the target mini-program is determined based on the access needs of the target user, and the image attribute value corresponding to the metadata in the image component is determined by the visible timestamp of the visible area of ​​the image. The spatiotemporal weight of each image in the image resource is calculated based on the image attribute values. The images in the image resource are then filtered based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling. Monitor the memory status of the target mini-program and determine the image recycling ratio threshold of the target mini-program based on the memory status; The target image to be recycled is determined from the candidate images for recycling based on the image recycling ratio threshold, and the recycling operation is performed on the target image to be recycled.

[0087] Specifically, the specific implementation method of the processor 10 for the above instructions can be referred to the description of the relevant steps in the corresponding embodiment of the accompanying drawings, and will not be repeated here.

[0088] Furthermore, if the modules / units integrated into the electronic device are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. The computer-readable storage medium can be volatile or non-volatile. For example, the computer-readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a portable hard drive, a magnetic disk, an optical disk, a computer memory, or a read-only memory (ROM).

[0089] The present invention also provides a computer-readable storage medium storing a computer program, which, when executed by a processor of an electronic device, can perform the following: Obtain the image resources of the target mini-program, extract the metadata corresponding to each image in the image resources, and encapsulate the metadata into an image component; The visible area of ​​the image in the target mini-program is determined based on the access needs of the target user, and the image attribute value corresponding to the metadata in the image component is determined by the visible timestamp of the visible area of ​​the image. The spatiotemporal weight of each image in the image resource is calculated based on the image attribute values. The images in the image resource are then filtered based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling. Monitor the memory status of the target mini-program and determine the image recycling ratio threshold of the target mini-program based on the memory status; The target image to be recycled is determined from the candidate images for recycling based on the image recycling ratio threshold, and the recycling operation is performed on the target image to be recycled.

[0090] In the several embodiments provided by this invention, it should be understood that the disclosed devices, media, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and other division methods may be used in actual implementation.

[0091] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0092] Furthermore, the functional modules in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in the form of hardware plus software functional modules.

[0093] It will be apparent to those skilled in the art that the present invention is not limited to the details of the exemplary embodiments described above, and that the present invention can be implemented in other specific forms without departing from the spirit or essential characteristics of the present invention.

[0094] Therefore, the embodiments should be regarded as exemplary and non-limiting in all respects. The scope of the invention is not limited to the foregoing description, and all variations within the meaning and scope of equivalents falling within the protection scope are intended to be included in the invention.

[0095] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0096] Furthermore, it is clear that the word "including" does not exclude other units or steps, and the singular does not exclude the plural. Multiple units or devices described in the system can also be implemented by a single unit or device through software or hardware. Terms such as "first," "second," etc., are used to indicate names and do not indicate any specific order.

[0097] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit it. Although the present invention has been described in detail with reference to preferred embodiments, those skilled in the art should understand that modifications or equivalent substitutions can be made to the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention.

Claims

1. A method for image resource recycling in WeChat Mini Programs, characterized in that, The method includes: Obtain the image resources of the target mini-program, extract the metadata corresponding to each image in the image resources, and encapsulate the metadata into an image component; The visible area of ​​the image in the target mini-program is determined based on the access needs of the target user, and the image attribute value corresponding to the metadata in the image component is determined by the visible timestamp of the visible area of ​​the image. The spatiotemporal weight of each image in the image resource is calculated based on the image attribute values. The images in the image resource are then filtered based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling. Monitor the memory status of the target mini-program and determine the image recycling ratio threshold of the target mini-program based on the memory status; The target image to be recycled is determined from the candidate images for recycling based on the image recycling ratio threshold, and the recycling operation is performed on the target image to be recycled.

2. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The process of determining the visible area of ​​images in the target mini-program based on the access needs of the target user includes: The access page of the target mini-program is determined based on the access requirements of the target users; Listen for scroll events of the accessed page and determine the page scroll distance based on the scroll events; Identify the layout position information in the access page, and determine the image viewing area of ​​the target mini-program based on the layout position information and the page scroll distance.

3. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The step of determining the image attribute value corresponding to the metadata in the image component through the visible timestamp of the visible area of ​​the image includes: The image observer component is invoked based on the image's visible area; The viewport overlap ratio of the image component is determined using the image observer component; The visible timestamp and visual attribute values ​​of the image component are determined based on the viewport crossover ratio; Monitor the target user's actions and determine the lock attribute value of the image component in the visible area of ​​the image based on the actions. The image component's metadata is assigned attribute values ​​based on the visible timestamp, the visible attribute value, and the locked attribute value to obtain the image attribute value.

4. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The step of calculating the spatiotemporal weight of each image in the image resource based on the image attribute values ​​includes: Identify the image size in the image attribute values; The spatiotemporal weight of each image in the image resource is calculated based on the visible timestamp of the visible area of ​​the image and the image size.

5. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The step of filtering images in the image resources based on the spatiotemporal weights and the image attribute values ​​to obtain candidate images for recycling includes: Identify the visible attribute values ​​and locked attribute values ​​in the image attribute values; When the visibility attribute value of an image in the image resource is a preset first target attribute, the images in the image resource are collected into a first image set; When the locked attribute value of an image in the image resource is the second target attribute, the images in the image resource are collected into a second image set; The first image set and the second image set are deleted from the image resources to obtain the target image set; Extract the spatiotemporal weight of each image in the target image set, and sort each image in the target image set in descending order of the spatiotemporal weight; Each image in the sorted target image set is used as a candidate image for recycling.

6. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The step of determining the image recycling ratio threshold of the target mini-program based on the memory state includes: The memory usage of the target mini-program is determined based on the memory status. The memory status is classified according to the memory occupancy rate and the preset occupancy threshold to obtain the memory status level; Identify the memory release ratio corresponding to the memory status level, and determine the image recycling ratio threshold of the target mini-program based on the memory release ratio.

7. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The step of determining the target image to be recovered from the candidate images based on the image recovery ratio threshold includes: Calculate the target memory usage of all images in the candidate images for recycling; The target memory release amount of the candidate images to be recycled is calculated based on the image recycling ratio threshold and the target memory occupancy rate. The memory release amount of the candidate images to be recycled is calculated according to the image order of the candidate images to be recycled; When the amount of memory released for the images equals the amount of memory released for the target, the candidate images for recycling will be selected as the target images for recycling.

8. The image resource recycling method for mini-programs as described in claim 1, characterized in that, The process of reclaiming the target image includes: Identify the original image attributes corresponding to the target recycled image; Destroy the original image corresponding to each of the target recycled images one by one, and update the original image attribute of the destroyed target recycled image to the thumbnail attribute; Determine whether the target user has a page rollback request after the destruction operation; When a target user makes a page rollback request, the original image lazy loading is triggered based on the original image attributes, and the metadata in the image component is updated based on the original image lazy loading. When the target user does not have a page rollback request, the image placeholder status in the target mini-program is determined based on the thumbnail attribute. Based on the image placeholder status, the page layout parameters in the target mini-program are locked, and the image display status in the target mini-program is updated according to the page layout parameters.

9. An electronic device, characterized in that, The electronic device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the image resource recycling method for a mini-program as described in any one of claims 1 to 8.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the image resource recycling method for mini-programs as described in any one of claims 1 to 8.

Images