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

Abstract

The invention relates to the technical field of online education, in particular to a componentized page rendering method and device for online education, equipment and a medium, and the method comprises the steps: obtaining a page rendering request, and determining component configuration information; constructing a component dependency graph; calculating component loading priority scores, and generating a loading queue; loading the execution component and managing the life cycle; establishing an inter-component communication bus; and executing a rendering process and performing performance optimization. According to the method, the user learning behavior and the component dependency relationship are intelligently analyzed, the component loading and rendering strategy is dynamically adjusted, and a dual-priority event management mechanism is introduced, so that efficient intelligent rendering of the education scene component is realized. Therefore, the problems of low online education component rendering efficiency, poor scene adaptability, insufficient learning behavior analysis, lack of performance optimization automation and the like in the prior art are solved, and the performance of an online education platform and the user experience are remarkably improved.

Description

Technical Field

[0001] The present invention relates to the technical field of online education, and in particular to a componentized page rendering method, device, equipment and medium for online education. Background Art

[0002] With the popularization 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 to a hybrid teaching model that combines online and offline teaching. This shift has brought new challenges and opportunities to educational technology.

[0003] In the development process of online education platforms, page rendering technology plays a vital role. Early online education platforms mostly used static pages or server-side rendering technology. Although this method is simple and direct, it has the following problems: it is difficult to quickly adjust the page content and layout according to different users and different devices; the page refreshes frequently, affecting the user experience; a large amount of rendering work is concentrated on the server side, increasing the server pressure; the front-end and back-end are highly coupled, making it difficult to develop and maintain in parallel.

[0004] In order to solve these problems, we gradually turned to front-end rendering technology. The rise of single-page applications has made front-end rendering mainstream. However, with the increasing complexity of online education scenarios, simple front-end rendering has also exposed some problems: the initial load requires downloading a large number of JavaScript files, which affects the speed of the first screen display; search engines have difficulty crawling dynamically generated content; and a large number of DOM operations in complex pages may lead to performance degradation.

[0005] In order to balance the advantages and disadvantages of server-side rendering and client-side rendering, isomorphic rendering technology came into being. This technology can share the same rendering logic on the server and client, which not only ensures the first screen loading speed, but also takes into account the interactive experience. However, in actual applications, isomorphic rendering also faces some challenges, such as differences in server and client environments, complex state management, and other issues.

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

[0007] In the field of education, these problems are particularly prominent. The diversity of educational scenarios requires the page rendering system to be highly flexible and scalable. At the same time, the particularity of educational content also places higher demands on rendering performance.

[0008] In addition, with the application of artificial intelligence technology in the field of education, personalized learning and adaptive teaching have become new trends. This requires the page rendering system to dynamically adjust the content display according to the learner's characteristics and learning progress, further increasing the technical difficulty. Summary of the invention

[0009] The present invention provides a componentized page rendering method, device, equipment and medium for online education, so as to solve the technical problems in the prior art such as low efficiency of online education page rendering, long loading time and impact on user experience; complex component management and difficulty in adapting to different education scenarios and user needs; improper handling of dependencies between components, resulting in confusion in rendering order and waste of resources; lack of systematic methods for rendering performance optimization, making it difficult to cope with complex and changeable education scenarios; lack of intelligent component configuration and loading mechanism, and inability to perform adaptive optimization according to user behavior and device performance.

[0010] The first aspect of the present invention provides a componentized page rendering method for online education, including the following steps: obtaining a page rendering request, which includes an education scenario identifier, user identity information and device performance indicators; determining component configuration information according to the education scenario 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, and expressing it in the form of a directed acyclic graph; calculating component loading priority scores according to component priority configuration, device performance indicators and component dependency graph, and generating a component loading queue; executing education component loading in the order of the loading queue, and triggering corresponding component life cycle hook functions; establishing an inter-component communication bus based on component dependencies, which is used to register component data dependencies, listen to state change events, and trigger component life cycle hook functions to update components; executing the rendering process of the education scenario component according to the component configuration information and the status update information received by the communication bus, including constructing a rendering tree, calculating layout, executing rendering, caching results and broadcasting completion events.

[0011] Preferably, the component loading priority score is calculated according to the component priority configuration, the device performance index and the component dependency graph, and before the component loading queue is generated, it includes: analyzing user behavior data based on a machine learning model to build 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, wherein the component access model records the calling frequency of the component, the interaction duration model records the duration of the user's 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 relationship in 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 according to the dynamically adjusted component configuration information. Parameter evaluation indicators, wherein the configuration parameter evaluation indicators include component loading time deviation, cache hit rate, memory occupancy rate and runtime performance indicators, and the configuration parameters are continuously optimized through a machine learning algorithm based on the configuration parameter evaluation indicators; the device performance indicators in the component configuration information are updated according to the data of the configuration parameter evaluation indicators, wherein the device performance indicator data includes CPU usage, memory occupancy rate, network status and bandwidth data; loading strategy adjustment rules are established according to the updated device performance indicator data, wherein the loading strategy adjustment rules include: reducing the number of concurrent loadings when the CPU usage rate exceeds a preset threshold, releasing low-priority component memory when the memory usage rate exceeds a preset threshold, and giving priority to cache components when it is detected that the network delay exceeds a preset threshold; recording the policy adjustment effect through a mathematical model, establishing a dynamic mapping relationship between the device performance indicator and the loading strategy adjustment rule, and regularly updating the component priority configuration in the component configuration information.

