Componentized page rendering method, device and equipment for online education and medium

Abstract

The present application relates to the technical field of online education, and in particular to a component-based page rendering method and device for online education, equipment and medium, the method comprising: obtaining a page rendering request and determining component configuration information; building a component dependency graph; calculating component loading priority scores and generating a loading queue; executing component loading and managing the life cycle; establishing an inter-component communication bus; executing the rendering process and performing performance optimization. The method intelligently analyzes user learning behavior and component dependency, dynamically adjusts component loading and rendering strategies, and introduces a dual-priority event management mechanism to achieve efficient intelligent rendering of education scene components. Thus, the problems of low online education component rendering efficiency, poor scene adaptability, insufficient learning behavior analysis, and lack of performance optimization automation in the prior art are solved, and the performance and user experience of the online education platform are significantly improved.

Description

Technical Field

[0001] This invention relates to the field of online education technology, and specifically to a component-based page rendering method, apparatus, device, and medium for online education. Background Technology

[0002] With the widespread adoption of internet technology and mobile devices, the online education industry has experienced explosive growth in recent years. The traditional face-to-face teaching model is gradually shifting towards a blended learning model that combines online and offline learning. This shift presents both new challenges and opportunities for educational technology.

[0003] In the development of online education platforms, page rendering technology plays a crucial role. Early online education platforms mostly used static pages or server-side rendering technology. Although this approach is simple and direct, it has the following problems: it is difficult to quickly adjust page content and layout according to different users and devices; frequent page refreshes affect user experience; a large amount of rendering work is concentrated on the server side, increasing server pressure; and the high coupling between the front-end and back-end makes parallel development and maintenance difficult.

[0004] To address these issues, the focus gradually shifted to front-end rendering technologies. The rise of single-page applications (SPAs) made front-end rendering the mainstream approach. However, with the increasing complexity of online education scenarios, simple front-end rendering has also revealed some problems: the initial load requires downloading a large number of JavaScript files, affecting the initial screen display speed; search engines struggle to crawl dynamically generated content; and numerous DOM operations on complex pages can lead to performance degradation.

[0005] To balance the advantages and disadvantages of server-side rendering and client-side rendering, isomorphic rendering technology emerged. This technology allows the server and client to share the same rendering logic, ensuring both fast initial page load speed and a good user experience. However, in practical applications, isomorphic rendering also faces some challenges, such as differences between server-side and client-side environments and complex state management.

[0006] In recent years, component-based development has been widely adopted in the front-end development field. This model breaks down a page into multiple independent components, each responsible for its own rendering logic and state management. Component-based development improves code reusability and maintainability, but it also brings new challenges: how to optimize the loading order of components to improve page rendering speed; how to efficiently manage data flow and event propagation between multiple components in a complex page; how to optimize component rendering performance while ensuring functional integrity; and how to make components adaptable to different educational scenarios and device environments.

[0007] These issues are particularly prominent in the education sector. The diversity of educational scenarios demands a high degree of flexibility and scalability from page rendering systems. At the same time, the specific nature of educational content also places higher demands on rendering performance.

[0008] Furthermore, with the application of artificial intelligence technology in education, personalized learning and adaptive teaching have become new trends. This requires page rendering systems to dynamically adjust content display based on learners' characteristics and learning progress, further increasing the technical difficulty. Summary of the Invention

[0009] This invention provides a component-based page rendering method, apparatus, device, and medium for online education, addressing the following technical problems in existing technologies: low rendering efficiency in online education pages, resulting in long loading times and negatively impacting user experience; complex component management, making it difficult to adapt to different educational scenarios and user needs; improper handling of dependencies between components, leading to chaotic rendering order and resource waste; lack of systematic methods for rendering performance optimization, making it difficult to cope with complex and ever-changing educational scenarios; and lack of intelligent component configuration and loading mechanisms, failing to adaptively optimize based on user behavior and device performance.

[0010] The first aspect of this invention provides a component-based page rendering method for online education, comprising the following steps: obtaining a page rendering request, including an education scene identifier, user identity information, and device performance indicators; determining component configuration information based on the education scene identifier and user identity information, including component identifier, component type, component parameters, component dependencies, and component priority configuration; constructing a component dependency graph based on component dependencies, represented as a directed acyclic graph; calculating component loading priority scores based on component priority configuration, device performance indicators, and the component dependency graph, and generating a component loading queue; executing the loading of education components according to the loading queue order, and triggering corresponding component lifecycle hook functions; establishing an inter-component communication bus based on component dependencies, used to register component data dependencies, listen for state change events, and trigger component lifecycle hook functions to update components; and executing the rendering process of the education scene components based on the component configuration information and the state update information received by the communication bus, including constructing a rendering tree, calculating the layout, executing rendering, caching results, and broadcasting completion events.

[0011] Preferably, before generating the component loading queue by calculating the component loading priority score based on the component priority configuration, the device performance indicators, and the component dependency graph, the process includes: analyzing user behavior data based on a machine learning model to construct a component usage model, wherein the component usage model includes a component access model, an interaction duration model, an operation behavior model, and a scenario dependency model. The component access model records the component's call frequency, the interaction duration model records the duration of user interaction with the component, the operation behavior model records the user's operation sequence on the component, and the scenario dependency model records the component dependency relationships under different educational scenarios; dynamically adjusting the component configuration information based on the component usage model, wherein the component priority weight is updated according to the component access frequency, the component preloading strategy is determined according to the interaction duration data, the component caching strategy is optimized according to the operation sequence data, and the component degradation scheme is adjusted according to the scenario association data; and establishing a configuration based on the dynamically adjusted component configuration information. The system employs a parameter evaluation mechanism, which includes component loading time deviation, cache hit rate, memory utilization, and runtime performance metrics. Based on these metrics, configuration parameters are continuously optimized using machine learning algorithms. The system updates device performance metrics in the component configuration information according to the data from the configuration parameter evaluation metrics. These device performance metrics include CPU utilization, memory utilization, network status, and bandwidth data. Loading strategy adjustment rules are established based on the updated device performance metrics. These rules include: reducing concurrent loading when CPU utilization exceeds a preset threshold; releasing memory for low-priority components when memory utilization exceeds a preset threshold; and prioritizing cached components when network latency exceeds a preset threshold. The system records the effects of strategy adjustments using a mathematical model, establishing a dynamic mapping relationship between the device performance metrics and the loading strategy adjustment rules, and periodically updates the component priority configuration in the component configuration information.

