Cache method, device and storage medium for front-end resources

Abstract

The application discloses a front-end resource caching method, equipment and a storage medium. The front-end resource caching method comprises the following steps: obtaining initial front-end resources of a target page based on the first access to the target page, wherein the initial front-end resources comprise image resources and initial resource information; extracting pixel data of images in the image resources to obtain an initial pixel array; performing compression coding processing on the initial pixel array to obtain initial coding data; and storing the initial coding data and the initial resource information correspondingly to obtain a cache file. The above scheme can optimize the caching of front-end resources and improve the page access efficiency.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, in particular to a front-end resource caching method, device and storage medium. BACKGROUND

[0002] In the technical field of front-end development, caching front-end resources is a very important performance optimization scheme, which can significantly improve page loading speed.

[0003] Currently, front-end resources are mainly cached through the browser cache of the client, but browser cache data usually occupies a large amount of storage space, so that cache data is often cleared, causing the client to need to reacquire data from the server, affecting page access efficiency.

[0004] Therefore, there is an urgent need for a caching method to optimize the caching of front-end resources and improve page access efficiency. SUMMARY

[0005] The present application provides at least a front-end resource caching method, device, equipment and computer readable storage medium.

[0006] The first aspect of the present application provides a front-end resource caching method, comprising: based on the first access to a target page, obtaining initial front-end resources of the target page, the initial front-end resources including image resources and initial resource information; extracting pixel data of images in the image resources to obtain an initial pixel array; performing compression and encoding processing on the initial pixel array to obtain initial encoding data; and storing the initial encoding data and the initial resource information correspondingly to obtain a cache file.

[0007] In an embodiment, the step of extracting pixel data of images in the image resources to obtain an initial pixel array comprises: performing block processing on the images in the image resources to obtain a plurality of image blocks; mapping the pixel data in each image block to a preset matrix to obtain a pixel matrix corresponding to each image block; performing data decomposition processing based on the pixel matrix to obtain a plurality of pixel frequency bands; and encoding the pixel frequency bands to obtain the initial pixel array.

[0008] In an embodiment, the step of performing compression and encoding processing on the initial pixel array to obtain initial encoding data comprises: performing serialization processing on the data in the initial pixel array to obtain a string corresponding to the initial pixel array; converting each character in each string into a binary value; and respectively splicing the binary values in each string to obtain the initial encoding data.

[0009] In an embodiment, the method further comprises: based on re-accessing the target page, obtaining current resource information of a current front-end resource in the target page, the re-accessing being a page access other than the first access; based on the current resource information and initial resource information corresponding to the initial encoded data in the cache file, determining whether the initial encoded data is valid; if yes, performing decoding processing on the initial encoded data to obtain an initial front-end resource of the target page.

[0010] In an embodiment, the initial resource information comprises an initial resource version number, the current resource information comprises a current resource version number, and the step of determining whether the initial encoded data is valid based on the current resource information and the initial resource information corresponding to the initial encoded data in the cache file comprises: comparing the current resource version number and the initial resource version number to obtain a comparison result; if the comparison result indicates that the current resource version number and the initial resource version number are the same, it is determined that the initial encoded data in the cache file is valid; if the comparison result indicates that the current resource version number and the initial resource version number are different, it is determined that the initial encoded data in the cache file is invalid.

[0011] In an embodiment, after the step of determining that the initial encoded data in the cache file is invalid, the method further comprises: obtaining a current front-end resource of the target page; extracting pixel data of an image resource in the current front-end resource to obtain a current pixel array; performing compression and encoding processing on the current pixel array to obtain current encoded data; and updating the cache file based on the current encoded data and current resource information of the current front-end resource.

[0012] In an embodiment, the step of performing decoding processing on the initial encoded data to obtain an initial front-end resource of the target page comprises: converting the initial encoded data into a string; and performing decoding based on the string to obtain the initial front-end resource.

[0013] In an embodiment, the method further comprises: obtaining a current cache data amount of the cache file; and if the current cache data amount is greater than or equal to a preset upper limit of cache capacity, performing cache cleaning processing based on cache times of each cache data in the cache file in sequence.

[0014] The second aspect of the present application provides a front-end resource caching device, comprising: an acquisition module configured to acquire initial front-end resources of a target page based on a first access to the target page, wherein the initial front-end resources comprise image resources and initial resource information; an extraction module configured to extract pixel data of images in the image resources to obtain an initial pixel array; a compression and encoding module configured to perform compression and encoding processing on the initial pixel array to obtain initial encoding data; and a storage module configured to store the initial encoding data and the initial resource information correspondingly to obtain a cache file.