[0012] Preferably, a component loading priority score is calculated according to the component priority configuration, the device performance index and the component dependency graph, and a component loading queue is generated, including: calculating a basic priority score according to the component type and basic weight in the component configuration information; calculating a dependency weight score according to the hierarchical relationship and the number of dependencies in the component dependency graph; calculating a historical data weight score based on the historical loading frequency and the average loading time in the past certain period of time; calculating a resource feature weight score according to the component parameters in the component configuration information; and obtaining a target priority score by weighted calculation based on the basic priority score, the dependency weight score, the historical data weight score and the resource feature weight score.

[0013] Preferably, the component life cycle includes a component creation phase, a component mounting phase, a component update phase and a component destruction phase, wherein in the component creation phase, parameter verification, data initialization and dependency loading are performed; in the component mounting phase, a DOM container is prepared, the first rendering is performed and a communication channel is established; in the component update phase, data change verification, DOM update and state recovery are performed; in the component destruction phase, resource recovery, event unbinding and memory release are performed.

[0014] Preferably, an inter-component communication bus based on the component dependencies is established, including: based on the component dependencies in the component configuration information, obtaining event registration, execution, triggering and broadcasting methods for the inter-component communication bus; establishing an event management mechanism with a dual priority mechanism according to the component dependencies and component priority configurations 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 processing order of events 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; according to the event triggering method, each of the educational scene components and their corresponding event processing functions are registered in the communication bus.

[0015] Preferably, after executing the rendering process of the educational scene component, it also includes: obtaining rendering performance data, including indicators such as first rendering time, re-rendering time, memory peak occupancy, CPU usage, frame rate fluctuation range and freeze frequency; establishing a performance scoring mechanism based on the rendering performance data, comprehensively considering factors such as rendering time, memory usage, frame rate, etc., to generate an overall performance score; executing a rendering optimization strategy 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, local rendering range control, etc.; when the performance score is lower than a preset alarm threshold, broadcasting a performance exception event through the inter-component communication bus, triggering the component life cycle hook function of the relevant component to handle the exception, wherein the exception handling includes rendering timeout degradation, crash recovery, performance alarm and automatic optimization; continuously monitoring the rendering performance data, regularly updating the performance score, and dynamically adjusting the rendering optimization strategy based on the latest performance score and rendering performance data; broadcasting the optimized rendering strategy to the relevant components through the inter-component communication bus to continuously optimize the rendering performance.

[0016] The second aspect of the present invention provides a componentized page rendering device for online education, including: an acquisition module, used to obtain a page rendering request, wherein the page rendering request includes an education scenario identifier, user identity information and device performance indicators; a determination module, used to determine component configuration information based on the education scenario identifier and the user identity information, wherein the component configuration information includes component identifier, component type, component parameters, component dependency and component priority configuration, and the component types include course player components, exercise system components, interactive whiteboard components, real-time communication components and course resource components; a construction module, used to construct a component dependency graph based on the component dependency and represent it in the form of a directed acyclic graph; a generation module, used to calculate a 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; a trigger module, used to execute the loading queue in sequence according to the loading queue. The educational component is loaded and the corresponding component life cycle hook function is triggered based on the component configuration information, wherein the component life cycle hook function includes a component creation hook, a component mounting hook, a component update hook and a component destruction hook; a communication module is used to establish an inter-component communication bus based on the component dependency, to register the data dependency of the educational scene component, to monitor component status change events, and to trigger the component life cycle hook function to perform component update according to the component dependency in the component configuration information; a rendering module is used to execute the rendering process of the educational scene component according to the component configuration information and the status update information received through the inter-component communication bus, wherein the rendering process includes constructing an educational component rendering tree, calculating layout information based on the component parameters and the latest status, executing rendering operations, caching rendering results for the educational scene identifier, and broadcasting rendering completion events through the inter-component communication bus.

[0017] A third aspect of the present invention provides an electronic device, comprising: 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 a componentized page rendering method for online education as described in the above embodiment.

[0018] A fourth aspect of the present invention provides a computer-readable storage medium having a computer program or instructions stored thereon. When the computer program or instructions are executed, a componentized page rendering method for online education as described in the above embodiment is implemented.

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

[0020] Therefore, the present invention has at least the following beneficial effects: The embodiment of the present invention significantly improves page rendering efficiency and user experience through component design and intelligent loading strategy. The component configuration based on scene and user information is adopted to realize the personalization and precision of the rendering process. By constructing a component dependency graph and priority mechanism, the component loading order is optimized and the overall rendering performance is improved.

[0021] The present invention introduces a component usage model and dynamic configuration adjustment mechanism based on machine learning, which can adaptively optimize according to user behavior and device performance. By establishing a communication bus and life cycle management between components, efficient coordination and state synchronization of components are achieved.

[0022] In addition, the rendering performance monitoring and optimization mechanism provided by the present invention can adjust the rendering strategy in real time to ensure stability and efficiency in various scenarios. Through the automated performance evaluation and optimization process, the need for manual intervention is greatly reduced, and the maintainability of the system is improved.

