Component rendering method, device, equipment and storage medium

Abstract

The application provides a component rendering method and device, equipment and storage medium, wherein the method comprises: obtaining the identification of a component to be rendered; obtaining the component instance of the component to be rendered according to the identification of the component to be rendered, the first component instance sequence saved in the front-end cache and the second component instance sequence saved in the local cache; saving the component instance of the component to be rendered into the first component instance sequence; and rendering the component to be rendered according to the first component instance sequence. By introducing the local cache into the scene of the front-end component cache, the first component instance sequence in the front-end cache and the second component instance sequence in the local cache are used to jointly save the component data, which can not only realize the fast search and efficient rendering of the component instance, but also solve the problems of excessive front-end memory occupation caused by limited front-end cache resources and poor component state saving effect caused by discarded component instances.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a component rendering method and device, equipment and storage medium. BACKGROUND

[0002] When a user switches a component in a front-end page, in order to improve the user experience, the state of the component in the page needs to be maintained, so that when switching back to the original component, subsequent rendering can be performed based on the state before the original component switches.

[0003] In the prior art, the commonly used method for maintaining the state of the component includes two ways of saving page data in real time and saving component instances in real time. Among them, the way of saving component instances in real time is to cache the component instances of the component in real time to the memory, so that when the user switches to the saved page, the electronic device can directly render according to the cached component instances in the memory, skipping the initialization process.

[0004] However, when the data volume is large, the existing technology for caching front-end components will cause problems such as excessive memory occupation or poor component state saving effect. SUMMARY

[0005] The present application aims at the deficiencies in the prior art, and provides a component rendering method, device, equipment and storage medium to solve the problems of excessive memory occupation and poor component state saving effect in the prior art.

[0006] To achieve the above-mentioned purpose, the technical scheme adopted by the present application is as follows:

[0007] In a first aspect, the present application provides a component rendering method, which comprises:

[0008] Obtaining the identification of a component to be rendered;

[0009] According to the identification of the component to be rendered, the first component instance sequence saved in the front-end cache and the second component instance sequence saved in the local cache, obtaining the component instance of the component to be rendered, the first component instance sequence and the second component instance sequence each including at least one component instance, and the component instances in the first component instance sequence are arranged in time sequence according to rendering;

[0010] Saving the component instance of the component to be rendered to the first component instance sequence;

[0011] Rendering the component to be rendered according to the first component instance sequence.

[0012] Optionally, the obtaining the component instance of the component to be rendered according to the identifier of the component to be rendered, the first component instance sequence stored in the front-end cache and the second component instance sequence stored in the local cache comprises:

[0013] finding the identifier of the component to be rendered in the second component instance sequence and the first component instance sequence;

[0014] if the identifier of the component to be rendered is found, taking the component instance corresponding to the identifier as the component instance of the component to be rendered;

[0015] if the identifier of the component to be rendered is not found, creating the component instance of the component to be rendered.

[0016] Optionally, the saving the component instance of the component to be rendered into the first component instance sequence comprises:

[0017] if the component instance of the component to be rendered exists in the second component instance sequence and the first component instance sequence, deleting the component instance of the component to be rendered from the second component instance sequence or the first component instance sequence and inserting the component instance of the component to be rendered into the first position of the first component instance sequence;

[0018] if the component instance of the component to be rendered does not exist in the second component instance sequence and the first component instance sequence, inserting the component instance of the component to be rendered into the first position of the first component instance sequence.

[0019] Optionally, the rendering the component to be rendered according to the first component instance sequence comprises:

[0020] reading the component instance at the first position of the first component instance sequence;

[0021] performing rendering processing based on the component instance at the first position of the first component instance sequence.

[0022] Optionally, after the saving the component instance of the component to be rendered into the first component instance sequence, the method further comprises:

[0023] determining the actual length of the first component instance sequence at present;

[0024] if the current actual length is greater than or equal to a current length threshold, determining a survival state of a to-be-moved component instance in the first component instance sequence according to time information of the to-be-moved component instance and a current time, wherein the to-be-moved component instance is a last component instance in the first component instance sequence, and the time information comprises a time when the to-be-moved component instance is saved to the first component instance sequence and a survival time of the to-be-moved component instance;

[0025] determining whether to increase or decrease the current length threshold and determining whether to remove and store the to-be-moved component instance to the second component instance sequence according to the survival state of the to-be-moved component instance, the current length threshold and a preset threshold interval.

[0026] Optionally, the determining the survival state of the to-be-moved component instance according to the time information of the to-be-moved component instance and the current time comprises:

[0027] obtaining a current time and determining a time difference between the current time and a time when the to-be-moved component instance is saved to the first component instance sequence;

[0028] if the time difference is less than or equal to the survival time of the to-be-moved component instance, the to-be-moved component instance is a survival component instance;

[0029] if the time difference is greater than the survival time of the to-be-moved component instance, the to-be-moved component instance is a non-survival component instance.

[0030] Optionally, the determining whether to increase or decrease the current length threshold and determining whether to remove and store the to-be-moved component instance to the second component instance sequence according to the survival state of the to-be-moved component instance, the current length threshold and a preset threshold interval comprises:

[0031] if the survival state of the to-be-moved component instance is survival and the current length threshold is less than a maximum value of the threshold interval, it is determined that the current length threshold is increased, and it is determined that the to-be-moved component instance is not removed and stored to the second component instance sequence;

[0032] if the survival state of the to-be-moved component instance is survival and the current length threshold is greater than or equal to the maximum value of the threshold interval, it is determined that the current length threshold is not increased, and it is determined that the to-be-moved component instance is removed and stored to the second component instance sequence;

[0033] if the survival state of the component instance to be moved is not alive, and the current length threshold is greater than the minimum value of the threshold interval, it is determined to decrease the current length threshold, and it is determined to remove and store the component instance to be moved to the second component instance sequence;

[0034] if the survival state of the component instance to be moved is not alive, and the current length threshold is less than or equal to the minimum value of the threshold interval, it is determined not to decrease the current length threshold, and it is determined not to remove and store the component instance to be moved to the second component instance sequence.

[0035] Optionally, after the determination to increase the current length threshold, the method further comprises:

[0036] the result of adding one to the current length threshold is taken as a new current length threshold.