[0015] The third aspect of the present application provides an electronic device comprising a memory and a processor, wherein the processor is configured to execute program instructions stored in the memory to implement the front-end resource caching method described above.

[0016] The fourth aspect of the present application provides a computer-readable storage medium having program instructions stored thereon, wherein the program instructions are executed by a processor to implement the front-end resource caching method described above.

[0017] The above scheme, in the process of first accessing a target page, acquires initial resources of the target page, extracts pixel data of image resources in the initial resources to obtain an initial pixel array, and performs data compression on the image resources; performs data compression again by performing compression and encoding processing on the initial pixel array to obtain initial encoding data; and stores the initial encoding data and initial resource information correspondingly to obtain a cache file, thereby being capable of performing multiple compression on the image resources, reducing the size of the cache file, and achieving front-end resource caching optimization.

[0018] It should be understood that the foregoing general description and the following detailed description are merely exemplary and explanatory, rather than limiting the present application. BRIEF DESCRIPTION OF DRAWINGS

[0019] The accompanying drawings, which are incorporated into and form part of the specification, illustrate embodiments consistent with the present application and, together with the specification, serve to explain the technical solutions of the present application.

[0020] Figure 1 is a flowchart of an exemplary embodiment of the front-end resource caching method of the present application;

[0021] Figure 2 is a flowchart of another exemplary embodiment of the front-end resource caching method of the present application;

[0022] Figure 3 is a block diagram of the front-end resource caching device shown in an exemplary embodiment of the present application;

[0023] Figure 4is a structural schematic diagram of an embodiment of an electronic device of the present application.

[0024] Figure 5 is a structural schematic diagram of an embodiment of a computer readable storage medium of the present application. DETAILED DESCRIPTION

[0025] The scheme of the embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0026] In the following description, specific details such as specific system structures, interfaces, techniques, etc. are presented in order to provide a thorough understanding of the present application for the sake of explanation, but not for the sake of limitation.

[0027] The term "and / or" herein merely describes an association relationship of associated objects, and means that there can be three relationships, for example, A and / or B can mean that A exists alone, A and B exist together, and B exists alone. In addition, the character " / " herein generally represents that the front and rear associated objects are in an "or" relationship. In addition, "multiple" herein means two or more than two. In addition, the term "at least one" herein means any one of multiple or any combination of at least two of multiple, for example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0028] Please refer to Figure 1 , Figure 1 is a flowchart of an exemplary embodiment of a cache method of a front-end resource of the present application. Specifically, it can include the following steps:

[0029] In step S110, based on the first access to the target page, the initial front-end resource of the target page is obtained, and the initial front-end resource includes image resources and initial resource information.

[0030] The front-end resource mainly refers to the static resource in the target page, which can be understood as the resource for fixed display of the front-end page, which includes image resources, HTML, CSS, JS, etc. In the embodiments of the present application, image caching is taken as an example for description. The static resource does not need to be processed by a program and can be directly displayed on the page. Among them, the image resource includes an image and an image identifier, and the image identifier image-key is a unique identifier of the image. It can be generated based on the src path (source) of the image resource and a random string when the developer compiles the static resource, and uploaded to the server side. Specifically, in the code compilation stage, the src path of the image image tag is obtained, the src path is converted into a 36-bit string, the front of the 36-bit string is padded with 0 to make the total length 8 bits, and then a 4-bit random string is generated. The above two strings are spliced into a 12-bit string, which is used as the unique identifier of the image tag.

[0031] The initial front-end resource refers to the front-end resource of the target page obtained by accessing the target page for the first time, which can be understood as the initial front-end resource. The initial front-end resource and the current front-end resource are differentiated in name for the sake of convenience of description. The initial front-end resource and the current front-end resource only differ in the access time of page access. In fact, the data content of the initial front-end resource and the data content of the current front-end resource can be the same or different.

[0032] The initial resource information mainly refers to the information related to the initial front-end resource, including the resource version number of the initial front-end resource, the timestamp of the initial front-end resource, etc., which are usually determined during the web development and web deployment process of the developer.

[0033] It should be noted that, in the process of accessing the target page deployed on the server side by the client, the client uses the web browser to connect to the server through the network, initiates an access request to the server side using the HTTP protocol to inform the server which page needs to be accessed at present; after the server receives the access request, the server will return the front-end resource to the client according to the access request; after the client receives the front-end resource, the browser renders and parses the front-end resource, displays the target page in the browser, and also generates the corresponding browser cache.

