A distributed server-based rendering method, system and medium

Abstract

This application provides a distributed server rendering method, system, and medium. The method includes: component-based modeling and metadata definition of the rendered page using a component modeling module to obtain a component dependency model graph; acquiring user rendering request information; analyzing this information using a caching decision module to obtain a caching decision strategy; identifying independent rendering fragments using a fragmented rendering module based on the component dependency model graph; performing server-side fragmented rendering to obtain rendering fragment content packages; and performing multi-channel parallel transmission using a collaborative transmission module. Upon receiving the data, the client interaction module performs DOM rendering and data association binding to restore page interactivity. This application achieves distributed server rendering by constructing a component dependency model graph and defining metadata, making dynamic caching decisions based on real-time context and a preset component caching benefit prediction model, and combining fragmented rendering and multi-channel collaborative transmission with progressive data association and interaction recovery.

Description

Technical Field

[0001] This application relates to the field of Web front-end engineering technology, and more specifically, to a distributed server rendering method, system, and medium. Background Technology

[0002] In the explosive growth of internet services, personalized page display is a core technical means to improve user experience. SSR rendering, or server-side rendering, is effective for display page loading and optimization. However, in even high-concurrency personalized scenarios, traditional SSR rendering technology suffers from limitations in personalized caching efficiency, failing to leverage the performance optimization role of caching. Traditional technology only transmits HTML fragments to the client, lacking data differentiation in data association, which can easily lead to interaction delays. Furthermore, the component dependency mechanism of personalized pages is rigid and cannot be effectively maintained, further reducing caching effectiveness. Therefore, there is an urgent need for an SSR rendering method that can effectively balance high concurrency, personalized support, improved caching efficiency, and rendering performance.

[0003] Effective technical solutions are urgently needed to address the above problems. Summary of the Invention

[0004] The purpose of this application is to provide a distributed server rendering method, system, and medium. It can achieve distributed server rendering by constructing a component dependency model graph and defining metadata, making dynamic caching decisions based on real-time context and a preset component caching revenue prediction model, combining slice rendering and multi-channel collaborative transmission, and based on progressive data association and interactive recovery.

[0005] In the first aspect, this application provides a distributed server rendering method, including the following steps: The component modeling module is used to perform component-based modeling and metadata definition of the rendered page to obtain the component dependency model graph. Obtain user rendering request information, analyze it through the caching decision module based on the user rendering request information, and obtain caching decision strategies; Based on the component dependency model diagram and caching decision strategy, the sharding rendering module identifies independent rendering shards and performs server-side sharding rendering to obtain the rendering shard content package. The rendered fragment content package is transmitted in parallel through multiple channels via the collaborative transmission module; The client-side interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity.

[0006] Optionally, in the distributed server rendering method described in this application, the step of performing component-based modeling and metadata definition of the rendered page through the component modeling module to obtain a component dependency model graph includes: Obtain the components to be rendered and their dependencies on the target page; Obtain the metadata of the component to be rendered, including cache level, data dependency signature, and component identifier; The component dependency model graph is obtained by modeling the component dependency relationship based on the cache level, data dependency signature, and component identifier of the component to be rendered, combined with the component dependency relationship.

[0007] Optionally, in the distributed server rendering method described in this application, the step of obtaining user rendering request information and analyzing it through a caching decision module to obtain a caching decision strategy includes: Real-time context information, including user membership level and access component identifier, is obtained based on user rendering request information. Historical baseline data is obtained based on the access component identifier, including historical component rendering cost, historical component hit rate, historical component storage cost, and historical component failure maintenance cost; The user activity weight coefficient is determined based on the user's membership level. The component personalization correction coefficient, component popularity decay coefficient, component dependency complexity coefficient, and storage node weight are obtained based on the access component identifier. The historical component hit rate is corrected based on the component personalization correction coefficient to obtain the component hit correction rate; The historical component rendering cost, component hit correction rate, user activity weight coefficient, component popularity decay coefficient, historical component storage cost, storage node weight, historical component failure maintenance cost, and component dependency complexity coefficient are input into a preset component cache revenue prediction model for processing to obtain the component cache revenue prediction value. The predicted revenue of the component cache is compared with the preset component cache storage threshold. If the predicted revenue from component caching is less than the preset component caching storage threshold, the caching decision strategy is not to cache and to perform real-time rendering. If the predicted revenue of the component cache is greater than or equal to the preset component cache storage threshold, then the caching decision strategy is to execute caching.