[0037] Optionally, after the determination to decrease the current length threshold, the method further comprises:

[0038] the result of subtracting one from the current length threshold is taken as a new current length threshold.

[0039] Optionally, the method further comprises:

[0040] generating a new component instance in response to a data modification operation of a user;

[0041] determining a component instance corresponding to the new component instance in the first component instance sequence or the second component instance sequence based on the new component instance;

[0042] performing data modification on the component instance corresponding to the new component instance according to the new component instance.

[0043] In a second aspect, the present application provides a component rendering device, the device comprising:

[0044] an acquisition module configured to acquire an identifier of a component to be rendered;

[0045] a searching module configured to obtain a component instance of the component to be rendered according to the identifier of the component to be rendered, a first component instance sequence saved in a front-end cache, and a second component instance sequence saved in a local cache, the first component instance sequence and the second component instance sequence each comprising at least one component instance, and the component instances in the first component instance sequence being arranged in time order of rendering;

[0046] a saving module configured to save the component instance of the component to be rendered into the first component instance sequence;

[0047] a rendering module, configured to render the component to be rendered according to the first component instance sequence.

[0048] Optionally, the searching module is specifically configured to:

[0049] search for the identifier of the component to be rendered in the second component instance sequence and the first component instance sequence;

[0050] if the identifier of the component to be rendered is found, take the component instance corresponding to the identifier as the component instance of the component to be rendered;

[0051] if the identifier of the component to be rendered is not found, create the component instance of the component to be rendered.

[0052] Optionally, the saving module is specifically configured to:

[0053] if the component instance of the component to be rendered exists in the second component instance sequence and the first component instance sequence, delete the component instance of the component to be rendered from the second component instance sequence or the first component instance sequence, and insert the component instance of the component to be rendered into the first position of the first component instance sequence;

[0054] if the component instance of the component to be rendered does not exist in the second component instance sequence and the first component instance sequence, insert the component instance of the component to be rendered into the first position of the first component instance sequence.

[0055] Optionally, the rendering module is specifically configured to:

[0056] read the component instance at the first position of the first component instance sequence;

[0057] perform rendering processing based on the component instance at the first position of the first component instance sequence.

[0058] In a third aspect, the present application provides an electronic device, comprising a processor, a storage medium and a bus, the storage medium stores machine readable instructions executable by the processor, when the electronic device is running, the processor and the storage medium communicate through the bus, and the processor executes the machine readable instructions to perform the steps of the component rendering method.

[0059] In a fourth aspect, the present application provides a computer readable storage medium, the computer readable storage medium stores a computer program, when the computer program is run by a processor, the steps of the component rendering method are performed.

[0060] The beneficial effects of the present application are: by introducing the local cache into the scene of the front-end component cache, using the first component instance sequence in the front-end cache and the second component instance sequence in the local cache to jointly save the component data, the problem of too large front-end memory occupation caused by limited front-end cache resources can be solved. At the same time, saving the component instances in the first component instance sequence according to the rendering time sequence and rendering according to the first component instance sequence makes the electronic device can directly determine the component instance of the component to be rendered from the front-end cache, and since the front-end cache has better performance than the local cache, the efficiency of component rendering can be improved. In addition, since the first component instance sequence in the front-end cache and the second component instance sequence in the local cache are used to jointly save the component data, when the number of components in the front-end cache reaches the threshold and needs to discard the component instances with low access volume, the discarded component instances can be saved by the local cache, so that when the component with low access volume needs to be reopened, the corresponding component instance can be found from the local cache, thereby solving the problem of poor component state saving effect caused by discarded component instances. BRIEF DESCRIPTION OF DRAWINGS

[0061] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings needed in the embodiments will be briefly introduced as follows. It should be understood that the following drawings only show some embodiments of the present application, and therefore should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can also be obtained without creative labor.

[0062] Figure 1 A schematic diagram of a component rendering scene provided by an embodiment of the present application is shown;

[0063] Figure 2 A flowchart of a component rendering method provided by an embodiment of the present application is shown;

[0064] Figure 3 A flowchart of determining a component instance provided by an embodiment of the present application is shown;

[0065] Figure 4 A flowchart of saving a component instance provided by an embodiment of the present application is shown;

[0066] Figure 5 A flowchart of rendering a component instance provided by an embodiment of the present application is shown;

[0067] Figure 6 A flowchart of adjusting the front-end cache threshold and the component instance provided by an embodiment of the present application is shown;

[0068] Figure 7A flow chart of determining the survival state of a component instance is shown in the embodiments of the present application.

[0069] Figure 8 A flow chart of adjusting the front-end cache threshold and the component instance is shown in the embodiments of the present application.

[0070] Figure 9 A flow chart of adjusting the front-end cache threshold and the component instance is shown in the embodiments of the present application.

[0071] Figure 10 A flow chart of modifying the component instance is shown in the embodiments of the present application.

[0072] Figure 11 A structural schematic diagram of a component rendering device is shown in the embodiments of the present application.

[0073] Figure 12 A structural schematic diagram of an electronic device is shown in the embodiments of the present application. DETAILED DESCRIPTION

[0074] To make the objectives, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. It should be understood that the drawings in the present application only serve the purpose of description and illustration, and are not used to limit the protection scope of the present application. In addition, it should be understood that the schematic drawings are not drawn according to the actual proportions. The flow charts in the present application show the operations implemented according to some embodiments of the present application. It should be understood that the operations of the flow charts can not be implemented in sequence, and the steps without logical context relationship can be reversed in sequence or implemented simultaneously. In addition, one or more other operations can be added to the flow charts or removed from the flow charts under the guidance of the content of the present application by those skilled in the art.

[0075] In addition, the described embodiments are only some of the embodiments of the present application, not all the embodiments. The components of the embodiments of the present application described and shown in the drawings herein can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the claimed present application, but only represents selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0076] It should be noted that the term “comprising” will be used in the embodiments of the present application to indicate the presence of the features declared thereafter, but does not exclude the addition of other features.

[0077] In the prior art, component instances of components are cached in real time into memory, usually through an array or a mapping table and the like to cache component instances in real time into memory, so that when the user switches to the saved page, the electronic device can directly render according to the cached component instances in the memory, skip the initialization process, and improve the rendering efficiency.