[0034] Exemplarily, for the method of judging whether the target page is accessed for the first time, the Cookie file can be queried. The Cookie file is a small text file that stores data on the client side for the purpose of identifying users and tracking sessions. The information is temporarily or permanently saved by the client, which is not described here.

[0035] Specifically, based on the first access to the target page, the initial front-end resource of the target page is obtained, such as the image resource, the resource version number and the timestamp, etc.

[0036] In step S120, the pixel data of the image in the image resource is extracted to obtain an initial pixel array.

[0037] Exemplarily, the image is subjected to wavelet transform processing to decompose the image into several frequency bands. Each frequency band is encoded into pixel data using entropy encoding, wherein entropy encoding is a lossless data compression method that encodes the data in the frequency band to reduce the amount of data after encoding by using the statistical characteristics of the data. The pixel data obtained by entropy encoding is stored in a preset two-dimensional array to obtain an initial pixel array. Each element in the two-dimensional array represents the pixel data of a pixel point, which can include four values of the RGBA color model: red, green, blue and transparency.

[0038] It can be seen that the pixel data of the image is stored in the form of the initial pixel array, which compresses the data amount of the image and further reduces the size of the cache file.

[0039] In step S130, the initial pixel array is compressed and encoded to obtain initial encoding data.

[0040] Specifically, the process of compressing and encoding the initial pixel array includes converting the initial pixel array into a string form, for each character in the string, the character can be converted by referring to the ASCII (American Standard Code for Information Interchange) code table to obtain the binary value corresponding to each character, wherein the ASCII code table is a set of computer coding systems based on Latin letters, which defines a unique binary value corresponding to each character; the binary values corresponding to all characters in the string are spliced to obtain a binary string, so that the string is represented as a string of binary numbers; the binary string is segmented according to a preset segmentation length (such as 8-bit or 16-bit binary numbers) to obtain a plurality of character blocks, which are equivalent to each character block containing 8-bit or 16-bit binary numbers; the binary numbers in each character block are converted into hexadecimal numbers, and the hexadecimal numbers of all character blocks are spliced to obtain the initial encoding data. Thus, the image is compressed, and the cache space occupied when the image resource is cached is reduced.

[0041] In step S140, the initial encoding data and the initial resource information are stored correspondingly to obtain a cache file.

[0042] Specifically, after obtaining the initial encoding data, the client generates a data table file in plain text format on a local storage medium (such as a local disk), including four columns of fields of image identification, image encoding data, resource version number, and timestamp, and stores the image identification corresponding to the initial encoding data, the initial encoding data, the resource version number in the initial resource information, and the timestamp into the corresponding fields in the data table to obtain the cache file.

[0043] As can be seen, in the process of first accessing the target page, the initial resource of the target page is obtained, the pixel data of the image resource in the initial resource is extracted to obtain the initial pixel array, and the image resource is data compressed; the initial pixel array is compressed and encoded to further data compressed to obtain the initial encoding data; the initial encoding data and the initial resource information are stored correspondingly to obtain the cache file, so that the image resource can be compressed multiple times, the size of the cache file is reduced, and the cache optimization of the front-end resource is realized.

[0044] On the basis of the above-mentioned embodiments, the present embodiment further illustrates the step of extracting pixel data of images in the image resource to obtain an initial pixel array. Specifically, the method of the present embodiment comprises the following steps:

[0045] The images in the image resource are divided into blocks to obtain a plurality of image blocks; the pixel data in each image block is mapped to a preset matrix to obtain a pixel matrix corresponding to each image block; data decomposition processing is performed based on the pixel matrix to obtain a plurality of pixel frequency bands; and the pixel frequency bands are encoded to obtain an initial pixel array.

[0046] In combination with the foregoing embodiments, the method of the present embodiment uses the 2D context object method getContext(“2d”) to obtain images in the image resource, divides the images in the image resource into blocks to obtain a plurality of image blocks, wherein the images can be divided into blocks according to a preset N*N block threshold to obtain a plurality of N*N pixel image blocks. Since different image blocks in the image can have different characteristics and frequency distributions, dividing the image and independently processing each image block can better capture the local details of the image. Moreover, when data transmission errors or image damage occur, only the affected image blocks need to be repaired or retransmitted, without the need to operate on the entire image, thereby improving the processing efficiency of the image processing process.