[0012] Preferably, the process of calculating component loading priority scores and generating a component loading queue based on the component priority configuration, the device performance indicators, and the component dependency graph includes: calculating a basic priority score based on the component type and basic weight in the component configuration information; calculating a dependency weight score based on the hierarchical relationship and the number of times the component is depended upon in the component dependency graph; calculating a historical data weight score based on the historical loading frequency and average loading time over a certain period of time; calculating a resource feature weight score based on the component parameters in the component configuration information; and calculating a target priority score by weighting the basic priority score, the dependency weight score, the historical data weight score, and the resource feature weight score.

[0013] Preferably, the component lifecycle includes a component creation phase, a component mounting phase, a component update phase, and a component destruction phase. In the component creation phase, parameter verification, data initialization, and dependency loading are performed. In the component mounting phase, the DOM container is prepared, the first rendering is performed, and a communication channel is established. In the component update phase, data change verification, DOM updates, and state restoration are performed. In the component destruction phase, resource reclamation, event unbinding, and memory release are performed.

[0014] Preferably, establishing an inter-component communication bus based on the component dependencies includes: obtaining event registration, execution, triggering, and broadcasting methods for the inter-component communication bus based on the component dependencies in the component configuration information; establishing a dual-priority event management mechanism according to the component dependencies and component priority configuration in the component configuration information; integrating the dual-priority mechanism into the event registration, execution, triggering, and broadcasting methods, wherein, in the event registration method, an initial priority is assigned to each registered event according to the component priority configuration; in the event triggering method, the event processing order is determined according to the event queue priority; in the event execution method, the actual execution order of events is determined according to the event execution priority; in the event broadcasting method, the scope and order of broadcasting are determined according to the component dependencies and business importance; and registering each of the educational scenario components and their corresponding event handling functions to the communication bus according to the event triggering method.

[0015] Preferably, after executing the rendering process of the educational scene component, the method further includes: acquiring rendering performance data, including indicators such as initial rendering time, re-rendering time, peak memory usage, CPU utilization, frame rate fluctuation range, and stuttering frequency; establishing a performance scoring mechanism based on the rendering performance data, comprehensively considering factors such as rendering time, memory usage, and frame rate to generate an overall performance score; executing rendering optimization strategies based on the performance score and the rendering performance data, including delayed loading of large components, asynchronous loading of non-critical resources, differentiated compression of rendering results, precise triggering of component updates, and local rendering range control; when the performance score is lower than a preset alarm threshold, broadcasting a performance anomaly event through the inter-component communication bus to trigger the component lifecycle hook functions of relevant components for anomaly handling, wherein the anomaly handling includes rendering timeout degradation, crash recovery, performance alarms, and automatic optimization; continuously monitoring the rendering performance data, periodically updating the performance score, and dynamically adjusting the rendering optimization strategy based on the latest performance score and rendering performance data; and broadcasting the optimized rendering strategy to relevant components through the inter-component communication bus to continuously optimize rendering performance.

[0016] A second aspect of the present invention provides a component-based page rendering device for online education, comprising: an acquisition module for acquiring a page rendering request, wherein the page rendering request includes an education scene identifier, user identity information, and device performance indicators; a determination module for determining component configuration information based on the education scene identifier and the user identity information, wherein the component configuration information includes a component identifier, component type, component parameters, component dependencies, and component priority configuration, wherein the component type includes a course player component, a exercise system component, an interactive whiteboard component, a real-time communication component, and a course resource component; a construction module for constructing a component dependency graph based on the component dependencies, representing it as a directed acyclic graph; a generation module for calculating a component loading priority score based on the component priority configuration, the device performance indicators, and the component dependency graph, and generating a component loading queue; and a triggering module for executing components according to the loading queue order. The system loads the educational component and triggers corresponding component lifecycle hook functions based on the component configuration information. These hook functions include component creation hooks, component mounting hooks, component update hooks, and component destruction hooks. A communication module establishes an inter-component communication bus based on the component dependencies, registers data dependencies of the educational scenario component, listens for component state change events, and triggers the component lifecycle hook functions to update the component according to the component dependencies in the component configuration information. A rendering module executes the rendering process of the educational scenario component based on the component configuration information and state update information received through the inter-component communication bus. This rendering process includes constructing an educational component rendering tree, calculating layout information based on the component parameters and the latest state, performing rendering operations, caching the rendering result for the educational scenario identifier, and broadcasting a rendering completion event through the inter-component communication bus.

[0017] A third aspect of the present invention provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the component-based page rendering method for online education as described in the above embodiments.

[0018] A fourth aspect of the present invention provides a computer-readable storage medium having a computer program or instructions stored thereon, which, when executed, implement the component-based page rendering method for online education as described in the above embodiments.

[0019] A fifth aspect of the present invention provides a computer program product, including a computer program or instructions, to implement the component-based page rendering method for online education as described in the above embodiments.

[0020] Therefore, the present invention has at least the following beneficial effects:

[0021] This invention significantly improves page rendering efficiency and user experience through component-based design and intelligent loading strategies. By employing component configuration based on scene and user information, the rendering process is personalized and precise. Furthermore, by constructing a component dependency graph and prioritization mechanism, the component loading order is optimized, thereby enhancing overall rendering performance.

[0022] This invention introduces a machine learning-based component usage model and dynamic configuration adjustment mechanism, which can adaptively optimize based on user behavior and device performance. By establishing an inter-component communication bus and lifecycle management, efficient component collaboration and state synchronization are achieved.

[0023] Furthermore, the rendering performance monitoring and optimization mechanism provided by this invention can adjust rendering strategies in real time, ensuring stability and efficiency in various scenarios. Through automated performance evaluation and optimization processes, the need for manual intervention is significantly reduced, improving system maintainability.

[0024] This solves the problems of low rendering efficiency, poor scene adaptability, insufficient learning behavior analysis, and lack of automated performance optimization in existing online education components.

[0025] Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0026] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein:

[0027] Figure 1 A flowchart illustrating a component-based page rendering method for online education provided in an embodiment of the present invention;

