Data processing method and device in page rendering and electronic equipment

Abstract

The application discloses a data processing method in page rendering, a data generation method in page rendering, a page display method and device, an electronic device and a computer readable storage medium. The data processing method in page rendering comprises the following steps: in response to receiving a page access operation on a target page in a non-browser host container, obtaining structured data of the target page; obtaining an initial page according to the structured data; the initial page displays a first real page element of a synchronous component rendered based on component content data of the synchronous component and a placeholder page element of an asynchronous component rendered based on skeleton screen data of the asynchronous component; in response to receiving component content data of the asynchronous component, obtaining a second real page element according to the component content data of the asynchronous component, and replacing the placeholder page element with the second real page element to obtain the target page. The application can improve the loading efficiency when loading a page.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to a data processing method, a data generation method, a page display method, an apparatus, an electronic device, and a computer-readable storage medium for page rendering. Background Technology

[0002] Traditional application page rendering methods often require waiting for the necessary data to be retrieved before rendering and displaying the page to the user, resulting in low rendering efficiency and impacting the user experience. To address this issue, streaming rendering emerged, but this method primarily adapts to browser environments and often struggles to effectively adapt to non-browser host containers (such as mini-programs and applications). Summary of the Invention

[0003] This application provides a data processing method, a data generation method, a page display method, a device, an electronic device, and a computer-readable storage medium for page rendering, which can realize streaming rendering of pages in non-browser host containers, thereby improving page loading efficiency. The specific solution is as follows: In a first aspect, embodiments of this application provide a data processing method for page rendering, the method comprising: In response to receiving a page access operation for a target page in a non-browser host container, the system obtains structured data of the target page. The structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component. The synchronous and asynchronous components are components associated with the target page. Based on the structured data, an initial page is obtained. The initial page displays a first real page element corresponding to the synchronous component, rendered based on the component content data of the synchronous component, and a placeholder page element corresponding to the asynchronous component, rendered based on the skeleton screen data of the asynchronous component. The first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content. In response to receiving the component content data of the asynchronous component, the system obtains a second real page element corresponding to the asynchronous component with actual displayed content based on the component content data of the asynchronous component, and replaces the placeholder page element with the second real page element to obtain the target page.

[0004] Secondly, embodiments of this application provide a data generation method in page rendering. The method includes: in response to receiving a page access request sent by a client based on a page access operation for a target page in a non-browser host container, obtaining component content data in HTML string stream format corresponding to a synchronous component associated with the target page; obtaining a component tree of the target page based on the component content data in HTML string stream format corresponding to the synchronous component; rendering synchronous components in the component tree and generating skeleton screen HTML fragments for asynchronous components for which component content data has not been obtained; generating structured data of the target page based on the component tree; and returning the structured data to the client.

[0005] Thirdly, embodiments of this application provide a page display method, the method comprising: in response to receiving a page access operation for a target page in a non-browser host container, displaying an initial page; the initial page displaying a first real page element and a placeholder page element, the first real page element being a page element with actual display content, and the placeholder page element being a page element with preset placeholder display content; in response to receiving component content data corresponding to the placeholder page element, displaying the target page; the target page displaying a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component, the second real page element being a page element with actual display content rendered based on the component content data of the asynchronous component.

[0006] Fourthly, embodiments of this application provide a data processing apparatus for page rendering. The apparatus includes: a first acquisition unit, configured to acquire structured data of the target page in response to receiving a page access operation for a target page in a non-browser host container; the structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component, wherein the synchronous component and the asynchronous component are components associated with the target page; a first obtaining unit, configured to obtain an initial page based on the structured data; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content; and a replacement unit, configured to acquire a second real page element corresponding to the asynchronous component with actual displayed content based on the component content data of the asynchronous component in response to receiving the component content data of the asynchronous component, and replace the placeholder page element with the second real page element to obtain the target page.

[0007] Fifthly, embodiments of this application provide another data generation apparatus for page rendering, the apparatus comprising: a second acquisition unit, configured to, in response to receiving a page access request sent by a client based on a page access operation for a target page in a non-browser host container, acquire component content data in HTML string stream format corresponding to a synchronous component associated with the target page; a second obtaining unit, configured to, based on the component content data in HTML string stream format corresponding to the synchronous component, obtain a component tree of the target page; in the component tree, synchronous components that have acquired component content data are rendered, and skeleton screen HTML fragments are generated for asynchronous components that have not acquired component content data; a generation unit, configured to, based on the component tree, generate structured data of the target page; and a sending unit, configured to, send the structured data of the target page to the client.

[0008] Sixthly, embodiments of this application provide a page display device, the device comprising: a first display unit, configured to display an initial page in response to receiving a page access operation for a target page in a non-browser host container; the initial page displays a first real page element and a placeholder page element, the first real page element being a portion of the page elements in the target page, the first real page element being a page element with actual display content, and the placeholder page element being a page element with preset placeholder display content; and a second display unit, configured to display the target page in response to receiving component content data corresponding to the placeholder page element; the target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component, the second real page element being a page element with actual display content rendered based on the component content data of the asynchronous component.

[0009] In a seventh aspect, this application also provides an electronic device, including: a processor; and a memory for storing a data processing program, wherein the electronic device, when powered on and running the program through the processor, performs the method described in the first, second, or third aspect.

[0010] Eighthly, embodiments of this application also provide a computer-readable storage medium storing a data processing program that is executed by a processor to perform the methods described in the first, second, or third aspects.

[0011] Compared with the prior art, this application has the following advantages: The data processing method for page rendering provided in this application includes the following steps: In response to receiving a page access operation for a target page in a non-browser host container, obtaining structured data of the target page; the structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component, wherein the synchronous component and the asynchronous component are components associated with the target page; obtaining an initial page based on the structured data; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content; In response to receiving the component content data of the asynchronous component, obtaining a second real page element with actual displayed content corresponding to the asynchronous component based on the component content data of the asynchronous component, and replacing the placeholder page element with the second real page element to obtain the target page.

[0012] As can be seen, the data processing method for page rendering provided in this application can receive data in two steps when receiving a page access operation for a target page in a non-browser host container. The first step involves pre-acquiring the structured data of the target page before the component content data of the asynchronous component has finished loading. This structured data includes the component content data of the synchronous component and the skeleton screen data of the asynchronous component. Since the component content data of the synchronous component has already been loaded when its corresponding parent component is rendered, it can be obtained in a relatively short time. The component content data of the asynchronous component is usually dynamically loaded during rendering, requiring a certain loading time. In this embodiment, there is no need to spend time waiting for the component content data of the asynchronous component to load; instead, the structured data, including the component content data of the synchronous component and the skeleton screen data of the asynchronous component, is obtained in a relatively short time, and the initial page is obtained based on this structured data. In this way, the page in a non-browser host container can be quickly displayed in a short time, thereby improving the loading efficiency during page loading and enhancing the user experience. Furthermore, the initial page already displays the first real page element corresponding to the synchronous component, rendered based on the component content data of the synchronous component, and the placeholder page element corresponding to the asynchronous component, rendered based on the skeleton screen data of the asynchronous component. The first real page element is a portion of the page elements in the target page and has actual display content. Thus, based on the displayed first real page element, the user can obtain some information about the target page, and based on the displayed placeholder page element, the user can understand the page layout of the target page. The second step involves obtaining the component content data of the asynchronous component after its component content data is loaded, and replacing the placeholder page element that originally displayed placeholder content with a page element displaying actual content based on the component content data of the asynchronous component. In this way, the content of the asynchronous component, which requires a certain loading time, can gradually fill the initial page, thereby obtaining the target page with complete display content. Therefore, the data processing method in page rendering provided in this application embodiment can achieve streaming rendering of the page in a non-browser host container, improving the loading efficiency during page loading and thus enhancing the user experience. Attached Figure Description