[0008] Optionally, in the distributed server rendering method described in this application, the step of identifying independent rendering shards through the sharding rendering module based on the component dependency model graph and caching decision strategy, and performing server-side sharding rendering to obtain the rendering shard content package includes: Based on the component dependency model diagram, the sharding rendering module performs boundary identification to obtain independent rendering shards and a component dependency table. Based on the caching decision strategy, server-side component rendering is performed on the independent rendering shards to obtain component rendering shards; Assign corresponding HTML fragments, CSS style blocks, component state data, and event binding instruction sets to each independent rendering segment; Obtain the first-screen display ratio and interaction priority of the component rendering slices, and perform a weighted sum to obtain the component priority score; The component priority scores are sorted in descending order to obtain the component rendering fragment sequence table; The rendering shard content package is generated based on the HTML fragments, CSS style blocks, component state data, and event binding instruction sets corresponding to the component rendering shards, as well as the component dependency table and component rendering shard sequence table.

[0009] Optionally, in the distributed server rendering method described in this application, the step of transmitting the rendered fragment content packets in parallel via a collaborative transmission module includes: The HTML fragments and CSS style blocks are transmitted to the client through the main transmission channel of the collaborative transmission module according to the component dependency table and the component rendering fragment sequence table. The component state data is transmitted to the client through the data transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table. The event binding instruction set is transmitted to the client through the instruction transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table.

[0010] Optionally, in the distributed server rendering method described in this application, the client interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity, including: The client-side interaction module renders the HTML fragments and CSS style blocks into a static DOM tree. The client interaction module performs syntax validation on the component state data. If the validation fails, the data is retransmitted; if the validation succeeds, the data is stored. The client interaction module parses and stores the command set bound to the event; If DOM rendering, syntax validation, and instruction parsing are all complete, the component state data is then associated and bound to the static DOM tree, and the interaction is restored according to the event-bound instruction set.

[0011] Secondly, this application provides a distributed server rendering system, which includes: The component modeling module is used to implement component-based modeling and metadata definition for rendered pages; The caching decision module is used to determine the caching decision strategy based on the predicted value of component caching revenue; The slice rendering module is used to perform server-side component rendering and generate rendering slice content packages. The collaborative transmission module is used for multi-channel parallel transmission of rendered content fragments; The client-side interaction module is used to perform DOM rendering, data association and binding, and interaction recovery.

[0012] Optionally, in the distributed server rendering system described in this application, the system further includes a memory and a processor. The memory includes a program for a distributed server rendering method. When the program for the distributed server rendering method is executed by the processor, it implements the following steps: The component modeling module is used to perform component-based modeling and metadata definition of the rendered page to obtain the component dependency model graph. Obtain user rendering request information, analyze it through the caching decision module based on the user rendering request information, and obtain caching decision strategies; Based on the component dependency model diagram and caching decision strategy, the sharding rendering module identifies independent rendering shards and performs server-side sharding rendering to obtain the rendering shard content package. The rendered fragment content package is transmitted in parallel through multiple channels via the collaborative transmission module; The client-side interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity.

[0013] Optionally, in a distributed server rendering system as described in this application, the step of performing component-based modeling and metadata definition of the rendered page through a component modeling module to obtain a component dependency model graph includes: Obtain the components to be rendered and their dependencies on the target page; Obtain the metadata of the component to be rendered, including cache level, data dependency signature, and component identifier; The component dependency model graph is obtained by modeling the component dependency relationship based on the cache level, data dependency signature, and component identifier of the component to be rendered, combined with the component dependency relationship.

[0014] Thirdly, this application also provides a computer-readable storage medium storing a distributed server rendering method program, which, when executed by a processor, implements the steps of the distributed server rendering method as described in any of the preceding claims.

[0015] As can be seen from the above, the distributed server rendering method, system and medium provided in this application realizes distributed server rendering by constructing a component dependency model graph and defining metadata, making dynamic caching decisions based on real-time context and preset component caching revenue prediction model, combining slice rendering and multi-channel collaborative transmission, and based on progressive data association and interactive recovery.

[0016] Other features and advantages of this application will be set forth in the following description and will be apparent in part from the description or may be learned by practicing embodiments of this application. The objectives and other advantages of this application may be realized and obtained by means of the structures particularly pointed out in the written description and the accompanying drawings. Attached Figure Description

[0017] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 A flowchart illustrating a distributed server rendering method provided in this application embodiment; Figure 2 A flowchart illustrating a cache decision strategy for a distributed server rendering method provided in this application embodiment; Figure 3 This is a system diagram of a distributed server rendering system provided in an embodiment of this application. Detailed Implementation