[0078] Specifically, the front-end page can include multiple components, and for each component, the electronic device can cache a virtual DOM (virtual Document Object Model) corresponding to the component. When rendering the component instance, a virtual DOM tree is first generated, and a real DOM is created according to the virtual DOM tree, and finally the real DOM is mounted to the display interface, so the virtual DOM can be used to represent the component instance. Since the virtual DOM includes components, data, and user-defined operations such as user-defined modified data, when the component needs to be rendered, the corresponding virtual DOM can be found in the cache, and the virtual DOM is rendered to restore the component.

[0079] When a very complex single-page application such as a single-page background management system is encountered, as the number of opened pages increases, the amount of cached data also increases, and therefore there is a conflict between the large memory occupied by the front-end cache and the limited computer memory resources.

[0080] As a possible way, the problem of excessive memory occupation can be solved by filtering. A typical filtering method is to use a Least Recently Used (LRU) filtering strategy to filter.

[0081] The LRU filtering strategy refers to configuring a threshold, which indicates the maximum number of component instances that can be cached. Once the number of cached components reaches the threshold, the least recently accessed instance among the cached component instances will be destroyed before a new component instance is created.

[0082] However, using the LRU filtering strategy can cause some component instances that need to be used to be discarded, thereby losing the original state of the component and resulting in poor component state saving effect.

[0083] Therefore, the current solution cannot simultaneously consider memory occupation and component state saving effect. Therefore, how to well save the component state without occupying too much memory has become a problem to be solved.

[0084] Based on the above problems, the application provides a component rendering method, which introduces a local storage resource into the scenario of component instance cache, uses the first component instance sequence in the front-end cache and the second component instance in the local cache to effectively save and efficiently render the component instance, and dynamically controls the component instance quantity threshold in the front-end cache, thereby improving the utilization of the limited front-end memory resource and improving the saving effect of the component.

[0085] As shown in Figure 1 , it is an application scenario diagram of component rendering provided by the application. In the current display interface, three components Tab A, Tab B and Tab C are included. It is assumed that the user first opens Tab A and edits the data "Hometown-Beijing" in the form of Tab A, and then opens Tab B. The electronic device will save the component instances of Tab A and Tab B in the front-end cache in turn. When the user switches back to Tab A from Tab B, the electronic device will find the component instance of Tab A from the front-end cache and render it to obtain the display interface shown in Figure 1 .

[0086] Next, the component rendering method of the application will be described in combination with Figure 2 . The execution subject of the method can be the electronic device described above, as shown in Figure 2 . The method comprises the following steps.

[0087] S201: Obtain the identifier of a component to be rendered.

[0088] Optionally, the component to be rendered can be the component switched to by the user last time. The identifier of the component to be rendered can be a component ID, which is a universally unique identifier (UUID) and can be a string containing a set of hexadecimal numbers.

[0089] When the user opens a component that has not been opened, the electronic device can take this component as the component to be rendered and calculate the component ID of the component, taking the component ID as the identifier of the component to be rendered.

[0090] As another possible implementation, when the user switches from other components to an opened component, the electronic device can take this opened component as the component to be rendered and calculate the component ID of the component. The component ID can be calculated by an ID generator.

[0091] S202: Obtain a component instance of the component to be rendered according to the identifier of the component to be rendered, the first component instance sequence saved in the front-end cache, and the second component instance sequence saved in the local cache, the first component instance sequence and the second component instance sequence each including at least one component instance, and the component instances in the first component instance sequence arranged in a time sequence of rendering.

[0092] Optionally, the front-end cache can be a front-end memory resource, and the local cache can be a local disk resource. The local cache can include, but is not limited to, localStorage, indexDB, a local file, a local database, and the like. Compared with the front-end cache, the storage resource of the local cache is more generous.

[0093] Optionally, the first component instance sequence can be a sequence formed by at least one component instance arranged in a time sequence of rendering in the front-end cache. The second component instance sequence can be a sequence composed of at least one component instance in the local cache.

[0094] It should be understood that the first component instance sequence can be a queue, a stack, or other forms, as long as the time sequence of rendering of the component instance can be embodied, which is not limited in the present application. The component instances in the second component instance sequence can be arranged in a time sequence of rendering, or can be a sequence obtained without arranging in a time sequence.

[0095] At present, most of the component opening operations of users are switching of components with similar rendering times. For example, the opening sequence of components of a user can be "home page -> list 1 -> detail page 1 -> list 1 -> detail page 2 -> home page". In this scenario, the first component instance sequence saves the component instances of each component in a time sequence of rendering. By arranging the component instances in a time sequence of rendering, it can be ensured that when the user switches the components in this scenario, the electronic device can quickly find and open the components, thereby improving the efficiency of component rendering.

[0096] S203: Save the component instance of the component to be rendered into the first component instance sequence.

[0097] Optionally, when the user opens the component TabA for the first time, the electronic device can save the component instance of TabA into the first component instance sequence after taking TabA as the component to be rendered and initializing the component instance of TabA.

[0098] Optionally, when the user switches back to an opened component, the electronic device can move the component instance of the component from the original position in the first component instance sequence or the second component instance sequence to the first component instance sequence after determining the component instance of the opened component from the first component instance sequence and the second component instance sequence.

[0099] S204: render the component to be rendered according to the first component instance sequence.

[0100] It is worth noting that the electronic device can save the component to be rendered at a specified position in the first component instance sequence, so that the electronic device can directly render the component instance at the position in the first component instance sequence to achieve rendering of the component to be rendered. The specified position may be, for example, the first position of the first component instance sequence.

[0101] Optionally, rendering the component to be rendered can be rendering the component instance of the component to be rendered, that is, drawing the components on the display interface according to the component information of each component in the component instance, and drawing and presenting the user-edited data included in the component instance on the display interface according to the coordinates of the data. The component information of the component can include, for example, the component name, the component type, and the position information of the component on the display interface.