[0028] Figure 2 This is a flowchart of a componentized page rendering method for online education according to an embodiment of this application;

[0029] Figure 3 This is a schematic diagram of the component dependency graph in an embodiment of the present invention;

[0030] Figure 4 This is a schematic diagram illustrating the component loading priority calculation process in an embodiment of the present invention;

[0031] Figure 5 This is a schematic diagram of the component lifecycle in an embodiment of the present invention;

[0032] Figure 6 This is a schematic diagram of the inter-component communication bus structure in an embodiment of the present invention;

[0033] Figure 7 This is a schematic diagram of the rendering performance optimization process in an embodiment of the present invention;

[0034] Figure 8 A structural block diagram of a component-based page rendering device for online education provided in an embodiment of the present invention;

[0035] Figure 9 This is a schematic diagram of the structure of an electronic device provided according to an embodiment of this application. Detailed Implementation

[0036] The embodiments of this application are described in detail below. Examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.

[0037] The following description, with reference to the accompanying drawings, outlines a component-based page rendering method, apparatus, device, and medium for online education, according to embodiments of this application. Addressing the problems existing in online education systems mentioned in the background section, this application provides a component-based page rendering method for online education. This method intelligently processes page rendering requests, dynamically configures and loads components, and establishes an efficient component communication mechanism, thereby achieving efficient rendering and optimization of online education pages. This solves the technical problems of low page rendering efficiency, poor user experience, complex component management, and difficulty in optimizing rendering performance in the prior art.

[0038] Specifically, Figure 1 This is a flowchart illustrating the component-based page rendering method for online education provided in an embodiment of this application.

[0039] like Figure 1 As shown, this component-based page rendering method for online education includes the following steps:

[0040] In step S101, a page rendering request is obtained.

[0041] The page rendering request may include an educational scenario identifier, user identity information, and device performance indicators. The educational scenario identifier may include a course ID and course type (such as live class, recorded class, interactive exercise, etc.). The user identity information may include user role (such as student, teacher, administrator), grade, learning progress, etc. The device performance indicators may include device type (PC, mobile device), screen resolution, CPU performance, memory size, network status, etc.

[0042] It is understood that by obtaining page rendering requests and responding to and processing these requests in a timely manner, the content required by the user can be loaded and rendered in a targeted manner, thereby avoiding unnecessary resource consumption and time waste.

[0043] In step S102, component configuration information is determined based on the education scenario identifier and user identity information.

[0044] The component configuration information may include component identifier, component type, component parameters, component dependencies, and component priority configuration.

[0045] It is understood that the embodiments of this application, through intelligent component configuration, can dynamically organize page content according to different educational scenarios and user needs, thereby improving the system's flexibility and user experience.

[0046] It should be noted that the process of determining component configuration information includes: querying the component library, matching scene templates, parsing user permissions, calculating component parameters, building a dependency graph, and setting initial priorities.

[0047] Taking a live-streaming course scenario as an example, configure the following components:

[0048] Video player component: {id:"video-player-001", type:"VideoPlayer", params:{autoplay:true, quality:"high"}, dependencies:["ChatComponent"], priority:90};

[0049] Real-time chat component: {id:"chat-component-001", type:"ChatBox", params:{messageLimit:100}, dependencies:[], priority:70};

[0050] Course outline component: {id:"course-outline-001", type:"Accordion", params:{expandFirst:true}, dependencies:[], priority:50};

[0051] Interactive Q&A component: {id:"qa-component-001", type:"QASystem", params:{autoRefresh:true}, dependencies:["ChatComponent"], priority:60};

[0052] Course materials component: {id:"resource-list-001", type:"ResourceList", params:{preload:false}, dependencies:[], priority:40}.

[0053] In step S103, a component dependency graph is constructed based on the component dependency relationship and represented as a directed acyclic graph.

[0054] The component dependency graph is a directed acyclic graph used to represent the logical relationships and loading order between components.

[0055] It is understood that by constructing a component dependency graph, the embodiments of this application can clearly understand the relationships between components, providing an important basis for subsequent loading optimization and parallel rendering.

[0056] Specifically, the component dependency graph is represented using an adjacency list:

[0057] constdependencyGraph={

[0058] "video-player-001":["chat-component-001"],

[0059] "chat-component-001":[],

[0060] "course-outline-001":[],

[0061] "qa-component-001":["chat-component-001"],

[0062] "resource-list-001":[]

[0063] };

[0064] In step S104, the component loading priority score is calculated based on the component priority configuration, device performance indicators, and component dependency graph, and a component loading queue is generated.

[0065] Among them, the component loading priority score is a multi-factor comprehensive evaluation method used to find the optimal loading order in a multi-dimensional decision space.

[0066] It is understood that the embodiments of this application design a loading queue based on component priority configuration, device performance indicators, and component dependency graph to calculate component loading priority scores, which can provide users with a smoother and more reasonable page rendering experience while ensuring the rapid loading of key components.

[0067] It should be noted that the process of calculating the component loading priority score includes: defining scoring factors, setting weight coefficients, collecting historical data, performing multi-dimensional scoring, applying machine learning algorithms to dynamically adjust weights, and generating the final score.

[0068] The formula for calculating the priority score is as follows:

[0069] Score=BaseScore*DependencyWeight*PerformanceWeight*HistoryWeight

[0070] Among them, BaseScore is the basic priority score, with a value of 0-100; DependencyWeight is the dependency weight, with a value of 0.8-1.2; PerformanceWeight is the device performance weight, with a value of 0.9-1.1; and HistoryWeight is the historical usage frequency weight, with a value of 0.9-1.1.