[0019] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of the embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely represents selected embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0020] It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. Furthermore, in the description of this application, the terms "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0021] Please refer to Figure 1 , Figure 1 This is a flowchart illustrating a distributed server rendering method according to some embodiments of this application. This distributed server rendering method is used in terminal devices, such as computers and mobile terminals. The distributed server rendering method includes the following steps: S11. Through the component modeling module, perform component-based modeling and metadata definition of the rendered page to obtain the component dependency model diagram; S12. Obtain user rendering request information, analyze it through the cache decision module based on the user rendering request information, and obtain a cache decision strategy. S13. Based on the component dependency model diagram and caching decision strategy, the independent rendering shards are identified through the sharding rendering module, and server-side sharding rendering is performed to obtain the rendering shard content package. S14. The rendered fragment content package is transmitted in parallel through a multi-channel transmission module. S15. The client interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity.

[0022] It should be noted that, in order to solve the problems of low caching efficiency of personalized pages, lack of coordination between streaming rendering and data association, inconsistent distributed caching decisions and complex component dependency management, a component dependency model graph is constructed and metadata is defined. Dynamic caching decisions are made based on real-time context and preset component caching benefit prediction model. Combined with streaming slice rendering and multi-channel collaborative parallel transmission protocol, progressive data association and interactive recovery on the client side are realized.

[0023] According to an embodiment of the present invention, the step of performing component-based modeling and metadata definition of the rendered page through the component modeling module to obtain a component dependency model graph includes: Obtain the components to be rendered and their dependencies on the target page; Obtain the metadata of the component to be rendered, including cache level, data dependency signature, and component identifier; The component dependency model graph is obtained by modeling the component dependency relationship based on the cache level, data dependency signature, and component identifier of the component to be rendered, combined with the component dependency relationship.

[0024] It should be noted that the components to be rendered are defined as nodes, and the component dependencies are defined as edges. The page is abstracted into a component dependency model graph in the form of a directed acyclic graph. Metadata definitions are performed for each component, including cache level, data dependency signature and component identifier. The component identifier is used to represent the ID of the component.

[0025] Please refer to Figure 2 , Figure 2 This is a flowchart illustrating a distributed server rendering method for obtaining a caching decision strategy, as described in some embodiments of this application. According to an embodiment of the present invention, obtaining user rendering request information and analyzing it through a caching decision module to obtain a caching decision strategy includes: S21. Obtain real-time context information based on user rendering request information, including user membership level and access component identifier; S221. Obtain historical baseline data based on the access component identifier, including historical component rendering cost, historical component hit rate, historical component storage cost, and historical component failure maintenance cost; S222. Determine the user activity weight coefficient based on the user membership level; S223. Obtain the component personalization correction coefficient, component popularity decay coefficient, component dependency complexity coefficient, and storage node weight based on the access component identifier; S2221. Correct the historical component hit rate according to the component personalization correction coefficient to obtain the component hit correction rate; S23. Input the historical component rendering cost, component hit correction rate, user activity weight coefficient, component popularity decay coefficient, historical component storage cost, storage node weight, historical component failure maintenance cost and component dependency complexity coefficient into the preset component cache revenue prediction model for processing to obtain the component cache revenue prediction value. S24. Compare the predicted value of the component cache revenue with the preset component cache storage threshold. S251. If the predicted value of the component cache revenue is less than the preset component cache storage threshold, the caching decision strategy is not to cache and to perform real-time rendering. S252. If the predicted value of the component cache revenue is greater than or equal to the preset component cache storage threshold, then the cache decision strategy is to execute caching.

[0026] It should be noted that, to determine whether to perform real-time rendering or caching of a component, firstly, component rendering logs, cache operation logs, and user access logs are extracted from the log system based on the access component identifier. Historical baseline data, including historical component rendering costs, historical component hit rates, historical component storage costs, and historical component failure maintenance costs, are analyzed in batches. Then, upon receiving a user request, a user activity weight coefficient reflecting the user's activity level is determined based on the user's membership level in the real-time context (e.g., 1.3 for VIP users). The corresponding component personalization correction coefficient, component popularity decay coefficient, component dependency complexity coefficient, and storage node weight are determined by querying a preset coefficient mapping table based on the access component identifier. The component personalization correction coefficient is determined based on the degree of personalization of the component content, ranging from 0 to 1. Component content with almost no user differences, such as a product main image, has high cache reuse value and a correction coefficient approaching 1. Component content that is completely user-customized, such as a personalized recommendation list, has low cache reuse value and a correction coefficient approaching 0. The component popularity decay coefficient is determined by statistically analyzing the component's associated... The 7-day visit growth rate of content (such as products and articles) is determined, with a value of 0.1 for rising popularity, 0.3 for stable popularity, and 0.7 for falling popularity. The component dependency complexity coefficient is determined by counting the number of data sources directly dependent on the component; if there is 1 data source, it is set to 1.0, and if there are 2-3 data sources, it is set to 1.3. The storage node weight is determined by the deployment cost and bandwidth cost of the storage node, with a value range of 0.8-1.5. The mapping table between the user activity weight coefficient and the preset coefficient is pre-constructed by those skilled in the art and can be dynamically adjusted. The component hit correction rate is obtained by multiplying the component personalization correction coefficient by the historical component hit rate. Then, it is processed by the preset component cache revenue prediction model to obtain the component cache revenue prediction value, which is historical component rendering cost * component hit correction rate * user activity weight coefficient * (1 - component popularity decay coefficient) - historical component storage cost * storage node weight - historical component failure maintenance cost * component dependency complexity coefficient. Finally, the threshold comparison is used to determine whether to directly execute real-time rendering or execute caching.