[0013] Figure 1 This is a diagram of a page rendering system corresponding to the data processing method in page rendering provided in the embodiments of this application.

[0014] Figure 2 This is a flowchart of the data processing method in page rendering provided in the first embodiment of this application.

[0015] Figure 3This is a flowchart of the data processing process in the hydration process of the data processing method in page rendering provided in the embodiments of this application.

[0016] Figure 4 This is a flowchart of the data generation method in page rendering provided in the second embodiment of this application.

[0017] Figure 5 This is a data processing flowchart in the data generation method for page rendering provided in the second embodiment of this application.

[0018] Figure 6 This is a flowchart of the page display method provided in the third embodiment of this application.

[0019] Figure 7 This is a structural block diagram of the data processing device in page rendering provided in the fourth embodiment of this application.

[0020] Figure 8 This is a structural block diagram of the data generation device in page rendering provided in the fifth embodiment of this application.

[0021] Figure 9 This is a structural block diagram of the page display device provided in the fifth embodiment of this application.

[0022] Figure 10 This is a structural block diagram of an example of an electronic device for data processing or page display in page rendering, provided in an embodiment of this application. Detailed Implementation

[0023] Many specific details are set forth in the following description to provide a full understanding of this application. However, this application can be implemented in many other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this application; therefore, this application is not limited to the specific embodiments disclosed below.

[0024] It should be noted that the terms "first," "second," "third," etc., in the claims, specification, and drawings of this application are used to distinguish similar objects and are not used to describe a specific order or sequence. Such data are interchangeable where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown or described herein. Furthermore, the terms "comprising," "having," and their variations are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products, or apparatuses.

[0025] It should be understood that in the embodiments of this application, "at least one" means one or more, and "more than one" means two or more. "And / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. The character " / " generally indicates that the related objects before and after it are in an "or" relationship. "Contains A, B and / or C" means containing any one, two, or three of A, B, and C.

[0026] It should be understood that in the embodiments of this application, "B corresponding to A", "B corresponding to A", "A corresponds to B" or "B corresponds to A" means that B is associated with A, and B can be determined based on A. Determining B based on A does not mean that B is determined solely based on A; B can also be determined based on A and / or other information.

[0027] The following provides further explanation of the existing technology: Currently, to improve page loading efficiency, streaming SSR (Server-Side Rendering) technology has emerged. However, streaming SSR technology relies on the incremental parsing capability of HTML (HyperText Markup Language) streams. Native applications, mini-programs, and other non-browser (web) host containers do not have HTML parsers and lack the incremental parsing capability of HTML streams. Therefore, when rendering a page in a non-browser host container, it is necessary to receive the complete HTML string of the page, then use a dedicated parser to convert it into an Abstract Syntax Tree (AST), and finally traverse the AST to generate a view node tree to render the page.

[0028] As can be seen, in existing technologies, when rendering a page in a non-browser host container, it is necessary to wait for all the data on the page to be loaded before the page can be displayed. During the waiting period, a blank screen or a sign indicating that data is loading is usually displayed, which cannot achieve streaming rendering and results in low page rendering efficiency.

[0029] Therefore, how to achieve streaming rendering of pages in non-browser host containers has become a pressing technical problem to be solved.

[0030] For the reasons mentioned above, the first embodiment of this application provides a data processing method in page rendering. This method can be applied to the client and can realize the streaming rendering of the page in a non-browser host container, thereby improving the loading efficiency when the page is loaded.

[0031] To more clearly demonstrate the data processing method in page rendering provided in this application embodiment, the application scenarios of the data processing method in page rendering provided in this application embodiment are first introduced. The data processing method in page rendering provided in this application embodiment can be applied to applications such as native applications (hereinafter referred to as apps) or mini-programs running in non-browser host containers. These applications can be location service applications, life service applications, e-commerce platform applications, instant messaging applications, etc. The native applications (hereinafter referred to as apps) or mini-programs running in non-browser host containers can run on the client. For example, when a user accesses a target page (such as the first screen page or a non-first screen page) in a native application or mini-program, in response to receiving the page access operation, the system can obtain structured data of the target page sent by the server. This structured data includes component content data of synchronous components and skeleton screen data of asynchronous components. The synchronous and asynchronous components are components associated with the target page. Then, an initial page is obtained based on the structured data and displayed. The initial page displays a first real page element corresponding to the synchronous component and a placeholder page element corresponding to the asynchronous component. The first real page element is based on the component content data of the synchronous component in the structured data. The page elements with actual display content are rendered from the data. The actual display content can be text content, image content, etc. The placeholder page elements are page elements with preset placeholder display content rendered from the skeleton screen data of the asynchronous component in the structured data. The placeholder display content can be, for example, a rectangle filled with a single color, or an icon indicating that data is loading, etc. When the component content data of the asynchronous component is received from the server, the second real page element with actual display content corresponding to the asynchronous component can be obtained according to the component content data of the asynchronous component, and the placeholder page element can be replaced with the second real page element to obtain the target page and display the target page.

[0032] It should be noted that the application scenarios given above are merely examples. Those skilled in the art can apply the data processing methods in page rendering provided in the embodiments of this application to other scenarios according to actual needs. This application will not provide detailed examples of each scenario.

[0033] To facilitate understanding of the data processing method in page rendering provided in the embodiments of this application, the following is combined with... Figure 1 This application introduces a page rendering system 100 corresponding to the data processing method in page rendering provided in the embodiments of this application. The page rendering system 100 may include a client 101, a server 102, and a network 103. The client 101 can connect to the server 102 through the network.

[0034] Client 101 can be any device with computing hardware capable of supporting and executing software application tools corresponding to the data processing methods in page rendering. Client 101 can be an electronic device with display and data processing capabilities, such as a mobile phone, tablet, desktop computer, or laptop. Users can access a target page in a non-browser host container on client 101. When receiving a page access request, client 101 can send a page access request for the target page to server 102 via network 103. Then, client 101 can receive structured data returned by server 102, including component content data of synchronous components and skeleton screen data of asynchronous components. Based on the structured data, it obtains an initial page and displays it. After the component content data of the asynchronous components is loaded, client 101 can receive the component content data of the asynchronous components returned by server 102, obtain a second real page element with actual display content corresponding to the asynchronous component based on the component content data, replace the placeholder page element with the second real page element, obtain the target page, and display the target page.

[0035] Server 102 possesses high-speed central processing unit (CPU) computing power, long-term reliable operation, powerful input / output (I / O) external data throughput capabilities, and better scalability. Server 102 can be a single server or a server cluster. When server 102 receives a page access request for the target page from client 101, it can obtain the component content data in HTML string stream format corresponding to the synchronous component associated with the target page, and obtain the component tree of the target page based on the component content data in HTML string stream format corresponding to the synchronous component; it then generates structured data of the target page based on the component tree, and returns the structured data to client 101 as a data stream. Furthermore, server 102 continues to obtain the component content data of asynchronous components associated with the target page, and after obtaining the component content data of the asynchronous components, it continues to return it to client 101 as a data stream.