[0071] In this embodiment, before generating the component loading queue by calculating the component loading priority score based on component priority configuration, device performance indicators, and component dependency graph, the process includes: analyzing user behavior data based on a machine learning model to construct a component usage model; dynamically adjusting component configuration information based on the component usage model, wherein the component priority weight is updated based on component access frequency, the component preloading strategy is determined based on interaction duration data, the component caching strategy is optimized based on operation sequence data, and the component degradation scheme is adjusted based on scenario association data; and establishing configuration parameter evaluation indicators based on the dynamically adjusted component configuration information, wherein the configuration parameter evaluation indicators include component loading time deviation, cache hit rate, memory usage rate, and runtime performance indicators. The system continuously optimizes configuration parameters through machine learning algorithms; it updates device performance metrics in component configuration information based on data from configuration parameter evaluation metrics, including CPU utilization, memory usage, network status, and bandwidth data; it establishes loading strategy adjustment rules based on the updated device performance metric data, including: reducing the number of concurrent loads when CPU utilization exceeds a preset threshold, releasing memory for low-priority components when memory utilization exceeds a preset threshold, and prioritizing cached components when network latency exceeds a preset threshold; it records the effect of strategy adjustments through mathematical models, establishing a dynamic mapping relationship between device performance metrics and loading strategy adjustment rules, and periodically updates component priority configuration in component configuration information.

[0072] The component usage model includes a component access model, an interaction duration model, an operation behavior model, and a scenario dependency model. The component access model records the frequency of component calls, the interaction duration model records the duration of user interaction with the component, the operation behavior model records the user's operation sequence on the component, and the scenario dependency model records the component dependency relationships in different educational scenarios.

[0073] It is understood that this application embodiment utilizes a machine learning model to construct a component usage model through the analysis of user behavior data. Based on this model, it dynamically adjusts component configuration information, including updating component priority weights, determining preloading strategies, optimizing caching strategies, and adjusting degradation schemes. Subsequently, based on the adjusted configuration information, a configuration parameter evaluation index is established. Machine learning algorithms are used to optimize the configuration parameters, and the device performance index in the component configuration information is updated according to the evaluation index data. Next, loading strategy adjustment rules are formulated based on the updated device performance index data. A mathematical model is used to record the effect of the strategy adjustment, establishing a dynamic mapping relationship between device performance indicators and loading strategy adjustment rules. This allows for periodic updates to component priority configurations, achieving dynamic optimization of component configurations and improving system performance and user experience.

[0074] In this embodiment, a component loading priority score is calculated based on component priority configuration, device performance indicators, and component dependency graph to generate a component loading queue. This includes: calculating a basic priority score based on the component type and basic weight in the component configuration information; calculating a dependency weight score based on the hierarchical relationship and number of times the component is depended upon in the dependency graph; calculating a historical data weight score based on the historical loading frequency and average loading time over a certain period of time; calculating a resource feature weight score based on the component parameters in the component configuration information; and calculating a target priority score by weighting the basic priority score, dependency weight score, historical data weight score, and resource feature weight score.

[0075] It is understood that the embodiments of this application combine component type and basic weight to determine basic priority score, consider the hierarchical relationship between components and the number of times they are depended on to calculate dependency weight score, and also evaluate historical data weight score based on historical loading frequency and average loading time. Furthermore, this method incorporates component parameters to calculate resource feature weight score, enabling more intelligent identification of key components and optimization of loading order, thereby significantly improving component loading efficiency. Simultaneously, based on historical data and component parameter considerations, it can better predict user needs and rationally allocate resources, thereby optimizing user experience.

[0076] Furthermore, the flexibility and scalability of this method have been enhanced, enabling it to be flexibly adjusted according to different scenarios and needs, adapting to the development of the system and the addition of components. The prioritization method that comprehensively considers multiple dimensions helps the system to more comprehensively assess the importance and urgency of components, thereby enabling the rapid identification of key components and the implementation of corresponding measures when encountering faults or abnormal situations, ensuring the stability and reliability of the system.

[0077] In step S105, the education component is loaded according to the loading queue order, and the corresponding component lifecycle hook function is triggered based on the component configuration information.

[0078] The component lifecycle hooks include the component creation hook, component mounting hook, component update hook, and component destruction hook.

[0079] It is understood that the embodiments of this application, through precise management of component lifecycle hook functions, can effectively control the creation, mounting, updating and destruction processes of components, thereby achieving efficient resource utilization and performance optimization.

[0080] Specifically, taking React components as an example, the component lifecycle hooks include:

[0081] classEducationComponentextendsReact.Component{

[0082] constructor(props){

[0083] / / Component creation

[0084] }

[0085] componentDidMount(){

[0086] / / Component mounting

[0087] }

[0088] componentDidUpdate(prevProps, prevState){

[0089] / / Component update

[0090] }

[0091] componentWillUnmount(){

[0092] / / Component destruction

[0093] }

[0094] render(){

[0095] / / Rendering component

[0096] }

[0097] }

[0098] In this embodiment, the component lifecycle includes a component creation phase, a component mounting phase, a component update phase, and a component destruction phase.

[0099] Specifically, during the component creation phase, parameter validation, data initialization, and dependency loading are performed; during the component mounting phase, the DOM container is prepared, the initial rendering is performed, and communication channels are established; during the component update phase, data change validation, DOM updates, and state restoration are performed; and during the component destruction phase, resource reclamation, event unbinding, and memory release are performed.

[0100] It is understood that the embodiments of this application meticulously divide the component lifecycle into four stages: creation, mounting, updating, and destruction, and perform corresponding tasks in each stage, such as parameter verification, data initialization, DOM preparation and rendering, data change verification, and resource recycling, to ensure the efficient operation, stable interaction, and reasonable utilization of resources of the components, thereby improving the overall performance of the system and the user experience.

[0101] In step S106, a component-to-component communication bus based on component dependencies is established to register the data dependencies of educational scenario components, listen for component state change events, and trigger component lifecycle hook functions to update components according to the component dependencies in the component configuration information.

[0102] It is understood that by establishing a unified communication mechanism, the embodiments of this application can achieve efficient collaboration and state synchronization between components, thereby improving the maintainability and scalability of the system.

[0103] It should be noted that the communication bus is implemented using a publish-subscribe pattern. By implementing this dual-priority event management mechanism, the component-based page rendering method of this application can more intelligently handle complex educational scenarios. It not only ensures the timely processing of core teaching components and important events, but also dynamically adjusts processing strategies according to load and business needs, thereby providing a smoother and more responsive online education experience.