[0027] According to an embodiment of the present invention, the step of identifying independent rendering shards through the sharding rendering module based on the component dependency model graph and caching decision strategy, and performing server-side sharding rendering to obtain the rendering shard content package includes: Based on the component dependency model diagram, the sharding rendering module performs boundary identification to obtain independent rendering shards and a component dependency table. Based on the caching decision strategy, server-side component rendering is performed on the independent rendering shards to obtain component rendering shards; Assign corresponding HTML fragments, CSS style blocks, component state data, and event binding instruction sets to each independent rendering segment; Obtain the first-screen display ratio and interaction priority of the component rendering slices, and perform a weighted sum to obtain the component priority score; The component priority scores are sorted in descending order to obtain the component rendering fragment sequence table; The rendering shard content package is generated based on the HTML fragments, CSS style blocks, component state data, and event binding instruction sets corresponding to the component rendering shards, as well as the component dependency table and component rendering shard sequence table.

[0028] It should be noted that, based on the component dependency model graph, the process traverses the graph, prioritizing components without pre-dependencies and capable of independently executing rendering logic as independently renderable components for sharding. For components with dependencies, they are only assigned to the corresponding shard after all their pre-dependent components have been clustered or sharded, and each shard is assigned a corresponding ID. For non-cached components, the real-time server-side rendering logic is triggered directly. The latest data is determined based on the component's actual dependency data source, and the component's template compilation and data binding are executed to generate the component's complete rendered content. For cached components, the cached content package is retrieved directly from the specified cache location without real-time rendering, and is directly included in the sharded content pool for sharding. The content of each segment is aggregated and standardized, generating corresponding HTML fragments, CSS style blocks, component state data, and event binding instruction sets. Then, by determining the display ratio of the segment content in the first visible area of ​​the user's browser and weighting the sum of the interaction priority (0-10 points) based on the frequency of user interaction and business importance, the segment priority is sorted. Finally, a rendering segment content package is generated. Among them, HTML fragments, CSS style blocks, component state data, and event binding instruction sets are the core carriers for transmission. The component dependency table records the dependency order between each segment (e.g., segment 2 depends on segment 1) for reference in the transmission process. The component rendering segment sequence table records the weight and order of each segment for scheduling in the transmission process.

[0029] According to an embodiment of the present invention, the step of transmitting the rendered fragment content packet in parallel via a collaborative transmission module through multiple channels includes: The HTML fragments and CSS style blocks are transmitted to the client through the main transmission channel of the collaborative transmission module according to the component dependency table and the component rendering fragment sequence table. The component state data is transmitted to the client through the data transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table. The event binding instruction set is transmitted to the client through the instruction transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table.

[0030] It should be noted that the rendered fragment content package is split into three parts according to attributes, and transmitted independently and in parallel through the main transmission channel, data transmission channel and instruction transmission channel. This overcomes the inefficient single-channel transmission mode of traditional technology. At the same time, during data transmission, scheduling and synchronous verification are performed according to priority, and the transmission status of the three channels is monitored. After any channel completes the transmission, the transmission of subsequent fragments on that channel is paused, and the transmission of the next fragment is only executed after the other two channels have completed the transmission of the same fragment content.

[0031] According to an embodiment of the present invention, the client interaction module receives rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity, including: The client-side interaction module renders the HTML fragments and CSS style blocks into a static DOM tree. The client interaction module performs syntax validation on the component state data. If the validation fails, the data is retransmitted; if the validation succeeds, the data is stored. The client interaction module parses and stores the command set bound to the event; If DOM rendering, syntax validation, and instruction parsing are all complete, the component state data is then associated and bound to the static DOM tree, and the interaction is restored according to the event-bound instruction set.