[0036] Network 103 can be a wireless network or a wired network. For example, a wireless network could be a wireless local area network (WLAN), a local area network (LAN), a cellular network, a 2G network, a 3G network, a 4G network, or a 5G network. Additionally, different clients 101 can connect to other clients 101 or to the server 102 using their own Bluetooth network or hotspot network.

[0037] It should be noted that, Figure 1 The schematic diagram of the page rendering system shown is merely an example. The page rendering system 100 described in this application embodiment is intended to more clearly illustrate the technical solutions of this application embodiment and does not constitute a limitation on the technical solutions provided in this application embodiment.

[0038] like Figure 2 The diagram shown is a flowchart of a data processing method for page rendering provided in the first embodiment of this application, including the following steps S101 to S103.

[0039] Step S101: In response to receiving a page access operation for a target page in a non-browser host container, obtain the structured data of the target page.

[0040] The structured data includes component content data of synchronous components and skeleton screen data of asynchronous components, wherein the synchronous and asynchronous components are components associated with the target page. The structured data may be in JSON format, for example; however, this embodiment does not specifically limit the data format of the structured data.

[0041] A non-browser (web) host container refers to a rendering container in a non-browser environment, lacking the standard browser runtime environment and rendering capabilities. Non-browser host containers typically use native rendering engines to build the interface, rather than based on HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), or DOM (Document Object Model). Lacking an HTML parser, non-browser host containers cannot parse the HTML stream step-by-step and build a render tree like a browser. In non-browser host containers, the interface is composed of platform-native components or custom graphics, requiring a specific intermediate format (such as JSON) to map server-side data to the view node tree. Application types running on non-browser host containers can include, but are not limited to, native applications (such as apps), mini-programs, and cross-platform applications.

[0042] The target page is the page to be rendered for an application running on a non-browser host container, such as the homepage, the initial screen, or an intermediate page. In this embodiment, the user can perform page access operations on the target page in the non-browser host container. Page access operations may include, but are not limited to, trigger operations via controls, voice command operations, etc.

[0043] In response to receiving a page access operation, the client can send a page access request for the target page generated based on the page access operation to the server. When the server receives the page access request, it can obtain the component content data in HTML string stream format corresponding to the component associated with the target page. The component content data refers to the data that the page elements corresponding to the component depend on for rendering. It is a data set that supports the rendering and presentation of the component, including but not limited to at least one of the following: display data required for the component's own display (such as list item information, text content, image links, status indicators, etc.) and context data that the component's rendering depends on (such as device adaptation parameters, etc.).

[0044] The components associated with the target page are divided into synchronous components and asynchronous components. Synchronous components are those whose code is loaded when their corresponding parent component is rendered. Asynchronous components, on the other hand, are not loaded during the initialization of their parent component; instead, they are dynamically loaded via network requests when the asynchronous component needs to be rendered. Therefore, the server can obtain the component content data of synchronous components associated with the target page in a relatively short time, but it will take some time for the asynchronous components associated with the target page to load their content data.

[0045] In this embodiment, the server does not need to wait for the component content data in HTML string stream format corresponding to the asynchronous component to finish loading. Instead, upon obtaining the component content data in HTML string stream format corresponding to the synchronous component, the server can render the component tree of the target page based on the component content data in HTML string stream format corresponding to the synchronous component. During the server-side rendering of the component tree of the target page, for synchronous components that have obtained the corresponding component content data in HTML string stream format, the synchronous component can be rendered. For asynchronous components that have not obtained component content data, a skeleton screen HTML fragment of the asynchronous component can be generated. The skeleton screen HTML fragment includes component boundary marker data of the asynchronous component and loading status data used to indicate the loading status of the component content data of the asynchronous component. The component boundary marker data of the asynchronous component may include component start boundary marker data and component identifier data of the asynchronous component. The component boundary marker data can be used to determine the data block (such as the suspense area) corresponding to the asynchronous component. The loading status data is used to indicate that the component content data of the data block corresponding to the asynchronous component has not finished loading. When the server finishes loading the component content data in the HTML string stream format corresponding to the asynchronous component, it can efficiently replace the data block corresponding to the asynchronous component with the component content data of the asynchronous component.

[0046] The skeleton screen HTML fragment can also be used to indicate the display position of the second real page element corresponding to the asynchronous component in the target page. In this way, even before the component content data of the asynchronous component has finished loading, a placeholder page element can be rendered in advance at the display position of the second real page element corresponding to the asynchronous component in the target page indicated by the skeleton screen HTML fragment. The placeholder page element can display preset placeholder content, such as a rectangle filled with a single color (e.g., a gray box) or an indicator indicating that data is loading, which can be used to simulate the layout of the target page and improve page loading efficiency.

[0047] After the component tree of the target page is rendered on the server side, structured data of the target page can be generated based on the component tree. Specifically, the component content data in HTML string stream format corresponding to the synchronous component and the skeleton screen HTML fragment of the asynchronous component can be used as the initial complete HTML of the target page. Then, through a server-side pre-built streaming conversion module and module processor, the initial complete HTML of the target page is converted into structured data including the component content data of the synchronous component (such as data in JSON format) and the skeleton screen data of the asynchronous component (such as data in JSON format). The skeleton screen data is the structured data obtained by converting the skeleton screen HTML fragment. The skeleton screen data still includes the component boundary marker data of the asynchronous component and loading status data indicating the loading status of the component content data of the asynchronous component.

[0048] In this embodiment, the server uses a streaming conversion module to convert the streamed HTML string into structured data blocks (such as JSON Chunks) to adapt to the parsing and rendering capabilities of non-browser host containers. The streaming conversion module is based on regular expression matching and chunking buffering mechanisms to achieve the segmentation and attribute conversion of initial data blocks (e.g., SHELL blocks, containing component content data in HTML string format corresponding to synchronous components and skeleton screen HTML fragments of asynchronous components) and asynchronous content data blocks (e.g., CONTENT blocks, containing component content data in HTML string format corresponding to asynchronous components).

[0049] Specifically, firstly, the streaming conversion module can use regular expressions to locate the component boundary marker data of asynchronous components in the HTML stream, specifically the component start boundary marker data and the component end boundary marker data. When the component start boundary marker data of an asynchronous component is detected, the streaming conversion module can divide the HTML content before the data start position corresponding to the component start boundary marker data into an initial data block, and divide the content between the data start position corresponding to the component start boundary marker data and the data end position corresponding to the component end boundary marker data into asynchronous content data blocks. If the current streaming transmission has not ended and no asynchronous component end boundary marker data has been matched, the streaming conversion module can temporarily store the currently accumulated asynchronous content data blocks in a buffer, waiting for subsequent data to arrive before continuing to match. To enable non-browser host containers to recognize the internal tags of streaming rendering (such as React), the streaming conversion module can perform regular expression replacement processing on the HTML string, converting streaming rendering-specific annotation tags into preset structured attributes while retaining the original attributes. Through this replacement process, the component boundary marker data of asynchronous components can be replaced with the data-role="suspense-start" attribute, and when the loading state data of asynchronous components is the first loading state data, it can be replaced with the data-suspense="pending" attribute. The client can use this to identify the placeholder page element and its loading state corresponding to the asynchronous component during rendering, avoiding rendering errors caused by data not being ready during the hydration process.