[0023] This solves the problems of low rendering efficiency of online education components, poor scene adaptability, insufficient learning behavior analysis, and lack of performance optimization automation in the prior art.

[0024] Additional aspects and advantages of the present invention will be given in part in the following description and in part will be obvious from the following description, or will be learned through practice of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the following description of the embodiments in conjunction with the accompanying drawings, in which: Figure 1 A flowchart of a componentized page rendering method for online education provided by an embodiment of the present invention; Figure 2 A flowchart of a componentized page rendering method for online education provided according to an embodiment of the present application; Figure 3 is a schematic diagram of a component dependency graph in an embodiment of the present invention; Figure 4 A schematic diagram of a component loading priority calculation process in an embodiment of the present invention; Figure 5 is a schematic diagram of a component life cycle in an embodiment of the present invention; Figure 6 A schematic diagram of the structure of an inter-component communication bus in an embodiment of the present invention; Figure 7 A schematic diagram of a rendering performance optimization process in an embodiment of the present invention; Figure 8 A structural block diagram of a componentized page rendering device for online education provided by an embodiment of the present invention; Fig. 9 It is a schematic diagram of the structure of an electronic device provided according to an embodiment of the present application. DETAILED DESCRIPTION

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

[0027] The following describes the componentized page rendering method, device, equipment and medium for online education in the embodiment of the present application with reference to the accompanying drawings. In view of the problems existing in the online education system mentioned in the above background technology, the present application provides a componentized page rendering method for online education, in which the page rendering request is intelligently processed, the components are dynamically configured and loaded, and an efficient component communication mechanism is established, so as to achieve efficient rendering and optimization of online education pages. As a result, the technical problems in the prior art such as low page rendering efficiency, poor user experience, complex component management, and difficulty in optimizing rendering performance are solved.

[0028] Specifically, Figure 1 A flow chart of a componentized page rendering method for online education provided in an embodiment of the present application.

[0029] like Figure 1 As shown, the componentized page rendering method for online education includes the following steps: In step S101, a page rendering request is obtained.

[0030] Among them, the page rendering request may include the education scenario identifier, user identity information and device performance indicators; the education scenario identifier may include the course ID, course type (such as live classes, recorded classes, interactive exercises, etc.); user identity information may include user roles (such as students, teachers, administrators), grade, learning progress, etc.; device performance indicators may include device type (PC, mobile device), screen resolution, CPU performance, memory size, network conditions, etc.

[0031] It can be understood that the embodiment of the present application obtains page rendering requests, and then responds to and processes these requests in a timely manner, and can load and render the content required by the user in a targeted manner, thereby avoiding unnecessary resource consumption and waste of time.

[0032] In step S102, component configuration information is determined according to the education scenario identifier and user identity information.

[0033] The component configuration information may include component identification, component type, component parameters, component dependency, and component priority configuration.

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

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

[0036] Taking the live course scenario as an example, configure the following components: Video player component: {id: "video-player-001", type: "VideoPlayer", params: {autoplay: true, quality: "high"}, dependencies: ["ChatComponent"], priority: 90}; Real-time chat component: {id: "chat-component-001", type: "ChatBox", params: {messageLimit: 100}, dependencies: [], priority: 70}; Course Outline component: {id:"course-outline-001", type:"Accordion", params:{expandFirst:true}, dependencies:[], priority:50}; Interactive Q&A component: {id: "qa-component-001", type: "QASystem", params: {autoRefresh: true}, dependencies: ["ChatComponent"], priority: 60}; Course material component: {id:"resource-list-001", type:"ResourceList", params:{preload:false}, dependencies:[], priority:40}.

[0037] In step S103, a component dependency graph is constructed based on the component dependency relationship and represented in the form of a directed acyclic graph.

[0038] Among them, the component dependency graph is a directed acyclic graph, which is used to represent the logical relationship and loading order between components.

[0039] It can be understood that, by constructing a component dependency graph, the embodiment of the present application can clearly understand the relationship between components, providing an important basis for subsequent loading optimization and parallel rendering.

[0040] Specifically, the component dependency graph is represented using an adjacency list: const dependencyGraph = { "video-player-001":["chat-component-001"], "chat-component-001":[], "course-outline-001":[], "qa-component-001":["chat-component-001"], "resource-list-001":[] }; In step S104, component loading priority scores are calculated according to component priority configuration, device performance indicators, and component dependency graphs, and a component loading queue is generated.

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

[0042] It can be understood that the embodiment of the present application designs a loading queue by calculating component loading priority scores based on component priority configuration, device performance indicators, and component dependency graphs, which can provide users with a smoother and more reasonable page rendering experience while ensuring fast loading of key components.

[0043] 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.

[0044] The calculation formula of the priority score is: Score=BaseScore*DependencyWeight*PerformanceWeight*HistoryWeight 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.