[0104] In this embodiment, establishing an inter-component communication bus based on component dependencies includes: obtaining event registration, execution, triggering, and broadcasting methods for the inter-component communication bus based on component dependencies in component configuration information; establishing a dual-priority event management mechanism according to component dependencies and component priority configuration in component configuration information; integrating the dual-priority mechanism into the event registration, execution, triggering, and broadcasting methods, wherein in the event registration method, an initial priority is assigned to each registered event according to the component priority configuration; in the event triggering method, the event processing order is determined according to the event queue priority; in the event execution method, the actual execution order of events is determined according to the event execution priority; in the event broadcasting method, the scope and order of broadcasting are determined according to component dependencies and business importance; and registering each educational scenario component and its corresponding event handling function to the communication bus according to the event triggering method.

[0105] Event registration refers to the process of associating event handling functions with specific events.

[0106] It is understood that this application embodiment constructs an event management system with an integrated dual-priority mechanism by parsing the dependency relationships and priority configurations in the component configuration information. It realizes the registration, execution, triggering and broadcasting of events on the inter-component communication bus, ensuring that events can be processed efficiently according to the predetermined priority order, and intelligently adjusting the broadcast range according to component dependencies and business importance. This effectively improves the collaboration efficiency between components in the education scenario, optimizes the event processing flow, and enhances the stability and response speed of the system.

[0107] In step S107, the rendering process of the education scene component is executed according to the component configuration information and the status update information received through the inter-component communication bus. The rendering result is cached for the education scene identifier, and the rendering completion event is broadcast through the inter-component communication bus.

[0108] The rendering process includes building an educational component rendering tree, calculating layout information based on component parameters and the latest state, and performing rendering operations.

[0109] Understandably, through refined rendering process management and continuous performance monitoring and optimization, efficient page updates and display can be achieved, improving user interaction and learning outcomes, while maintaining high rendering performance to adapt to different educational scenarios and device environments. This integrated rendering and optimization process ensures that online education platforms can provide a smooth and responsive user experience under various conditions, thereby effectively improving learning efficiency and teaching quality.

[0110] Specifically, the rendering process is as follows: construct a virtual DOM tree, compare it with the previous rendering result using a diff, calculate the minimum DOM operations, and perform the actual DOM update.

[0111] Simultaneously, rendering performance optimization is performed, including acquiring rendering performance data, establishing a performance scoring mechanism, executing rendering optimization strategies, handling performance anomalies, and continuously monitoring and optimizing rendering performance.

[0112] Performance optimization strategies include: component lazy loading, virtual scrolling, caching strategy optimization, image resource optimization, and code splitting.

[0113] In addition, a performance monitoring mechanism has been established to collect key rendering metrics (such as FCP, LCP, CLS, etc.) through the Performance API and set thresholds for automatic alerts and optimization suggestions.

[0114] In this embodiment, after executing the rendering process of the education scene component, the method further includes: acquiring rendering performance data; establishing a performance scoring mechanism based on the rendering performance data, comprehensively considering factors such as rendering time, memory usage, and frame rate to generate an overall performance score; executing rendering optimization strategies based on the performance score and rendering performance data, including delayed loading of large components, asynchronous loading of non-critical resources, differentiated compression of rendering results, precise triggering of component updates, and control of local rendering range; when the performance score is lower than a preset alarm threshold, broadcasting performance anomaly events through the inter-component communication bus to trigger the component lifecycle hook functions of relevant components for anomaly handling; wherein, anomaly handling includes: rendering timeout degradation, crash recovery, performance alarms, and automatic optimization; continuously monitoring rendering performance data, periodically updating the performance score, and dynamically adjusting the rendering optimization strategy based on the latest performance score and rendering performance data; and broadcasting the optimized rendering strategy to relevant components through the inter-component communication bus to continuously optimize rendering performance.

[0115] The rendering performance data may include metrics such as initial rendering time, re-rendering time, peak memory usage, CPU utilization, frame rate fluctuation range, and stuttering frequency.

[0116] It is understood that this application embodiment establishes a comprehensive performance scoring mechanism by acquiring and analyzing rendering performance data, comprehensively considering key factors such as rendering time, memory usage, and frame rate. Based on the performance score, a series of rendering optimization strategies are implemented, such as delayed loading of large components, asynchronous loading of non-critical resources, differentiated compression of rendering results, precise triggering of component updates, and control of local rendering scope. When the performance score is lower than a preset threshold, an abnormal performance event can be automatically broadcast, triggering the abnormal situation handling mechanism of the relevant components, including rendering timeout degradation, crash recovery, performance alarms, and automatic optimization. By continuously monitoring and periodically updating the performance score, optimization strategies can be dynamically adjusted and broadcast to relevant components through the inter-component communication bus, achieving continuous optimization of rendering performance, effectively improving the rendering efficiency and stability of the system, and ensuring a high-quality user experience.

[0117] The component-based page rendering method for online education proposed in this application significantly improves the page rendering efficiency and user experience of online education systems through intelligent component management and rendering optimization. This method is highly adaptable and can be flexibly configured according to different educational scenarios and user needs, providing a complete high-performance rendering solution for online education platforms. Therefore, it solves the problems of low component rendering efficiency, inability to adapt to diverse educational scenarios, insufficient analysis of user learning behavior, and lack of automation in performance optimization in existing online education technologies.

[0118] The following will illustrate a component-based page rendering method for online education through a specific example, such as... Figure 2 As shown, it includes:

[0119] Step 1: Obtaining the Page Rendering Request The system receives the following page rendering request:

[0120] Educational scenario identifier: "LIVE_CLASS_101"

[0121] User identity information: {"role":"student","grade":"11","progress":"85%"}