[0102] In the embodiments of the present application, the local cache is also introduced into the cache scenario of the front-end component, and the first component instance sequence in the front-end cache and the second component instance sequence in the local cache are used to jointly save the component data. Since the local cache has more and cheaper storage resources than the front-end cache, the conflict between the large memory occupied by the front-end cache and the limited computer memory resources can be solved when the data volume is large, and the effective saving of the component instance is achieved. At the same time, the component instances are saved in the first component instance sequence in the order of rendering time and rendered according to the first component instance sequence, so that the electronic device can directly determine the component instance of the component to be rendered from the front-end cache. Since the front-end cache has better performance than the local cache, the efficiency of component rendering can be improved. In addition, since the first component instance sequence in the front-end cache and the second component instance sequence in the local cache are used to jointly save the component data, when the number of components in the front-end cache reaches a threshold and the component instances with low access volume need to be discarded, the discarded component instances can be saved by the local cache. Therefore, when the component with low access volume needs to be reopened, the corresponding component instance can be found from the local cache, so that the poor component state saving effect caused by discarding the component instance can be avoided.

[0103] Next, the steps of obtaining the component instance of the component to be rendered according to the identifier of the component to be rendered, the first component instance sequence saved in the front-end cache, and the second component instance sequence saved in the local cache will be described in combination with Figure 3 Figure 3 As shown in FIG. 8, the step S202 includes:

[0104] S301: Find the identifier of the component to be rendered in the second component instance sequence and the first component instance sequence. ​

[0105] It should be noted that the first component instance sequence stores components with high user access, and when the data volume is large, the number of components in the first component instance sequence can be much smaller than the number of components in the second component instance sequence, and therefore, in order to improve the efficiency of the search, the search can be first performed in the first component instance sequence according to the identifier of the component to be rendered, and if the identifier of the component to be rendered is not found, the search is then continued in the second component instance sequence according to the identifier.

[0106] S302: If the identifier of the component to be rendered is found, the component instance corresponding to the identifier is taken as the component instance of the component to be rendered.

[0107] Optionally, if the identifier of the component to be rendered is found in the first component instance sequence or the second component instance sequence, it indicates that the component instance of the component has been saved, and at this time, the component instance corresponding to the identifier can be taken as the component instance of the component to be rendered.

[0108] As another possible implementation, when the user opens multiple components, the component instances of these components are saved in the first component instance sequence or the second component instance sequence. For example, the user opens TabA, TabB, and TabC in sequence, and at this time, the component instances of TabA, TabB, and TabC are saved in the first component instance sequence in sequence. When the user switches from TabC to TabA again, the electronic device takes TabA as the component to be rendered, and searches for TabA in the first component instance sequence and the second component instance sequence according to the component ID of TabA, and determines the component instance corresponding to the component ID in the sequence as the component instance of TabA.

[0109] S303: If the identifier of the component to be rendered is not found, the component instance of the component to be rendered is created.

[0110] Optionally, if the identifier of the component to be rendered is not found in the first component instance sequence or the second component instance sequence, it indicates that the component to be rendered can be a component that is opened for the first time, and at this time, the component instance of the component to be rendered can be created according to the component information and the data information edited by the user, and the component instance is saved in the first component instance sequence.

[0111] As a possible implementation, when the user opens a component tabA that has not been opened before, the first component instance sequence and the second component instance sequence do not include the component instance of TabA, and at this time, the electronic device can take TabA as the component to be rendered, initialize TabA, and create the component instance of TabA according to the component information of TabA.

[0112] The following is a description of the step of saving the component instance of the component to be rendered into the first component instance sequence after determining the component instance of the component to be rendered as described above, as shown in Figure 4 The step S203 described above includes:

[0113] S401: If the component instance of the component to be rendered exists in the second component instance sequence and the first component instance sequence, the component instance of the component to be rendered is deleted from the second component instance sequence or the first component instance sequence, and the component instance of the component to be rendered is inserted into the head of the first component instance sequence.

[0114] When the component to be rendered is a component that has been opened, the component instance of the component to be rendered is saved in the first component instance sequence or the second component instance sequence.

[0115] As a possible implementation, at this time, the component instance of the component to be rendered in the first component instance sequence or the second component instance sequence can be popped out, i.e. the component instance of the component to be rendered is deleted from the sequence, and then inserted into the head of the first component instance sequence.

[0116] As another possible implementation, the component instance of the component to be rendered can be first saved into the head of the first component instance sequence, and then the component instance of the component to be rendered in the first component instance sequence or the second component instance sequence is deleted. The order of deletion and insertion of the component instance is not limited in the present application.

[0117] For example, assuming that the component to be rendered is TabA, and the component ID of TabA is included in the second component instance sequence, at this time, the component instance of TabA in the second component instance sequence can be deleted, and the component instance of TabA is inserted into the head of the first component instance sequence.

[0118] S402: If the component instance of the component to be rendered does not exist in the second component instance sequence and the first component instance sequence, the component instance of the component to be rendered is inserted into the head of the first component instance sequence.

[0119] When the component to be rendered is a component that is opened for the first time, the component instance of the component to be rendered does not exist in the second component instance sequence and the first component instance sequence, at this time, the step S303 described above can be executed to create the component instance of the component to be rendered and insert it into the head of the first component instance sequence.

[0120] In the embodiments of the present application, for the opened component, the corresponding component instance can be directly found from the local cache or the front-end cache; for the component opened for the first time, a new component instance can be created, and the component instances are inserted into the first position of the first component instance sequence, so that the component instance at the first position of the sequence can be directly rendered during rendering, thereby improving the rendering efficiency.

[0121] Next, the step of rendering the component to be rendered according to the first component instance sequence in S204 is described in combination with specific embodiments, as shown in FIG. 8, the step includes: Figure 5

[0122] S501: reading the component instance at the first position of the first component instance sequence.

[0123] After the component instance of the component to be rendered is inserted into the first position of the first component instance sequence in S401-S402, the electronic device can read the component instance at the first position of the first component instance sequence.

[0124] S502: performing rendering processing based on the component instance at the first position of the first component instance sequence.

[0125] Optionally, for the component instance at the first position of the first component instance sequence, the component can be drawn at the corresponding position of the display interface based on the component information in the component instance, and the data in the component instance can be drawn at the corresponding position of the display interface based on the component instance.

[0126] As an optional implementation, on the basis of any of the above embodiments, the present application can also dynamically control the length threshold of the first component instance sequence to ensure that the length of the first component instance sequence matches the current actual needs, thereby greatly improving the utilization rate of memory and the rendering efficiency during component switching.