[0045] In an embodiment of the present application, a component loading priority score is calculated according to component priority configuration, device performance indicators and component dependency graph, and before a component loading queue is generated, the steps include: analyzing user behavior data based on a machine learning model to build a component usage model; dynamically adjusting component configuration information based on the component usage model, wherein component priority weights are updated according to component access frequencies, component preloading strategies are determined according to interaction duration data, component cache strategies are optimized according to operation sequence data, and component degradation schemes are adjusted according to scenario-related data; configuration parameter evaluation indicators are established according to the dynamically adjusted component configuration information, wherein the configuration parameter evaluation indicators include component loading time deviation, cache hit rate, memory occupancy rate and runtime performance indicators, and the configuration parameter evaluation indicators are based on the configuration parameter evaluation indicators. The target continuously optimizes configuration parameters through machine learning algorithms; updates device performance indicators in component configuration information according to data of configuration parameter evaluation indicators, wherein device performance indicator data includes CPU usage, memory occupancy, network status and bandwidth data; establishes loading strategy adjustment rules according to updated device performance indicator data, wherein loading strategy adjustment rules include: reducing the number of concurrent loads when CPU usage exceeds a preset threshold, releasing low-priority component memory when memory usage exceeds a preset threshold, and giving priority to cache components when it is detected that network delay exceeds a preset threshold; records policy adjustment effects through mathematical models, establishes a dynamic mapping relationship between device performance indicators and loading strategy adjustment rules, and regularly updates component priority configuration in component configuration information.

[0046] Among them, the component usage model includes component access model, interaction duration model, operation behavior model and scenario dependency model. The component access model records the calling frequency of the component, the interaction duration model records the duration of the user's 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 relationship in different educational scenarios.

[0047] It is understandable that the embodiment of the present application utilizes a machine learning model to construct a component usage model through analysis of user behavior data, and dynamically adjusts the component configuration information accordingly, including updating component priority weights, determining preloading strategies, optimizing cache strategies, and adjusting downgrade plans. Subsequently, a configuration parameter evaluation index is established based on the adjusted configuration information, the configuration parameters are optimized using a machine learning algorithm, and the device performance indicators in the component configuration information are updated based on the evaluation index data. Next, a loading strategy adjustment rule is formulated based on the updated device performance indicator data, the strategy adjustment effect is recorded with the help of a mathematical model, and a dynamic mapping relationship between the device performance indicator and the loading strategy adjustment rule is established, so as to regularly update the component priority configuration, realize dynamic optimization of the component configuration, and improve system performance and user experience.

[0048] In an embodiment of the present application, a component loading priority score is calculated based on component priority configuration, device performance indicators and component dependency graph, and a component loading queue is generated, including: 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 dependencies in the component dependency graph; calculating a historical data weight score based on the historical loading frequency and average loading time in the past certain period of time; calculating a resource feature weight score based on component parameters in the component configuration information; and obtaining a target priority score by weighted calculation based on the basic priority score, dependency weight score, historical data weight score and resource feature weight score.

[0049] It is understandable that the embodiment of the present application combines the type of component and the basic weight to determine the basic priority score, takes into account the hierarchical relationship between components and the number of dependencies to calculate the dependency weight score, and also evaluates the historical data weight score based on the historical loading frequency and the average loading time. In addition, the method also incorporates component parameters to calculate the resource feature weight score, which can more intelligently identify key components and optimize the loading order, thereby significantly improving component loading efficiency. At the same time, based on the consideration of historical data and component parameters, it can better predict user needs and reasonably allocate resources, thereby optimizing the user experience.

[0050] In addition, the flexibility and scalability of the method have also been enhanced. It can be flexibly adjusted according to different scenarios and needs to adapt to the development of the system and the increase of components. The priority determination method that comprehensively considers multiple dimensions helps the system to more comprehensively evaluate the importance and urgency of components, so that when encountering failures or abnormal situations, it can quickly identify key components and take corresponding measures to ensure the stability and reliability of the system.

[0051] In step S105, the education component loading is executed according to the loading queue sequence, and the corresponding component life cycle hook function is triggered based on the component configuration information.

[0052] Among them, the component lifecycle hook functions include component creation hooks, component mounting hooks, component update hooks, and component destruction hooks.

[0053] It can be understood that through the precise management of the component lifecycle hook functions in the embodiments of this application, the processes of component creation, mounting, update, and destruction can be effectively controlled, achieving efficient utilization of resources and optimization of performance.

[0054] Specifically, taking React components as an example, the component lifecycle hook functions include: class EducationComponent extends React.Component { constructor(props) { / / Component creation } componentDidMount() { / / Component mounting } componentDidUpdate(prevProps, prevState) { / / Component update } componentWillUnmount() { / / Component destruction } render() { / / Render the component } } In the embodiments of this application, the component lifecycle includes a component creation stage, a component mounting stage, a component update stage, and a component destruction stage.

[0055] Among them, in the component creation stage, parameter verification, data initialization, and dependency loading are performed; in the component mounting stage, a DOM container is prepared, the first rendering is performed, and a communication channel is established; in the component update stage, data change verification, DOM update, and state restoration are performed; in the component destruction stage, resource recycling, event unbinding, and memory release are performed.

[0056] It can be understood that by carefully dividing the component lifecycle into four stages: creation, mounting, update, and destruction, and performing corresponding tasks in each stage, such as parameter verification, data initialization, DOM preparation and rendering, data change verification, resource recycling, etc., the efficient operation, stable interaction of the component, and reasonable utilization of resources are ensured, thereby improving the overall performance and user experience of the system.

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