[0050] In this embodiment, the streaming conversion module described above can convert streaming SSR output, which relies on the browser's HTML parser, into structured data recognizable by non-browser host containers, thus overcoming the rendering limitations of native applications or mini-programs running in non-browser host containers. Furthermore, based on regular expression matching and boundary markers, lossless segmentation of initial data blocks and asynchronous content data blocks can be achieved, ensuring that synchronous components are rendered first and asynchronous components are progressively filled. By converting streaming rendering-specific tags into preset structured attributes, the loading status of asynchronous components can be easily transmitted, allowing the client to register retry callbacks and achieve delayed hydration of asynchronous components.

[0051] Subsequently, the server can return the structured data to the client, enabling the client to obtain the structured data of the target page. On one hand, the structured data, generated from the initial complete HTML of the target page, allows the client to identify the data boundaries of asynchronous components within the structured data. This enables the rendering of placeholder page elements corresponding to the asynchronous components, and in subsequent steps, the page elements are gradually hydrated according to rendering rules (such as suspense rules) determined by component boundary marker data and loading state data, avoiding the need to wait for all component content data to load before hydration can occur. On the other hand, the initial complete HTML does not rely on the component content data of the asynchronous components, which requires a certain loading time. Therefore, the client can display the initial page rendered based on the structured data in a shorter time, improving page loading efficiency.

[0052] Step S102: Obtain the initial page based on the structured data.

[0053] The initial page displays a first real page element corresponding to the synchronous component, rendered based on the component content data of the synchronous component, and a placeholder page element corresponding to the asynchronous component, rendered based on the skeleton screen data of the asynchronous component. The first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder display content.

[0054] This step is used to render the initial page based on the structured data.

[0055] In a specific implementation, a view node tree representing the hierarchical structure between page elements to be rendered on the target page can be created based on the structured data; the initial page is then rendered based on the view node tree. Specifically, firstly, mapping rules can be defined to map components in the structured data to native page elements; then, the structured data can be recursively traversed, and for any component in the structured data, the following steps are performed: based on the mapping rules and the component type of the traversed component, a corresponding native view instance is created, and the attributes (such as text content, images, lists, etc.) defined in the structured data for the traversed component are bound to the corresponding native view instance. After all components included in the structured data have been traversed, a view node tree representing the hierarchical structure between page elements to be rendered on the target page can be created, and then the view node tree can be mounted to the root container for rendering.

[0056] In this step, since the structured data includes the component content data of the synchronous component and the skeleton screen data of the asynchronous component, during the rendering of the initial page, the first real page element with actual display content (such as text, list, image, etc.) corresponding to the synchronous component can be rendered based on the component content data of the synchronous component, and the placeholder page element with preset placeholder display content (such as gray box) corresponding to the asynchronous component can be rendered based on the skeleton screen data of the asynchronous component.

[0057] In this way, an initial page can be created that displays the page layout of the target page and some page elements (first real page elements) of the target page. Thus, when a user accesses the target page, they do not need to wait for the asynchronous components' content data to load completely; they can see the initial page in a short time and obtain the page layout and some page elements of the target page through the displayed initial page.

[0058] In this embodiment, before the initial page is watered down, the first real interactive page element (such as a control) that needs to implement interactive functions among the first real page elements in the initial page is in a non-interactive state. For example, before the initial page is watered down, if a user triggers a control on the initial page used to play a product display video, the product display video cannot be played in response to the triggering operation because the initial page has not been watered down.

[0059] In a further optional implementation, to make the first real interactive page element interactive, the initial page can be hydrated to obtain a first intermediate page. Specifically, after obtaining the initial page, event listeners for executing interaction logic can be added to the first real interactive page element in the initial page based on the structured data to obtain the first intermediate page.

[0060] Event listeners are the core component that implements the event-driven model. After adding an event listener to the first real interactive page element, the event listener can continuously listen for specific interactive behaviors (such as click, swipe, press, etc.) generated for the first real interactive page element. When the specific interactive behavior is triggered, the event listener will call the preset callback function and execute the predefined response logic to realize the response to the specific interactive behavior.

[0061] In this embodiment, compared to the initial page, the first real interactive page elements in the first intermediate page are in an interactive state and can respond to user trigger operations. For example, after hydrating the initial page to obtain the first intermediate page, if the user triggers a control on the first intermediate page used to play a product display video, the product display video will be played in response to the detection of the trigger operation.

[0062] In this way, the first real interactive page elements that need to implement interactive functions in the first real page elements corresponding to the pre-displayed synchronization components are pre-hydrated, which can improve the loading efficiency when the page is loaded, thereby improving the user's interactive experience.

[0063] like Figure 3 The diagram shown is a data processing flowchart of the hydration process in the data processing method for page rendering provided in this application embodiment. The following section details the data processing process during hydration. Figure 3 The steps are explained in detail below: In a specific implementation, the step of adding event listeners for executing interaction logic to the first real interactive page elements in the initial page based on the structured data to obtain the first intermediate page can be achieved through the following steps: For any page element in the view node tree, a target component matching the page element is determined from the structured data; based on the data defined by the target component in the structured data, an event listener for executing interaction logic is added to the first real interactive page element to obtain the first intermediate page of the target page.

[0064] First, for any page element in the view node tree, a target component matching the page element can be determined from the structured data based on the element identifier corresponding to that page element.

[0065] After that, it can be executed. Figure 3 Step S104: Based on the data defined by the target component in the structured data, determine whether the target component is a waterable component. Specifically, a waterable component refers to a component corresponding to a page element that needs to implement interactive functions. When the structured data is generated on the server side, waterable components are usually annotated with a waterable field identifier. Thus, it can be determined whether the data defined by the target component in the structured data includes the waterable field identifier; if the data defined by the target component in the structured data includes the waterable field identifier, then the target component is determined to be a waterable component; if the data defined by the target component in the structured data does not include the waterable field identifier, then the target component is determined to be a non-waterable component, and the processing of the target component ends.

[0066] If the target component is a hydratable component, it can be determined whether the target component is the synchronous component. In this embodiment, it can be determined whether the target component is the synchronous component based on the data defined in the structured data. As described above, for the asynchronous component that has not yet been loaded with component content, the structured data includes the skeleton screen data of the asynchronous component, and the skeleton screen data includes the component boundary marker data of the asynchronous component. In this step, specifically, it can be executed... Figure 3 Step S105: Determine whether the target component includes the component boundary marker data in the data defined in the structured data; if the target component includes the component boundary marker data in the data defined in the structured data, then the target component is determined to be the asynchronous component; if the target component does not include the component boundary marker data in the data defined in the structured data, then the target component is determined to be the synchronous component.

[0067] If the target component is the synchronization component, then execution can be performed. Figure 3 Step S106: Hydrate the target component. Specifically, the page element corresponding to the target component in the view node tree can be determined as the first real interactive page element, and a target function for executing the interaction logic can be obtained from the data defined in the structured data of the target component. Based on the target function, an event listener associated with the target function is added to the first real interactive page element to obtain a first intermediate page. In the first intermediate page, when the user performs a specific interactive action on the first real interactive page element, the target function can be called through the event listener to execute the interaction logic.

[0068] In a further optional implementation, if the target component is the asynchronous component, a data callback function can be registered for the page element in the view node tree that matches the target component. Specifically, if the target component is the asynchronous component, a data callback function can be executed. Figure 3 Step S107: Determine whether the loading status data of the target component is the first loading status data; the first loading status data indicates that the component content data of the target component has not been fully loaded.

[0069] If the loading status data of the target component is the first loading status data, then execution can be performed. Figure 3Step S108: Register a data callback function for the page element in the view node tree that matches the target component. Then, the processing of the target component ends. If the loading status data of the target component is not the first loading status data, such as the second loading status data indicating that the component content data of the target component has been fully loaded, then execution can proceed. Figure 3 Step S106: Hydrate the target component.