[0047] Further, each image block is color quantized, and the color quantization process includes limiting the initial color value of each pixel point in the image block to K discrete color values, converting the continuous color in the image block to discrete color, reducing the data volume of the image processing process, and discretizing the continuous color space into a limited color set. A color mapping table is constructed, and the construction process includes constructing a K*K matrix based on the color set after color quantization, each element in the matrix representing the relationship between two discrete color values in the image block, obtaining the color mapping table. Each row and each column of the matrix usually corresponds to a discrete color value in the image block, and each element in the matrix represents the mapping relationship or similarity between the corresponding row and column discrete color values. This matrix can be used to describe the similarity, difference or other characteristics of the color of each pixel point in the image block. According to the initial color value of each pixel point in the image block, the closest target color value is found in the color mapping table, and the original color value in the image block is replaced based on the found target color value to realize color mapping of the image block, and obtain the pixel matrix of each image block.

[0048] Further, each image block is color quantized, and the color quantization process includes limiting the initial color value of each pixel point in the image block to K discrete color values, converting the continuous color in the image block to discrete color, reducing the data volume of the image processing process, and discretizing the continuous color space into a limited color set. A color mapping table is constructed, and the construction process includes constructing a K*K matrix based on the color set after color quantization, each element in the matrix representing the relationship between two discrete color values in the image block, obtaining the color mapping table. Each row and each column of the matrix usually corresponds to a discrete color value in the image block, and each element in the matrix represents the mapping relationship or similarity between the corresponding row and column discrete color values. This matrix can be used to describe the similarity, difference or other characteristics of the color of each pixel point in the image block. According to the initial color value of each pixel point in the image block, the closest target color value is found in the color mapping table, and the original color value in the image block is replaced based on the found target color value to realize color mapping of the image block, and obtain the pixel matrix of each image block.

[0048] Further, each image block is color quantized, and the color quantization process includes limiting the initial color value of each pixel point in the image block to K discrete color values, converting the continuous color in the image block to discrete color, reducing the data volume of the image processing process, and discretizing the continuous color space into a limited color set. A color mapping table is constructed, and the construction process includes constructing a K*K matrix based on the color set after color quantization, each element in the matrix representing the relationship between two discrete color values in the image block, obtaining the color mapping table. Each row and each column of the matrix usually corresponds to a discrete color value in the image block, and each element in the matrix represents the mapping relationship or similarity between the corresponding row and column discrete color values. This matrix can be used to describe the similarity, difference or other characteristics of the color of each pixel point in the image block. According to the initial color value of each pixel point in the image block, the closest target color value is found in the color mapping table, and the original color value in the image block is replaced based on the found target color value to realize color mapping of the image block, and obtain the pixel matrix of each image block.

[0049] It can be seen that the embodiment reduces the representation amount of image data by dividing the image of the initial front-end resource into a plurality of image blocks, and then performing color quantization, color mapping, wavelet transform, and entropy encoding on each image block, thereby realizing compression and encoding of the image.

[0050] On the basis of the above embodiment, the step of compressing and encoding the initial pixel array to obtain the initial encoding data is further described. Specifically, the embodiment method comprises the following steps:

[0051] serializing the data in the initial pixel array to obtain a string corresponding to the initial pixel array; converting each character in the string into a binary value; and splicing the binary values in the string to obtain the initial encoding data.

[0052] The serialization method can be JSON serialization. JSON (JavaScript Object Notation) is a lightweight data exchange format, easy for humans to read and write, and easy for machines to parse and generate, and effectively improves network transmission efficiency. Serialization is the process of converting a data structure or object into a binary string (byte sequence), that is, converting an object with a certain structure into a form that can be stored or transmitted.

[0053] In combination with the foregoing embodiment, the initial pixel array of each image block is converted into a string using the JSON serialization method. Each character in the converted string can be converted into a binary value according to the ASCII code table, and the binary values corresponding to each character in the string are spliced to obtain a binary string corresponding to each string. The binary string is divided according to a preset division length (for example, 8-bit or 16-bit binary numbers), to obtain a plurality of character blocks, which are equivalent to each character block containing 8-bit or 16-bit binary numbers. The binary numbers in each character block are converted into hexadecimal numbers to further compress the binary string, and the hexadecimal numbers of the character blocks of all strings are spliced to obtain the initial encoding data representing the entire image. Thus, the image is compressed, and the cache space occupied by the image resource during caching is reduced.