[0122] Device performance metrics: {"deviceType":"tablet","screenResolution":"2048x1536","cpuCores":4","memory":"3GB","networkType":"WiFi"}.

[0123] Step 2: Determine Component Configuration Information. Based on the received request information, the system selects and configures the following components from the component library:

[0124] Video Player: {id:"video-player-101", type:"VideoPlayer", params:{autoplay:true, quality:"auto"}, dependencies:["NetworkMonitor"], priority:95};

[0125] Real-time chat: {id:"chat-box-101", type:"ChatBox", params:{messageLimit:200}, dependencies:[], priority:80};

[0126] Interactive Q&A: {id:"qa-system-101", type:"QASystem", params:{autoRefresh:true}, dependencies:["ChatBox"], priority:75};

[0127] Course outline: {id:"course-outline-101", type:"Accordion", params:{expandFirst:true}, dependencies:[], priority:60};

[0128] Learning progress: {id:"progress-tracker-101", type:"ProgressBar", params:{showPercentage:true}, dependencies:[], priority:70}.

[0129] Step 3: Constructing the component dependency graph. The system constructs a dependency graph based on the component configuration information, using an adjacency list.

[0130] like Figure 3 As shown, a sophisticated dependency graph object is created to clearly represent the complex dependencies between components. This dependency graph not only helps the system understand the logical connections between components but also provides an important basis for subsequent loading optimization and parallel rendering. For example, the video player component depends on the network monitoring component, which means that the system needs to ensure that the network monitoring component is ready before loading the video player. Independent components like chat boxes and course outlines, however, have no dependencies and can flexibly schedule their loading. This explicit description of dependencies allows the system to intelligently arrange the component loading order, optimizing the overall page loading efficiency.

[0131] Step 4: Calculate the component loading priority score. The system uses a multi-factor scoring method to calculate the loading priority of each component.

[0132] like Figure 4 As shown, a highly intelligent priority calculation function is implemented. This function comprehensively considers multiple key factors to determine the loading priority of each component. This multi-dimensional evaluation method not only considers the preset importance of components but also dynamically adjusts according to the current operating environment and user habits. For example, for high-performance devices, the system may slightly increase the priority of complex components; while for frequently used components, the system will give them a higher loading priority. This flexible scoring mechanism ensures that key components are loaded first, while also making reasonable trade-offs based on actual conditions, thereby providing the best user experience under different device and network conditions.

[0133] Step 5: Execute component loading and lifecycle management system to load components according to the calculated priority order and manage their lifecycle.

[0134] like Figure 5 As shown, the implemented component lifecycle class is the core of the entire rendering process. It not only precisely controls the creation, mounting, updating, and destruction of each component, but also achieves coordination and communication between components through an event bus mechanism. This fine-grained lifecycle management ensures efficient resource utilization and timely memory release. For example, after a component is mounted, the system immediately notifies other parts that may depend on it, triggering the next operation. Similarly, when a component is destroyed, the related cleanup and notification mechanisms ensure the consistency of the system state. This rigorous management mechanism greatly improves the system's stability and performance, especially when dealing with complex educational scenarios, effectively preventing memory leaks and performance degradation.

[0135] Step Six: Establish an inter-component communication bus system. Implement an event bus for inter-component communication.

[0136] like Figure 6 As shown, the implemented event bus class is a powerful and flexible inter-component communication mechanism. It employs a publish-subscribe pattern, which allows for loosely coupled interaction between components. Through this communication bus, components can subscribe to events of interest, publish changes to their own state, or unsubscribe when they no longer need certain information. This mechanism greatly improves the maintainability and scalability of the system. For example, the progress tracker component can easily monitor video playback progress without directly depending on the video player component. This not only simplifies component design but also provides a foundation for implementing complex interaction logic and dynamic content updates, enabling the entire system to better support various educational scenarios, such as real-time interaction and collaborative learning.

[0137] Step 7: Execute the rendering process. The system executes component rendering.

[0138] Define a render function to execute the rendering process for each component. This process includes creating a virtual DOM tree, comparing the rendering results with the previous one, calculating the minimum set of DOM operations required for updates, and performing the actual DOM updates. The system executes this render function for each component to ensure efficient page updates.

[0139] Step 8: Rendering performance optimization system implements a series of performance optimization strategies.

[0140] like Figure 7 As shown, this includes component lazy loading, virtual scrolling, caching strategies, image optimization, and performance monitoring;

[0141] The system includes the following features: Component lazy loading: Utilizing React's Lazy and Suspense features, certain components are loaded only when needed, such as in a Q&A system. Virtual scrolling: For long lists (such as chat history), a fixed-size list component is used, rendering only the visible area to improve scrolling performance. Caching strategy: React's memo feature is used to avoid unnecessary component re-rendering. Image optimization: The modern picture element is used, prioritizing WebP format images and implementing lazy loading. Performance monitoring: Key rendering metrics, such as initial content rendering time and maximum content rendering time, are monitored using the Performance Observer API.

[0142] In summary, the component-based page rendering method, apparatus, device, and medium for online education provided by this invention can not only accurately predict the user's next operation on the education platform, but also intelligently preload and render on demand based on the importance and frequency of use of components. By constructing a precise component dependency graph, the loading order of components is optimized, effectively reducing page rendering blocking time. Simultaneously, a dynamic adjustment strategy based on a dual-priority mechanism ensures that the most critical teaching components always maintain high responsiveness, while infrequently used components are unloaded in a timely manner, thereby maximizing the utilization of limited system resources. Furthermore, this invention significantly improves rendering efficiency by intelligently selecting the most suitable component rendering method and optimization strategy for the current device and network conditions, further enhancing the loading speed of educational content and greatly improving the learning experience, especially in mobile learning environments with unstable network conditions. By reducing unnecessary component rendering and server requests, bandwidth consumption and server load are effectively reduced, saving operating costs for educational institutions and providing learners with a smoother, faster, and more reliable online learning experience. The method of this invention is not only applicable to current online education needs but also provides a solid technical foundation for more complex and intelligent educational scenarios in the future. It demonstrates how to deeply integrate advanced front-end rendering technology with the professional needs of the education field, and is expected to play an important role in promoting educational informatization, improving the efficiency of educational resource utilization, and facilitating personalized learning. This addresses issues in existing online education technologies such as low component rendering efficiency, inability to adapt to diverse educational scenarios, insufficient analysis of user learning behavior, and lack of automated performance optimization.

[0143] Next, referring to the accompanying drawings, a componentized page rendering apparatus for online education is described according to an embodiment of this application.

[0144] Figure 8 This is a block diagram of a componentized page rendering apparatus for online education according to an embodiment of this application.

[0145] like Figure 8 As shown, the component-based page rendering device 10 for online education includes: an acquisition module 100, a determination module 200, a construction module 300, a generation module 400, a triggering module 500, a communication module 600, and a rendering module 700.

[0146] The system comprises the following modules: Acquisition module 100 acquires page rendering requests, including an educational scenario identifier, user identity information, and device performance metrics; Determination module 200 determines component configuration information based on the educational scenario identifier and user identity information, including component identifier, component type, component parameters, component dependencies, and component priority configuration; component types include course player components, exercise system components, interactive whiteboard components, real-time communication components, and course resource components; Construction module 300 constructs a component dependency graph based on component dependencies, representing it as a directed acyclic graph; Generation module 400 calculates component loading priority scores based on component priority configurations, device performance metrics, and the component dependency graph, generating a component loading queue; and Trigger module 500 executes the loading of educational components according to the loading queue order. The system triggers corresponding component lifecycle hook functions based on component configuration information. These hook functions include component creation hooks, component mounting hooks, component update hooks, and component destruction hooks. The communication module 600 establishes an inter-component communication bus based on component dependencies. This bus registers data dependencies for educational scenario components, listens for component state change events, and triggers component lifecycle hook functions to update components according to the component dependencies in the component configuration information. The rendering module 700 executes the rendering process for educational scenario components based on component configuration information and state update information received through the inter-component communication bus. This rendering process includes constructing an educational component rendering tree, calculating layout information based on component parameters and the latest state, performing rendering operations, caching rendering results for educational scenario identifiers, and broadcasting rendering completion events through the inter-component communication bus.

[0147] It should be noted that the foregoing explanation of the component-based page rendering method embodiment for online education also applies to the component-based page rendering device for online education in this embodiment, and will not be repeated here.

[0148] The component-based page rendering device for online education proposed in this application intelligently analyzes user learning behavior data and component dependencies to accurately predict the next educational scenario a user might access, and dynamically adjusts component loading and rendering strategies based on device characteristics and network conditions. This method not only significantly improves the page loading speed and responsiveness of online education platforms but also effectively reduces unnecessary data transmission and server load. Especially under unstable network conditions or limited bandwidth, the device can prioritize loading and rendering the most important educational components, ensuring the availability of core teaching functions. By introducing a dual-priority event management mechanism, the device can more intelligently handle the component rendering order in complex educational scenarios, ensuring that key teaching content is presented first. Based on a machine learning-based component usage model, the device can dynamically adjust the component preloading strategy according to the user's learning progress and preferences, providing a more personalized learning experience. Simultaneously, an adaptive performance optimization mechanism can monitor rendering performance in real time and automatically trigger optimization measures, such as component downgrading or partial updates, when performance anomalies are detected, ensuring stable system operation under various device and network environments. Therefore, this solves the problems of low component rendering efficiency, inability to adapt to diverse educational scenarios, insufficient user learning behavior analysis, and lack of automated performance optimization in existing online education technologies. Figure 9 A schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device may include:

[0149] The memory 901, the processor 902, and the computer program stored on the memory 901 and capable of running on the processor 902.

[0150] When processor 902 executes the program, it implements the component-based page rendering method for online education provided in the above embodiments.

[0151] Furthermore, electronic devices also include:

[0152] Communication interface 903 is used for communication between memory 901 and processor 902.

[0153] The memory 901 is used to store computer programs that can run on the processor 902.

[0154] The memory 901 may include high-speed RAM (Random Access Memory) and may also include non-volatile memory, such as at least one disk storage device.

[0155] If the memory 901, processor 902, and communication interface 903 are implemented independently, then the communication interface 903, memory 901, and processor 902 can be interconnected via a bus to complete communication between them. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 9 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0156] Optionally, in a specific implementation, if the memory 901, processor 902, and communication interface 903 are integrated on a single chip, then the memory 901, processor 902, and communication interface 903 can communicate with each other through an internal interface.