[0127] Next, the process of dynamically controlling the length of the first component instance sequence is described in combination with Figure 6 .

[0128] As shown in FIG. 9, after the component instance of the component to be rendered is saved into the first component instance sequence in S203, the method of the present application further includes: Figure 6 S601: determining the actual length of the first component instance sequence.

[0129] Optionally, the actual length of the first component instance sequence can be the number of component instances in the first component instance sequence of the front-end cache.

[0130]

[0131] ​​S602: If the current actual length is greater than or equal to the current length threshold, determine the survival state of the to-be-moved component instance in the first component instance sequence according to time information of the to-be-moved component instance and a current time, wherein the to-be-moved component instance is the last component instance in the first component instance sequence, and the time information includes a time at which the to-be-moved component instance is saved to the first component instance sequence and a survival time of the to-be-moved component instance.

[0132] When the number of components in the first component instance sequence is large, the memory occupancy is large, and therefore, according to the access amount of the component instance, the component instance that has not been accessed by the user for a long time can be moved to the second component instance sequence for saving, so as to ensure the performance of the front-end cache.

[0133] The to-be-moved component can be the last component in the first component instance sequence, that is, the component instance that has not been accessed by the user for the longest time or the component instance with the earliest rendering time.

[0134] In the above S203, when the component instance of the to-be-rendered component is saved to the first component instance sequence, the electronic device can record the saving time of the component instance, that is, each component instance in the first component instance sequence includes the saving time of the component instance.

[0135] Optionally, the time at which the to-be-moved component instance is saved to the first component instance sequence can be the saving time of the component instance recorded by the electronic device.

[0136] Optionally, the survival time can be set by the user, and the survival times of the component instances in the front-end cache can be the same, indicating the maximum survival duration of the component instances in the first component instance sequence.

[0137] S603: According to the survival state of the to-be-moved component instance, the current length threshold, and a preset threshold interval, determine whether to increase or decrease the current length threshold, and determine whether to remove the to-be-moved component instance and store it to the second component instance sequence.

[0138] Optionally, the survival state of the to-be-moved component can include survival and non-survival.

[0139] Optionally, the threshold interval can indicate the minimum value and the maximum value of the threshold, and the specific value can be set by the user according to the performance of the front-end cache, which is not limited in the present application.

[0140] In order to ensure the performance of the front-end cache, the threshold value can be adjusted according to the number of components in the first component instance sequence, the survival state of the component instance, and the threshold interval in the application. For different component cache scenarios, the threshold value can be dynamically adjusted according to the survival time, so that the memory occupied by the front-end cache is elastic and scalable, thereby ensuring the performance of component switching within the survival time range and ensuring that the page occupies less memory when not switching for a long time.

[0141] Next, the step of determining the survival state of the component instance will be described in combination with specific embodiments, as shown in Figure 7 The S602 step includes:

[0142] S701: Obtain the current time and determine the time difference between the current time and the time when the to-be-moved component instance is saved to the first component instance sequence.

[0143] When the new component instance is saved to the first position of the first component instance sequence, the electronic device will determine whether the component at the last position of the first component instance sequence needs to be moved to the second component instance sequence.

[0144] The current time is represented as dateNow, and the time when the to-be-moved component is saved to the first component instance sequence is updateTime, and the difference between the two is dateNow-updateTime, which represents the cumulative saving time of the component instance from entering the front-end cache to the present.

[0145] S702: If the time difference is less than or equal to the survival time of the to-be-moved component instance, the to-be-moved component instance is a surviving component instance.

[0146] The survival time of the to-be-moved component is represented as Lifetime, and when dateNow-updateTime<=Lifetime, that is, the cumulative saving time of the to-be-moved component instance is less than or equal to the survival time, it can be determined that the to-be-moved component instance is a surviving component instance.

[0147] S703: If the time difference is greater than the survival time of the to-be-moved component instance, the to-be-moved component instance is a non-surviving component instance.

[0148] When dateNow-updateTime>Lifetime, that is, the cumulative saving time of the to-be-moved component instance is greater than the survival time, it can be determined that the to-be-moved component instance is a non-surviving component instance.

[0149] After determining the survival state of the to-be-moved component instance, it can be determined whether to change the current length threshold value and whether to move the to-be-moved component to the local cache through the S603 step described above. Specifically, Figure 8As shown, the step S603 comprises:

[0150] S801: If the survival state of the to-be-moved component instance is survival, and the current length threshold is less than the maximum value of the threshold interval, it is determined to increase the current length threshold, and it is determined not to remove and store the to-be-moved component instance to the second component instance sequence.

[0151] In order to save as many survival component instances in the front-end cache as possible, the current length threshold can be increased when the current length threshold is less than the maximum value of the threshold interval, i.e., the current length threshold does not reach the upper limit of the threshold interval.

[0152] It is worth noting that since the front-end cache generally has better performance than the local cache, increasing the memory size of the front-end cache can enable most component switching to be performed in the front-end cache, avoid frequent switching between the front-end cache and the local cache, and improve the performance of component switching.

[0153] S802: If the survival state of the to-be-moved component instance is survival, and the current length threshold is greater than or equal to the maximum value of the threshold interval, it is determined not to increase the current length threshold, and it is determined to remove and store the to-be-moved component instance to the second component instance sequence.

[0154] When the user opens multiple single-page applications in a short period of time, the amount of data of the component cache will greatly increase, and since the time is short, the component instances in the front-end cache can all be in a survival state. However, if all the component instances in the survival state are still saved in the front-end cache, this will undoubtedly occupy a large amount of memory and greatly reduce the performance of the system.

[0155] For this case, every time a to-be-rendered component instance is added to the front-end cache, the component instance accessed earliest by the user in the front-end cache, i.e., the to-be-moved component instance, can be moved to the local cache for saving, so as to reduce the memory pressure of the front-end cache.

[0156] In the present application, when the current length threshold is greater than or equal to the maximum value of the threshold interval, it means that the threshold has reached the upper limit of the front-end cache, and the current length threshold cannot be increased. In order to ensure the component caching efficiency of the front-end cache, the to-be-moved component instance can be moved to the local cache at this time.