[0054] It should be noted that the initial encoding data can be transmitted or stored, and when needed, decoding operations such as deserialization can be performed to restore the image resource in the initial front-end resource to display the image.

[0055] On the basis of the above embodiment, the step of compressing and encoding the initial pixel array to obtain the initial encoding data is further described. Specifically, the embodiment method comprises the following steps: Figure 2 , Figure 2is a flowchart of another exemplary embodiment of the cache method of the front-end resource of the present application, and the method of the present application embodiment further comprises the following steps:

[0056] In step S210, based on the re-access to the target page, the current resource information of the current front-end resource in the target page is obtained. The re-access is a page access other than the first access.

[0057] The re-access is a page access other than the first access, such as second access, third access, etc. The current resource information of the current front-end resource and the image identifier of the image in the image resource of the current front-end resource are obtained when the re-access is performed.

[0058] The current front-end resource refers to the front-end resource of the target page when the target page is accessed (re-accessed) currently. It can be understood as the current front-end resource. It should be noted that the current front-end resource and the initial front-end resource are the front-end resources of the target page when the target page is accessed at different access times. The resource content of the current front-end resource and the initial front-end resource can actually be the same or different. For example, if the front-end resource of the target page has not been updated, the current front-end resource and the initial front-end resource are the same. If the front-end resource of the target page is updated after the first access to the target page, the current front-end resource and the initial front-end resource are different.

[0059] By way of example, in combination with step S110, it can be determined by the Cookie file whether the current access to the target page is a re-access. If the access to the target page is a re-access, only the current resource information of the current front-end resource in the target page is obtained, and the complete front-end resource of the target page is not obtained or loaded. In addition to the current resource version number of the current resource information, the image identifier is also obtained.

[0060] In step S220, based on the current resource information and the initial resource information corresponding to the initial encoding data in the cache file, it is determined whether the initial encoding data is valid.

[0061] Specifically, the current resource information of the current front-end resource and the initial resource information in the cache file are compared to determine whether the current resource information and the initial resource information in the cache file are the same, so as to determine whether the current front-end resource of the target page has been modified or updated compared with the initial front-end resource, and further determine whether the initial encoding data in the cache file is valid.

[0062] In step S230, if yes, the initial encoding data is decoded to obtain the initial front-end resource of the target page.

[0063] If the initial encoding data in the cache file is valid, the client does not need to request and load the current front-end resource of the target page from the server, but directly decodes the valid initial encoding data in the cache file, such as deserialization operation, to obtain the initial front-end resource of the target page, and displays the initial front-end resource in the target page.

[0064] It can be seen that, when the target page is accessed again, the current resource information of the current front-end resource of the target page is obtained first, instead of obtaining the complete current front-end resource of the target page; whether the current resource information of the target page and the initial resource information in the cache file are the same is determined, and then whether the initial resource information in the cache file is valid is determined; if the initial resource information in the cache file is still valid, the initial resource information in the cache file is directly decoded to obtain the initial front-end resource of the target page, and the initial front-end resource is displayed in the target page; the front-end resource of the target page is obtained and loaded from the local cache file, which is faster than requesting and loading the front-end resource of the target page from the server through the network, and the page access efficiency is improved.

[0065] On the basis of the above embodiment, the step of determining whether the initial encoding data is valid based on the current resource information and the initial resource information corresponding to the initial encoding data in the cache file is further described, wherein the initial resource information includes an initial resource version number, and the current resource information includes a current resource version number. Specifically, the method of the embodiment includes the following steps:

[0066] The current resource version number and the initial resource version number are compared to obtain a comparison result; if the comparison result indicates that the current resource version number and the initial resource version number are the same, it is determined that the initial encoding data in the cache file is valid; if the comparison result indicates that the current resource version number and the initial resource version number are different, it is determined that the initial encoding data in the cache file is invalid.

[0067] The resource version number refers to a preset version number of the front-end resource, which is equivalent to the identification of the front-end resource. In general, when a developer modifies or updates the front-end resource of the target page, the resource version number will also change.