[0157] Processor 502 may be a CPU (Central Processing Unit), an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement embodiments of this application.

[0158] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described component-based page rendering method for online education.

[0159] This application also provides a computer program product, including a computer program or instructions, for implementing the component-based page rendering method for online education as described in the above embodiments.

[0160] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0161] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0162] Any process or method described in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or N executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0163] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented using any of the following techniques known in the art, or a combination thereof: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (FPGAs), field-programmable gate arrays (FPGAs), etc.

[0164] Those skilled in the art will understand that all or part of the steps of the methods implementing the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0165] Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of this application.

Claims

1. A component-based page rendering method for online education, characterized in that, The method includes: Obtain a page rendering request, wherein the page rendering request includes an education scene identifier, user identity information, and device performance indicators; The component configuration information is determined based on the educational scenario identifier and the user identity information. The component configuration information includes component identifier, component type, component parameters, component dependencies and component priority configuration. The component types include course player component, exercise system component, interactive whiteboard component, real-time communication component and course resource component. A component dependency graph is constructed based on the aforementioned component dependencies, and it is represented as a directed acyclic graph. Calculate the component loading priority score based on the component priority configuration, the device performance indicators, and the component dependency graph, and generate a component loading queue. The educational components are loaded according to the component loading queue order, and the corresponding component lifecycle hook functions are triggered based on the component configuration information. The component lifecycle hook functions include component creation hook, component mounting hook, component update hook, and component destruction hook. Establish an inter-component communication bus based on the component dependencies, which is used to register the data dependencies of educational scenario components, listen for component state change events, and trigger the component lifecycle hook function to update the component according to the component dependencies in the component configuration information; Based on the component configuration information and the status update information received through the inter-component communication bus, the rendering process of the education scene component is executed. The rendering process includes constructing an education component rendering tree, calculating layout information based on the component parameters and the latest status, performing rendering operations, caching the rendering results for the education scene identifier, and broadcasting a rendering completion event through the inter-component communication bus.