[0157] S803: If the survival state of the to-be-moved component instance is not survival, and the current length threshold is greater than the minimum value of the threshold interval, it is determined to reduce the current length threshold, and it is determined to remove and store the to-be-moved component instance to the second component instance sequence.

[0158] When the user triggers multiple single-page applications for a long time, the number of component instances in the front-end cache can be large, and the earliest accessed component instance can not be alive. In this case, in order to reduce the pressure of the front-end cache and improve the performance of the system, the non-alive component instance can also be marked as a to-be-moved component instance, moved to the local cache, and the current length threshold is reduced.

[0159] In S804, if the survival state of the to-be-moved component instance is non-alive, and the current length threshold is less than or equal to the minimum value of the threshold interval, it is determined that the current length threshold is not reduced, and it is determined that the to-be-moved component instance is not removed and stored in the second component instance sequence.

[0160] If the user triggers very few single-page applications for a long time, the current length threshold of the front-end cache can be less than or equal to the minimum value of the threshold interval, that is, the current length threshold does not reach the lower limit of the threshold interval. In this case, all component instances can be saved in the front-end cache, even if the to-be-moved component instance is a non-alive component, the front-end cache will not cause memory pressure, and the system performance will not be affected.

[0161] Optionally, the increase of the current length threshold in S801 can be adding one to the current length threshold, and the result after adding one is taken as the new current length threshold.

[0162] Optionally, the reduction of the current length threshold in S803 can be subtracting one from the current length threshold, and the result after subtracting one is taken as the new current length threshold.

[0163] It should be noted that the application only takes adding one or subtracting one as an optional embodiment to illustrate the process of increasing or reducing the current length threshold. Those skilled in the art can also take the result of subtracting two or adding two from the current length threshold as the new current length threshold, which is not limited in the application.

[0164] Reference Figure 9 Further, the step of dynamically adjusting the current length threshold in the application is described. When the to-be-rendered component instance is inserted into the front-end cache, the storage time thereof is recorded, and whether the number of components in the front-end cache is less than the current length threshold is determined.

[0165] If yes, the last component instance in the front-end cache is not moved; if not, the last component instance is marked as a to-be-moved component instance, and the determination is continued.

[0166] If the time difference between the current time and the save time of the component instance to be moved is less than or equal to the survival time, it indicates that the component instance is alive, and at this time, if the current length threshold is less than the maximum value of the threshold interval, the current length threshold is incremented by 1, and the component instance to be moved is not moved; otherwise, it indicates that the current length threshold has reached the upper limit, and at this time, the component instance to be moved can be moved to the local cache.

[0167] If the time difference between the current time and the save time of the component instance to be moved is greater than the survival time, it indicates that the component instance is not alive. At this time, if the current length threshold is greater than the minimum value of the threshold interval, the current length threshold is decremented by 1, and the component instance to be moved is moved to the local cache; otherwise, it indicates that the current length threshold has reached the lower limit, and at this time, the component instance to be moved is not moved.

[0168] When the user edits some information in tabA, in order to enable the user to still retain and display the information edited by the user when switching back to tabA from another page, the application can also modify the component instance according to the modified data of the user, so as to improve the restoration rate of the component. As shown in FIG. 10, Figure 10 The method of the application further comprises:

[0169] S1001: In response to a data modification operation of the user, a new component instance is generated.

[0170] Optionally, after the user performs multiple modifications, a new component instance of the component after the last modification of the user can be generated, and the new component instance includes the data modified by the user and the original component information.

[0171] S1002: Based on the new component instance, a component instance corresponding to the new component instance is determined in the first component instance sequence or the second component instance sequence.

[0172] Optionally, the electronic device can calculate the component ID of the new component instance, and determine the component instance with the same component ID in the front-end cache or the local cache according to the component ID.

[0173] S1003: The data of the component instance corresponding to the new component instance is modified according to the new component instance.

[0174] As a possible implementation, the new component instance and the cached component instance can be compared to determine the change information, and the data of the cached component instance is modified based on the change information.

[0175] Based on the same inventive concept, the application embodiments also provide a component rendering device corresponding to the component rendering method. Since the principle of solving problems of the device in the application embodiments is similar to the above-mentioned component rendering method of the application embodiments, the implementation of the device can be referred to the implementation of the method, and the repeated parts will not be described here.

[0176] Referring to Figure 11 FIG. 1 is a schematic diagram of an assembly rendering device according to an embodiment of the present application. The device comprises an obtaining module 1101, a searching module 1102, a saving module 1103, and a rendering module 1104, wherein:

[0177] The obtaining module 1101 is configured to obtain an identifier of an assembly to be rendered.

[0178] The searching module 1102 is configured to obtain an assembly instance of the assembly to be rendered according to the identifier of the assembly to be rendered, a first assembly instance sequence saved in a front-end cache, and a second assembly instance sequence saved in a local cache. The first assembly instance sequence and the second assembly instance sequence each comprise at least one assembly instance, and the assembly instances in the first assembly instance sequence are arranged in a time sequence of rendering.

[0179] The saving module 1103 is configured to save the assembly instance of the assembly to be rendered into the first assembly instance sequence.

[0180] The rendering module 1104 is configured to render the assembly to be rendered according to the first assembly instance sequence.

[0181] Optionally, the searching module 1102 is specifically configured to:

[0182] search for the identifier of the assembly to be rendered in the second assembly instance sequence and the first assembly instance sequence;

[0183] if the identifier of the assembly to be rendered is found, an assembly instance corresponding to the identifier is taken as the assembly instance of the assembly to be rendered;

[0184] if the identifier of the assembly to be rendered is not found, the assembly instance of the assembly to be rendered is created.

[0185] Optionally, the saving module 1103 is specifically configured to:

[0186] if the assembly instance of the assembly to be rendered exists in the second assembly instance sequence and the first assembly instance sequence, the assembly instance of the assembly to be rendered is deleted from the second assembly instance sequence or the first assembly instance sequence, and the assembly instance of the assembly to be rendered is inserted into a head of the first assembly instance sequence;

[0187] if the assembly instance of the assembly to be rendered does not exist in the second assembly instance sequence and the first assembly instance sequence, the assembly instance of the assembly to be rendered is inserted into the head of the first assembly instance sequence.