[0058] It can be understood that the embodiments of the present application can achieve efficient collaboration and status synchronization between components by establishing a unified communication mechanism, thereby improving the maintainability and scalability of the system.

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

[0060] In an embodiment of the present application, an inter-component communication bus based on component dependencies is established, including: based on the component dependencies in the component configuration information, obtaining event registration, execution, triggering and broadcasting methods for the inter-component communication bus; establishing an event management mechanism with a dual priority mechanism according to the component dependencies and component priority configurations 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 processing order of events 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 the broadcast are determined according to the component dependencies and the importance of the business; according to the event triggering method, each educational scenario component and its corresponding event processing function are registered in the communication bus.

[0061] Among them, event registration refers to the process of associating an event processing function with a specific event.

[0062] It can be understood that the embodiment of the present application constructs an event management system with an integrated dual priority mechanism by parsing the dependencies and priority configurations in the component configuration information, and realizes the registration, execution, triggering and broadcasting of events on the inter-component communication bus, ensuring that events can be efficiently processed in the established priority order, and intelligently adjusting the broadcast range according to component dependencies and business importance, effectively improving the collaborative efficiency between components in educational scenarios, optimizing the event processing process, and enhancing the stability and response speed of the system.

[0063] In step S107, the rendering process of the educational 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 educational scene identifier, and the rendering completion event is broadcast through the inter-component communication bus.

[0064] The rendering process includes constructing an educational component rendering tree, calculating layout information based on component parameters and the latest status, and performing rendering operations.

[0065] It is understandable that through refined rendering process management and continuous performance monitoring and optimization, efficient page updates and displays can be achieved, improving the user's interactive experience and learning effect, while maintaining efficient rendering performance and adapting to different educational scenarios and device environments. This integrated rendering and optimization process ensures that the online education platform can provide a smooth and responsive user experience under various conditions, thereby effectively improving learning efficiency and teaching quality.

[0066] Specifically, the rendering process is: construct a virtual DOM tree, perform a diff comparison with the previous rendering result, calculate the minimized DOM operation, and perform the actual DOM update.

[0067] At the same time, rendering performance optimization is carried out, including obtaining rendering performance data, establishing a performance scoring mechanism, implementing rendering optimization strategies, handling performance anomalies, and continuously monitoring and optimizing rendering performance.

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

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

[0070] In an embodiment of the present application, after executing the rendering process of the educational scene component, it also includes: obtaining rendering performance data; establishing a performance scoring mechanism based on the rendering performance data, comprehensively considering factors such as rendering time, memory usage, frame rate, etc., and generating an overall performance score; executing a rendering optimization strategy 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, local rendering range control, etc.; when the performance score is lower than the preset alarm threshold, broadcasting a performance exception event through the inter-component communication bus, triggering the component life cycle hook function of the relevant component to handle the exception; wherein, the exception handling includes: rendering timeout degradation, crash recovery, performance alarm, and automatic optimization; continuously monitoring rendering performance data, regularly updating performance scores, and dynamically adjusting rendering optimization strategies based on the latest performance scores and rendering performance data; broadcasting the optimized rendering strategy to relevant components through the inter-component communication bus to continuously optimize rendering performance.

[0071] Among them, rendering performance data may include indicators such as first rendering time, re-rendering time, peak memory usage, CPU usage, frame rate fluctuation range, and freeze frequency.

[0072] It is understandable that the embodiment of the present application establishes a comprehensive performance scoring mechanism by acquiring and analyzing rendering performance data, taking into account 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, accurate triggering of component updates, and control of local rendering range. When the performance score is lower than the preset threshold, it can automatically broadcast performance abnormality events to trigger the abnormal situation handling mechanism of related components, including rendering timeout degradation, crash recovery, performance warnings, and automatic optimization. By continuously monitoring and regularly updating performance scores, it is possible to dynamically adjust the optimization strategy and broadcast it to related components through the inter-component communication bus to achieve continuous optimization of rendering performance, effectively improve the rendering efficiency and stability of the system, and ensure a high-quality user experience.

[0073] According to the componentized page rendering method for online education proposed in the embodiment of the present application, the page rendering efficiency and user experience of the online education system are significantly improved through intelligent component management and rendering optimization. The method is highly adaptable and can be flexibly configured according to different educational scenarios and user needs, providing a complete set of high-performance rendering solutions for online education platforms. As a result, the problems of low component rendering efficiency, inability to adapt to diversified educational scenarios, insufficient analysis of user learning behavior, and lack of automation in performance optimization in existing online education technologies are solved.

[0074] The componentized page rendering method for online education will be described below through a specific embodiment. Figure 2 As shown, including: Step 1: Get the page rendering request The system receives the following page rendering request: Education scene logo: "LIVE_CLASS_101" User identity information: {"role":"student","grade":"11","progress":"85%"} Device performance indicators: {"deviceType":"tablet","screenResolution":"2048x1536","cpuCores":4,"memory":"3GB","networkType":"WiFi"}.