[0032] It should be noted that the client interaction module receives HTML fragments, CSS style blocks, component state data and event binding instruction sets corresponding to different shard IDs, temporarily stores them, performs static DOM rendering and validation, and triggers progressive data association binding for each shard independently after successful validation. Then, it restores the interaction based on a hierarchical binding strategy that uses immediate binding for critical events and lazy binding for non-critical events, and updates the shard status ledger to indicate that the shard processing is complete.

[0033] Please refer to Figure 3 , Figure 3 This is a system diagram of a distributed server rendering system according to some embodiments of this application. In a second aspect, the present invention also discloses a distributed server rendering system 3, comprising: Component modeling module 31 is used to implement component-based modeling and metadata definition of the rendered page; Cache decision module 32 is used to determine the cache decision strategy based on the component cache revenue prediction value; The slice rendering module 33 is used to perform server-side component rendering and generate rendering slice content packages; The collaborative transmission module 34 is used for multi-channel parallel transmission of rendering fragment content packets; The client-side interaction module 35 is used to perform DOM rendering, data association binding, and interaction recovery.

[0034] It should be noted that the low caching efficiency and inconsistent data association are overcome through the collaborative work of various modules. Among them, the component modeling module is the basic support, the caching decision module analyzes the caching value of each component, determines whether to cache, the cache location, the cache validity period, and the expiration handling strategy, the sharded rendering module identifies independent rendering boundaries, generates rendering shard content packages, and determines the priority order, the collaborative transmission module sets up the main channel, data channel, and command channel for multi-channel parallel data transmission, and the client interaction module receives the transmitted content and performs progressive data association binding and interactive recovery independently according to the shards.

[0035] According to an embodiment of the present invention, a distributed server rendering system further includes a memory and a processor. The memory includes a distributed server rendering method program, which, when executed by the processor, performs the following steps: The component modeling module is used to perform component-based modeling and metadata definition of the rendered page to obtain the component dependency model graph. Obtain user rendering request information, analyze it through the caching decision module based on the user rendering request information, and obtain caching decision strategies; Based on the component dependency model diagram and caching decision strategy, the sharding rendering module identifies independent rendering shards and performs server-side sharding rendering to obtain the rendering shard content package. The rendered fragment content package is transmitted in parallel through multiple channels via the collaborative transmission module; The client-side interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity.

[0036] It should be noted that, in order to solve the problems of low caching efficiency of personalized pages, lack of coordination between streaming rendering and data association, inconsistent distributed caching decisions and complex component dependency management, a component dependency model graph is constructed and metadata is defined. Dynamic caching decisions are made based on real-time context and preset component caching benefit prediction model. Combined with streaming slice rendering and multi-channel collaborative parallel transmission protocol, progressive data association and interactive recovery on the client side are realized.

[0037] According to an embodiment of the present invention, the step of performing component-based modeling and metadata definition of the rendered page through the component modeling module to obtain a component dependency model graph includes: Obtain the components to be rendered and their dependencies on the target page; Obtain the metadata of the component to be rendered, including cache level, data dependency signature, and component identifier; The component dependency model graph is obtained by modeling the component dependency relationship based on the cache level, data dependency signature, and component identifier of the component to be rendered, combined with the component dependency relationship.

[0038] It should be noted that the components to be rendered are defined as nodes, and the component dependencies are defined as edges. The page is abstracted into a component dependency model graph in the form of a directed acyclic graph. Metadata definitions are performed for each component, including cache level, data dependency signature and component identifier. The component identifier is used to represent the ID of the component.

[0039] According to an embodiment of the present invention, the step of obtaining user rendering request information and analyzing it through a caching decision module to obtain a caching decision strategy includes: Real-time context information, including user membership level and access component identifier, is obtained based on user rendering request information. Historical baseline data is obtained based on the access component identifier, including historical component rendering cost, historical component hit rate, historical component storage cost, and historical component failure maintenance cost; The user activity weight coefficient is determined based on the user's membership level. The component personalization correction coefficient, component popularity decay coefficient, component dependency complexity coefficient, and storage node weight are obtained based on the access component identifier. The historical component hit rate is corrected based on the component personalization correction coefficient to obtain the component hit correction rate; The historical component rendering cost, component hit correction rate, user activity weight coefficient, component popularity decay coefficient, historical component storage cost, storage node weight, historical component failure maintenance cost, and component dependency complexity coefficient are input into a preset component cache revenue prediction model for processing to obtain the component cache revenue prediction value. The predicted revenue of the component cache is compared with the preset component cache storage threshold. If the predicted revenue from component caching is less than the preset component caching storage threshold, the caching decision strategy is not to cache and to perform real-time rendering. If the predicted revenue of the component cache is greater than or equal to the preset component cache storage threshold, then the caching decision strategy is to execute caching.