[0188] Optionally, the rendering module 1104 is specifically configured to:

[0189] read the assembly instance at the head of the first assembly instance sequence;

[0190] rendering processing is performed based on the component instance at the head of the first component instance sequence.

[0191] Optionally, the component rendering apparatus in the present application can further comprise a first determining module, a second determining module and a third determining module, wherein:

[0192] The first determining module is configured to determine the actual length of the first component instance sequence at present.

[0193] The second determining module is configured to, if the actual length at present is greater than or equal to the length threshold at present, determine the survival state of the component instance to be moved in the first component instance sequence according to the time information of the component instance to be moved and the current time, wherein the component instance to be moved is the component instance at the tail of the first component instance sequence, and the time information comprises the time when the component instance to be moved is saved to the first component instance sequence and the survival time of the component instance to be moved.

[0194] The third determining module is configured to determine whether to increase or decrease the length threshold at present and determine whether to remove and save the component instance to be moved to the second component instance sequence according to the survival state of the component instance to be moved, the length threshold at present and the preset threshold interval.

[0195] Optionally, the second determining module is specifically configured to:

[0196] acquire the current time and determine the time difference between the current time and the time when the component instance to be moved is saved to the first component instance sequence;

[0197] if the time difference is less than or equal to the survival time of the component instance to be moved, the component instance to be moved is a survival component instance;

[0198] if the time difference is greater than the survival time of the component instance to be moved, the component instance to be moved is a non-survival component instance.

[0199] Optionally, the third determining module is specifically configured to:

[0200] if the survival state of the component instance to be moved is survival and the length threshold at present is less than the maximum value of the threshold interval, it is determined to increase the length threshold at present, and it is determined not to remove and save the component instance to be moved to the second component instance sequence;

[0201] if the survival state of the component instance to be moved is survival and the length threshold at present is greater than or equal to the maximum value of the threshold interval, it is determined not to increase the length threshold at present, and it is determined to remove and save the component instance to be moved to the second component instance sequence;

[0202] If the survival state of the to-be-moved component instance is not alive, and the current length threshold is greater than the minimum value of the threshold interval, it is determined to decrease the current length threshold, and it is determined to remove and store the to-be-moved component instance to the second component instance sequence.

[0203] If the survival state of the to-be-moved component instance is not alive, and the current length threshold is less than or equal to the minimum value of the threshold interval, it is determined not to decrease the current length threshold, and it is determined not to remove and store the to-be-moved component instance to the second component instance sequence.

[0204] Optionally, the third determining module is further configured to:

[0205] add one to the current length threshold to obtain a new current length threshold.

[0206] Optionally, the third determining module is further configured to:

[0207] subtract one from the current length threshold to obtain a new current length threshold.

[0208] Optionally, the component rendering apparatus can further include a modifying module configured to:

[0209] generate a new component instance in response to a data modifying operation of a user;

[0210] determine a component instance corresponding to the new component instance in the first component instance sequence or the second component instance sequence based on the new component instance;

[0211] modify data of the component instance corresponding to the new component instance according to the new component instance.

[0212] The description of the processing procedure of each module in the apparatus and the interaction procedure between the modules can refer to the related description in the above method embodiments, and will not be described in detail here.

[0213] This application addresses the conflict between excessive front-end cache memory consumption and limited computer memory resources by introducing local caching into the front-end component caching scenario. It utilizes a first component instance sequence in the front-end cache and a second component instance sequence in the local cache to jointly store component data. Furthermore, storing component instances in the first component instance sequence according to their rendering time order and rendering based on this sequence allows electronic devices to directly determine the component instance to be rendered from the front-end cache. Since the front-end cache offers better performance than the local cache, component rendering efficiency is improved. Additionally, by using both the first and second component instance sequences in the front-end cache to store component data, when the number of components in the front-end cache reaches a threshold and low-access component instances need to be discarded, the local cache can retain these discarded instances. This ensures that when a low-access component needs to be reopened, its corresponding instance can be found in the local cache, resolving the issue of poor component state preservation caused by discarded instances. Moreover, by dynamically controlling the length threshold, the memory usage of the front-end cache can be elastically scaled, improving component switching performance.

[0214] This application also provides an electronic device, such as... Figure 12 The diagram shown is a schematic representation of an electronic device structure provided in an embodiment of this application, including: a processor 1201, a memory 1202, and a bus. The memory 1202 stores machine-readable instructions executable by the processor 1201 (e.g., ...). Figure 11 The device includes the execution instructions corresponding to the acquisition module 1101, search module 1102, storage module 1103, and rendering module 1104. When the computer device is running, the processor 1201 and the memory 1202 communicate via a bus. When the machine-readable instructions are executed by the processor 1201, the above-mentioned component rendering method is processed.

[0215] This application also provides a computer-readable storage medium storing a computer program, which, when run by a processor, executes the steps of the above-described component rendering method.

[0216] Those skilled in the art can clearly understand the specific working process of the system and the device described above for the convenience and brevity of description, which can refer to the corresponding process in the method embodiment, and will not be repeated herein. In several embodiments provided in the present application, it should be understood that the disclosed system, device and method can be implemented by other ways. The device embodiments described above are only schematic, for example, the division of the modules is only a logical function division, and the actual implementation can have another division, for example, a plurality of modules or components 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 displayed or discussed each other can be indirect coupling or communication connection through some communication interface, device or module, which can be electrical, mechanical or other forms.

[0217] In addition, each functional unit 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. When the functions are realized in the form of software functional units and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or say the parts that make contributions to the prior art or parts of the technical solutions can be embodied in the form of software products, which are stored in a storage medium and include a plurality of instructions for making a computer device (which can be a personal computer, a server, or a network device, etc.) execute all or part of the steps of the methods described 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 program code storage media.

[0218] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited thereto, and any person skilled in the art can easily think of changes or replacements within the technical scope disclosed in the present application, which should be covered within the protection scope of the present application.

Claims

