Webpage rendering method and device, electronic equipment and readable medium
By rendering sub-applications in the container before the main application rendering is completed in advance under the micro front-end framework, the problem of long wait time for users is solved and the rendering performance is improved.
Patent Information
- Application Number
- CN202311441553.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-10-31
- Publication Date
- 2025-05-02
AI Technical Summary
Under the micro front-end framework, users have been seeing the sub-app content they are following on the page for a long time, resulting in poor user experience.
When entering the access request on the browser page, the indication information in the target file is obtained in advance, and is used to indicate the first container that renders the sub-application, that is, the container generated before the main application renders the sub-application, so as to render the sub-application in advance in the first container.
It shortens the waiting time for users to see the content they are concerned about on the page under the micro front-end framework, and improves the rendering performance of the page.
Smart Images
Figure CN119917753A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a webpage rendering method, device, electronic device and readable medium. Background Art
[0002] In order to make page coding, management, deployment and publishing more flexible, micro-frontend frameworks came into being. Micro-frontend frameworks usually include: the main application (also called the main framework) corresponding to the control bar and menu bar that remain unchanged in different pages, and the sub-applications corresponding to the different text contents in different pages.
[0003] At present, the rendering order of the page under the micro-frontend framework is: first, the main application of the page is rendered. After the main application is rendered, on the one hand, the content corresponding to the main application is displayed on the page, and on the other hand, a container is prepared for the rendering of the sub-application of the page; then, the sub-application of the page is rendered in the container, so that the content corresponding to the sub-application is displayed on the page. In this way, the user can see the overall effect of the page rendering.
[0004] Considering that users are more concerned about the content corresponding to the sub-application on the pages under the micro-frontend framework, the current rendering method of the page under the micro-frontend framework is that the content corresponding to the main application is displayed on the page first, and the sub-application can only be rendered after the main application is rendered. That is, it takes a long time for users to see the content they are concerned about (that is, the content corresponding to the sub-application) on the page under the micro-frontend framework, and the user experience is poor. Summary of the invention
[0005] In order to solve the above technical problems, the present application provides a web page rendering method, device, electronic device and readable medium, which can reduce the waiting time for users to see the content they are interested in (i.e., the content corresponding to the sub-application) on the page under the micro-frontend framework, and improve the rendering performance of the page under the micro-frontend framework.
[0006] In order to achieve the above objectives, the technical solutions provided by this application are as follows:
[0007] In a first aspect, the present application provides a webpage rendering method, comprising:
[0008] In response to an access request inputted on a browser page, a target file is obtained, wherein the target file includes indication information, wherein the indication information is used to indicate a first container for rendering a sub-application, wherein the first container is a container generated before the main application is rendered, wherein the access request is used to access a target webpage, wherein the target webpage includes an area for the main application and an area for the sub-application, and wherein the target file corresponds to the target webpage;
[0009] Based on the target file, rendering the sub-application in the first container;
[0010] In the area of the sub-application on the target webpage, content corresponding to the sub-application is displayed.
[0011] In one implementation, after rendering the sub-application in the first container, or while rendering the sub-application in the first container, the method further includes:
[0012] Rendering the main application based on the target file;
[0013] In the area of the main application of the target webpage, content corresponding to the main application is displayed, and a second container is obtained.
[0014] In one implementation, the target file also includes target information and predefined configuration information of the first container, wherein the configuration information is used to indicate the context environment of the first container, and the target information includes at least one of the following types of information: the type of micro-frontend framework to which the target web page belongs, information resources, and a software development kit (SDK).
[0015] In one implementation, the method further includes:
[0016] Displaying, in an area of the sub-application on the target webpage, a rendering effect of the second container on the sub-application;
[0017] Alternatively, in the area of the sub-application on the target webpage, the rendering effect of the second container and the first container on the sub-application is displayed.
[0018] As an example, the method of displaying the rendering effect of the second container on the sub-application includes at least one of the following methods:
[0019] Based on the micro-frontend framework of the target webpage, re-rendering the sub-application on the second container;
[0020] Applying the layout operation of the second container to the first container;
[0021] Synchronizing the first container to the second container by copying the first container;
[0022] The sub-application is rendered in the second container, and a rendering effect of the first container on the sub-application is hidden or uninstalled.
[0023] In one implementation, the first container is a global environment.
[0024] As an example, the method further includes:
[0025] The main application and the sub-application are isolated, and the method of isolating the main application and the sub-application includes at least one of the following methods: predefining a third container for rendering the main application, manually coding to modify variables, automatically replacing variables with a plug-in, or automatically modifying variable prefixes with a plug-in.
[0026] In a second aspect, the present application further provides a webpage rendering device, comprising:
[0027] an acquisition unit, configured to acquire a target file in response to an access request inputted on a browser page, wherein the target file includes indication information, wherein the indication information is used to indicate a first container for rendering a sub-application, wherein the first container is a container generated before the main application is rendered, wherein the access request is used to access a target webpage, wherein the target webpage includes an area for the main application and an area for the sub-application, and wherein the target file corresponds to the target webpage;
[0028] A first rendering unit, configured to render the sub-application in the first container based on the target file;
[0029] The first display unit is used to display the content corresponding to the sub-application in the sub-application area of the target webpage.
[0030] In one implementation, the device further includes:
[0031] A second rendering unit, configured to render the main application based on the target file after rendering the sub-application in the first container or while rendering the sub-application in the first container;
[0032] The second display unit is used to display the content corresponding to the main application in the area of the main application of the target webpage, and obtain a second container.
[0033] In one implementation, the target file also includes target information and predefined configuration information of the first container, wherein the configuration information is used to indicate the context environment of the first container, and the target information includes at least one of the following types of information: the type of micro-frontend framework to which the target web page belongs, information resources, and SDK.
[0034] In one implementation, the device further includes:
[0035] A compatibility unit is used to display the rendering effect of the second container on the sub-application in the area of the sub-application on the target webpage, or to display the rendering effects of the second container and the first container on the sub-application.
[0036] As an example, the compatibility unit specifically implements at least one of the following steps:
[0037] Based on the micro-frontend framework of the target webpage, re-rendering the sub-application on the second container;
[0038] Applying the layout operation of the second container to the first container;
[0039] Synchronizing the first container to the second container by copying the first container;
[0040] The sub-application is rendered in the second container, and a rendering effect of the first container on the sub-application is hidden or uninstalled.
[0041] In one implementation, the first container is a global environment.
[0042] As an example, the device further includes:
[0043] An isolation unit is used to isolate the main application and the sub-application, wherein the method of isolating the main application and the sub-application includes at least one of the following methods: predefining a third container for rendering the main application, manually coding to modify variables, automatically replacing variables with a plug-in, or automatically modifying variable prefixes with a plug-in.
[0044] It should be noted that the specific implementation method of the device and the technical effects achieved can refer to the relevant description of the method provided in the first aspect or any implementation method of the first aspect.
[0045] In a third aspect, the present application further provides an electronic device, the electronic device comprising: a processor and a memory;
[0046] The memory is used to store instructions or programs;
[0047] The processor is used to execute the instructions or programs in the memory so that the electronic device executes the method provided by the above-mentioned target aspect or any one of the implementations of the target aspect.
[0048] In a fourth aspect, the present application also provides a readable medium, in which instructions or programs are stored. When the instructions or programs are executed on a processor, the processor executes the method provided by the above-mentioned target aspect or any one of the implementations of the target aspect.
[0049] Compared with the prior art, the embodiments of the present application have at least the following advantages:
[0050] In the technical solution provided by the present application, considering that users are more concerned about the content corresponding to the sub-application when viewing the pages under the micro-frontend framework, when the user needs to access the target web page under the micro-frontend framework (that is, the target web page includes the area of the main application and the area of the sub-application), it is necessary to input an access request to access the target web page in the browser page. The web page rendering device responds to the access request and obtains the target file corresponding to the target web page. The target file includes indication information of the first container for rendering the sub-application. The web page rendering device can render the sub-application in the first container based on the target file, thereby displaying the content corresponding to the sub-application in the area of the sub-application of the target web page. In this way, by pre-preparing a container for rendering the sub-application in the file corresponding to the page under the micro-frontend framework, the sub-application can be rendered before the main application rendering is completed, and there is no need to wait for the main application rendering of the page to be completed before using the container prepared by the main application for the sub-application to render the sub-application. This solves the problem that the page under the current micro-frontend framework only renders the sub-application after the main application rendering is completed, resulting in a long time for users to see the content they are concerned about (that is, the content corresponding to the sub-application) on the page under the micro-frontend framework, resulting in a poor user experience. It shortens the waiting time for users to see the content they are concerned about on the page under the micro-frontend framework and improves the rendering performance of the page under the micro-frontend framework. BRIEF DESCRIPTION OF THE DRAWINGS
[0051] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0052] Figure 1 A schematic diagram of a page under a micro-frontend architecture provided in an embodiment of the present application;
[0053] Figure 2 A schematic diagram of a page rendering effect provided in an embodiment of the present application;
[0054] Figure 3 A schematic diagram of a flow chart of a web page rendering method provided in an embodiment of the present application;
[0055] Figure 4 A schematic diagram of the structure of a web page rendering device 400 provided in an embodiment of the present application;
[0056] Figure 5 A schematic diagram of the structure of an electronic device 500 provided in an embodiment of the present application. DETAILED DESCRIPTION
[0057] Drawing on the concept of backend microservices, as the front-end projects continue to grow, micro-frontend frameworks have come into being. The micro-frontend framework can be understood as splitting a huge front-end project into multiple small projects. These small projects are claimed to have the ability to be independently developed and run. These small projects work together to realize the display and interaction of pages under the micro-frontend architecture. Pages under the micro-frontend architecture can include areas for the main application and areas for the sub-applications. The areas of the main application carry content that remains unchanged in different pages, such as the control bar and / or menu bar of the page; the areas of the sub-applications carry content that is different in different pages, such as the body content of the page. As an example, pages under the micro-frontend architecture can be seen, for example. Figure 1 As shown, the page 10 may include: a control bar 11 located at the top of the page, a menu bar 12 located on the left side of the page, and a main text 13 located in the middle of the page, wherein the control bar 11 and the menu bar 12 remain unchanged in different pages and belong to the main application 1 of the page 10, and the main text 13 is different in different pages and belongs to the sub-application 2 of the page 10.
[0058] During the loading and rendering of a page under the micro-frontend architecture (hereinafter referred to as page rendering), the sub-application needs to be embedded in the main application for loading and rendering, and finally displayed as a whole page to the user who requests to access the page. The current page rendering order is usually: S11, rendering the main application of the page; S12, after the main application is rendered, display the content corresponding to the main application on the page, and prepare container 1 for the rendering of the sub-application of the page; S13, rendering the sub-application of the page in the container 1, S14, displaying the content corresponding to the sub-application on the page. In this way, the user can see the overall effect of the page rendering.
[0059] Since the user requests to access a page, the user's core focus is on the main content of the page. The priority of fixed content such as the navigation bar and the control bar on different pages will be lower than the priority of the main content of the page, that is, the priority of the content corresponding to the sub-application of the page is higher than the content corresponding to the main application of the page. Therefore, among the evaluation indicators of page rendering performance, the first screen meaningful rendering time becomes a very important indicator. The first screen meaningful rendering time refers to the time from the user inputting the page access request in the browser to the main content of the page (that is, the content corresponding to the sub-application) being presented to the user. As the main application has more and more functions, the data volume corresponding to the main application is getting larger and larger, and the time to render the main application is getting longer and longer. However, based on the current page rendering method, no matter how long the main application takes to render, only after the main application is rendered, the corresponding container will render the sub-application. Therefore, the longer the main application rendering time is, the longer it will take for the content corresponding to the sub-application to be presented to the user, thereby extending the first screen meaningful rendering time.
[0060] As an optimization solution for page rendering, in one case, a lazy loading method is adopted, that is, in the rendering process of the main application, the functions and tools required by the sub-application are loaded, and the functions and tools that are not needed for the rendering of the corresponding sub-application are delayed to load, which can reduce the content loaded in the rendering process of the main application, shorten the rendering time of the main application to a certain extent, and then let the user see the corresponding content of the sub-application faster. However, this lazy loading method is effective for the optimization effect of the meaningful rendering time of the first screen, because even if the content loaded in the rendering process of the main application is reduced, the rendering of the sub-application still has to wait until the rendering of the main application is completed before it can start, and it is impossible to avoid the problem of increasing the meaningful rendering time of the first screen as the functions of the main application increase. In another case, a method of preloading the resources required by the sub-application is adopted, that is, the resources required by the sub-application are loaded, and in the rendering process of the sub-application, the pre-loaded resources can be used, saving the loading time of the required resources in the rendering process of the sub-application, but the rendering of the sub-application still has to wait until the rendering of the main application is completed before it can start, and it is still impossible to avoid the problem of increasing the meaningful rendering time of the first screen as the functions of the main application increase.
[0061] Based on this, an embodiment of the present application provides a new web page rendering method, in which a first container is prepared in advance for the rendering of a sub-application. When there is a need to access a target web page, the web page rendering device responds to an access request for accessing the target web page input on a browser page, and obtains a target file corresponding to the target web page, wherein the target file includes indication information of the first container for rendering the sub-application. Thus, the web page rendering device can combine the indication information to obtain the resources of the sub-application itself and obtain the first container accurately in advance, render the sub-application in the first container in advance, and display the content corresponding to the sub-application in the sub-application area of the target web page. In this way, by pre-preparing a container for rendering the sub-application in the file corresponding to the page under the micro-frontend framework, the sub-application can be rendered before the main application rendering is completed, and there is no need to wait for the main application rendering of the page to be completed before using the container prepared by the main application for the sub-application to render the sub-application. This solves the problem that the page under the current micro-frontend framework only renders the sub-application after the main application rendering is completed, resulting in a long time for users to see the content they are concerned about (that is, the content corresponding to the sub-application) on the page under the micro-frontend framework, resulting in a poor user experience. It shortens the waiting time for users to see the content they are concerned about on the page under the micro-frontend framework and improves the rendering performance of the page under the micro-frontend framework.
[0062] It should be noted that the subject implementing the web page rendering method may be a web page rendering device provided in an embodiment of the present application. The web page rendering device may be carried in an electronic device or a functional module of an electronic device. The web page rendering device may be, for example, a functional module integrated on a terminal device where a browser is located and capable of rendering pages under a micro-frontend framework, or the web page rendering device may be, for example, a functional module integrated on a server corresponding to a browser and capable of rendering pages under a micro-frontend framework.
[0063] It should be noted that in the embodiments of the present application, web page and page may refer to the same meaning and may be used and understood interchangeably where they appear.
[0064] Before introducing the specific implementation of the webpage rendering method provided in the embodiment of the present application, in order to more clearly illustrate the technical solution provided in the embodiment of the present application, Figure 2 A schematic diagram is provided to illustrate the rendering effect corresponding to the technical solution provided in the embodiment of the present application.
[0065] like Figure 2 As shown, when a user needs to access a page under a micro-frontend framework on a browser, the user can enter the search content in the search box of the browser page 1 and confirm it, which is equivalent to the user triggering the corresponding access request entered on the browser; the web page rendering device can respond to the access request, obtain the target file corresponding to the access request (also referred to as the entry file of the page 2 corresponding to the access request), and the target file pre-specifies the container 2 for sub-application rendering and prepares the container 2. Based on this, the web page rendering device renders the sub-application on container 2 based on the target file. After the sub-application rendering is completed, the user can preferentially see the content corresponding to the sub-application in the sub-application area of page 2. In one case, in order to allow sufficient processor computing power and broadband download capability for the rendering of the sub-application, the rendering of the main application can be delayed, that is, the main application is rendered after the sub-application rendering is completed. Then, as Figure 2As shown in the figure, when the user sees the content corresponding to the sub-application in page 2, the area of the main application of page 2 has not been displayed. After the content corresponding to the sub-application in page 2 is displayed for a period of time (such as 1 second), the content corresponding to the main application is displayed in the area of the main application of page 2. In another case, if the processor computing power and broadband download capacity are sufficient, the rendering of the main application and the rendering of the sub-application can be executed in parallel. If the rendering time of the main application is longer than that of the sub-application, then when the user sees the content corresponding to the sub-application in page 2, the area of the main application of page 2 has not been displayed; if the rendering time of the main application is similar to that of the sub-application, then when the user sees the content corresponding to the sub-application in page 2, the area of the main application of page 2 will also synchronously display the content corresponding to the main application. In this way, the content corresponding to the sub-application can be displayed to the user first, which effectively shortens the meaningful rendering time of the first screen and improves the rendering performance of the page under the micro-frontend framework.
[0066] Figure 3 A schematic diagram of a web page rendering method provided in an embodiment of the present application. The method can be applied to a web page rendering device, which can, for example, download Figure 4 The web page rendering device 400 is shown.
[0067] like Figure 3 As shown, the method may include, for example, the following S101 to S103:
[0068] S101, in response to an access request for accessing a target web page input on a browser page, obtaining a target file corresponding to the target web page, wherein the target file includes indication information, and the indication information is used to indicate a first container for rendering a sub-application, the first container being a container generated before the main application is rendered.
[0069] Among them, the target web page is a web page under the micro-frontend framework that includes the main application area and the sub-application area.
[0070] An access request may be a request received by a browser or a server corresponding to the browser and triggered by a user's access behavior, and the access request is used to request access to a target web page on the browser. In one case, the user may trigger the generation of an access request by entering search content on the browser page and confirming it; in another case, the user may trigger the generation of an access request by entering the Uniform Resource Locator (URL) of the target web page on the browser page.
[0071] Before S101, for the target web page, the browser needs to register the sub-application in the main application first, and then load the sub-application through route matching. If the sub-application is rendered for the first time, it needs to go through five stages in sequence: sub-application resource loading, sub-application initialization, sub-application route matching page, sub-application page resource loading, and sub-application rendering. It should be noted that the method provided in the embodiment of the present application only focuses on the sub-application rendering stage, and the contents of other stages are not introduced in detail.
[0072] In the micro-frontend framework, the code of the main application or sub-application is usually packaged into a corresponding entry file, which stores the scripts, modules or resources required for rendering (hereinafter collectively referred to as resources). The user's configuration information for the sub-application can be added to the entry file of the main application by direct writing or indirect import. The entry file of the main application can carry the resources involved in the web page corresponding to the access request triggered by the user (or redirected to), and the resources may include, for example: main.html and / or index.html, or, it may also be the resources contained in main.html and / or index.html.
[0073] In the embodiment of the present application, the target file may be an html, xml or htm file, and the target file may also import other resource files such as JavaScript (JS), Cascading Style Sheets (CSS), JavaScript Object Notation (JSON) through links. For example, the target file may refer to the entry file of the main application generated by the browser after receiving the access request. In addition to the resources of the main application, the entry file of the main application also includes the information required by the target web page corresponding to the access request when rendering the sub-application, such as the rendering function of the sub-application, the configuration information of the first container, and the target information.
[0074] The first container may be at least one node, block, element, component or iframe generated by calling a corresponding browser function before the main application of the target web page is rendered.
[0075] In a possible implementation, the first container may be a false container predefined for the sub-application, such as container 2 in the above example. In this implementation, before S101, in addition to specifying the container used to render the sub-application as the first container in the rendering function of the sub-application, it is also necessary to define the first container corresponding to the sub-application, such as writing the configuration information of the first container in the entry file, and the configuration information can be used to indicate the context of the first container.
[0076] The configuration information of the first container may include, for example, the type of the first container (such as a node) and the size of the first container. The size of the first container may be a preset size, the size of the entire target web page, or hidden. The preset size may refer to Figure 1 The size of the border of the text 13 in the page 10 is shown.
[0077] In addition, before S101, it is also necessary to configure the target information of the rendering sub-application (also called key capabilities). The target information includes at least one of the following types of information: the type of micro-frontend framework to which the target web page belongs, information resources, and package SDK. Among them, the micro-frontend framework type indicates micro-frontend frameworks of different brands developed by different manufacturers, for example, may include: vmok, Garfish, qiankun, Tencent / wujie and micro-app; information resources may include but are not limited to: user information, website information or cache information; SDK may include but is not limited to: SDKs such as tracking points, monitoring, detection, network requests, and user controls provided by the main application. It should be noted that the target information varies with different web pages in different scenarios.
[0078] For the target information of the sub-application, in one case, the target information can be configured in the target file before the rendering of the sub-application is executed. If it is a network request, a long task, or other target information that needs to be prepared asynchronously, the target information can be prepared through asynchronous mechanisms such as async or promise, events, subscriptions, observers, and other asynchronous methods; or, in another case, when there is no direct blocking, the sub-application is rendered in advance, and if the target information is not configured, it can be skipped or ignored. After the corresponding target information is configured, the sub-application is notified to use the corresponding target information. Alternatively, the sub-application observes or detects the required target information by itself, and uses it directly after it finds that the corresponding target information is configured.
[0079] It can be understood that, in the current rendering process of the page under the micro-frontend framework, the rendering function of the main application is usually called first. After the main application is rendered, the rendering function of the sub-application is called through the rendering function of the micro-frontend framework. The input parameters of the rendering function of the sub-application include the identifier of the container used to render the sub-application, for example, it can be the identifier of container 1 in the above example. However, in the method provided in the embodiment of the present application, in the rendering process of the page under the micro-frontend framework, calling the rendering function of the main application and calling the rendering function of the sub-application through the rendering function of the micro-frontend framework can be executed in parallel, or the rendering function of the sub-application can be called through the rendering function of the micro-frontend framework first, and then the rendering function of the main application is called. In the embodiment of the present application, the input parameters of the rendering function of the sub-application include the identifier of the container used to render the sub-application, for example, it can be the identifier of container 2 in the above example, which can be understood as the indication information in S101.
[0080] In another possible implementation, the first container may also be a global environment, that is, global variables such as window and document. In this implementation, before S101, it is necessary to specify the container used to render the sub-application as the first container in the rendering function of the sub-application. As an example, the input parameters of the rendering function of the sub-application include the identifier of the container used to render the sub-application, for example, the identifier of the global environment as the container, which can be understood as the indication information in S101.
[0081] It can be seen that through the indication information in the target file obtained by S101, the web page rendering device can obtain the resources of the sub-application itself, and prepare the first container in advance, so as to prepare for rendering the sub-application in the first container in advance, that is, the target file including the indication information is obtained through S101, so as to prepare for the priority rendering of the sub-application.
[0082] S102: Render the sub-application in the first container based on the target file.
[0083] S103: Displaying content corresponding to the sub-application in the sub-application area of the target webpage.
[0084] As an example, considering that the processor computing power and broadband download capability of the device where the webpage rendering device is located are limited, in order to give more processor computing power and broadband download capability to the rendering of the sub-application so that the sub-application can be rendered and presented to the user faster, the delayed rendering of the main application can be set. That is, after S103, the method can also include: rendering the main application based on the target file; displaying the content corresponding to the main application in the area of the main application of the target webpage, and obtaining the second container.
[0085] For example, to implement delayed rendering of the main application, the rendering function of the main application can be encapsulated into an asynchronous module or asynchronous function. When the sub-application is rendered, the asynchronous module or asynchronous function that encapsulates the rendering function of the main application can be executed to perform the rendering of the main application.
[0086] As another example, if the processor computing power and broadband download capability of the device where the webpage rendering device is located are sufficient, in order to provide a better user experience, the rendering of the main application may not be delayed, and the main application and the sub-application may be rendered in parallel. That is, while S102 to S103 are being executed, the method may also include: rendering the main application based on the target file; displaying the content corresponding to the main application in the main application area of the target webpage, and obtaining a second container.
[0087] The second container may correspond to container 1 in the above example. The second container is a container that can be prepared only after the main application rendering is completed when rendering the page under the micro-frontend framework. It can be understood as one of the products of the main application rendering.
[0088] If the first container is a predefined false container, then, after the main application is rendered and the second container is generated, in order to make the rendering result of the target webpage conform to the style when the target webpage was designed, the method may also include: displaying the rendering effect of the first container and / or the second container on the sub-application in the sub-application area of the target webpage, so as to achieve compatibility of the rendering effects of the first container and the second container on the sub-application, and after compatibility, the content corresponding to the sub-application displayed in the sub-application area of the target webpage is consistent with the content displayed after the sub-application is rendered in the second container. Among them, displaying the rendering effect of the first container and the second container on the sub-application can be understood as part of the content in the sub-application area is displayed with the rendering effect of the first container on the sub-application, and part of the content is displayed with the rendering effect of the second container on the sub-application. Displaying the rendering effect of the first container on the sub-application can be understood as all the content in the sub-application area is displayed with the rendering effect of the first container on the sub-application. Displaying the rendering effect of the second container on the sub-application can be understood as all the content in the sub-application area is displayed with the rendering effect of the second container on the sub-application.
[0089] As an example, the method of displaying the rendering effect of the second container on the sub-application may include at least one of the following methods: Method 1, based on the micro-frontend framework of the target webpage, the sub-application is re-rendered on the second container. This method is applicable to the case where the micro-frontend framework provides re-rendering capability. In this case, the sub-application is re-rendered in the second container through the re-rendering capability provided by the micro-frontend framework. For example, the re-rendering capability of the micro-frontend framework react is specifically: rendering the sub-application to the specified node (i.e., the second container) through the ReactDOM.render method; Method 2, applying the layout operation of the second container to the first container, for example, through a node change listener (such as Muta tionObserver), layout change listener (such as ResizeObserver), event listener and other listeners, monitor the layout and operation of the second container (that is, the above-mentioned layout operation), and apply the monitored layout and operation to the first container; method three, by copying the first container, the first container is synchronized to the second container; method four, the sub-application is rendered in the second container, and the rendering effect of the first container on the sub-application is hidden or uninstalled, or the first container is directly hidden or destroyed, wherein hiding or destroying can be implemented using display = 'none' and the hide (hide) or uninstall (unmount) interfaces provided by the corresponding micro-frontend framework.
[0090] Optionally, after S103, before displaying the rendering effect of the second container on the sub-application, the user may have operated on the target web page. Then, in order to prevent the compatible target web page from losing the user's operation or status, in the method provided in the embodiment of the present application, during compatibility, the user's operation on the target web page before compatibility can be recorded through front-end node change recording tools such as rrweb, and the user's operation or status can be reproduced in the target web page after compatibility, so as to reduce the user's feeling of compatibility, provide the user with imperceptible compatibility as much as possible, and improve the user experience.
[0091] If the first container is the global environment, then, considering the current reason why the sub-application needs a separate container to start rendering: the micro-frontend framework emphasizes isolation such as node isolation, script isolation, style isolation, etc., and usually uses the global environment as the rendering container of the main application, then the sub-application needs another container for rendering to achieve isolation from the main application. In the embodiment of the present application, the global environment is used as the rendering container of the sub-application. Then, in order to solve the isolation problem of the sub-application and the main application in the micro-frontend framework, the method can also include: isolating the main application and the sub-application of the target webpage.
[0092] The method of isolating the main application and the sub-application includes at least one of the following methods: Method 1, pre-define a third container for rendering the main application, the third container can be, for example, a pre-defined false container for rendering the main application, the third container can be at least one of node, div, element, Web Components or iframe, and the relevant description of the third container can refer to the relevant description of the predefined first container under S101; Method 2, manually code to modify variables, for example, by manually isolating named variables during coding to achieve style isolation; Method 3, the plug-in automatically replaces variables or the plug-in automatically modifies variable prefixes. It should be noted that some micro-frontend frameworks do not require isolation, so after the global environment is used to render the sub-application, it can still be used to render the main application.
[0093] It can be seen that in this method, by pre-preparing a container for rendering the sub-application in the file corresponding to the page under the micro-frontend framework, the sub-application can be rendered before the main application rendering is completed, and there is no need to wait for the main application rendering of the page to be completed before using the container prepared by the main application for the sub-application to render the sub-application. This solves the problem that the page under the current micro-frontend framework only renders the sub-application after the main application rendering is completed, resulting in a long time for the user to see the content he or she is concerned about (i.e., the content corresponding to the sub-application) on the page under the micro-frontend framework, resulting in a poor user experience. By changing the rendering order, the waiting time for the user to see the content he or she is concerned about on the page under the micro-frontend framework is shortened, thereby improving the rendering performance of the page under the micro-frontend framework.
[0094] Accordingly, the present application embodiment also provides a web page rendering device 400, see Figure 4 As shown, the apparatus 400 may include:
[0095] An acquisition unit 401 is configured to acquire a target file in response to an access request inputted on a browser page, wherein the target file includes indication information, wherein the indication information is used to indicate a first container for rendering a sub-application, wherein the first container is a container generated before the main application is rendered, wherein the access request is used to access a target webpage, wherein the target webpage includes an area of the main application and an area of the sub-application, and wherein the target file corresponds to the target webpage;
[0096] A first rendering unit 402, configured to render the sub-application in the first container based on the target file;
[0097] The first display unit 403 is used to display the content corresponding to the sub-application in the sub-application area of the target webpage.
[0098] In one implementation, the apparatus 400 further includes:
[0099] A second rendering unit, configured to render the main application based on the target file after rendering the sub-application in the first container or while rendering the sub-application in the first container;
[0100] The second display unit is used to display the content corresponding to the main application in the area of the main application of the target webpage, and obtain a second container.
[0101] In one implementation, the target file also includes target information and predefined configuration information of the first container, wherein the configuration information is used to indicate the context environment of the first container, and the target information includes at least one of the following types of information: the type of micro-frontend framework to which the target web page belongs, information resources, and SDK.
[0102] In one implementation, the apparatus 400 further includes:
[0103] The compatibility unit is used to display the rendering effect of the first container and / or the second container on the sub-application in the area of the sub-application of the target webpage.
[0104] As an example, the compatibility unit specifically implements at least one of the following steps:
[0105] Based on the micro-frontend framework of the target webpage, re-rendering the sub-application on the second container;
[0106] Applying the layout operation of the second container to the first container;
[0107] Synchronizing the first container to the second container by copying the first container;
[0108] The sub-application is rendered in the second container, and a rendering effect of the first container on the sub-application is hidden or uninstalled.
[0109] In one implementation, the first container is a global environment.
[0110] As an example, the apparatus 400 further includes:
[0111] An isolation unit is used to isolate the main application and the sub-application, wherein the method of isolating the main application and the sub-application includes at least one of the following methods: predefining a third container for rendering the main application, manually coding to modify variables, automatically replacing variables with a plug-in, or automatically modifying variable prefixes with a plug-in.
[0112] It should be noted that the specific implementation method of the device 400 and the technical effects achieved can be found in Figure 3Description of the method shown.
[0113] In addition, an embodiment of the present application also provides an electronic device, which includes a processor and a memory: the memory is used to store instructions or computer programs; the processor is used to execute the instructions or computer programs in the memory, so that the electronic device executes any implementation of the method provided in the embodiment of the present application.
[0114] See also Figure 5 , which shows a schematic diagram of the structure of an electronic device 500 suitable for implementing the embodiment of the present disclosure. The terminal device in the embodiment of the present disclosure may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 5 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.
[0115] like Figure 5 As shown, the electronic device 500 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 501, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 502 or a program loaded from a storage device 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic device 500 are also stored. The processing device 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.
[0116] Typically, the following devices may be connected to the I / O interface 505: an input device 506 including, for example, a touch screen, a touch pad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 507 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 508 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 509. The communication device 509 may allow the electronic device 500 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 5 The electronic device 500 is shown with various devices, but it should be understood that it is not required to implement or possess all the devices shown. More or fewer devices may be implemented or possessed instead.
[0117] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication device 509, or installed from the storage device 508, or installed from the ROM502. When the computer program is executed by the processing device 501, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.
[0118] The electronic device provided by the embodiment of the present disclosure and the method provided by the above embodiment belong to the same inventive concept, and the technical details not fully described in this embodiment can be referred to the above embodiment, and this embodiment has the same beneficial effects as the above embodiment.
[0119] The embodiment of the present application also provides a computer-readable medium, in which instructions or computer programs are stored. When the instructions or computer programs are executed on a device, the device executes any implementation of the method provided in the embodiment of the present application.
[0120] It should be noted that the computer-readable medium disclosed above may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The computer readable signal medium may also be any computer readable medium other than a computer readable storage medium, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer readable medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.
[0121] In some embodiments, the client and the server may communicate using any currently known or future developed network protocol such as HTTP (Hyper Text Transfer Protocol), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), an internet (e.g., the Internet), and a peer-to-peer network (e.g., an ad hoc peer-to-peer network), as well as any currently known or future developed network.
[0122] The computer-readable medium may be included in the electronic device, or may exist independently without being installed in the electronic device.
[0123] The computer-readable medium carries one or more programs, and when the one or more programs are executed by the electronic device, the electronic device can execute the method.
[0124] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages or a combination thereof, including, but not limited to, object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).
[0125] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0126] The units involved in the embodiments described in the present disclosure may be implemented by software or hardware, wherein the name of a unit / module does not, in some cases, constitute a limitation on the unit itself.
[0127] The functions described above herein may be performed at least in part by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.
[0128] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
[0129] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referred to each other. For the system or device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.
[0130] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.
[0131] It should also be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.
[0132] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.
[0133] It should be noted that in the embodiments of the present application, user sensitive information is not involved, and user-related information is obtained, used and determined after user authorization. In one example, before obtaining user-related information, the corresponding interface displays prompt information related to obtaining data use authorization. The prompt information is based on relevant laws and regulations in an appropriate manner to inform the user of the type, scope of use, usage scenarios, etc. of the personal information involved in this disclosure, so that the user can determine whether to agree to the authorization based on the prompt information. It can be understood that the above notification and the process of obtaining user authorization are only illustrative and do not constitute a limitation on the implementation method of the present disclosure. Other methods that meet relevant laws and regulations may also be applied to the implementation method of the present disclosure.
[0134] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A webpage rendering method, characterized in that: include: In response to an access request inputted on a browser page, a target file is obtained, wherein the target file includes indication information, wherein the indication information is used to indicate a first container for rendering a sub-application, wherein the first container is a container generated before the main application is rendered, wherein the access request is used to access a target webpage, wherein the target webpage includes an area for the main application and an area for the sub-application, and wherein the target file corresponds to the target webpage; Based on the target file, rendering the sub-application in the first container; In the area of the sub-application on the target webpage, content corresponding to the sub-application is displayed.
2. The method according to claim 1, characterized in that: After rendering the sub-application in the first container, or while rendering the sub-application in the first container, the method further includes: Rendering the main application based on the target file; In the area of the main application of the target webpage, content corresponding to the main application is displayed, and a second container is obtained.
3. The method according to claim 2, characterized in that The target file also includes target information and predefined configuration information of the first container, wherein the configuration information is used to indicate the context environment of the first container, and the target information includes at least one of the following types of information: the type of micro-frontend framework to which the target web page belongs, information resources, and a software development kit SDK.
4. The method according to claim 3, characterized in that The method further comprises: In the area of the sub-application on the target webpage, the rendering effect of the second container on the sub-application is displayed.
5. The method according to claim 4, characterized in that The manner of displaying the rendering effect of the second container on the sub-application in the area of the target webpage includes at least one of the following manners: Based on the micro-frontend framework of the target webpage, re-rendering the sub-application on the second container; Applying the layout operation of the second container to the first container; Synchronizing the first container to the second container by copying the first container; The sub-application is rendered in the second container, and a rendering effect of the first container on the sub-application is hidden or uninstalled.
6. The method according to claim 1 or 2, characterized in that: The first container is the global environment.
7. The method according to claim 6, characterized in that The method further comprises: The main application and the sub-application are isolated, and the method of isolating the main application and the sub-application includes at least one of the following methods: predefining a third container for rendering the main application, manually coding to modify variables, automatically replacing variables with a plug-in, or automatically modifying variable prefixes with a plug-in.
8. A web page rendering device, characterized in that: include: an acquisition unit, configured to acquire a target file in response to an access request inputted on a browser page, wherein the target file includes indication information, wherein the indication information is used to indicate a first container for rendering a sub-application, wherein the first container is a container generated before the main application is rendered, wherein the access request is used to access a target webpage, wherein the target webpage includes an area for the main application and an area for the sub-application, and wherein the target file corresponds to the target webpage; A rendering unit, configured to render the sub-application in the first container based on the target file; A display unit is used to display the content corresponding to the sub-application in the sub-application area of the target webpage.
9. An electronic device, characterized in that: The electronic device comprises: a processor and a memory; The memory is used to store instructions or programs; The processor is used to execute the instructions or programs in the memory so that the electronic device executes the method according to any one of claims 1 to 7.
10. A readable medium, characterized in that: The readable medium stores instructions or programs, and when the instructions or programs are executed on a processor, the processor is enabled to execute the method according to any one of claims 1 to 7.