[0040] It should be noted that, to determine whether to perform real-time rendering or caching of a component, firstly, component rendering logs, cache operation logs, and user access logs are extracted from the log system based on the access component identifier. Historical baseline data, including historical component rendering costs, historical component hit rates, historical component storage costs, and historical component failure maintenance costs, are analyzed in batches. Then, upon receiving a user request, a user activity weight coefficient reflecting the user's activity level is determined based on the user's membership level in the real-time context (e.g., 1.3 for VIP users). The corresponding component personalization correction coefficient, component popularity decay coefficient, component dependency complexity coefficient, and storage node weight are determined by querying a preset coefficient mapping table based on the access component identifier. The component personalization correction coefficient is determined based on the degree of personalization of the component content, ranging from 0 to 1. Component content with almost no user differences, such as a product main image, has high cache reuse value and a correction coefficient approaching 1. Component content that is completely user-customized, such as a personalized recommendation list, has low cache reuse value and a correction coefficient approaching 0. The component popularity decay coefficient is determined by statistically analyzing the component's associated... The 7-day visit growth rate of content (such as products and articles) is determined, with a value of 0.1 for rising popularity, 0.3 for stable popularity, and 0.7 for falling popularity. The component dependency complexity coefficient is determined by counting the number of data sources directly dependent on the component; if there is 1 data source, it is set to 1.0, and if there are 2-3 data sources, it is set to 1.3. The storage node weight is determined by the deployment cost and bandwidth cost of the storage node, with a value range of 0.8-1.5. The mapping table between the user activity weight coefficient and the preset coefficient is pre-constructed by those skilled in the art and can be dynamically adjusted. The component hit correction rate is obtained by multiplying the component personalization correction coefficient by the historical component hit rate. Then, it is processed by the preset component cache revenue prediction model to obtain the component cache revenue prediction value, which is historical component rendering cost * component hit correction rate * user activity weight coefficient * (1 - component popularity decay coefficient) - historical component storage cost * storage node weight - historical component failure maintenance cost * component dependency complexity coefficient. Finally, the threshold comparison is used to determine whether to directly execute real-time rendering or execute caching.

[0041] According to an embodiment of the present invention, the step of identifying independent rendering shards through the sharding rendering module based on the component dependency model graph and caching decision strategy, and performing server-side sharding rendering to obtain the rendering shard content package includes: Based on the component dependency model diagram, the sharding rendering module performs boundary identification to obtain independent rendering shards and a component dependency table. Based on the caching decision strategy, server-side component rendering is performed on the independent rendering shards to obtain component rendering shards; Assign corresponding HTML fragments, CSS style blocks, component state data, and event binding instruction sets to each independent rendering segment; Obtain the first-screen display ratio and interaction priority of the component rendering slices, and perform a weighted sum to obtain the component priority score; The component priority scores are sorted in descending order to obtain the component rendering fragment sequence table; The rendering shard content package is generated based on the HTML fragments, CSS style blocks, component state data, and event binding instruction sets corresponding to the component rendering shards, as well as the component dependency table and component rendering shard sequence table.

[0042] It should be noted that, based on the component dependency model graph, the process traverses the graph, prioritizing components without pre-dependencies and capable of independently executing rendering logic as independently renderable components for sharding. For components with dependencies, they are only assigned to the corresponding shard after all their pre-dependent components have been clustered or sharded, and each shard is assigned a corresponding ID. For non-cached components, the real-time server-side rendering logic is triggered directly. The latest data is determined based on the component's actual dependency data source, and the component's template compilation and data binding are executed to generate the component's complete rendered content. For cached components, the cached content package is retrieved directly from the specified cache location without real-time rendering, and is directly included in the sharded content pool for sharding. The content of each segment is aggregated and standardized, generating corresponding HTML fragments, CSS style blocks, component state data, and event binding instruction sets. Then, by determining the display ratio of the segment content in the first visible area of ​​the user's browser and weighting the sum of the interaction priority (0-10 points) based on the frequency of user interaction and business importance, the segment priority is sorted. Finally, a rendering segment content package is generated. Among them, HTML fragments, CSS style blocks, component state data, and event binding instruction sets are the core carriers for transmission. The component dependency table records the dependency order between each segment (e.g., segment 2 depends on segment 1) for reference in the transmission process. The component rendering segment sequence table records the weight and order of each segment for scheduling in the transmission process.

[0043] According to an embodiment of the present invention, the step of transmitting the rendered fragment content packet in parallel via a collaborative transmission module through multiple channels includes: The HTML fragments and CSS style blocks are transmitted to the client through the main transmission channel of the collaborative transmission module according to the component dependency table and the component rendering fragment sequence table. The component state data is transmitted to the client through the data transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table. The event binding instruction set is transmitted to the client through the instruction transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table.