[0070] In this embodiment, the registered data callback function is used to replace the placeholder page element corresponding to the asynchronous component when the component content data of the asynchronous component is received. Furthermore, when the target component includes component boundary marker data in the data defined in the structured data, the target component is determined to be an asynchronous component. At this time, the loading status data of the target component can be used to determine whether the component content data of the target component has been loaded. When the loading status data of the target component indicates that the component content data of the target component has not been loaded, a data callback function can be registered for the page element in the view node tree that matches the target component.

[0071] On the one hand, by registering the data callback function, the second real page element corresponding to the asynchronous component can be rendered in a timely manner when the client receives the component content data of the asynchronous component returned by the server, thereby improving the loading efficiency of the page. On the other hand, after registering the data callback function, watering errors caused by the asynchronous component not yet being received can be avoided.

[0072] Step S103: In response to receiving the component content data of the asynchronous component, obtain the second real page element with actual display content corresponding to the asynchronous component based on the component content data of the asynchronous component, and replace the placeholder page element with the second real page element to obtain the target page.

[0073] This step is used to replace the placeholder page element used to display placeholder content with the second real page element used to display actual content when the component content data of the asynchronous component is loaded, so that the final target page can fully display all page elements.

[0074] It should be noted that, in this embodiment, when the server finishes loading the component content data in HTML string stream format corresponding to the asynchronous component, it can parse the component content data in HTML string stream format corresponding to the asynchronous component to obtain the component content data in structured data format corresponding to the asynchronous component (referred to as the component content data of the asynchronous component in this application), and return the component content data of the asynchronous component to the client. When the component content data of the asynchronous component arrives at the client, the data callback function registered above can be called to render the component content data of the asynchronous component to obtain the second real page element corresponding to the asynchronous component.

[0075] As described above, the skeleton screen data includes component boundary marker data of the asynchronous component. This component boundary marker data can be used to determine the data block of the asynchronous component within the structured data. In a specific implementation, the data block determined based on the component boundary marker data in the structured data can be replaced with the component content data of the asynchronous component. Based on the component content data of the asynchronous component, the second real page element corresponding to the asynchronous component is rendered. Thus, when the component content data of the asynchronous component is received, the data block corresponding to the asynchronous component can be efficiently determined from the structured data using the component identifier data and the component boundary marker data of the asynchronous component. This allows for the efficient replacement of the data block determined based on the component boundary marker data in the structured data with the component content data of the asynchronous component, and the rendering of the second real page element corresponding to the asynchronous component based on the component content data.

[0076] In this embodiment of the application, replacing the placeholder page element with the second real page element to obtain the target page may specifically include the following steps: The placeholder page element is replaced with the second real page element corresponding to the asynchronous component to obtain the second intermediate page; the second real interactive page element in the second intermediate page that needs to implement interactive functions is in a non-interactive state. Based on the component content data of the asynchronous component, an event listener for executing interaction logic is added to the second real interactive page element in the second intermediate page to obtain the target page.

[0077] Similar to the initial page, the second intermediate page, obtained by replacing the placeholder page elements with the second real page elements corresponding to the asynchronous component, refers to a page where the second real interactive page elements that require interactive functionality within the second real page elements have not been watered. The second real interactive page elements (such as controls) in the second intermediate page are in a non-interactive state. For example, before watering the second intermediate page, if a user triggers a control on the second intermediate page used to navigate to the product details page, the second intermediate page, being unwatered, cannot respond to this trigger and switch to the desired product details page.

[0078] In this embodiment of the application, an event listener associated with the function for executing interaction logic included in the component content data of the asynchronous component can be added to the second real interactive page element in the second intermediate page, thereby obtaining the target page.

[0079] Compared to the second intermediate page, the second real interactive page elements in the target page are in an interactive state and can respond to user trigger operations. For example, after the second intermediate page is hydrated to obtain the target page, if the user triggers a control on the target page used to jump to the product details page, the target page will be switched to the product details page in response to the trigger operation.

[0080] Thus, after replacing the placeholder page element with the second real page element based on the received component content data of the asynchronous component, the second real interactive page element that needs to implement interactive functions can be hydrated according to the component content data of the asynchronous component. After obtaining the target page, the target page can be displayed, so that the user can interact with the second real interactive page element in the displayed target page, improving the user's interactive experience.

[0081] Optionally, after obtaining the target page, the component boundary marker data of the asynchronous component can be removed from the structured data, and the loading status data of the asynchronous component can be set as the second loading status data. The second loading status data indicates that the component content data of the asynchronous component has been loaded.

[0082] This application provides a data processing method for page rendering, comprising the following steps: in response to receiving a page access operation for a target page in a non-browser host container, obtaining structured data of the target page; the structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component, wherein the synchronous component and the asynchronous component are components associated with the target page; obtaining an initial page based on the structured data; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content; in response to receiving the component content data of the asynchronous component, obtaining a second real page element corresponding to the asynchronous component with actual displayed content based on the component content data of the asynchronous component, and replacing the placeholder page element with the second real page element to obtain the target page.

[0083] As can be seen, the data processing method for page rendering provided in this application can receive data in two steps when receiving a page access operation for a target page in a non-browser host container. The first step involves pre-acquiring the structured data of the target page before the component content data of the asynchronous component has finished loading. This structured data includes the component content data of the synchronous component and the skeleton screen data of the asynchronous component. Since the component content data of the synchronous component has already been loaded when its corresponding parent component is rendered, it can be obtained in a relatively short time. However, the component content data of the asynchronous component is only dynamically loaded during rendering and requires a certain amount of time to complete loading. In this embodiment, there is no need to spend time waiting for the component content data of the asynchronous component to load; instead, the structured data, including the component content data of the synchronous component and the skeleton screen data of the asynchronous component, is obtained in a relatively short time, and the initial page is obtained based on this structured data. This allows for the rapid display of pages in non-browser host containers in a short time, thereby improving page loading efficiency and enhancing user experience. Furthermore, the initial page already displays the first real page element corresponding to the synchronous component, rendered based on the component content data of the synchronous component, and the placeholder page element corresponding to the asynchronous component, rendered based on the skeleton screen data of the asynchronous component. The first real page element is a portion of the page elements in the target page and has actual display content. Thus, based on the displayed first real page element, the user can obtain some information about the target page, and based on the displayed placeholder page element, the user can understand the page layout of the target page. The second step involves obtaining the component content data of the asynchronous component after its component content data is loaded, and replacing the placeholder page element that originally displayed placeholder content with a page element displaying actual content based on the component content data of the asynchronous component. In this way, the content of the asynchronous component, which requires a certain amount of time to load, can gradually fill the initial page, thereby obtaining the target page with complete display content. Therefore, the data processing method in page rendering provided in this application embodiment can achieve streaming rendering of pages in non-browser host containers, improving loading efficiency during page loading and thus enhancing the user experience.

[0084] like Figure 4 The diagram shown is a flowchart of a data generation method for page rendering provided in the second embodiment of this application, including the following steps S201 to S204: Step S201: In response to receiving a page access request sent by the client based on a page access operation for a target page in a non-browser host container, obtain the component content data in HTML string stream format corresponding to the synchronous component associated with the target page.