[0068] Therefore, when judging whether the current front-end resource and the initial front-end resource are the same, the current resource version number of the current front-end resource and the initial resource version number of the initial front-end resource can be compared to determine whether the current front-end resource is modified or updated; if the current resource version number and the initial resource version number are the same, it is proved that the front-end resource currently used by the target page and the initial front-end resource stored in the cache file are the same, that is, the initial front-end resource stored in the cache file is valid, and the cached initial front-end resource can be directly displayed in the target page; if the current resource version number and the initial resource version number are different, it is proved that the front-end resource currently used by the target page and the initial front-end resource stored in the cache file are different, and the current front-end resource of the target page can be modified or updated, that is, the initial front-end resource stored in the cache file is invalid, so it is necessary to reacquire and load the current front-end resource of the target page, and the same data processing is performed on the current front-end resource according to the data processing method performed on the initial front-end resource in the foregoing embodiments, so as to perform data replacement update in the cache file based on the current encoding data and the current resource information of the current front-end resource, or perform data addition in the cache file.

[0069] On the basis of the foregoing embodiments, the step after judging that the initial encoding data in the cache file is invalid is further described in the embodiments of the present application. Specifically, the method of the embodiments further includes the following steps:

[0070] The current front-end resource of the target page is acquired; the pixel data of the image resource in the current front-end resource is extracted to obtain a current pixel array; compression and encoding processing is performed on the current pixel array to obtain current encoding data; and the cache file is updated based on the current encoding data and the current resource information of the current front-end resource.

[0071] In combination with the foregoing embodiments, it is illustrated that if it is judged that the initial encoding data in the cache file is invalid, the initial front-end resource cannot be decoded from the initial encoding data cached in the cache file and displayed in the target page, so the cached data needs to be updated.

[0072] Specifically, the current front-end resource and the current resource information of the target page are acquired; the pixel data of the image resource in the current front-end resource is extracted to obtain a current pixel array; compression and encoding processing is performed on the current pixel array to obtain current encoding data; and the cache file is updated or data is added in the cache file based on the current encoding data and the current resource information of the current front-end resource. The steps of data processing on the current front-end resource can refer to the description of the steps of data processing on the initial front-end resource in the foregoing embodiments, and will not be described herein.

[0073] On the basis of the above-mentioned embodiments, the step of decoding the initial encoding data to obtain the initial front-end resource of the target page is further described. Specifically, the method of the embodiments further includes the following steps:

[0074] The initial encoding data is converted into a string, and the initial front-end resource is obtained by decoding based on the string.

[0075] In combination with the foregoing embodiments, if the initial encoding data in the cache file is valid, the initial encoding data in the cache file is decoded to obtain the initial front-end resource corresponding to the initial encoding data in the cache file.

[0076] Specifically, the hexadecimal string of the initial encoding data is divided into character blocks according to a fixed length, each character block is converted into corresponding binary digits, the binary digits of each character block are spliced to obtain a binary string, the binary digits in the binary string are grouped according to the division length, for example, each group includes 8-bit binary digits, the binary digits of each group are looked up in an ASCII code table to obtain corresponding characters to obtain a final target string, the target string is converted into a two-dimensional array form, that is, an initial pixel array is obtained, and the image of the image resource in the initial front-end resource is restored based on the initial pixel array, and the obtained image is displayed in the target page.

[0077] It should be noted that in the process of accessing the target page again, the current resource information of the target page obtained includes a current resource version number and an image identifier, the current resource version number is used to determine whether the data in the cache file is valid, and the image identifier is used to find the initial encoding data of the image in the cache file; for the images in different positions of the current front-end resource of the target page, the initial encoding data with the same image identifier is found in the cache file according to the image identifier, and the image decoded based on the initial encoding data is displayed in the target page.

[0078] On the basis of the above-mentioned embodiments, the method of the embodiments of the present application further includes the following steps:

[0079] The current cache data amount of the cache file is obtained, and if the current cache data amount is greater than or equal to the preset upper limit of the cache capacity, the cache cleaning processing is sequentially performed based on the cache time of each cache data in the cache file.

[0080] The cache data in the cache file includes but is not limited to the initial encoding data of the image in the image resource, the image identifier of the image, the resource version number, and the timestamp.

[0081] Exemplarily, in order to avoid that the local cache occupies too much storage space, a cache capacity upper limit can be preset on the client side, and when a cache file is obtained or a cache file is updated each time, it is judged whether the current cache data amount of the cache file is greater than or equal to the cache capacity upper limit. If yes, the corresponding cache data is sequentially removed from early to late according to the time stamp of the cache data in the cache file, so as to make room for new cache data, and also avoid problems such as page access lag or client running lag caused by too much cache.