[0075] Step 2: Determine component configuration information Based on the received request information, the system selects and configures the following components from the component library: Video player: {id: "video-player-101", type: "VideoPlayer", params: {autoplay: true, quality: "auto"}, dependencies: ["NetworkMonitor"], priority: 95}; real-time-chat: {id: "chat-box-101", type: "ChatBox", params: {messageLimit: 200}, dependencies: [], priority: 80}; Interactive Q&A:{id:"qa-system-101", type:"QASystem", params:{autoRefresh:true}, dependencies:["ChatBox"], priority:75}; Course Outline: {id: "course-outline-101", type: "Accordion", params: {expandFirst: true}, dependencies: [], priority: 60}; Learning progress:{id:"progress-tracker-101", type:"ProgressBar", params:{showPercentage:true}, dependencies:[], priority:70}.

[0076] Step 3: Build component dependency graph The system builds a dependency graph based on component configuration information, using an adjacency list.

[0077] like Figure 3 As shown in the figure, 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 before loading the video player, the system needs to ensure that the network monitoring component is ready. Independent components such as chat boxes and course outlines can flexibly arrange loading times because they have no dependencies. This clear description of dependencies enables the system to intelligently arrange the order in which components are loaded and optimize the loading efficiency of the overall page.

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

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

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

[0081] like Figure 5 As shown in the figure, the implemented component lifecycle class is the core of the entire rendering process. It not only accurately controls the creation, mounting, updating, and destruction of each component, but also realizes the coordination and communication between components through the event bus mechanism. This sophisticated lifecycle management ensures efficient use of resources and timely release of memory. For example, after the component is mounted, the system will immediately notify other parts that may depend on the component, thereby triggering the next operation. Similarly, when the component is destroyed, the relevant cleanup work and notification mechanism can also ensure the consistency of the system state. This rigorous management mechanism greatly improves the stability and performance of the system, especially when dealing with complex educational scenarios, it can effectively prevent memory leaks and performance degradation problems.

[0082] Step 6: Establish an inter-component communication bus system to implement an event bus for inter-component communication.

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

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

[0085] Define a rendering function to perform the rendering process for each component. This process includes creating a virtual DOM tree, comparing the difference with the previous rendering result, calculating the minimum set of DOM operations that need to be updated, and performing the actual DOM update. The system executes this rendering function for each component to ensure that the page is updated efficiently.

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

[0087] like Figure 7 As shown, it includes component lazy loading, virtual scrolling, caching strategy, image optimization and performance monitoring; Among them, lazy loading of components: Use React's Lazy and Suspense functions to load certain components only when needed, such as the question-and-answer system. Virtual scrolling: For long lists (such as chat records), use a fixed-size list component to only render the content of the visible area to improve scrolling performance. Cache strategy: Use React's memo function to avoid unnecessary component re-rendering. Image optimization: Use the modern picture element, prioritize loading WebP format images, and implement lazy loading of images. Performance monitoring: Use the Performance Observer API to monitor key rendering indicators, such as first content painting and maximum content painting time.

[0088] In summary, the componentized page rendering method, device, equipment and medium for online education provided by the present invention can not only accurately predict the user's next operation on the education platform, but also perform intelligent preloading and on-demand rendering according to the importance and frequency of use of the components. By constructing an accurate component dependency graph, the loading order of the components is optimized, and the blocking time of page rendering is effectively reduced. At the same time, the dynamic adjustment strategy based on the dual priority mechanism ensures that the most critical teaching components always maintain high responsiveness, while the uncommon components are uninstalled in a timely manner, thereby maximizing the utilization of limited system resources. In addition, the present invention significantly improves the rendering efficiency by intelligently selecting the component rendering mode and optimization strategy that best suits the current device and network conditions, further improves the loading speed of educational content, and greatly improves the learning experience, especially in a mobile learning environment with unstable network conditions. By reducing unnecessary component rendering and server requests, bandwidth consumption and server load are effectively reduced, operating costs are saved for educational institutions, and a smoother, faster and more reliable online learning experience is provided for learners. The method of the present invention is not only applicable to current online education needs, but also provides a solid technical foundation for more complex and intelligent education scenarios in the future. It demonstrates how to deeply combine advanced front-end rendering technology with professional needs in the field of education, and is expected to play an important role in promoting educational informatization, improving the efficiency of educational resource utilization, and promoting personalized learning. This 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.

[0089] Next, a componentized page rendering device for online education proposed according to an embodiment of the present application will be described with reference to the accompanying drawings.

[0090] Figure 8 It is a block diagram of a componentized page rendering device for online education according to an embodiment of the present application.

[0091] like Figure 8 As shown, the componentized 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 trigger module 500, a communication module 600 and a rendering module 700.

[0092] Among them, the acquisition module 100 is used to obtain a page rendering request, wherein the page rendering request includes an education scenario identifier, user identity information and device performance indicators; the determination module 200 is used to determine component configuration information based on the education scenario identifier and user identity information, wherein the component configuration information includes component identifier, component type, component parameters, component dependency and component priority configuration, and the component types include course player components, exercise system components, interactive whiteboard components, real-time communication components and course resource components; the construction module 300 is used to construct a component dependency graph based on component dependency relationships and represent it in the form of a directed acyclic graph; the generation module 400 is used to calculate the component loading priority score based on the component priority configuration, device performance indicators and component dependency graph, and generate a component loading queue; the trigger module 500 is used to execute the education component loading according to the loading queue sequence, And based on the component configuration information, the corresponding component life cycle hook function is triggered, wherein the component life cycle hook function includes component creation hook, component mounting hook, component update hook and component destruction hook; the communication module 600 is used to establish an inter-component communication bus based on component dependencies, which is used to register data dependencies of educational scene components, listen to component status change events, and trigger component life cycle hook functions to update components according to component dependencies in the component configuration information; the rendering module 700 is used to execute the rendering process of the educational scene component according to the component configuration information and the status update information received through the inter-component communication bus, wherein the rendering process includes constructing an educational component rendering tree, calculating layout information based on component parameters and the latest status, executing rendering operations, caching rendering results for the educational scene identifier, and broadcasting rendering completion events through the inter-component communication bus.