[0085] Step S202: Obtain the component tree of the target page based on the component content data in the HTML string stream format corresponding to the synchronous component; render synchronous components in the component tree, and generate skeleton screen HTML fragments for asynchronous components that have not obtained component content data.

[0086] Step S203: Generate structured data for the target page based on the component tree.

[0087] Step S204: Return the structured data to the client.

[0088] The skeleton screen data includes component boundary marker data of the asynchronous component and loading status data indicating the loading status of the component content data of the asynchronous component.

[0089] like Figure 5 The diagram shown is a data processing flowchart in the data generation method for page rendering provided in the second embodiment of this application, including steps S205 to S214. Step S205: Receive a page access request sent by the client based on a page access operation targeting a target page in a non-browser host container; Step S206: Obtain component content data in HTML string stream format corresponding to the synchronous component associated with the target page; Step S207: Render the synchronous component according to the component content data in HTML string stream format corresponding to the synchronous component, generate a skeleton screen HTML fragment for the asynchronous component, and obtain the component tree of the target page; Step S208 (i.e....) Figure 4 Step S203): Generate structured data for the target page based on the component tree; Step S209 (i.e. Figure 4 Step S204): Return the structured data to the client; Step S210: Determine whether the component content data in the HTML string stream format corresponding to the asynchronous component has been loaded; If the determination result of step S210 is yes, then execute step S211: Obtain the component content data in the HTML string stream format corresponding to the asynchronous component; Step S212: Generate the component content data in the structured data format corresponding to the asynchronous component (that is, the component content data of the asynchronous component in this embodiment) based on the component content data in the HTML string stream format corresponding to the asynchronous component; Step S213: Stream the component content data in the structured data format corresponding to the asynchronous component back to the client; If the determination result of step S210 is no, then execute step S214: Continuously monitor the component content data in the structured data format corresponding to the asynchronous component.

[0090] The specific steps in the data generation method for page rendering provided in the second embodiment of this application can be found in the relevant description of the data processing method for page rendering provided in the first embodiment of this application, and will not be repeated here.

[0091] like Figure 6 The diagram shown is a flowchart of a page display method provided in the third embodiment of this application, including the following steps S301 and S302: Step S301: In response to receiving a page access operation for a target page in a non-browser host container, an initial page is displayed; the initial page displays a first real page element and a placeholder page element, the first real page element is a portion of the page elements in the target page, the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content. Step S302: In response to receiving the component content data corresponding to the placeholder page element, the target page is displayed; the target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component, wherein the second real page element is a page element with actual display content rendered based on the component content data of the asynchronous component.

[0092] The specific steps in the page display method provided in the third embodiment of this application can be referred to the relevant description of the data processing method in page rendering provided in the first embodiment of this application, which will not be repeated here.

[0093] In the data processing method for page rendering provided in this application embodiment, the server obtains the component content data (HTML string) of the synchronous component and the skeleton screen HTML fragment of the asynchronous component, and performs feature extraction on the component content data of the synchronous component and the skeleton screen HTML fragment of the asynchronous component. This generates a SHELL chunk (skeleton block, i.e., the structured data in this application embodiment, representing the page layout of the target page) in a structured data format for the synchronous and asynchronous components on the server side, and returns the SHELL chunk to the client. Then, when the server loads the component content data in the HTML string stream format corresponding to the asynchronous component, it parses the component content data in the HTML string stream format corresponding to the asynchronous component to obtain a CONTENTchunk (content block, i.e., the component content data of the asynchronous component in this application embodiment) in a structured data format corresponding to the asynchronous component, and returns the CONTENTchunk to the client.

[0094] In other words, in this embodiment of the application, the structured data (i.e., the SHELL chunk mentioned above) sent by the server to the client and the component content data of the asynchronous component (i.e., the CONTENT chunk mentioned above) are both structured data that can be recognized and parsed by non-browser clients, thereby enabling streaming rendering on non-browser clients.

[0095] Corresponding to the data processing method in page rendering provided in the first embodiment of this application, the fourth embodiment of this application also provides a data processing apparatus in page rendering, such as... Figure 7 As shown, the data processing apparatus 500 for page rendering provided in the fourth embodiment of this application includes: a first acquisition unit 501, configured to acquire structured data of the target page in response to receiving a page access operation for a target page in a non-browser host container; the structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component, wherein the synchronous component and the asynchronous component are components associated with the target page; a first obtaining unit 502, configured to obtain an initial page based on the structured data; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder display content; The replacement unit 503 is configured to, in response to receiving the component content data of the asynchronous component, obtain the second real page element with actual display content corresponding to the asynchronous component based on the component content data of the asynchronous component, and replace the placeholder page element with the second real page element to obtain the target page.

[0096] Optionally, the first real interactive page element in the initial page that needs to implement interactive functions is in a non-interactive state; the data processing device 500 in the page rendering further includes an adding unit, which is used to: add an event listener for executing interactive logic to the first real interactive page element in the initial page according to the structured data to obtain a first intermediate page; the first real interactive page element in the first intermediate page is in an interactive state.

[0097] Optionally, the first obtaining unit 502 is specifically used to: create a view node tree based on the structured data to represent the hierarchical structure between page elements to be rendered on the target page; and render an initial page based on the view node tree.

[0098] Optionally, the adding unit is specifically used to: for any page element in the view node tree, determine a target component that matches the page element from the structured data; and add an event listener for executing interaction logic to the first real interactive page element according to the data defined by the target component in the structured data, thereby obtaining the first intermediate page of the target page.

[0099] Optionally, the adding unit is specifically used for: if the target component is a hydratable component, determining whether the target component is the synchronous component; if the target component is the synchronous component, determining the page element corresponding to the target component in the view node tree as the first real interactive page element, and obtaining the target function for executing the interaction logic from the data defined by the target component in the structured data; adding an event listener associated with the target function to the first real interactive page element to obtain the first intermediate page.

[0100] Optionally, the adding unit is further configured to: if the target component is the asynchronous component, register a data callback function for the page element in the view node tree that matches the target component; call the data callback function to render the component content data of the asynchronous component to obtain the second real page element corresponding to the asynchronous component.

[0101] Optionally, the skeleton screen data includes component boundary marker data of the asynchronous component; the data processing device 500 in the page rendering further includes a determination unit, which is used to: determine the target component as the asynchronous component if it is detected that the target component includes the component boundary marker data in the data defined in the structured data.

[0102] Optionally, the skeleton screen data includes component boundary marker data of the asynchronous component; the component boundary marker data is used to determine the data block of the asynchronous component in the structured data; the replacement unit 503 is specifically used to: replace the data block in the structured data determined based on the component boundary marker data with the component content data of the asynchronous component; and render the second real page element corresponding to the asynchronous component according to the component content data of the asynchronous component.

[0103] Optionally, the skeleton screen data includes loading status data indicating the loading status of the component content data of the asynchronous component; the adding unit is further specifically used for: if the target component is the asynchronous component, determining whether the loading status data of the target component is first loading status data; the first loading status data indicates that the component content data of the target component has not been fully loaded; if the loading status data of the target component is the first loading status data, registering a data callback function for the page element in the view node tree that matches the target component.

[0104] Optionally, the replacement unit 503 is specifically used to: replace the placeholder page element with the second real page element corresponding to the asynchronous component to obtain a second intermediate page; the second real interactive page element in the second intermediate page that needs to implement interactive functions is in a non-interactive state; according to the component content data of the asynchronous component, add an event listener for executing interactive logic to the second real interactive page element in the second intermediate page to obtain the target page.