[0082] Further, a cache time threshold can also be set for the cache file, for example, the cache time threshold is 30 days, and then the invalid or expired cache data in the cache file is cleaned up once every 30 days after the cache file is generated.

[0083] It can be seen that the vehicle driving posture is determined according to the vehicle acceleration, the vehicle deceleration, the vehicle driving direction angle, the steering wheel steering angle and the vehicle speed included in the vehicle state information, so as to improve the accuracy of the vehicle driving posture, so as to dynamically adjust the sound field center in the vehicle cabin according to the vehicle driving posture.

[0084] It should be further explained that the execution subject of the front-end resource caching method can be a front-end resource caching device, for example, the front-end resource caching method can be executed by a terminal device or a server or other processing device, wherein the terminal device can be a user equipment (User Equipment, UE), a computer, a mobile device, a user terminal, a terminal, a cellular phone, a cordless phone, a personal digital assistant (Personal Digital Assistant, PDA), a handheld device, a computing device, a vehicle-mounted device, a wearable device, etc. In some possible implementation manners, the front-end resource caching method can be realized by calling computer readable instructions stored in the memory by the processor.

[0085] Figure 3 is a block diagram of a front-end resource caching device according to an exemplary embodiment of the present application. As Figure 3 shown, the exemplary front-end resource caching device 300 includes an acquisition module 310, an extraction module 320, a compression encoding module 330 and a storage module 340. Specifically:

[0086] The acquisition module 310 is configured to acquire initial front-end resources of a target page based on a first access to the target page, wherein the initial front-end resources include image resources and initial resource information.

[0087] The extraction module 320 is configured to extract pixel data of images in the image resources to obtain an initial pixel array.

[0088] The compression encoding module 330 is configured to perform compression encoding processing on the initial pixel array to obtain initial encoding data.

[0089] The storage module 340 is configured to store the initial encoding data and the initial resource information correspondingly to obtain a cache file.

[0090] In the example cache device of the front-end resource, the initial resource of the target page is obtained in the process of first accessing the target page, the pixel data of the image resource in the initial resource is extracted to obtain an initial pixel array, and data compression is performed on the image resource. The initial pixel array is subjected to compression encoding processing to perform data compression again to obtain initial encoding data. The initial encoding data and the initial resource information are stored correspondingly to obtain a cache file, so that the image resource can be compressed multiple times, the size of the cache file is reduced, and cache optimization of the front-end resource is achieved. The functions of the modules can be referred to the cache method of the front-end resource, which will not be described here.

[0091] Please refer to Figure 4 , Figure 4 is a structural schematic diagram of an embodiment of an electronic device. The electronic device 400 includes a memory 401 and a processor 402. The processor 402 is configured to execute program instructions stored in the memory 401 to implement the steps in any of the above cache method embodiments of the front-end resource. In a specific implementation scenario, the electronic device 400 can include but is not limited to a microcomputer, a server, and in addition, the electronic device 400 can also include a notebook computer, a tablet computer, and the like, without limitation.

[0092] Specifically, the processor 402 is configured to control itself and the memory 401 to implement the steps in any of the above cache method embodiments of the front-end resource. The processor 402 can also be referred to as a CPU (Central Processing Unit). The processor 402 can be an integrated circuit chip with a processing capability of signals. The processor 402 can also be a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field-Programmable Gate Array) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor. In addition, the processor 402 can be implemented by an integrated circuit chip together.

[0093] The scheme has the advantages that in the process of first accessing the target page, the initial resource of the target page is acquired, pixel data of the image resource in the initial resource is extracted, an initial pixel array is obtained, and data compression is performed on the image resource; the initial pixel array is compressed and encoded, data compression is performed again, and initial encoding data is obtained; and the initial encoding data and initial resource information are stored correspondingly to obtain a cache file, so that the image resource can be compressed multiple times, the size of the cache file is reduced, and cache optimization of the front-end resource is achieved.

[0094] Please refer to Figure 5 , Figure 5 is a structural schematic diagram of an embodiment of the computer readable storage medium. The computer readable storage medium 510 stores program instructions 511 capable of being executed by a processor, and the program instructions 511 are used for implementing steps in any of the front-end resource cache method embodiments.

[0095] The scheme has the advantages that in the process of first accessing the target page, the initial resource of the target page is acquired, pixel data of the image resource in the initial resource is extracted, an initial pixel array is obtained, and data compression is performed on the image resource; the initial pixel array is compressed and encoded, data compression is performed again, and initial encoding data is obtained; and the initial encoding data and initial resource information are stored correspondingly to obtain a cache file, so that the image resource can be compressed multiple times, the size of the cache file is reduced, and cache optimization of the front-end resource is achieved.