1. An assembly rendering method, characterized by, The method comprises: obtaining an identifier of a component to be rendered; obtaining a component instance of the component to be rendered according to the identifier of the component to be rendered, a first component instance sequence saved in a front-end cache and a second component instance sequence saved in a local cache, wherein the first component instance sequence and the second component instance sequence each comprise at least one component instance, and the component instances in the first component instance sequence are arranged in a time sequence of rendering; saving the component instance of the component to be rendered into the first component instance sequence; rendering the component to be rendered according to the first component instance sequence; after the component instance of the component to be rendered is saved into the first component instance sequence, the method further comprises: determining a current actual length of the first component instance sequence; if the current actual length is greater than or equal to a current length threshold, determining a survival state of a component instance to be moved in the first component instance sequence according to time information of the component instance to be moved and a current time, wherein the component instance to be moved is a last component instance in the first component instance sequence, the time information comprises a time when the component instance to be moved is saved into the first component instance sequence and a survival time of the component instance to be moved, and the survival state of the component instance to be moved comprises survival and non-survival; determining whether to increase or decrease the current length threshold and whether to remove and store the component instance to be moved into the second component instance sequence according to the survival state of the component instance to be moved, the current length threshold and a preset threshold interval.

2. The method of claim 1, wherein, The obtaining of the component instance of the component to be rendered according to the identifier of the component to be rendered, the first component instance sequence saved in the front-end cache and the second component instance sequence saved in the local cache comprises: searching for the identifier of the component to be rendered in the second component instance sequence and the first component instance sequence; if the identifier of the component to be rendered is found, taking a component instance corresponding to the identifier as the component instance of the component to be rendered; if the identifier of the component to be rendered is not found, creating the component instance of the component to be rendered.

3. The method of claim 1, wherein, The saving of the component instance of the component to be rendered into the first component instance sequence comprises: if the component instance of the component to be rendered exists in the second component instance sequence and the first component instance sequence, deleting the component instance of the component to be rendered from the second component instance sequence or the first component instance sequence and inserting the component instance of the component to be rendered into a first position of the first component instance sequence; if the component instance of the component to be rendered does not exist in the second component instance sequence and the first component instance sequence, inserting the component instance of the component to be rendered into the first position of the first component instance sequence.

4. The method of claim 1, wherein, The rendering of the component to be rendered according to the first component instance sequence comprises: reading the component instance at the first position of the first component instance sequence; performing rendering processing based on the component instance at the first position of the first component instance sequence.

5. The method of claim 1, wherein, The determining the survival state of the component instance to be moved in the first component instance sequence according to the time information of the component instance to be moved and the current time comprises: acquiring the current time and determining a time difference between the current time and the time when the component instance to be moved is saved to the first component instance sequence; if the time difference is less than or equal to the survival time of the component instance to be moved, the component instance to be moved is a survival component instance; if the time difference is greater than the survival time of the component instance to be moved, the component instance to be moved is a non-survival component instance.

6. The method of claim 1, wherein, The determining whether to increase or decrease the current length threshold and determining whether to remove and store the component instance to be moved to the second component instance sequence according to the survival state of the component instance to be moved, the current length threshold and the preset threshold interval comprises: if the survival state of the component instance to be moved is survival and the current length threshold is less than the maximum value of the threshold interval, it is determined to increase the current length threshold, and it is determined not to remove and store the component instance to be moved to the second component instance sequence; if the survival state of the component instance to be moved is survival and the current length threshold is greater than or equal to the maximum value of the threshold interval, it is determined not to increase the current length threshold, and it is determined to remove and store the component instance to be moved to the second component instance sequence; if the survival state of the component instance to be moved is non-survival and the current length threshold is greater than the minimum value of the threshold interval, it is determined to decrease the current length threshold, and it is determined to remove and store the component instance to be moved to the second component instance sequence; if the survival state of the component instance to be moved is non-survival and the current length threshold is less than or equal to the minimum value of the threshold interval, it is determined not to decrease the current length threshold, and it is determined not to remove and store the component instance to be moved to the second component instance sequence.

7. The method of claim 6, wherein, The determining to increase the current length threshold further comprises: taking the result of adding one to the current length threshold as a new current length threshold.

8. The method of claim 6, wherein, The determining to decrease the current length threshold further comprises: taking the result of subtracting one from the current length threshold as a new current length threshold.

9. The method of claim 1, wherein, The method further comprises: generating a new component instance in response to a data modification operation of a user; determining a component instance corresponding to the new component instance in the first component instance sequence or the second component instance sequence based on the new component instance; performing data modification on the component instance corresponding to the new component instance according to the new component instance.

10. An apparatus for rendering an assembly, the apparatus comprising: comprises: an acquisition module configured to acquire an identifier of a component to be rendered; The searching module is configured to obtain the component instance of the component to be rendered according to the identifier of the component to be rendered, the first component instance sequence stored in the front-end cache, and the second component instance sequence stored in the local cache, wherein the first component instance sequence and the second component instance sequence each include at least one component instance, and the component instances in the first component instance sequence are arranged in time sequence according to rendering; The saving module is configured to save the component instance of the component to be rendered into the first component instance sequence; The rendering module is configured to render the component to be rendered according to the first component instance sequence. The apparatus further includes a first determining module, a second determining module, and a third determining module, wherein: The first determining module is configured to determine the actual length of the first component instance sequence at present; The second determining module is configured to, if the actual length at present is greater than or equal to the length threshold at present, determine the survival state of the component instance to be moved in the first component instance sequence according to the time information of the component instance to be moved and the current time, wherein the component instance to be moved is the last component instance in the first component instance sequence, the time information includes the time when the component instance to be moved is saved into the first component instance sequence and the survival time of the component instance to be moved, and the survival state of the component instance to be moved includes survival and non-survival; The third determining module is configured to determine whether to increase or decrease the length threshold at present and to determine whether to remove the component instance to be moved and store it into the second component instance sequence according to the survival state of the component instance to be moved, the length threshold at present, and the preset threshold interval.

11. An electronic device, comprising: The processor, the storage medium, and the bus, the storage medium stores program instructions executable by the processor, when the electronic device is running, the processor and the storage medium communicate through the bus, the processor executes the program instructions to execute the steps of the component rendering method as claimed in any one of claims 1 to 9. The computer readable storage medium stores a computer program, and the computer program is executed by the processor to execute the steps of the component rendering method as claimed in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, ​

Images