[0105] Corresponding to the data generation method in page rendering provided in the second embodiment of this application, the fifth embodiment of this application also provides a data generation apparatus in page rendering, such as... Figure 8 As shown, the data generation apparatus 600 for page rendering provided in the fifth embodiment of this application includes: a second acquisition unit 601, configured to, in response to receiving a page access request sent by a client based on a page access operation for a target page in a non-browser host container, acquire component content data in HTML string stream format corresponding to a synchronous component associated with the target page; a second acquisition unit 602, configured to, based on the component content data in HTML string stream format corresponding to the synchronous component, acquire a component tree of the target page; in the component tree, synchronous components that have acquired component content data are rendered, and skeleton screen HTML fragments are generated for asynchronous components that have not acquired component content data; a generation unit 603, configured to, based on the component tree, generate structured data of the target page; and a sending unit 604, configured to, send the structured data of the target page to the client.

[0106] Corresponding to the page display method provided in the third embodiment of this application, the sixth embodiment of this application also provides a page display device, such as... Figure 9As shown, the page display device 700 provided in the sixth embodiment of this application includes: a first display unit 701, configured to display an initial page in response to receiving a page access operation for a target page in a non-browser host container; the initial page displays a first real page element and a placeholder page element, wherein the first real page element is a portion of the page elements in the target page, the first real page element is a page element with actual display content, and the placeholder page element is a page element with preset placeholder display content; and a second display unit 702, configured to display the target page in response to receiving component content data corresponding to the placeholder page element; the target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component, wherein the second real page element is a page element with actual display content rendered based on the component content data of the asynchronous component.

[0107] Corresponding to the data processing method in page rendering provided in the first embodiment of this application, the data generation method in page rendering provided in the second embodiment of this application, or the page display method provided in the third embodiment of this application, the seventh embodiment of this application also provides an electronic device for data processing, data generation, or page display in page rendering. For example... Figure 10 The diagram shown is a structural block diagram of an example of an electronic device for data processing, data generation, or page display in page rendering, provided in an embodiment of this application. In this embodiment, an optional hardware structure of the electronic device 800 may be as follows: Figure 10As shown, the device includes: at least one processor 801, at least one memory 802, and at least one communication bus 805; the memory 802 contains a program 803 and data 804. The bus 805 can be a communication device for transmitting data between components within the electronic device 800, such as an internal bus (e.g., a CPU-memory bus, where the processor is the central processing unit, or CPU for short) or an external bus (e.g., a Universal Serial Bus port, a Peripheral Component Interconnect (PCI) port). Additionally, the electronic device also includes: at least one network interface 806 and at least one peripheral interface 807. Network interface 806 provides wired or wireless communication with an external network 808 (e.g., the Internet, intranet, local area network, mobile communication network, etc.). In some embodiments, network interface 806 may include any number of network interface controllers (NICs), radio frequency (RF) modules, repeaters, transceivers, modems, routers, gateways, any combination of wired network adapters, wireless network adapters, Bluetooth adapters, infrared adapters, near field communication (NFC) adapters, cellular network chips, etc. Peripheral interface 807 is used to connect to peripherals, such as peripheral 1 in the figure. Figure 10 809 in the middle), peripheral 2 ( Figure 10 810 in the middle) and peripheral 3 ( Figure 10 (811 in the original text). Peripherals are peripheral devices, which may include, but are not limited to, cursor control devices (e.g., mouse, touchpad, or touchscreen), keyboards, displays (e.g., cathode ray tube displays, liquid crystal displays), displays or light-emitting diode displays, video input devices (e.g., cameras or input interfaces coupled to video files), etc. Processor 801 may be a CPU, or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of this application. Memory 802 may include high-speed RAM (Random Access Memory) memory, and may also include non-volatile memory, such as at least one disk storage device. The processor 801 calls the program and data stored in memory 802 to perform the following steps: In response to receiving a page access operation for a target page in a non-browser host container, the structured data of the target page is obtained; the structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component, wherein the synchronous component and the asynchronous component are components associated with the target page; based on the structured data, an initial page is obtained; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content; in response to receiving the component content data of the asynchronous component, a second real page element with actual displayed content corresponding to the asynchronous component is obtained based on the component content data of the asynchronous component, and the placeholder page element is replaced with the second real page element to obtain the target page; or In response to receiving a page access request from a client based on a page access operation targeting a target page in a non-browser host container, the system retrieves component content data in HTML string stream format corresponding to the synchronous components associated with the target page; obtains the component tree of the target page based on the component content data in HTML string stream format corresponding to the synchronous components; renders synchronous components in the component tree and generates skeleton screen HTML fragments for asynchronous components for which component content data has not been obtained; generates structured data for the target page based on the component tree; and returns the structured data to the client; or In response to receiving a page access operation for a target page in a non-browser host container, an initial page is displayed. The initial page displays a first real page element and placeholder page elements. The first real page element is a portion of the page elements in the target page, and the first real page element is a page element with actual displayed content. The placeholder page element is a page element with preset placeholder displayed content. In response to receiving component content data corresponding to the placeholder page element, the target page is displayed. The target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component. The second real page element is a page element with actual displayed content rendered based on the component content data of the asynchronous component.

[0108] Corresponding to the data processing method in page rendering provided in the first embodiment of this application, the data generation method in page rendering provided in the second embodiment of this application, or the page display method provided in the third embodiment of this application, the eighth embodiment of this application provides a computer-readable storage medium storing a program for the data processing method in page rendering provided in the first embodiment of this application, the data generation method in page rendering provided in the second embodiment of this application, or the page display method provided in the third embodiment of this application. This program is executed by a processor to perform the following steps: In response to receiving a page access operation for a target page in a non-browser host container, the structured data of the target page is obtained; the structured data includes component content data of a synchronous component and skeleton screen data of an asynchronous component, wherein the synchronous component and the asynchronous component are components associated with the target page; based on the structured data, an initial page is obtained; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder displayed content; in response to receiving the component content data of the asynchronous component, a second real page element with actual displayed content corresponding to the asynchronous component is obtained based on the component content data of the asynchronous component, and the placeholder page element is replaced with the second real page element to obtain the target page; or In response to receiving a page access request from a client based on a page access operation targeting a target page in a non-browser host container, the system retrieves component content data in HTML string stream format corresponding to the synchronous components associated with the target page; obtains the component tree of the target page based on the component content data in HTML string stream format corresponding to the synchronous components; renders synchronous components in the component tree and generates skeleton screen HTML fragments for asynchronous components for which component content data has not been obtained; generates structured data for the target page based on the component tree; and returns the structured data to the client; or In response to receiving a page access operation for a target page in a non-browser host container, an initial page is displayed. The initial page displays a first real page element and placeholder page elements. The first real page element is a portion of the page elements in the target page, and the first real page element is a page element with actual displayed content. The placeholder page element is a page element with preset placeholder displayed content. In response to receiving component content data corresponding to the placeholder page element, the target page is displayed. The target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component. The second real page element is a page element with actual displayed content rendered based on the component content data of the asynchronous component.

[0109] It should be noted that for detailed descriptions of the data generation method, page display method, apparatus, electronic device, and computer-readable storage medium in page rendering provided in the second, third, fourth, fifth, sixth, seventh, and eighth embodiments of this application, please refer to the relevant description of the first embodiment of this application, which will not be repeated here.

[0110] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0111] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0112] 1. Computer-readable media includes both permanent and non-permanent, removable and non-removable media, which can store information by any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined in this application, computer-readable media does not include non-transitory computer-readable media, such as modulated data signals and carrier waves.