[0044] It should be noted that the rendered fragment content package is split into three parts according to attributes, and transmitted independently and in parallel through the main transmission channel, data transmission channel and instruction transmission channel. This overcomes the inefficient single-channel transmission mode of traditional technology. At the same time, during data transmission, scheduling and synchronous verification are performed according to priority, and the transmission status of the three channels is monitored. After any channel completes the transmission, the transmission of subsequent fragments on that channel is paused, and the transmission of the next fragment is only executed after the other two channels have completed the transmission of the same fragment content.

[0045] According to an embodiment of the present invention, the client interaction module receives rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity, including: The client-side interaction module renders the HTML fragments and CSS style blocks into a static DOM tree. The client interaction module performs syntax validation on the component state data. If the validation fails, the data is retransmitted; if the validation succeeds, the data is stored. The client interaction module parses and stores the command set bound to the event; If DOM rendering, syntax validation, and instruction parsing are all complete, the component state data is then associated and bound to the static DOM tree, and the interaction is restored according to the event-bound instruction set.

[0046] It should be noted that the client interaction module receives HTML fragments, CSS style blocks, component state data and event binding instruction sets corresponding to different shard IDs, temporarily stores them, performs static DOM rendering and validation, and triggers progressive data association binding for each shard independently after successful validation. Then, it restores the interaction based on a hierarchical binding strategy that uses immediate binding for critical events and lazy binding for non-critical events, and updates the shard status ledger to indicate that the shard processing is complete.

[0047] A third aspect of the present invention provides a readable storage medium storing a distributed server rendering method program, which, when executed by a processor, implements the steps of the distributed server rendering method as described in any of the preceding claims.

[0048] This invention discloses a distributed server rendering method, system, and medium. By constructing a component dependency model graph and defining metadata, dynamic caching decisions are made based on real-time context and a preset component caching revenue prediction model. Combined with slice rendering and multi-channel collaborative transmission, and based on progressive data association and interactive recovery, distributed server rendering is achieved.

[0049] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods, such as: multiple units or components can be combined, or integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the various components shown or discussed can be through some interfaces, and the indirect coupling or communication connection between devices or units can be electrical, mechanical, or other forms.

[0050] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units. They may be located in one place or distributed across multiple network units. Some or all of the units may be selected to achieve the purpose of this embodiment according to actual needs.

[0051] In addition, in the various embodiments of the present invention, each functional unit can be integrated into one processing unit, or each unit can be a separate unit, or two or more units can be integrated into one unit; the integrated unit can be implemented in hardware or in the form of hardware plus software functional units.

[0052] Those skilled in the art will understand that all or part of the steps of the above method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a readable storage medium. When the program is executed, it performs the steps of the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as mobile storage devices, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0053] Alternatively, if the integrated units of this invention are implemented as software functional modules and sold or used as independent products, they can also be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this invention, or the parts that contribute to the prior art, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as mobile storage devices, ROM, RAM, magnetic disks, or optical disks.

Claims

1. A distributed server rendering method, characterized in that, Includes the following steps: The component modeling module is used to perform component-based modeling and metadata definition of the rendered page to obtain the component dependency model graph. Obtain user rendering request information, analyze it through the caching decision module based on the user rendering request information, and obtain caching decision strategies; Based on the component dependency model diagram and caching decision strategy, the sharding rendering module identifies independent rendering shards and performs server-side sharding rendering to obtain the rendering shard content package. The rendered fragment content package is transmitted in parallel through multiple channels via the collaborative transmission module; The client-side interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity.

2. The distributed-based server-rendering method of claim 1, wherein, The step of performing component-based modeling and metadata definition of the rendered page through the component modeling module to obtain the component dependency model graph includes: Obtain the components to be rendered and their dependencies on the target page; Obtain the metadata of the component to be rendered, including cache level, data dependency signature, and component identifier; The component dependency model graph is obtained by modeling the component dependency relationship based on the cache level, data dependency signature, and component identifier of the component to be rendered, combined with the component dependency relationship.