[0093] It should be noted that the aforementioned explanation of the embodiment of the componentized page rendering method for online education is also applicable to the componentized page rendering device for online education of this embodiment, and will not be repeated here.

[0094] According to the componentized page rendering device for online education proposed in the embodiment of the present application, by intelligently analyzing the user learning behavior data and component dependencies, the next educational scene that the user may visit is accurately predicted, and the component loading and rendering strategy is dynamically adjusted according to the device characteristics and network conditions. This method not only significantly improves the page loading speed and interactive responsiveness of the online education platform, but also effectively reduces unnecessary data transmission and server load. In particular, when the network conditions are unstable or the bandwidth is limited, the device can prioritize loading and rendering the most important educational components to ensure 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 to ensure that key teaching content is presented first. Based on the component usage model of machine learning, the device can dynamically adjust the component preloading strategy according to the user's learning progress and preferences to provide a more personalized learning experience. At the same time, the adaptive performance optimization mechanism can monitor the rendering performance in real time, and automatically trigger optimization measures such as component downgrade rendering or local update when performance anomalies are detected, ensuring the stable operation of the system under various devices and network environments. As a result, the problems of low component rendering efficiency, inability to adapt to diversified educational scenarios, insufficient user learning behavior analysis, and lack of automation in performance optimization in existing online education technologies are solved. Fig. 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. The electronic device may include: A memory 901 , a processor 902 , and a computer program stored in the memory 901 and executable on the processor 902 .

[0095] When the processor 902 executes the program, the componentized page rendering method for online education provided in the above embodiment is implemented.

[0096] Furthermore, the electronic device further comprises: The communication interface 903 is used for communication between the memory 901 and the processor 902 .

[0097] The memory 901 is used to store computer programs that can be executed on the processor 902 .

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

[0099] If the memory 901, the processor 902 and the communication interface 903 are implemented independently, the communication interface 903, the memory 901 and the processor 902 can be connected to each other through a bus and communicate with each other. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component) bus or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Fig. 9 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

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

[0101] The processor 502 may be a CPU (Central Processing Unit), or an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present application.

[0102] An embodiment of the present application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the above-mentioned componentized page rendering method for online education.

[0103] An embodiment of the present application also provides a computer program product, including a computer program or instructions, for implementing a componentized page rendering method for online education as described in the above embodiment.

[0104] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms are not necessarily directed to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or N embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

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

[0106] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or N executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.

[0107] It should be understood that the various parts of the present application can be implemented in hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, the steps or methods can be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array, a field programmable gate array, etc.

[0108] A person of ordinary skill in the art may understand that all or part of the steps carried by the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the above-mentioned program may be stored in a computer-readable storage medium, which, when executed, includes one of the steps of the method embodiment or a combination thereof.

[0109] Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limitations on the present application. Ordinary technicians in the field can change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. A componentized page rendering method for online education, characterized in that: The method comprises: Obtaining a page rendering request, wherein the page rendering request includes an education scenario identifier, user identity information, and device performance indicators; Determine component configuration information according to the educational scenario identifier and the user identity information, wherein the component configuration information includes component identifier, component type, component parameters, component dependency and component priority configuration, and the component types include course player components, exercise system components, interactive whiteboard components, real-time communication components and course resource components; Building a component dependency graph based on the component dependency relationship and representing it in a directed acyclic graph; Calculate component loading priority scores according to the component priority configuration, the device performance index, and the component dependency graph, and generate a component loading queue; Execute the education component loading according to the loading queue sequence, and trigger the corresponding component life cycle hook function based on the component configuration information, wherein the component life cycle hook function includes a component creation hook, a component mounting hook, a component update hook and a component destruction hook; Establishing an inter-component communication bus based on the component dependency relationship, used to register the data dependency relationship of the educational scene component, monitor component state change events, and trigger the component life cycle hook function to update the component according to the component dependency relationship in the component configuration information; According to the component configuration information and the status update information received through the inter-component communication bus, the rendering process of the educational scene component is executed, wherein the rendering process includes constructing an educational component rendering tree, calculating layout information based on the component parameters and the latest status, performing rendering operations, caching rendering results for the educational scene identifier, and broadcasting a rendering completion event through the inter-component communication bus.