[0113] 2. Those skilled in the art will understand that embodiments of this application can provide methods, systems, or computer program products. Therefore, embodiments of this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, embodiments of this application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0114] 3. This application embodiment may involve the use of user data. In practical applications, user-specific data may be used within the scope permitted by applicable laws and regulations of the country where the application is located (e.g., with the user's explicit consent). Furthermore, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. The collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0115] Although this application discloses preferred embodiments as described above, it is not intended to limit this application. Any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of this application. Therefore, the scope of protection of this application should be determined by the scope defined in the claims of this application.

Claims

1. A data processing method in page rendering, characterized in that, The method includes: In response to receiving a page access operation for a target page in a non-browser host container, the structured data of the target page is obtained; the structured data includes component content data of synchronous components and skeleton screen data of asynchronous components, wherein the synchronous components and the asynchronous components are components associated with the target page; Based on the structured data, an initial page is obtained; the initial page displays a first real page element corresponding to the synchronous component, which is rendered based on the component content data of the synchronous component, and a placeholder page element corresponding to the asynchronous component, which is rendered based on the skeleton screen data of the asynchronous component. The first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder display content. In response to receiving the component content data of the asynchronous component, a second real page element with actual display content corresponding to the asynchronous component is obtained based on the component content data of the asynchronous component, and the placeholder page element is replaced with the second real page element to obtain the target page.

2. The method according to claim 1, characterized in that, The first real interactive page element in the initial page that requires interactive functionality is in a non-interactive state; the method further includes: Based on the structured data, event listeners for executing interaction logic are added to the first real interactive page element in the initial page to obtain the first intermediate page; the first real interactive page element in the first intermediate page is in an interactive state.

3. The method according to claim 2, characterized in that, The step of obtaining the initial page based on the structured data includes: A view node tree is created based on the structured data to represent the hierarchical structure between page elements to be rendered on the target page; The initial page is rendered based on the view node tree.

4. The method according to claim 2, characterized in that, The step of adding event listeners for executing interaction logic to the elements of the first real interactive page based on the structured data to obtain the first intermediate page includes: For any page element in the view node tree, a target component matching the page element is determined from the structured data; the view node tree is a node tree created based on the structured data to represent the hierarchical structure between page elements to be rendered on the target page. Based on the data defined by the target component in the structured data, an event listener for executing interaction logic is added to the first real interactive page element to obtain the first intermediate page of the target page.

5. The method according to claim 4, characterized in that, The step of adding event listeners for executing interaction logic to the first real interactive page elements based on the data defined by the target component in the structured data to obtain the first intermediate page includes: If the target component is a hydratable component, then determine whether the target component is the synchronization component; If the target component is the synchronization component, then the page element in the view node tree corresponding to the target component is determined as the first real interactive page element, and the target function for executing the interaction logic is obtained from the data defined by the target component in the structured data. Add an event listener associated with the target function to the first real interactive page element to obtain the first intermediate page.

6. The method according to claim 1, characterized in that, The skeleton screen data includes component boundary marker data of the asynchronous component; the component boundary marker data is used to determine the data block of the asynchronous component in the structured data; The step of obtaining the second real page element with actual display content corresponding to the asynchronous component based on the component content data of the asynchronous component includes: Replace the data blocks in the structured data determined based on the component boundary marker data with the component content data of the asynchronous component; Based on the component content data of the asynchronous component, the second real page element corresponding to the asynchronous component is rendered.

7. The method according to claim 1, characterized in that, The step of replacing the placeholder page element with the second real page element corresponding to the asynchronous component to obtain the target page includes: The placeholder page element is replaced with the second real page element corresponding to the asynchronous component to obtain the second intermediate page; the second real interactive page element in the second intermediate page that needs to implement interactive functions is in a non-interactive state. Based on the component content data of the asynchronous component, an event listener for executing interaction logic is added to the second real interactive page element in the second intermediate page to obtain the target page.

8. A data generation method in page rendering, characterized in that, The method includes: In response to receiving a page access request sent by a client based on a page access operation for a target page in a non-browser host container, obtain component content data in HTML string stream format corresponding to the synchronous component associated with the target page; Based on the component content data in HTML string stream format corresponding to the synchronous component, the component tree of the target page is obtained; synchronous components are rendered in the component tree, and skeleton screen HTML fragments are generated for asynchronous components that have not obtained component content data. The structured data of the target page is generated based on the component tree; The structured data is returned to the client.

9. A method for displaying a page, characterized in that, The method includes: In response to receiving a page access operation for a target page in a non-browser host container, an initial page is displayed; the initial page displays a first real page element and a placeholder page element, wherein the first real page element is a page element with actual displayed content, and the placeholder page element is a page element with preset placeholder display content. In response to receiving the component content data corresponding to the placeholder page element, the target page is displayed; the target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component, wherein the second real page element is a page element with actual display content rendered based on the component content data of the asynchronous component.

10. A data processing apparatus for page rendering, characterized in that, The device includes: The first acquisition unit is configured to, in response to receiving a page access operation for a target page in a non-browser host container, acquire the structured data of the target page; the structured data includes component content data of synchronous components and skeleton screen data of asynchronous components, wherein the synchronous components and the asynchronous components are components associated with the target page; The first obtaining unit is used to obtain an initial page based on the structured data; the initial page displays a first real page element corresponding to the synchronous component rendered based on the component content data of the synchronous component and a placeholder page element corresponding to the asynchronous component rendered based on the skeleton screen data of the asynchronous component, wherein the first real page element is a page element with actual display content and the placeholder page element is a page element with preset placeholder display content. The replacement unit is configured to, in response to receiving component content data from the asynchronous component, obtain a second real page element with actual display content corresponding to the asynchronous component based on the component content data of the asynchronous component, and replace the placeholder page element with the second real page element to obtain the target page.

11. A data generation device for page rendering, characterized in that, The device includes: The second acquisition unit is used to respond to receiving a page access request sent by the client based on a page access operation for a target page in a non-browser host container, and to acquire component content data in HTML string stream format corresponding to the synchronization component associated with the target page. The second obtaining unit is used to obtain the component tree of the target page based on the component content data in the HTML string stream format corresponding to the synchronous component; in the component tree, synchronous components that have obtained component content data are rendered, and skeleton screen HTML fragments are generated for asynchronous components that have not obtained component content data. A generation unit is used to generate structured data for the target page based on the component tree; The sending unit is used to send the structured data of the target page to the client.

12. A page display device, characterized in that, The device includes: The first display unit is used to respond to receiving a page access operation for a target page in a non-browser host container and display an initial page; the initial page displays a first real page element and a placeholder page element, the first real page element is a part of the page elements in the target page, the first real page element is a page element with actual display content, and the placeholder page element is a page element with preset placeholder display content. The second display unit is used to display the target page in response to receiving the component content data corresponding to the placeholder page element; the target page displays a first real page element corresponding to the synchronous component and a second real page element corresponding to the asynchronous component, wherein the second real page element is a page element with actual display content rendered based on the component content data of the asynchronous component.

13. An electronic device, characterized in that, include: processor; as well as A memory for storing a data processing program, which, when the electronic device is powered on and runs through the processor, executes the method as described in any one of claims 1-9.

14. A computer-readable storage medium, characterized in that, The system contains a data processing program that is executed by a processor to perform the method as described in any one of claims 1-9.

Images