3. The distributed server rendering method according to claim 2, characterized in that, The process of obtaining user rendering request information and analyzing it through a caching decision module to obtain a caching decision strategy includes: Real-time context information, including user membership level and access component identifier, is obtained based on user rendering request information. Historical baseline data is obtained based on the access component identifier, including historical component rendering cost, historical component hit rate, historical component storage cost, and historical component failure maintenance cost; The user activity weight coefficient is determined based on the user's membership level. The component personalization correction coefficient, component popularity decay coefficient, component dependency complexity coefficient, and storage node weight are obtained based on the access component identifier. The historical component hit rate is corrected based on the component personalization correction coefficient to obtain the component hit correction rate; The historical component rendering cost, component hit correction rate, user activity weight coefficient, component popularity decay coefficient, historical component storage cost, storage node weight, historical component failure maintenance cost, and component dependency complexity coefficient are input into a preset component cache revenue prediction model for processing to obtain the component cache revenue prediction value. The predicted revenue of the component cache is compared with the preset component cache storage threshold. If the predicted revenue from component caching is less than the preset component caching storage threshold, the caching decision strategy is not to cache and to perform real-time rendering. If the predicted revenue of the component cache is greater than or equal to the preset component cache storage threshold, then the caching decision strategy is to execute caching.

4. The distributed-based server rendering method of claim 3, wherein, The step involves identifying independent rendering shards through the sharding rendering module based on the component dependency model graph and caching decision strategy, and performing server-side sharding rendering to obtain the rendering shard content package, including: Based on the component dependency model diagram, the sharding rendering module performs boundary identification to obtain independent rendering shards and a component dependency table. Based on the caching decision strategy, server-side component rendering is performed on the independent rendering shards to obtain component rendering shards; Assign corresponding HTML fragments, CSS style blocks, component state data, and event binding instruction sets to each independent rendering segment; Obtain the first-screen display ratio and interaction priority of the component rendering slices, and perform a weighted sum to obtain the component priority score; The component priority scores are sorted in descending order to obtain the component rendering fragment sequence table; The rendering shard content package is generated based on the HTML fragments, CSS style blocks, component state data, and event binding instruction sets corresponding to the component rendering shards, as well as the component dependency table and component rendering shard sequence table.

5. The distributed server rendering method according to claim 4, characterized in that, The step of transmitting the rendered fragment content package in parallel via a multi-channel transmission module includes: The HTML fragments and CSS style blocks are transmitted to the client through the main transmission channel of the collaborative transmission module according to the component dependency table and the component rendering fragment sequence table. The component state data is transmitted to the client through the data transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table. The event binding instruction set is transmitted to the client through the instruction transmission channel of the collaborative transmission module according to the component dependency table and the component rendering shard sequence table.

6. The distributed server rendering method according to claim 5, characterized in that, The client-side interaction module receives the rendered content fragments sequentially, performs client-side DOM rendering and data association binding, and restores page interactivity, including: The client-side interaction module renders the HTML fragments and CSS style blocks into a static DOM tree. The client interaction module performs syntax validation on the component state data. If the validation fails, the data is retransmitted; if the validation succeeds, the data is stored. The client interaction module parses and stores the command set bound to the event; If DOM rendering, syntax validation, and instruction parsing are all complete, the component state data is then associated and bound to the static DOM tree, and the interaction is restored according to the event-bound instruction set.

7. A distributed-based server rendering system implementing the distributed-based server rendering method of claims 1-6. include: The component modeling module is used to implement component-based modeling and metadata definition for rendered pages; The caching decision module is used to determine the caching decision strategy based on the predicted value of component caching revenue; The slice rendering module is used to perform server-side component rendering and generate rendering slice content packages. The collaborative transmission module is used for multi-channel parallel transmission of rendered content fragments; The client-side interaction module is used to perform DOM rendering, data association and binding, and interaction recovery.

8. A distributed server rendering system, characterized in that, It also includes a memory and a processor, wherein the memory contains a program based on a distributed server rendering method, which, when executed by the processor, performs the following steps: The component modeling module is used to perform component-based modeling and metadata definition of the rendered page to obtain the component dependency model graph. Obtain user rendering request information, analyze it through the caching decision module based on the user rendering request information, and obtain caching decision strategies; Based on the component dependency model diagram and caching decision strategy, the sharding rendering module identifies independent rendering shards and performs server-side sharding rendering to obtain the rendering shard content package. The rendered fragment content package is transmitted in parallel through multiple channels via the collaborative transmission module; The client-side interaction module receives the rendered content fragments in sequence, performs client-side DOM rendering and data association binding, and restores page interactivity.

9. The distributed server rendering system according to claim 8, characterized in that, The step of performing component-based modeling and metadata definition of the rendered page through the component modeling module to obtain the component dependency model graph includes: Obtain the components to be rendered and their dependencies on the target page; Obtain the metadata of the component to be rendered, including cache level, data dependency signature, and component identifier; The component dependency model graph is obtained by modeling the component dependency relationship based on the cache level, data dependency signature, and component identifier of the component to be rendered, combined with the component dependency relationship.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a distributed server rendering method program, which, when executed by a processor, implements the steps of a distributed server rendering method as described in any one of claims 1 to 6.

Images