[0096] In some embodiments, the apparatus provided by the embodiments of the present disclosure has functions or includes modules that can be used to execute the methods described in the above method embodiments, and the specific implementation can refer to the description of the above method embodiments. For brevity, details are not repeated here.

[0097] The above description of each embodiment tends to emphasize the differences between each embodiment, and the same or similar parts can be mutually referred to. For brevity, details are not repeated here.

[0098] In several embodiments provided in the present application, it should be understood that the disclosed method and device can be implemented by other ways. For example, the above-described device implementation is only schematic, for example, the division of the module or unit is only a logical function division, and actual implementation can have another division manner, for example, a unit or component can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the shown or discussed mutual ones can be indirect coupling or communication connection through some interfaces, devices or units, and can be electrical, mechanical or other forms.

[0099] In addition, each of the function units in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit. When the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application, essentially or in the form of a contribution to the prior art, or all or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, and includes several instructions to make a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor execute all or part of the steps of the methods in each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

Claims

1. A cache method of front-end resources, characterized in that, The method comprises: Based on the first access to the target page, obtaining the initial front-end resource of the target page, the initial front-end resource comprising image resources and initial resource information; The images in the image resources are divided into blocks to obtain a plurality of image blocks; the pixel data in each image block is mapped into a preset matrix to obtain a pixel matrix corresponding to each image block; The step of mapping the pixel data in each image block into a preset matrix to obtain a pixel matrix corresponding to each image block comprises: color quantizing the pixel data in each image block to obtain a pixel matrix corresponding to each image block; Based on the pixel matrix, data decomposition processing is performed to obtain a plurality of pixel frequency bands; each pixel frequency band is encoded and stored in a preset two-dimensional array to obtain an initial pixel array corresponding to each image block; The initial pixel array is compressed and encoded to obtain initial encoding data; The initial encoding data and the initial resource information are stored correspondingly to obtain a cache file.

2. The method of claim 1, wherein, The step of compressing and encoding the initial pixel array to obtain initial encoding data comprises: Serializing the data in the initial pixel array to obtain a string corresponding to the initial pixel array; Each character in each string is converted into a binary value; The binary values in each string are spliced to obtain the initial encoding data.

3. The method of claim 1, wherein, The method further comprises: Based on the second access to the target page, obtaining current resource information of the current front-end resource in the target page, the second access being a page access other than the first access; Based on the current resource information and the initial resource information corresponding to the initial encoding data in the cache file, determining whether the initial encoding data is valid; If so, the initial encoding data is decoded to obtain the initial front-end resource of the target page.

4. The method of claim 3, wherein, The initial resource information comprises an initial resource version number, and the current resource information comprises a current resource version number; the step of determining whether the initial encoding data is valid based on the current resource information and the initial resource information corresponding to the initial encoding data in the cache file comprises: Comparing the current resource version number and the initial resource version number to obtain a comparison result; If the comparison result indicates that the current resource version number and the initial resource version number are the same, it is determined that the initial encoding data in the cache file is valid; If the comparison result indicates that the current resource version number and the initial resource version number are different, it is determined that the initial encoding data in the cache file is invalid.

5. The method of claim 4, wherein, After the step of determining that the initial encoding data in the cache file is invalid, the method further comprises: Obtaining the current front-end resource of the target page; Extracting the pixel data of the image resources in the current front-end resource to obtain a current pixel array; Compressing and encoding the current pixel array to obtain current encoding data; Updating the cache file based on the current encoding data and the current resource information of the current front-end resource.

6. The method of claim 3, wherein, The step of decoding the initial encoded data to obtain the initial front-end resource of the target page comprises: converting the initial encoded data into a string; decoding based on the string to obtain the initial front-end resource.

7. The method of claim 1, wherein, The method further comprises: obtaining a current cache data amount of the cache file; if the current cache data amount is greater than or equal to a preset upper limit of cache capacity, performing cache cleaning processing based on cache times of each cache data in the cache file in sequence.

8. An electronic device, comprising: The device comprises a memory and a processor, and the processor is configured to execute program instructions stored in the memory to implement the method of any one of claims 1 to 7.

9. A computer-readable storage medium having stored thereon program instructions, wherein, The program instructions, when executed by the processor, implement the method of any one of claims 1 to 7.

Images