2. The componentized page rendering method for online education according to claim 1, characterized in that: Calculating a component loading priority score according to the component priority configuration, the device performance index, and the component dependency graph, and before generating a component loading queue, including: Analyze user behavior data based on machine learning models and build 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 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 relationship in 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 cache strategy is optimized according to the operation sequence data, and the component degradation plan is adjusted according to the scenario association data; Establishing configuration parameter evaluation indicators according to the dynamically adjusted component configuration information, wherein the configuration parameter evaluation indicators include component loading time deviation, cache hit rate, memory occupancy rate and runtime performance indicators, and continuously optimizing the configuration parameters through a machine learning algorithm based on the configuration parameter evaluation indicators; Updating the device performance indicator in the component configuration information according to the data of the configuration parameter evaluation indicator, wherein the device performance indicator data includes CPU usage, memory occupancy, network status and bandwidth data; Establishing a loading strategy adjustment rule according to the updated device performance indicator data, wherein the loading strategy adjustment rule includes: reducing the number of concurrent loads when the CPU usage exceeds a preset threshold, releasing low-priority component memory when the memory usage exceeds a preset threshold, and giving priority to using cache components when it is detected that the network delay exceeds a preset threshold; The strategy adjustment effect is recorded through a mathematical model, a dynamic mapping relationship between the device performance index and the loading strategy adjustment rule is established, and the component priority configuration in the component configuration information is regularly updated.

3. The componentized page rendering method for online education according to claim 1, characterized in that: Calculating component loading priority scores according to the component priority configuration, the device performance index, and the component dependency graph, and generating a component loading queue, including: Calculate the basic priority score according to the component type and basic weight in the component configuration information; calculate the dependency weight score according to the hierarchical relationship and the number of dependencies in the component dependency graph; calculate the historical data weight score based on the historical loading frequency and average loading time in the past certain period of time; calculate the resource feature weight score according to the component parameters in the component configuration information; The target priority score is obtained by weighted calculation based on the basic priority score, the dependency weight score, the historical data weight score and the resource feature weight score.

4. The componentized page rendering method for online education according to claim 1, characterized in that: The component life cycle 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, a DOM container is prepared, the first rendering is performed and a communication channel is established; in the component update phase, data change verification, DOM update and state recovery are performed; in the component destruction phase, resource recovery, event unbinding and memory release are performed.

5. The componentized page rendering method for online education according to claim 1, characterized in that: Establishing an inter-component communication bus based on the component dependency relationship, including: Based on the component dependency in the component configuration information, obtaining event registration, execution, triggering and broadcasting methods for the inter-component communication bus; Establishing an event management mechanism with a dual priority mechanism according to the component dependency and component priority configuration in the component configuration information; The dual priority mechanism is integrated 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 processing order of events 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 dependency and business importance; According to the event triggering method, each educational scene component and its corresponding event processing function are registered in the communication bus.

6. The componentized page rendering method for online education according to claim 1, characterized in that: After executing the rendering process of the educational scene component, it also includes: Get rendering performance data, including first rendering time, re-rendering time, peak memory usage, CPU usage, frame rate fluctuation range, and freeze frequency. Establishing a performance scoring mechanism based on the rendering performance data, taking into account factors such as rendering time, memory usage, frame rate, etc., to generate an overall performance score; Execute 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, differential compression of rendering results, precise triggering of component updates, local rendering range control, etc.; When the performance score is lower than the preset alarm threshold, a performance abnormality event is broadcasted through the inter-component communication bus to trigger the component lifecycle hook function of the relevant component to handle the abnormal situation, wherein the abnormal situation handling includes rendering timeout degradation, crash recovery, performance alarm and automatic optimization; Continuously monitoring the rendering performance data, regularly updating the performance score, and dynamically adjusting the rendering optimization strategy according to the latest performance score and rendering performance data; The optimized rendering strategy is broadcast to related components through the inter-component communication bus, so that the rendering performance is continuously optimized.

7. A componentized page rendering device for online education, characterized in that: include: An acquisition module, used to acquire a page rendering request, wherein the page rendering request includes an education scenario identifier, user identity information, and device performance indicators; A determination module, used to determine component configuration information according to the educational scenario identifier and the user identity information, wherein the component configuration information includes component identifier, component type, component parameters, component dependency and component priority configuration, and the component type includes a course player component, an exercise system component, an interactive whiteboard component, a real-time communication component and a course resource component; A construction module, used to construct a component dependency graph based on the component dependency relationship, and represent it in a directed acyclic graph; A generating module, configured to calculate a component loading priority score according to the component priority configuration, the device performance index and the component dependency graph, and generate a component loading queue; A trigger module, used to execute the loading of the educational component according to the loading queue sequence, and trigger the corresponding component life cycle hook function based on the component configuration information, wherein the component life cycle hook function includes a component creation hook, a component mounting hook, a component update hook and a component destruction hook; A communication module, used to establish an inter-component communication bus based on the component dependency, to register the data dependency of the educational scene component, to monitor component state change events, and to trigger the component life cycle hook function to perform component update according to the component dependency in the component configuration information; A rendering module is used to execute the rendering process of the educational scene component according to the component configuration information and the status update information received through the inter-component communication bus, wherein the rendering process includes constructing an educational component rendering tree, calculating layout information based on the component parameters and the latest status, performing rendering operations, caching rendering results for the educational 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, wherein the processor executes the program to implement the componentized page rendering method for online education as described in any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program or instruction stored thereon, characterized in that: When the computer program or instruction is executed, it implements the componentized 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 instruction is executed, it implements the componentized page rendering method for online education as described in any one of claims 1-6.

Images