2. The component-based page rendering method for online education according to claim 1, characterized in that, Before generating the component loading queue, based on the component priority configuration, the device performance metrics, and the component dependency graph, the following steps are included: Based on machine learning models, user behavior data is analyzed to construct a component usage model. The component usage model includes a component access model, an interaction duration model, an operation behavior model, and a scenario dependency model. The component access model records the frequency of component calls, the interaction duration model records the duration of user interaction with the component, the operation behavior model records the user's operation sequence on the component, and the scenario dependency model records the component dependency relationships under different educational scenarios. Based on the component usage model, the component configuration information is dynamically adjusted, wherein the component priority weight is updated according to the component access frequency, the component preloading strategy is determined according to the interaction duration data, the component caching strategy is optimized according to the operation sequence data, and the component degradation scheme is adjusted according to the scenario association data. Based on the dynamically adjusted component configuration information, a configuration parameter evaluation index is established, which includes component loading time deviation, cache hit rate, memory usage rate and runtime performance index. Based on the configuration parameter evaluation index, the configuration parameters are continuously optimized through machine learning algorithms. The device performance metrics in the component configuration information are updated based on the data of the configuration parameter evaluation metrics, wherein the device performance metrics include CPU utilization, memory usage, network status and bandwidth data; Based on the updated device performance metrics, a loading strategy adjustment rule is established, which includes: reducing the number of concurrent loads when CPU utilization exceeds a preset threshold, releasing low-priority component memory when memory utilization exceeds a preset threshold, and prioritizing the use of cached components when network latency exceeds a preset threshold. The effects of strategy adjustments are recorded using mathematical models, a dynamic mapping relationship is established between the device performance indicators and the loading strategy adjustment rules, and the component priority configuration in the component configuration information is updated periodically.

3. The component-based page rendering method for online education according to claim 1, characterized in that, Based on the component priority configuration, the device performance metrics, and the component dependency graph, a component loading priority score is calculated, and a component loading queue is generated, including: Calculate the basic priority score based on the component type and basic weight in the component configuration information; calculate the dependency weight score based on the hierarchical relationship and the number of times the component is depended upon in the dependency graph; calculate the historical data weight score based on the historical loading frequency and average loading time over a certain period of time; and calculate the resource feature weight score based on the component parameters in the component configuration information. The target priority score is calculated based on the basic priority score, the dependency weight score, the historical data weight score, and the resource feature weight score. The formula for calculating the priority score is as follows: Score=BaseScore*DependencyWeight*PerformanceWeight*HistoryWeight Among them, BaseScore is the basic priority score, DependencyWeight is the dependency weight, PerformanceWeight is the device performance weight, and HistoryWeight is the historical usage frequency weight.

4. The component-based page rendering method for online education according to claim 1, characterized in that, The component lifecycle includes a component creation phase, a component mounting phase, a component update phase, and a component destruction phase. In the component creation phase, parameter validation, data initialization, and dependency loading are performed. In the component mounting phase, the DOM container is prepared, the initial rendering is performed, and a communication channel is established. In the component update phase, data change validation, DOM updates, and state restoration are performed. In the component destruction phase, resource reclamation, event unbinding, and memory release are performed.

5. The component-based page rendering method for online education according to claim 1, characterized in that, Establishing an inter-component communication bus based on the aforementioned component dependencies includes: Based on the component dependencies in the component configuration information, obtain the event registration, execution, triggering, and broadcasting methods for the inter-component communication bus; Based on the component dependencies and component priority configurations in the component configuration information, a dual-priority event management mechanism is established. The dual-priority mechanism is integrated into the event registration, execution, triggering, and broadcasting methods. Specifically, in the event registration method, an initial priority is assigned to each registered event based on the component priority configuration; in the event triggering method, the event processing order is determined based on the event queue priority; in the event execution method, the actual execution order of events is determined based on the event execution priority; and in the event broadcasting method, the scope and order of broadcasting are determined based on the component dependencies and business importance. According to the event triggering method, each of the educational scenario components and its corresponding event handling functions are registered to the communication bus.

6. The component-based page rendering method for online education according to claim 1, characterized in that, After executing the rendering process of the educational scene component, the process also includes: Obtain rendering performance data, including initial rendering time, re-rendering time, peak memory usage, CPU utilization, frame rate fluctuation range, and stuttering frequency. A performance scoring mechanism is established based on the rendering performance data to generate a performance score. Based on the performance score and the rendering performance data, a rendering optimization strategy is executed, which includes delayed loading of large components, asynchronous loading of non-critical resources, differential compression of rendering results, precise triggering of component updates, and control of local rendering range. When the performance score is lower than the preset alarm threshold, a performance anomaly event is broadcast through the inter-component communication bus, triggering the component lifecycle hook function of the relevant component to handle the anomaly. The anomaly handling includes rendering timeout degradation, crash recovery, performance alarm, and automatic optimization. The rendering performance data is continuously monitored, the performance score is updated regularly, and the rendering optimization strategy is dynamically adjusted based on the latest performance score and rendering performance data to obtain the optimized rendering strategy. The optimized rendering strategy is broadcast to relevant components through the inter-component communication bus to continuously optimize rendering performance.

7. A component-based page rendering device for online education, characterized in that, include: The acquisition module is used to acquire page rendering requests, wherein the page rendering requests include educational scene identifiers, user identity information, and device performance indicators; The determination module is used to determine component configuration information based on the education scenario identifier and the user identity information. The component configuration information includes component identifier, component type, component parameters, component dependencies and component priority configuration. The component types include course player component, exercise system component, interactive whiteboard component, real-time communication component and course resource component. The building module is used to construct a component dependency graph based on the component dependencies, and represent it as a directed acyclic graph; The generation module is used to calculate the component loading priority score based on the component priority configuration, the device performance indicators and the component dependency graph, and generate a component loading queue. The triggering module is used to load the education component according to the component loading queue order, and trigger the corresponding component lifecycle hook function based on the component configuration information. The component lifecycle hook function includes component creation hook, component mounting hook, component update hook and component destruction hook. The communication module is used to establish an inter-component communication bus based on the component dependencies, register the data dependencies of educational scenario components, listen for component state change events, and trigger the component lifecycle hook function to update the component according to the component dependencies in the component configuration information. The rendering module is used to execute the rendering process of the education scene component according to the component configuration information and the status update information received through the inter-component communication bus. The rendering process includes constructing an education component rendering tree, calculating layout information based on the component parameters and the latest status, performing rendering operations, caching the rendering results for the education scene identifier, and broadcasting a rendering completion event through the inter-component communication bus.

8. An electronic device, characterized in that, include: A memory, a processor, and a computer program stored in the memory and executable on the processor, the processor executing the program to implement the component-based page rendering method for online education as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program or instructions stored thereon, characterized in that, When the computer program or instructions are executed, they implement the component-based page rendering method for online education as described in any one of claims 1-6.

10. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or instructions are executed, they implement the component-based page rendering method for online education as described in any one of claims 1-6.

Images