Web page rendering method and electronic equipment

Abstract

The invention discloses a Web page rendering method and electronic equipment, which are used for reducing the load and power consumption of the electronic equipment when a Web page is browsed. The method comprises the steps that a first application process generates a first rendering tree, wherein the first rendering tree is used for drawing a first application interface corresponding to a Web page in a Web application; and the first application process sends the first rendering tree to a system rendering process. And then, the system rendering process generates a second rendering tree according to the first rendering tree and the rendering node corresponding to the first application, and the first application is an application except the Web application in the electronic equipment. The system rendering process generates a first display interface according to the second rendering tree, wherein the first display interface comprises the first application interface and a second application interface of the first application. The host process of the Web application does not need to be requested for rasterization and synthesis, so that the interaction times among the processes can be reduced, the synthesis times can be reduced, and the load and the power consumption of the electronic equipment can be reduced.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a web page rendering method and electronic device. Background Technology

[0002] The World Wide Web (Web) pages can be used to display information and provide interactive functions. Through web pages, users can easily access and use various resources and services on the Internet.

[0003] Currently, web applications (APPs) typically use application-based rendering (or page rendering) to render web pages. This means the web application renders and generates a bitmap corresponding to the current web page, which is then submitted to the operating system's rendering process. The system rendering process then combines this bitmap with bitmaps of other content to be displayed before showing it on the screen. However, application-based rendering results in a high hardware load and higher device power consumption. Summary of the Invention

[0004] This application provides a web page rendering method and an electronic device to reduce the load and power consumption of the electronic device when browsing web pages.

[0005] Firstly, a web page rendering method is provided, applicable to an electronic device running a system rendering process and a first application process of a web application. The method includes: the first application process generating a first rendering tree, which is used to draw a first application interface corresponding to the web page in the web application. The first application process sends the first rendering tree to the system rendering process. Then, the system rendering process generates a second rendering tree based on the first rendering tree and the rendering nodes corresponding to the first application, where the first application is an application of the electronic device other than the web application. The system rendering process generates a first display interface based on the second rendering tree, which includes the first application interface and a second application interface of the first application.

[0006] In this method, after obtaining the first rendering tree, the first application process sends it to the system rendering process. The system rendering process can then co-construct a second rendering tree with the rendering nodes of the first application based on the first rendering tree, and subsequently perform rendering based on the second rendering tree. Compared to the application self-drawing method, where the web application's rendering process generates a rendering tree and then requests the web application's main process for rasterization and compositing, the method in this embodiment directly sends the rendering tree to the system rendering process, eliminating the need to request the web application's main process for rasterization and compositing. This reduces the number of inter-process interactions. Furthermore, by co-constructing the second rendering tree with the rendering nodes of other applications, only one compositing step is required after rasterization based on the second rendering tree, reducing the number of compositing steps. This reduces the load and power consumption of electronic devices and improves the smoothness of web page display (such as sliding scenes and animations).

[0007] In one possible implementation, multiple methods for generating drawing instructions can be provided. One method involves a first application process generating a first drawing instruction list for the first application interface based on a first rendering tree, and then sending this list to the system rendering process. The system rendering process can then generate a first display interface based on a second rendering tree and the first drawing instruction list. This implementation reuses the existing drawing capabilities of the first application process, reducing the complexity of the implementation. Another method involves the system rendering process generating the first drawing instruction list for the first application interface based on the first rendering tree. For example, the system rendering process can directly generate the first drawing instruction list based on the first rendering tree, or it can generate the first drawing instruction list based on a second rendering tree. Since the second rendering tree contains the rendering nodes in the first rendering tree, it can be understood as generating the first drawing instruction list based on the portion of the first rendering tree included in the second rendering tree. The system rendering process can then generate a first display interface based on the second rendering tree and the first drawing instruction list. This implementation centralizes the drawing tasks to the system rendering process, optimizing the use of the CPU and GPU and improving the overall performance of the electronic device.

[0008] In one possible implementation, the web page includes native controls, and the second rendering tree also includes the rendering nodes corresponding to the native controls. Based on this implementation, after the system rendering process merges the rendering trees, the rendering nodes of the native controls and the rendering nodes of the web controls in the web page are in the same rendering tree. This allows for easier adjustment of the display relationship between the native controls and the web controls according to actual needs, thus improving the display effect of the web page.

[0009] In one possible implementation, the first rendering tree includes rendering nodes corresponding to native controls. Based on this implementation, the first application process can merge the rendering trees of the native controls and the Web controls and provide them to the system rendering process for unified processing, reducing the burden on the system rendering process. Furthermore, the first application process can obtain the rendering data of the native controls, which helps the first application process reuse the data from the native controls.

[0010] In one possible implementation, the method further includes: a first application process receiving a third rendering tree sent by a system rendering process, the third rendering tree including rendering nodes corresponding to native controls; and the first application process generating a fourth rendering tree, the fourth rendering tree including rendering nodes corresponding to Web controls in the Web page. Therefore, the first application process generating the first rendering tree of the first application interface includes: the first application process generating the first rendering tree based on the third and fourth rendering trees. Based on this implementation, the first application process can merge the rendering trees of native controls and Web controls and provide them to the system rendering process for unified processing. This allows the rendering nodes of native controls and Web controls to be in the same rendering tree, facilitating adjustments to the display relationship between Web controls and native controls and improving the display effect of the Web page. Furthermore, the system rendering process sends the third rendering tree corresponding to the native controls to the first application process. The first application process can adjust the display relationship between Web controls and native controls before sending the first rendering tree to the system rendering tree, avoiding the need to send additional information indicating the display relationship between Web controls and native controls to the system rendering tree, and also facilitating the first application process to obtain relevant rendering data for the native controls.

[0011] In one possible implementation, the method further includes: a system rendering process generating a third rendering tree, the third rendering tree including rendering nodes corresponding to native controls. Then, the system rendering process generates a second rendering tree based on the first rendering tree and the rendering nodes corresponding to the first application, including: the system rendering process generating the second rendering tree based on the first rendering tree, the third rendering tree, and the rendering nodes corresponding to the first application. The first rendering tree includes rendering nodes corresponding to Web controls in the Web page. Based on this implementation, the system rendering process can merge the rendering trees of native controls and Web controls, so that the rendering nodes of native controls and Web controls are in the same rendering tree. This allows for easier adjustment of the display relationship between Web controls and native controls according to actual needs, improving the display effect of the Web page.

[0012] In one possible implementation, the system rendering process generates a second rendering tree based on the first rendering tree and the rendering nodes corresponding to the first application. This can be achieved in several ways. One implementation involves the system rendering process creating a fifth rendering tree and using the root nodes of the first rendering tree and the rendering nodes corresponding to the first application as child nodes of the root node in the fifth rendering tree, thus obtaining the second rendering tree. Another implementation involves the system rendering process using the root node of the first rendering tree as a child node of one of the rendering nodes corresponding to the first application, thus obtaining the second rendering tree. Based on this implementation, the system rendering process can merge rendering trees, reducing the number of compositing operations and thus reducing the load and power consumption of the electronic device.

[0013] In one possible implementation, the first render tree uses a first data format, which is a format supported by the system rendering process, while the first application process supports a second data format. Based on this implementation, after the first render tree is sent to the system rendering process, the system rendering process can directly process the first render tree, improving the processing efficiency of the system rendering process.

[0014] In one possible implementation, the first application process sends the first rendering tree to the system rendering process, which can be done in several ways. One way is that the first application process writes the first rendering tree to a first shared memory, and the system rendering process reads the first rendering tree from the first shared memory. Based on this implementation, by transferring the first rendering tree through shared memory, multiple processes can access the same memory block instead of copying data, thereby improving efficiency. Another way is that the first application process adds the first rendering tree to a first message queue, and the system rendering process retrieves the first rendering tree from the first message queue. Based on this implementation, by transferring the first rendering tree through a message queue, since message queues are an asynchronous data transfer method, the first application process does not need to wait for the system rendering process to finish processing and can continue to execute other tasks. The first application process and the system rendering process can work independently, and the message queue can effectively manage resources and avoid unnecessary memory copying.

[0015] In one possible implementation, the electronic device also runs a second application process, which is an application other than a web application. The system rendering process generates a second rendering tree based on the first rendering tree and the rendering nodes corresponding to the first application, including: the system rendering process generates the second rendering tree based on the first rendering tree, the rendering nodes corresponding to the first application, and the sixth rendering tree of the second application process. The first display interface also includes a third application interface, which is the interface of the second application process. Based on this implementation, all applications within the electronic device can be merged into a common rendering tree before rasterization and compositing, thereby minimizing the number of compositing operations and reducing the load on the electronic device. Furthermore, since operating system controls, web page elements, and native applications are all in the same rendering tree before rasterization by the system rendering process, the display relationships between various elements can be adjusted more easily according to actual needs, improving the interface display effect.

[0016] In one possible implementation, the electronic device also runs a second application process for a second application, which is an application other than a web application. The system rendering process generates a first display interface based on a second rendering tree, including: generating a first bitmap based on the second rendering tree, the first bitmap including a first application interface and a second application interface; obtaining a second bitmap, the second bitmap including a third application interface of the second application process; and generating the first display interface based on the first bitmap and the second bitmap. Based on this implementation, some applications within the electronic device can still use the original self-drawing method, maintaining compatibility with existing rendering methods and reducing the workload associated with modifying the application rendering process.

[0017] In one possible implementation, the first application process sends the first render tree to the system rendering process, including: when the first application process determines that the electronic device is in a first rendering mode, the first application process sends the first render tree to the system rendering process. This can be understood as the electronic device providing multiple rendering modes; the first application process may only send the first render tree to the system rendering process when it determines that it is in a first rendering mode that supports co-constructing a render tree with the system. This allows for adaptation to rendering logic under multiple rendering modes, improving the accuracy of page rendering processing.

[0018] In one possible implementation, native applications may also include applications developed using React Native (RN) or RN-like frameworks. Web applications may also include applications developed using Weex or Qt frameworks.

[0019] In a second aspect, this application provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the method as described in any of the first aspects above.

[0020] Thirdly, this application provides a web page rendering apparatus, including modules / units for performing the methods corresponding to any of the embodiments in the first aspect described above. These modules / units can be implemented in hardware or by hardware executing corresponding software.

[0021] Fourthly, this application provides a computer-readable storage medium storing a computer program that, when executed by at least one processor, implements the method as described in any of the first aspects above.

[0022] Fifthly, this application provides a chip including a processor and an interface; the processor is configured to read instructions through the interface to perform the method as described in any of the first aspects above.

[0023] In a sixth aspect, this application provides a chip system, the chip system including a processing circuit and a storage medium, the storage medium storing instructions; when the instructions are executed by the processing circuit, they implement the method of any one of the first aspects above.

[0024] In a seventh aspect, this application provides a computer program product comprising a computer program that, when run on a computer, enables the computer to perform the methods described in any of the first aspects above.

[0025] The beneficial effects of the implementation methods in any of the second to seventh aspects described above can be referred to the beneficial effects of the corresponding implementation methods in the first aspect described above, and this application will not elaborate on them one by one. Attached Figure Description

[0026] Figure 1A and Figure 1B This is a schematic diagram of a web page display process;

[0027] Figure 2A A schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0028] Figure 2B and Figure 2C A schematic diagram of a system structure of an electronic device provided in an embodiment of this application;

[0029] Figure 2D A schematic diagram illustrating the process of rendering a web page as provided in an embodiment of this application;

[0030] Figures 3A to 3D This is a schematic diagram of the interface effect provided in the embodiments of this application;

[0031] Figure 4A A system architecture diagram of an electronic device provided in an embodiment of this application;

[0032] Figure 4B A flowchart illustrating a web page rendering method provided in an embodiment of this application;

[0033] Figure 5 A schematic diagram of the generated rendering tree provided in an embodiment of this application;

[0034] Figure 6A and Figure 6B A schematic diagram illustrating the generation of the first rendering tree provided in an embodiment of this application;

[0035] Figure 7 A schematic diagram illustrating the transfer of the first rendering tree as provided in an embodiment of this application;

[0036] Figure 8 A schematic diagram of a merged rendering tree provided in an embodiment of this application;

[0037] Figure 9A and Figure 9B A flowchart illustrating the addition of a drawing step provided in an embodiment of this application;

[0038] Figure 10 This is a schematic diagram illustrating the rendering process of a web page that includes native controls.

[0039] Figure 11A and Figure 11B A schematic diagram illustrating the rendering process of a web page containing native controls, provided in an embodiment of this application;

[0040] Figure 12A and Figure 12B This is a schematic diagram of the rendering process of the second application runtime provided in an embodiment of this application;

[0041] Figure 13 A schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0042] The following explanations of some terms used in the embodiments of this application are provided to facilitate understanding by those skilled in the art.

[0043] The embodiments of this application involve at least one, including one or more; where "multiple" means two or more. Furthermore, it should be understood that in the description herein, terms such as "first" and "second" are used only for descriptive purposes and should not be construed as indicating or implying relative importance or order. For example, "first rendering tree" and "second rendering tree" do not represent the degree of importance of the two or their order, but are merely for descriptive distinction. In the embodiments of this application, "and / or" merely describes an association relationship, 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. Additionally, the character " / " in this document generally indicates that the preceding and following related objects have an "or" relationship.

[0044] The directional terms mentioned in the embodiments of this application, such as "up", "down", "left", "right", "inner", and "outer", are only for reference to the directions in the accompanying drawings. Therefore, the directional terms used are for better and clearer explanation and understanding of the embodiments of this application, and are not intended to indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the embodiments of this application.

[0045] References to “one embodiment,” “in some examples,” or “some embodiments” as used herein mean that one or more embodiments include the specific features, structures, or characteristics described in connection with that embodiment. Thus, the phrases “in some examples,” “in one embodiment,” “in some embodiments,” “in other embodiments,” “in still other embodiments,” etc., appearing in various places throughout this document, do not necessarily refer to the same embodiment, but rather mean “one or more, but not all, embodiments,” unless otherwise specifically emphasized. The terms “comprising,” “including,” “having,” and variations thereof mean “including, but not limited to,” unless otherwise specifically emphasized.

[0046] In the following embodiments of this application, the term "user interface (UI)" refers to the medium interface through which an application (APP) or operating system interacts and exchanges information with the user. It realizes the conversion between the internal form of information and the form that the user can accept. The user interface is source code written in a specific computer language such as Java or Extensible Markup Language (XML). The interface source code is parsed and rendered on the electronic device, ultimately presenting content that the user can recognize. A common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operation displayed graphically. It can be visible interface elements such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets displayed on the screen of an electronic device.

[0047] As the medium for interaction and information exchange between applications and users, an electronic device can generate a displayable user interface through a render service (RS) process. The RS process, created by the electronic device's operating system for the render service, receives data from the application's self-rendering buffer to generate the displayable user interface. This buffer stores the results of the application's rendering process. The user interface includes the user interfaces of applications installed on the electronic device, the device's main interface, and other interfaces. When browsing web pages using a web application, the electronic device needs to generate the application's interface. The interface displayed on the electronic device can include the interfaces of one or more applications; that is, the electronic device needs to generate interfaces for one or more applications and composite these interfaces to obtain the composited interface displayed on the screen. For example, when a web application is running in the foreground, the electronic device may also display other content such as a status bar. The electronic device will composite the web application's interface with the status bar interface, ultimately displaying the composited interface on the screen.

[0048] Currently, web applications typically use application-based rendering (APPR) to render web pages. APPR refers to the process where the web application itself generates bitmaps for the web page. See also... Figure 1A and Figure 1B As shown, Figure 1A This is a schematic diagram of a web page display process. Figure 1BThis is a schematic diagram illustrating the rendering process of a web page. The web page display process can be broadly divided into two stages: web application self-drawing and system rendering. The processing procedures in these two stages are as follows:

[0049] I. Web Application Self-Drawing Stage

[0050] The web application self-drawing phase is primarily implemented by the web application itself, which can include a main process and a web rendering process. The main process, such as the browser process, is responsible for implementing the main functions of the web application, such as accessing and displaying internet content. The main process is the host process for the web rendering process. The web rendering process is a process that is launched when a web page needs to be rendered; it is used to render the web page and can also be called the web self-drawing process. During the web application self-drawing phase, the web application generates the corresponding bitmaps based on the web page scripts. This phase can include the following two processes:

[0051] (1) L1: The rendering process of a web application. When a web page needs to be opened, the main process of the web application starts the web rendering process, sends the web page script to the web rendering process, and requests the web rendering process to perform the rendering process of the web page. The web rendering process can execute the rendering process according to the web page script and obtain the rendering tree and the list of drawing instructions. The web rendering process includes the following steps:

[0052] L11, Page Parsing. In this step, the web rendering process parses the web page scripts. For example, web page scripts may include Hypertext Markup Language (HTML) documents, Cascading Style Sheets (CSS) files, JavaScript, and other resources (such as images and videos). During page parsing, the web rendering process may parse the HTML document to build the Document Object Model (DOM) tree, and parse the CSS file to build the Cascading Style Sheets Object Model (CSSOM) tree.

[0053] L12, Style Calculation. Style calculation refers to the process by which the web rendering process calculates the final styles based on the set styles and predefined rules. For example, the purpose of style calculation is to map the DOM tree to the CSSOM tree, laying the foundation for the subsequent generation of the layout tree.

[0054] L13, Layout. Layout refers to calculating the position and size of each element on a web page based on the results of style calculations, resulting in a layout tree.

[0055] L14, Drawing. Drawing in the rendering process is not the actual drawing action, but rather the process of generating corresponding drawing instructions for the content in the layout tree. For example, a render tree can be generated based on the layout tree and style information. The render tree describes the visible elements and their style information in a web page. In the drawing step, information can be extracted from the render tree to generate a list of drawing instructions. These instructions include how to draw each element, the drawing order, color, font, and other attributes.

[0056] (2) L2: GPU compositing process for web applications. The rendering tree and drawing instruction list obtained by the web rendering process are sent to the main process. The main process then calls the GPU to generate the bitmap corresponding to the web page based on the rendering tree and drawing instruction list. During this process, the main process performs the following steps:

[0057] L21, rasterization. Rasterization refers to the process of converting vector graphics into bitmaps, which can also be called raster images or pixel images. This process typically involves converting the geometric information of the graphics (such as lines and polygons) into a displayable pixel format for rendering on the screen. Specifically, the main process calls the GPU to perform tile rasterization, thereby converting drawing instructions into tiled bitmaps.

[0058] L22, Compositing. In the compositing step, the main process can call the GPU to composite the entire web page into a single bitmap.

[0059] Afterwards, the main process can render the web page (i.e., Figure 1B The bitmap "1" shown is sent to the system rendering process, which then performs the next stage of processing.

[0060] II. System Rendering Stage

[0061] The system rendering phase is primarily handled by the system rendering process, such as the RS process in the operating system mentioned above. During this phase, the system rendering process combines the rendered web page with other content required by the operating system and displays it on the screen. In this phase, the system rendering process performs tasks such as... Figure 1A The process L3 shown is the system rendering process, which can include the following two steps:

[0062] L31: Hardware Composer (HWC) compositing. The HWC module is the operating system module for window compositing and display. When a web page is opened, the screen usually displays content other than the web application's interface, such as the status bar, or, in split-screen mode, the application interfaces of other applications. This content will be composited and displayed on the screen.

[0063] L32: Display. Displaying means showing the final composite result on the screen, so that the user can see the web page displayed on the screen.

[0064] See Figure 1B As shown, after the web application's self-drawing stage is completed, the web application will generate bitmap "1". Additionally, for other applications that need to be displayed (such as system applications), a corresponding bitmap "2" can be generated. Then, in the HWC compositing step, bitmap "1" and bitmap "2" will be used as layers in the layer compositing process to obtain the final interface to be displayed, as shown below. Figure 1B The mobile phone interface includes the interface of system applications and the interface of web applications.

[0065] As can be seen, the advantages of the above-mentioned web application self-drawing method are modularity, flexible drawing, and good compatibility. Because this method is used, the web application has already drawn the web interface to be displayed and submitted it to the system rendering process for compositing. Therefore, it can be used directly on any platform without being limited by platform or device. However, the web application self-drawing method still has the following problems:

[0066] (1) Multiple synthesis steps. For example... Figure 1A As shown, on the Web application side, the main process of the Web application needs to call the GPU to perform the first compositing to complete the rendering process. After that, the rendering result is sent to the system rendering process, and finally the HWC module performs the second compositing. There are many compositing times. Each compositing requires memory copying and related necessary preparation work. The content copied in memory may be repeated during multiple compositing, which occupies more memory space. The preparation work is also redundant, resulting in high hardware load and high device power consumption.

[0067] (2) High number of interactions. For example... Figure 1AAs shown, the self-drawing method of a web application involves at least three inter-process interactions for each frame of a web page. The first interaction occurs when the web application's main process sends the web page script to the web rendering process via inter-process communication (IPC) when it needs to draw the web page. The second interaction occurs when the web rendering process, after parsing, laying out, and drawing the web page script, sends the rendering tree and drawing instruction list back to the web application's main process. The third interaction occurs when the web application's main process sends the rendering result to the system rendering process. This increased number of interactions increases the load on electronic devices, potentially affecting the smoothness of scrolling scenes and animations, and also results in higher device power consumption.

[0068] In addition, web applications differ from native applications on electronic devices. Native applications are developed on the basis of the operating system architecture of electronic devices. Compared with native applications, web applications require more process interactions when displaying and rendering pages, resulting in a higher load on electronic devices.

[0069] (3) Data from native controls on the web page cannot be reused during the self-drawing process of a web application. Web applications often embed native controls provided by the operating system. These native controls are provided by the operating system's system services or applications, such as weather, calendar, and maps on a web page. Native controls are independent of the page elements contained in the web page itself. The rendering of native controls is done by the system services or applications they originally require (which can also be understood as the operating system). Native controls cannot be drawn during the self-drawing process of a web application. If the self-drawing method is used, these native controls need to be drawn into a bitmap by the operating system itself. For example, the native control corresponds to bitmap "1", and the web application's own page elements correspond to bitmap "2". Then, either bitmap "1" is superimposed on bitmap "2", or bitmap "2" is superimposed on bitmap "1". If you want some page elements in the web application to be above the native controls and some page elements to be below the native controls, the self-drawing method cannot achieve this, or even if it can be achieved, the implementation complexity is high.

[0070] As mentioned above, current self-rendering methods for web applications have relatively high load. In practical applications, web applications tend to use lower-load rendering methods. Minimizing unnecessary power consumption during web page browsing increases the battery life of electronic devices and significantly improves the user experience. Therefore, it is necessary to find a way to reduce the load while ensuring the rendering effect of web pages. Furthermore, if the display relationship between web page elements and native controls can be freely adjusted during the rendering process, the web page can be displayed more flexibly, improving its presentation.

[0071] In view of this, embodiments of this application provide a web page rendering method. This method can co-construct a rendering tree with other applications on an electronic device besides the web application in a web page browsing scenario. When rendering each frame of content displayed on the web page, it can reduce the number of compositing operations and interactions between processes, thereby reducing the load on the electronic device and improving the smoothness of scenarios such as scrolling and animation. Furthermore, this method also allows for flexible adjustment of the display relationship between web page elements and native controls during the rendering process, enhancing the display effect of the web page.

[0072] The web page rendering method provided in this application can be applied to various electronic devices with image rendering capabilities and requirements. For example, electronic devices include, but are not limited to, those equipped with... Alternatively, it can be an electronic device with another operating system. The operating system of the electronic device may include multiple independently executing processes, such as the RS process. Each process may include at least one independently executable thread.

[0073] For example, electronic devices can refer to terminal devices with display functions, such as mobile phones, tablets, wearable devices with wireless communication functions (e.g., watches, bracelets), in-vehicle terminal devices, augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), smart home devices (e.g., smart TVs, smart speakers), smart robots, workshop equipment, wireless terminals in self-driving vehicles, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, or wireless terminals in smart homes, and flying equipment (e.g., smart robots, drones, airplanes). Among these, wearable devices are portable devices that users can wear directly on their bodies or integrate into their clothing or accessories.

[0074] For example, electronic devices can also be portable terminal devices that include other functions, such as portable terminal devices that include personal digital assistant and / or music player functions, or laptops with touch-sensitive surfaces (such as touch panels).

[0075] In some embodiments of this application, the electronic device can be a rich device. For example, a rich device refers to a device with ample memory and storage space. Rich devices generally support remote procedure calls (RPC) / inter-process communication (IPC). For instance, a rich device can be a mobile phone, LCD TV, in-vehicle infotainment system, tablet computer, personal computer, etc.

[0076] Please see Figure 2A The diagram shown is a structural schematic of an electronic device provided in an embodiment of this application. Figure 2AAs shown, the electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0077] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, memory, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). Different processing units may be independent devices or integrated into one or more processors. The controller may serve as the nerve center and command center of the electronic device. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution. Processor 110 may also include memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that processor 110 has just used or is recurring. If processor 110 needs to reuse an instruction or data, it can directly retrieve it from the memory. This avoids repeated access, reduces the waiting time of processor 110, and thus improves system efficiency.

[0078] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1. In this embodiment, the display screen 194 can be used to display the interface of a web page, the interface of native controls in the web page, and other user interfaces.

[0079] Camera 193 is used to capture still images or videos. Camera 193 may include a front-facing camera and a rear-facing camera.

[0080] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system and software code of at least one application (e.g., a browser). The data storage area may store data generated during the use of electronic device 100 (e.g., images, videos, etc.). In addition, internal memory 121 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. In this embodiment, internal memory 121 may, for example, store the rendering tree of a web page to be displayed and a list of drawing instructions. Internal memory 121 may also store a rendering tree merged with the rendering trees of the web page and other applications, as well as bitmaps generated based on the rendering tree.

[0081] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, images, videos, and other files can be saved on the external memory card.

[0082] Touch sensor 180K and display screen 194 constitute a touchscreen, also known as a "touchscreen". Touch sensor 180K is used to detect touch operations applied to or near it. Touch sensor 180K can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be disposed on the surface of electronic device 200, in a different location than display screen 194. In the embodiments of this application, touch sensor 180K can collect user operations on the interface displayed by electronic device through display screen 194, for example, user operations used to trigger the display interface.

[0083] Understandable, Figure 2A The components shown do not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include components that are larger than those shown. Figure 2A The components may have more or fewer parts, or some parts may be combined, some parts may be separated, or the components may be arranged differently. The components shown in the diagram may be implemented in hardware, software, or a combination of software and hardware.

[0084] The operating system (OS) involved in this application is the most basic system software running on electronic devices. The software system of an electronic device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses an operating system employing a layered architecture as an example to exemplify the software system architecture of an electronic device.

[0085] Figure 2B This is a software system architecture block diagram of an electronic device provided as an embodiment of this application. For example... Figure 2B As shown, the software system architecture of an electronic device can be a layered architecture. For example, the software can be divided into several layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. In some embodiments, the operating system is divided into five layers, from top to bottom: the application layer, the application framework layer (framework, FWK), the system libraries and runtime, the kernel layer, and the hardware layer.

[0086] The application layer can include a series of application packages. For example... Figure 2BAs shown, the application layer can include native applications of the operating system and third-party applications. Native applications of the operating system can include settings, music, SMS, camera, calls, etc. Third-party applications can include notes, etc., and this application does not limit the specific implementation. In the embodiments of this application, the applications included in the application layer can generally display a user interface. The method provided in the embodiments of this application can be applied to any scenario where a web application needs to render a user interface when displaying a user interface on an electronic device.

[0087] In some embodiments of this application, the application layer can be used to implement the presentation of the user interface. The user interface can be rendered using the methods provided in the embodiments of this application. For example, the user interface can be an interface displayed in a web application scenario, such as a browser interface or a mini-program interface.

[0088] In one possible implementation, the application can be developed using any possible language such as Arkts, JavaScript, Objective-C, Swift, Kotlin, or Java, and completes its work by calling the APIs provided by the application framework layer. Developers can use the application framework layer to interact with the underlying operating system (e.g., the kernel layer, hardware layer, etc.) to develop their own applications. This application framework layer primarily consists of a series of services and management systems for the operating system. In this embodiment, the electronic device can detect and respond to events that trigger the display of the user interface within the application layer, calling the corresponding APIs provided by the application framework layer.

[0089] The application framework layer provides application programming interfaces and a programming framework for applications within the application layer. The application framework layer includes some predefined functions. For example... Figure 2B As shown, the application framework layer may include a graphics rendering service, such as an RS service, and may also include an activity manager, a window manager, a view system, a phone manager, a content provider, a notification manager, a resource manager, etc.

[0090] The Activity Manager manages the lifecycle of each application and provides commonly used navigation and back functions, offering an interactive interface for all program windows.

[0091] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0092] Content providers store and retrieve data, making that data accessible to applications. This data can include videos, images, audio, phone calls made and received, browsing history and bookmarks, phone books, etc.

[0093] A view system includes visual components, such as components for displaying text and components for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text message notification icon can include a view for displaying text and a view for displaying images. In some embodiments of this application, an electronic device can combine the rendering tree generated by a web application with the rendering trees of other applications within the electronic device besides the web application to co-construct a rendering tree. For example, the rendering tree generated by the web application can be added to the system rendering tree to co-construct a rendering tree, and rasterization and compositing can be performed based on the co-constructed rendering tree to display a display interface containing the web application interface and other application interfaces. This reduces the number of compositing operations and inter-process interactions caused by the web application's self-drawing, thus reducing the load on the electronic device.

[0094] A phone manager is used to provide communication functions for electronic devices. For example, it manages call status (including connection and disconnection).

[0095] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0096] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0097] The runtime includes the core libraries and the virtual machine. The runtime is responsible for the scheduling and management of the operating system.

[0098] The core library consists of two parts: one part contains callable functionalities, and the other part is the operating system's core library. The application layer and application framework layer run in a virtual machine. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0099] The system library can include multiple functional modules. For example: surface manager, media framework, 3D graphics processing library (e.g., OpenGL ES), 2D graphics engine (e.g., SGL), etc.

[0100] The Surface Manager is used to manage the display subsystem and provides the blending of two-dimensional and three-dimensional layers for multiple applications.

[0101] The media framework supports playback and recording of various commonly used audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, and AMR; and multiple image file formats, such as JPG and PNG.

[0102] The 3D graphics processing library is used to implement 3D graphics drawing, graphics rendering, compositing, and layer processing.

[0103] A 2D graphics engine is a drawing engine for 2D drawing.

[0104] The kernel layer is the layer between hardware and software. The kernel layer contains many drivers related to electronic devices, including at least display drivers, camera drivers, audio drivers, and sensor drivers; this application embodiment does not impose any limitations on these. In this application embodiment, the kernel layer can receive drawing operations from the system rendering process and send them to the display by calling the display driver, that is, display them through the display screen 194.

[0105] The hardware layer can include various types of sensors, such as accelerometers, gravity sensors, and touch sensors.

[0106] Electronic devices can typically run multiple applications simultaneously. In a simpler scenario, one application corresponds to one process; in a more complex scenario, one application corresponds to multiple processes. Each process has a unique process ID.

[0107] It should be noted that, Figure 2A and Figure 2B The structure shown is merely an example of an electronic device provided in this application embodiment and is not intended to limit the electronic device provided in this application embodiment in any way. In specific implementations, the electronic device may have a more advanced design than... Figure 2A or Figure 2B The structure shown may contain more or fewer devices or modules.

[0108] See Figure 2C The diagram shown illustrates another system architecture for an electronic device provided in this application, which can be used to render web pages. This system architecture may include the following components:

[0109] (1) Application. An electronic device may include one or more applications. The method provided in this application mainly targets web applications, but in addition to web applications, an electronic device may also include native applications. The application may be a factory-installed application or an application installed by the user. The application may be a system application or system service provided by the operating system, such as an application provided by the electronic device manufacturer, or an application provided by a third party. The application may be installed and run on the electronic device as a client, or it may be run on the electronic device as a mini-program, lightweight application, or parasitic application. In this form, the user does not need to manually click to confirm the installation of the application, making it more convenient and faster.

[0110] Web applications are applications developed using web technologies such as HTML5 (H5) that access data on the network through a web browser. For example, web applications typically transmit data over the network and display and interact with it in a client browser. This architecture offers advantages such as cross-platform compatibility, ease of updating, and maintenance. For instance, a web application can be a browser application, such as a browser provided by an electronic device manufacturer or a third-party browser. Alternatively, a web application can also be a client-side web application, such as… For example, a web application can also be a web application in the form of a mini-program.

[0111] Native applications, also known as desktop applications or non-web applications, are applications developed based on the operating system architecture of electronic devices. In other words, they are applications specifically developed for a particular operating system and can make full use of the functions and performance of electronic devices.

[0112] (2) Web Rendering Process. The Web rendering process, also known as the Web pipeline process, provides rendering services for a web application during runtime. It generates the rendering tree and drawing instruction list for the web page and submits these to the system rendering process. For example... Figure 4A As shown, the Web rendering process can perform functions such as page parsing, style calculation, layout and drawing based on the Web page script, and generate the rendering tree and drawing instruction list of the Web page. In addition, the Web rendering process can also implement the function of submitting the rendering tree and instruction list to the system rendering process.

[0113] In some embodiments, the functionality of the web rendering process can be a feature developed by the web application's developers. When the web application runs, the electronic device creates the web rendering process. For example, the web rendering service can be implemented by the main process of the web application, meaning the main process is the web rendering process itself; or, the main process of the web application can create the corresponding web rendering process when it runs.

[0114] In other embodiments, the web rendering process may be provided by the operating system, and web application developers may choose to call the web rendering service provided by the operating system during web application development. For example, the main process of the web application calls the web rendering service provided by the operating system to start the web rendering service process.

[0115] (3) System Rendering Process. The system rendering process can merge the rendering tree of the web application with the rendering trees of other applications besides the web application. In one example, the system rendering process can receive the rendering tree of the web application. In addition, the system rendering process can also generate the system rendering tree corresponding to the operating system controls and merge the rendering tree of the web application with the system rendering tree.

[0116] In another example, the system rendering process can receive the rendering tree of the web application, as well as the rendering trees of other applications, and merge the rendering trees of the web application and the rendering trees of other applications.

[0117] After merging, the system rendering process can perform rasterization and HWC compositing based on the merged render tree before sending it to the display.

[0118] See Figure 2D As shown, this is through Figure 2C The diagram shown illustrates the process of rendering a web page using the system architecture. The web application can generate its own first rendering tree for the web page to be displayed. The system rendering process merges this first rendering tree with the rendering trees of other applications (such as system applications) to obtain a second rendering tree. Then, rasterization and HWC compositing are performed based on the second rendering tree. In this way, the web page and the interface of the system application will be rendered onto a bitmap for display.

[0119] In some embodiments, when it is also necessary to display the interface of other applications (such as native applications), if the native application generates its own bitmap, the system rendering process will merge the received rendering tree of the web application and the system rendering tree, rasterize them, and then combine them with the rendering buffer of the native application before displaying them on the screen.

[0120] In some embodiments, when it is necessary to display the interface of other applications (such as native applications), if these applications are also rendered by the system rendering process, the system rendering process can receive the rendering tree of the web application, merge the rendering tree of the web application, the system rendering tree, and the rendering tree of the native application, rasterize them, and combine them into a bitmap for display on the screen.

[0121] Please compare. Figure 1A and Figure 2C As shown, and in comparison Figure 1B and Figure 2D As shown, Figure 1A When a web page needs to be displayed, the main process of the web application sends the web page script to the web rendering process. The web rendering process, based on the web page script, performs page parsing, style calculation, layout, and drawing processes, and then submits the rendering tree and drawing instruction list to the main process of the web application. The main process of the web application performs rasterization and compositing, sending the bitmap of the web page to the system rendering process. The system rendering process then performs a second compositing of the bitmap of the web page with other content to be displayed before displaying it on the screen. It can be seen that this process involves a large number of interactions and compositing operations, resulting in a high load on electronic devices and making it difficult to adjust the display relationship between web page elements and native controls.

[0122] And such Figure 2C As shown in the embodiment of this application, when a web page needs to be displayed, the main process of the web application needs to send the web page script to the web rendering process. The web rendering process, based on the web page script, performs page parsing, style calculation, layout, and drawing processes, and then submits the rendering tree and drawing instruction list to the system rendering process. Afterwards, the system rendering process merges the web page's rendering tree with other rendering trees, performs rasterization and compositing operations based on the merged rendering tree, and then displays the resulting bitmap on the screen. It can be seen that... Figure 1B and Figure 2D The content ultimately displayed on the screen is the same, including both the system application interface and the web application interface, thus achieving the same display effect. However, the solution in this embodiment requires at most two interactions and only one compositing step, reducing the load on the electronic device. Furthermore, since native controls and web page elements are in the same rendering tree before rasterization in the system rendering process, the display relationship between web page elements and native controls can be adjusted more easily according to actual needs, improving the display effect of the web page.

[0123] The following lists several possible application scenarios to which the technical solutions provided in the embodiments of this application are applicable. See also Figures 3A to 3D The diagram shown illustrates the interface effects in several application scenarios provided in the embodiments of this application.

[0124] Application Scenario 1: Opening a new web page

[0125] When a new web page is opened in a web application on an electronic device, the web page can be displayed on the electronic device using the method described in this application. Specifically, the web application can retrieve the web page script (such as an HTML file) of the new web page, and generate a first rendering tree and a drawing instruction list corresponding to the web page by performing parsing, style calculation, and layout processes based on the web page script. Then, the first rendering tree and the drawing instruction list are sent to the system rendering process. The system rendering process can add the first rendering tree to the system rendering tree, jointly constructing the rendering tree with the operating system controls. The system rendering process can perform rasterization based on the jointly constructed rendering tree for compositing, and display the composite result on the screen, thus presenting a display interface containing the new web page.

[0126] Taking a mobile phone as an example, see [link / reference]. Figure 3A As shown in (a), the browser interface 301 displayed on the mobile phone can include multiple page links, including video link 3011. Users can trigger an operation (such as clicking) on ​​video link 3011 to open the video details page corresponding to that video link 3011. The browser process can then retrieve the page script of the video details page to generate a corresponding first rendering tree and drawing instruction list based on the page script. Since the mobile phone displays system application interfaces in addition to the browser interface, such as the status bar interface, the system rendering process can merge the first rendering tree and the rendering tree corresponding to the status bar, perform rasterization and compositing based on the merged rendering tree, and display the composite result on the screen, as shown in the image. Figure 3A Interface 302 is shown in (b). This interface includes interface 3021, which is the video details page in the browser, and interface 3022, which is the status bar.

[0127] Application Scenario 2: Embedding a weather component in a browser

[0128] When a browser is launched on an electronic device, the browser will display the browser homepage. To facilitate users in checking the weather, a weather component can be embedded in the browser homepage. Browser developers can choose native controls provided by the operating system. That is, if the weather component is a native control provided by the operating system, then the browser homepage can also be displayed on the electronic device through the method of the embodiments of this application.

[0129] Taking a mobile phone as an example, see [link / reference]. Figure 3BAs shown in (a), the desktop 303 on the mobile phone includes a browser icon 3031. Users can trigger an operation on icon 3031 (such as clicking) to launch the browser and open its homepage. After the browser application starts, the browser process generates a corresponding rendering tree and drawing instruction list based on the page script of the browser homepage. Since the browser homepage embeds a weather component, and the mobile phone displays interfaces of other system applications besides the browser interface, such as the status bar interface, the system rendering process can merge the rendering tree of the browser homepage, the rendering nodes corresponding to the weather component, and the rendering nodes corresponding to the status bar. Based on the merged rendering tree, it performs rasterization and compositing, and displays the composite result on the screen, as shown in the image. Figure 3B Interface 304 is shown in (b). This interface includes interface 3041 with a status bar, interface 3042 with a browser homepage, and interface 3043 with a weather component.

[0130] Application Scenario 3: Embedding map components in food delivery apps

[0131] When a food delivery app is running on an electronic device, the user may need to view the real-time location of the delivery person. Therefore, a map component can be embedded in the interface of the food delivery app. The map component can also be a native control provided by the operating system. Thus, the interface of the food delivery app can be displayed on the electronic device through the method of the embodiments of this application.

[0132] Taking a mobile phone as an example, see [link / reference]. Figure 3C As shown in (a), when a food delivery app is opened on a mobile phone, the corresponding interface 305 is displayed. This interface 305 includes information on multiple orders, including a display area 3051 for order 1. The user can trigger an operation (such as clicking) on ​​the display area 3051 to open the details page of order 1. The food delivery app process can then generate a corresponding rendering tree and drawing instruction list based on the page script of the details page of order 1. The system rendering process can merge the rendering tree of the details page of order 1, the rendering nodes corresponding to the map component, and the rendering nodes corresponding to the status bar. Based on the merged rendering tree, rasterization and compositing are performed, and the composite result is displayed on the screen as shown in the image. Figure 3C Interface 306 is shown in (b). Interface 306 includes interface 3061 with a status bar, interface 3062 with details page for order 1, and interface 3063 with a map component.

[0133] Application Scenario 4: Scenarios where web applications and native applications are displayed together.

[0134] There may be scenarios where web applications and native applications are displayed together on electronic devices. For example, when web applications and native applications are displayed in split-screen mode, the display interface of the electronic device can simultaneously display the status bar, the web page, and the interface of the native application. In this case, the method of the embodiments of this application can be used to display the interfaces of web applications and native applications together on the electronic device.

[0135] Taking a tablet computer as an example, see [link / reference]. Figure 3D As shown, the mobile phone runs both a browser process and a video application process simultaneously. The browser is a web application, while the video application is a native application on the electronic device. The browser process can generate the corresponding rendering tree and drawing instruction list based on the page scripts of the web pages that need to be displayed.

[0136] In one implementation, the system rendering process can merge the rendering tree of the page in the browser, the rendering tree of the video application, and the rendering tree corresponding to the status bar, and then perform rasterization and compositing based on the merged rendering tree, and display the composite result on the screen.

[0137] In one implementation, the system rendering process can merge the rendering tree of the page in the browser and the rendering tree corresponding to the status bar, rasterize the merged rendering tree to obtain a bitmap, and then composite it with the bitmap in the rendering cache of the video application, and display the composite result on the screen.

[0138] The final screen display can be like this Figure 3D As shown in interface 307, this interface 307 may include a status bar interface 3071, a browser page interface 3072, and a video application interface 3073.

[0139] In the above introduction, the electronic device can realize the rendering and display of web pages. The following description, in conjunction with the accompanying drawings, explains the implementation principle of the web page rendering method provided in the embodiments of this application.

[0140] See Figure 4A The diagram shown is a system architecture diagram of an electronic device provided in an embodiment of this application. The electronic device includes a web application, and a system rendering process and a first application process of the web application are running in the electronic device. The web application can be any application among the web applications included in the electronic device.

[0141] The first application process can be used to generate the first rendering tree of the Web application. The system rendering process is used to merge the first rendering tree of the Web application with other rendering trees, rasterize them, and then send them to the screen for display, presenting the first display interface containing the first application interface of the Web application.

[0142] See Figure 4BThe diagram shown is a flowchart illustrating a web page rendering method provided in an embodiment of this application. This method can be applied to... Figure 4A In the system architecture shown. For example... Figure 4B As shown, the process includes:

[0143] Step 401: The first application process generates the first rendering tree, which is used to draw the first application interface corresponding to the web page in the web application.

[0144] When a web page is opened in a web application, or when the content of a web page changes, it may be necessary to render the corresponding primary application interface. The primary application process can then perform page parsing, style calculation, and layout processes based on the web page's script to generate the primary rendering tree. This web page can be any page within the web application.

[0145] When a web page is displayed, it can present various page elements. Page elements refer to the content that users can see on the web page, and these elements can include visual components or controls. For example, page elements can include text, images, links, forms, buttons, videos, audio, tables, JavaScript objects, and other interactive controls. A render tree is used to describe the visible elements in the web page and their style information. Accordingly, the first render tree can contain render nodes corresponding to the page elements that need to be displayed on the web page. Each render node can include information required for drawing one or more page elements.

[0146] See Figure 5 The diagram shown illustrates a method for generating a rendering tree according to an embodiment of this application. The web page structure may include a root element node, whose child nodes are element 1 and element 2. Element 1's child node is element 3, and element 2's child node is element 4. Element 3 has the attribute "display:none," indicating that element 3 is a hidden element and is not displayed on the page. Correspondingly, the generated first rendering tree may include the rendering nodes corresponding to the elements that need to be displayed on the web page. For example... Figure 5 As shown, the first rendering tree can include the root rendering node (referred to as the root node) corresponding to the root element node. The nesting relationship between rendering nodes can also correspond to the nesting relationship between element nodes, such as rendering node 1 corresponding to element 1, rendering node 2 corresponding to element 2, and rendering node 4 corresponding to element 4. Since element 3 is not displayed on the page, the rendering node corresponding to element 3 may not be included in the first rendering tree. For each rendering node in the first rendering tree, it can include the content and style information of the corresponding element, such as... Figure 5As shown, rendering node 2 includes the content and style information of element 2, which allows drawing to be performed based on rendering node 2 to display element 2 on the web page interface. Style information can also be called the element's rendering attributes; for example, style information is used to determine the position, size, transparency, etc. of the element to be rendered by this rendering node on the interface.

[0147] In one possible implementation, the first rendering tree uses a first data format, which is a format supported by the system rendering process, while the format supported by the first application process is a second data format. The data format can also be replaced with a tree structure or a rendering tree data structure, etc. In one implementation, the first application process can directly generate the first rendering tree according to the first data format. It can be understood that in related technologies, the first application process originally uses the second data format to generate the rendering tree, while the system rendering process's rendering tree uses the first data format. In this embodiment, by having the first application process directly generate the first rendering tree in the first data format, after sending the first rendering tree to the system rendering process, the system rendering process can directly process the first rendering tree, reducing the workload caused by format conversion of the rendering tree and lowering the load on the electronic device.

[0148] In another implementation, the first application process can also generate a render tree according to the second data format, and then convert the render tree to a first render tree in the first data format. In this way, the first application process can continue to reuse existing render tree generation methods.

[0149] In some embodiments, see Figure 6A As shown, a web application can include a main process, which can also be called the kernel of the web application (or simply the web kernel). Therefore, the first application process can be the main process of the web application. When a web page is opened, the main process can directly execute page parsing, style calculation, layout, and other processes based on the web page script to generate the first render tree.

[0150] In some embodiments, see Figure 6B As shown, a web application can include a main process and a web rendering process. The first application process can be the web rendering process, or in other words, the first application process can include both the main process and the web rendering process. The main process of the web application can launch the web rendering process to implement the page rendering of the web application. Therefore, when a web page needs to be opened, the main process of the web application can send the corresponding web page script to the web rendering process. The web rendering process then performs page parsing, style calculation, layout, and other processes based on the web page script to generate the first rendering tree.

[0151] Step 402: The first application process sends the first rendering tree to the system rendering process.

[0152] like Figure 4A As shown, the first application process can send the first render tree to the system render process. (Comparison) Figure 1A The process of displaying a web page is shown below. Figure 1A After generating the rendering tree on the application side, the rendering process needs to perform rasterization and compositing before sending the composite bitmap to the system rendering process. However, in this embodiment, the first application process sends the first rendering tree directly to the system rendering process without performing rasterization and compositing.

[0153] In some embodiments, the electronic device can employ multiple rendering modes, such as a first rendering mode and a second rendering mode. In the first rendering mode, the application process within the electronic device (e.g., a first application process) can send the generated first rendering tree to the system rendering process for collaborative rendering with the operating system before rendering. In the second rendering mode, the first application process employs an application-driven rendering method.

[0154] Therefore, if the first application process determines that the electronic device is in the first rendering mode, it sends the first rendering tree to the system rendering process. Otherwise, the first application process can use the second rendering mode to render the web page.

[0155] In some embodiments, the first application process can also determine whether it supports co-building a render tree with the operating system. When the first application process determines that it supports co-building a render tree with the operating system, it can send the generated first render tree to the system rendering process for rendering after co-building the render tree with the operating system. For example, the first application process can determine whether its current version supports co-building a render tree with the operating system based on application version information.

[0156] See Figure 6A As shown, if the first application process is the main process of the web application, then the main process generates the first render tree and sends it to the system render process. Alternatively, see [link to documentation]. Figure 6B As shown, if the first application process is a Web rendering process, then the Web rendering process will send the first rendering tree to the system rendering process after generating the first rendering tree.

[0157] Since the first rendering tree generated by the first application process is usually stored in the memory of the first application process, and the memory of different processes is not shared, data interaction between processes needs to be completed through IPC communication. That is, the first application process can send the first rendering tree to the system rendering process through IPC communication.

[0158] In one implementation, see [link to implementation details]. Figure 7As shown, the first application process can write the first rendering tree to the first shared memory, and the system rendering process can read the first rendering tree from the first shared memory, thereby realizing IPC communication between the first application process and the system rendering process.

[0159] For example, the first application process can request shared memory from the system rendering process. Upon receiving the request, the system rendering process allocates a block of shared memory (i.e., the first shared memory) and a handle corresponding to that shared memory through the anonymous shared memory (Ashmem) subsystem. Next, after successfully allocating shared memory from the Ashmem subsystem, the system rendering process receives a handle returned by the Ashmem subsystem for reading and writing physical memory. The system rendering process returns the handle to the first application process, allowing it to use the handle to write the first rendering tree into physical memory. The system rendering process can then directly read this physical memory from its own process space to directly read the first rendering tree generated by the first application process. This shared memory can be a virtual file established in memory through a temporary file system (tmpfs), mapped to the user spaces of different processes.

[0160] Based on this implementation, the first rendering tree is passed through shared memory, allowing multiple processes to access the same memory block instead of copying data, thereby improving efficiency.

[0161] In one implementation, see [link to implementation details]. Figure 7 As shown, the first application process can also add the first rendering tree to the first message queue, and the system rendering process can obtain the first rendering tree from the first message queue, thereby realizing IPC communication between the first application process and the system rendering process.

[0162] For example, after the first application process generates the first rendering tree, it can serialize the generated first rendering tree and put it into the first message queue, from which the system rendering process can read the first rendering tree.

[0163] Based on this implementation, the first rendering tree is transmitted through a message queue. Since the message queue is an asynchronous data transmission method, the first application process does not need to wait for the system rendering process to finish processing and can continue to execute other tasks. The first application process and the system rendering process can work independently, and the message queue can effectively manage resources and avoid unnecessary memory copying.

[0164] It should be noted that the first application process can also pass the first render tree to the system rendering process through IPC communication methods such as Binder, Android Interface Definition Language (AIDL), and sockets, which are not limited here.

[0165] Step 403: The system rendering process generates a second rendering tree based on the first rendering tree and the rendering node corresponding to the first application. The first application is an application in the electronic device other than the aforementioned web application.

[0166] In some embodiments, the first application may be a different web application from the web application, in which case the electronic device may support multiple web applications co-constructing a render tree. Alternatively, the first application may also be a non-web application within the electronic device, in which case the electronic device may support web applications co-constructing a render tree with other non-web applications.

[0167] As one possible implementation, the first application can be a system application in an electronic device. A system application refers to a native application provided by the operating system of the electronic device; some system applications can also function as system services. For example, the first application could be... Figure 3A The status bar shown. Alternatively, the first application can be a non-system application on the electronic device. This non-system application can be a native application provided by a third party. For example, the first application could be such as Figure 3D The video application shown.

[0168] It should be understood that native applications can be applications developed based on the native programming languages, controls, interfaces, and development paradigms provided by the operating system. The native controls mentioned in this context can be controls provided by the operating system that can be called by developers, for example, through interfaces, thus facilitating the development of corresponding applications.

[0169] In some examples, applications can also be developed based on cross-platform frameworks and native controls; these are called web applications. The pages displayed in a web application can include both native controls and web controls. Web controls can be, for example, card controls that rely on network refresh or scrollable long list controls. Cross-platform frameworks can be, for example, the Weex framework or the QT framework.

[0170] When the first application is running, a second application process corresponding to the first application can run in the electronic device. The second rendering tree includes the rendering nodes corresponding to the first application. Alternatively, it can be described as the second rendering tree including the rendering nodes used to draw the interface of the second application process, or the second rendering tree including the rendering nodes corresponding to the controls required to be displayed when the second application process is running.

[0171] In other words, the system rendering process can merge the first rendering tree and the rendering tree corresponding to the first application to generate a second rendering tree. The rendering tree corresponding to the first application includes the rendering nodes corresponding to the first application. For example, when the first application is a system application, the system rendering process can merge the first rendering tree and the system rendering tree of the operating system controls to be displayed to generate a second rendering tree. Then, the web page and the operating system controls can be rasterized and composited together. In this way, multiple composites are not required, thereby reducing the load on electronic devices.

[0172] The system rendering process merges the first rendering tree and the rendering tree corresponding to the first application, which can be done in several ways, including but not limited to the following:

[0173] Method 1 involves creating a new rendering tree, called the fifth rendering tree. The first rendering tree and the rendering tree corresponding to the first application are added to this fifth rendering tree to obtain the second rendering tree. The newly created fifth rendering tree may include a root node. The system rendering process can use the root nodes from the first rendering tree and the root nodes from the rendering tree corresponding to the first application as child nodes of the root node in the fifth rendering tree to obtain the second rendering tree. In other words, the second rendering tree is obtained by connecting the first rendering tree, the rendering tree corresponding to the first application, and the root node.

[0174] Method 2: The system rendering process can add the first rendering tree to the rendering tree corresponding to the first application. That is, the system rendering process uses the root node of the first rendering tree as a child node of one of the nodes in the rendering tree corresponding to the first application to obtain the second rendering tree. For example, this one node could be the root node of the rendering tree corresponding to the first application. Alternatively, the rendering tree corresponding to the first application can contain a root node and multiple child nodes, and this rendering tree usually has a hierarchical relationship. Nodes at different levels represent different interface elements and relationships, and the parent node of the root node in the first rendering tree can be determined based on the hierarchical relationship. For example, the root node could represent the entire display interface, and the child nodes of the root node could represent windows or application interfaces; in this case, the first rendering tree can be mounted under the root node. Similarly, the system rendering process can also add the rendering tree corresponding to the first application to the first rendering tree.

[0175] In this embodiment, rendering nodes that are not displayed or do not affect the display can be deleted before merging, thereby avoiding over-drawing. For example, the system rendering process can traverse the rendering nodes of each rendering tree, determine the position of each rendering node in the display interface, and combine the Z-order of the corresponding layer of the rendering tree. The Z-order is used to identify the hierarchical relationship of each layer to determine the rendering nodes that are completely obscured and delete these rendering nodes.

[0176] For example, see Figure 3AAs shown, the electronic device can be a mobile phone, and the primary application can be the status bar, which can display information such as the phone's battery level, carrier signal strength, network speed, and time. That is, when displaying a web page on a mobile phone, the phone can simultaneously display the status bar. Therefore, the web page and the status bar can be used to jointly construct a rendering tree, and then rasterization and compositing can be performed based on this jointly constructed rendering tree.

[0177] In one implementation, the first rendering tree generated by the first application process can use a second data format. The system rendering process can then convert the first rendering tree from the second data format to the first data format, and then generate a second rendering tree based on the first rendering tree with the first data structure. Based on this implementation, the first application process can reuse the original rendering tree generation method, reducing modifications to the web application.

[0178] Step 404: The system rendering process generates a first display interface based on the second rendering tree. The first display interface includes a first application interface and a second application interface corresponding to the first application.

[0179] After obtaining the second rendering tree, the system rendering process can generate a corresponding bitmap based on the second rendering tree, which is the first display interface.

[0180] See Figure 8 As shown, taking the first application as an application provided by the operating system as an example, the system rendering process can merge the operating system's system rendering tree and the first rendering tree to obtain a second rendering tree. Then, the system rendering process can execute the GPU rendering step, that is, call the GPU to rasterize each rendering node in the second rendering tree to obtain the corresponding bitmap. After that, the system rendering process can execute the HWC compositing step based on the rendering result to obtain the first display interface. For example, if a block rasterization method is used, the system rendering process can also composite the rasterized bitmaps into a single bitmap.

[0181] Afterwards, the system rendering process can send the first display interface to the screen for display. The displayed first display interface will include both the first and second application interfaces. See also Figure 3A As shown, the first display interface may include the interface of the web page in the web application and the interface of the status bar.

[0182] It should be understood that in some embodiments, the web application may be displayed in full screen, that is, without displaying the status bar or any other application interface. In this case, the system rendering process can directly use the first rendering tree as the second rendering tree and generate the corresponding display interface based on the second rendering tree. This interface is the interface of the web page in the web application.

[0183] Based on this implementation method, when a web page needs to be displayed, the web application can generate a rendering tree by performing page parsing, style calculation, and layout processes based on the web page script. Then, the system rendering process can merge the web page's rendering tree with other rendering trees, and perform rasterization and compositing based on the merged rendering tree before displaying it on the screen. This process can effectively reduce the number of inter-process interactions and compositing operations, thereby reducing the load on electronic devices and improving the smoothness of scrolling scenes and animations.

[0184] After constructing the first render tree corresponding to the web page, a drawing step is required to generate a list of drawing instructions. For example, after generating the first drawing instruction list based on the first render tree, the system rendering process can perform rasterization and compositing based on the second render tree and the first drawing instruction list to generate the first display interface. In this drawing step, information can be extracted from the first render tree to generate the drawing instruction list. These drawing instructions include how to draw each element, the drawing order, color, font, and other attributes. The drawing process refers to the process of generating drawing instructions; generating drawing instructions can also describe recording drawing instructions. See also... Figure 9A and Figure 9B The diagram shown is a flowchart illustrating the addition of a drawing step according to an embodiment of this application.

[0185] In this context, drawing instructions, or simply instructions, refer to commands used to render (also known as generate or draw) rendering nodes in the rendering tree, such as OpenGL draw calls (i.e., commands from the graphics processing unit (GPU) to the underlying graphics drawing interface). The "instruction" described in this embodiment can be a single instruction, such as an application program interface (API) call function; or it can be a collection of multiple instructions. For example, in OpenGL, a draw call typically contains multiple API call functions, and this draw call can be considered a single instruction that completes one drawing action.

[0186] In some embodiments, the first list of drawing instructions may be generated by a first application process. See also Figure 9A As shown, the first application process can be responsible for parsing, style calculation, and layout of the Web page script to generate the first rendering tree, and can generate a first drawing instruction list for drawing the first application interface based on the first rendering tree.

[0187] Afterwards, the first application process can send the first rendering tree and the first drawing instruction list to the system rendering process. The system rendering process can obtain the second rendering tree based on the first rendering tree and the rendering tree corresponding to the first application, and generate the first display interface based on the second rendering tree and the first drawing instruction list.

[0188] In some embodiments, the first list of drawing instructions may be generated by the system rendering process, meaning the system rendering process may also have the capability to execute drawing steps. See also... Figure 9B As shown, the first application process is responsible for parsing the web page script, calculating styles, and performing layout processing to generate the first rendering tree. The first application process then sends the first rendering tree to the system rendering process, meaning it no longer needs to handle the drawing steps. After receiving the first rendering tree, the system rendering process generates a first drawing instruction list for drawing the first application interface based on the first rendering tree, and then generates the first display interface based on the second rendering tree and the first drawing instruction list.

[0189] In one implementation, after the system rendering process obtains the first rendering tree, it can obtain the second rendering tree based on the first rendering tree and the rendering tree corresponding to the first application. In addition, the system rendering process can generate a first drawing instruction list based on the first rendering tree and generate a first display interface based on the second rendering tree and the first drawing instruction list.

[0190] In one implementation, such as Figure 9B As shown, the system rendering process can obtain a second rendering tree based on the first rendering tree and the rendering tree corresponding to the first application. Then, it executes drawing steps based on the second rendering tree to generate a second drawing instruction list. Since the second rendering tree contains the content of the first rendering tree, the generated second drawing instruction list also contains the first drawing instruction list. Therefore, the system rendering process can generate a first display interface based on the second rendering tree and the second drawing instruction list.

[0191] like Figure 9A and Figure 9B As shown, the system rendering process generates a first display interface based on a second rendering tree and a second drawing instruction list. This may include the system rendering process performing GPU rendering and HWC compositing steps based on the second rendering tree and the second drawing instruction list, generating the first display interface, and then sending it for on-screen display. For example, GPU rendering (such as rasterization in blocks) is performed based on the second rendering tree and the second drawing instruction list to generate at least one bitmap, and HWC compositing is performed on at least one bitmap to obtain the first display interface.

[0192] As mentioned above, in addition to their own page elements such as web controls, the pages displayed in web applications can also include native controls. See also Figure 10The diagram illustrates the rendering process of a web page containing native controls in related technologies. In these technologies, if a web page contains native controls, the rendering of these native controls is performed by the system rendering process, such as... Figure 10 As shown, the content of the native control is rendered into bitmap "1", and the web control is rendered into bitmap "2". In the web application process, bitmap "1" and bitmap "2" are combined into bitmap "3" and then sent to the system rendering process. The system rendering process then combines bitmap "3" with bitmaps from other applications using HWC (Hardware-Wide Graphics) and sends it to the screen for display. It's understandable that with this implementation, either bitmap "1" is displayed on top of bitmap "2", or bitmap "2" is displayed on top of bitmap "1". If you want web controls to appear above native controls and some web controls to appear below native controls in a web application, this cannot be achieved, or even if it could be achieved, the implementation complexity would be high.

[0193] In this embodiment, the second rendering tree generated by the system rendering process may also include rendering nodes corresponding to native controls in the Web page. It is understood that since the first application process outputs a rendering tree, rather than a completed bitmap, to the system rendering process, after merging the rendering trees, the rendering nodes of native controls and Web controls are in the same rendering tree. This allows for easier adjustment of the display relationship between Web controls and native controls according to actual needs, improving the display effect of the Web page.

[0194] In one implementation, the first rendering tree may include rendering nodes corresponding to native controls. Alternatively, the first rendering tree may be a rendering tree that merges the rendering nodes corresponding to Web controls and native controls in the Web page. The rendering nodes corresponding to native controls are used to draw the interface corresponding to those native controls. The number of rendering nodes corresponding to native controls can be one or more, without limitation.

[0195] See Figure 11A As shown, the system rendering process can generate a third rendering tree corresponding to native controls, which may include rendering nodes corresponding to the native controls. Optionally, this third rendering tree can be a subtree of the system rendering tree. The first application process can generate a fourth rendering tree corresponding to web controls in the web page, which may include rendering nodes corresponding to the web controls. After receiving the third rendering tree sent by the system rendering process, the first application process can generate a first rendering tree based on the third and fourth rendering trees, that is, merge the third and fourth rendering trees into the first rendering tree.

[0196] Afterwards, the first application process can send the first rendering tree to the system rendering process. The system rendering process can obtain the second rendering tree based on the first rendering tree and the rendering node corresponding to the first application. In this way, the second rendering tree will include the rendering node corresponding to the native control. Then, the first display interface obtained after performing GPU rendering and HWC compositing based on the second rendering tree can also include the interface corresponding to the native control.

[0197] Based on this implementation, the system rendering process sends the third rendering tree corresponding to the native control to the first application process. The first application process can adjust the display relationship between the Web control and the native control before sending the first rendering tree to the system rendering tree. This avoids sending additional information to the system rendering tree to indicate the display relationship between the Web control and the native control, and also makes it easier for the first application process to obtain the relevant rendering data of the native control.

[0198] In one implementation, the first rendering tree contains rendering nodes corresponding to Web controls in the Web page, or in other words, it does not contain rendering nodes corresponding to native controls. The rendering nodes corresponding to native controls in the second rendering tree can be added by the system rendering process.

[0199] See Figure 11B As shown, the system rendering process can generate a third rendering tree corresponding to the native controls, which may include the rendering nodes corresponding to the native controls. The system rendering process can generate a second rendering tree based on this third rendering tree, the first rendering tree, and the rendering nodes corresponding to the first application. In this way, the second rendering tree will include the rendering nodes corresponding to the native controls, and the first display interface obtained after performing GPU rendering and HWC compositing based on the second rendering tree can also include the interface corresponding to the native controls.

[0200] Optionally, the third render tree can be the system render tree. Alternatively, the third render tree can be a subtree of the system render tree.

[0201] As an example, the first application can be a system application, and thus, it can also be rendered by the system rendering process. For instance, if the third rendering tree is the system rendering tree, it can also include the rendering nodes corresponding to the first application. The system rendering process can then generate a second rendering tree based on the third and first rendering trees. Alternatively, the third rendering tree can be a subtree of the system rendering tree, and the rendering nodes corresponding to the first application can be included in another subtree. The system rendering process can then generate a second rendering tree based on the system and first rendering trees.

[0202] Based on the above implementation method, since native controls and web controls can co-build a rendering tree with the operating system before the system rendering process performs rasterization, it is possible to freely adjust the display relationship between web controls and native controls during the rendering process, thereby improving the display effect of web pages.

[0203] It should be understood that the native controls mentioned above are merely examples. In real-world scenarios, web pages may contain many more native controls. These native controls can be added to the merged rendering tree in a similar manner to the native controls, thereby placing them in the same rendering tree as the rendering nodes of the web page. This allows for easier adjustment of the display relationship between web page elements and native controls according to actual needs, improving the display effect of the web page.

[0204] In some embodiments, an electronic device may include one or more native applications. These native applications can employ a self-drawing approach, where the application process itself generates a render tree and performs drawing operations based on that render tree to obtain the corresponding bitmap. Alternatively, the native application can also use a system render process. When using a system render process, the native application can co-create the render tree with the web application, for example... Figure 4B In the illustrated embodiment, the first rendering tree of the Web application can be merged with the rendering tree corresponding to the first application to obtain the second rendering tree.

[0205] For example, all native applications use either the system rendering process or custom rendering. Alternatively, some native applications use the system rendering process, while others use custom rendering.

[0206] For example, native applications within electronic devices also include second applications, see [link to relevant documentation]. Figure 12A and Figure 12B The diagram illustrates the rendering process of the second application during runtime. During runtime, the corresponding second application process runs on the electronic device. The second application is a native application other than a web application. Furthermore, the second application is also a native application other than the first application mentioned above.

[0207] In one implementation, if the second application process also uses the system rendering process for drawing, then see... Figure 12A As shown, in addition to the first rendering tree, the system rendering process also receives the sixth rendering tree from the second application process. The sixth rendering tree is used to draw the third application interface of the second application process. The system rendering process can merge the first rendering tree, the sixth rendering tree, and the rendering tree corresponding to the first application to obtain the second rendering tree. As an example, the first application is a system application provided by the operating system, and the rendering tree corresponding to the first application can be the operating system's system rendering tree (…). Figure 12A (Using this as an example), the second application can be a user-installed native application. The system rendering process can then merge the first rendering tree, the system rendering tree, and the sixth rendering tree to obtain the second rendering tree. Afterward, the system rendering process performs GPU rendering and HWC compositing based on the second rendering tree to obtain the first display interface and display it on the screen. In this implementation, the first display interface includes not only the first and second application interfaces but also a third application interface from the second application process. For example... Figure 3D As shown, the first display interface can simultaneously display the status bar, web page, and video application playback interface.

[0208] Based on this implementation method, all applications within an electronic device can be merged into a common rendering tree before rasterization and compositing, thereby minimizing the number of compositing operations and reducing the load on the electronic device. Furthermore, since operating system controls, web page elements, and native applications are all in the same rendering tree before rasterization in the system rendering process, the display relationships between various elements can be more easily adjusted according to actual needs, improving the interface presentation.

[0209] In another implementation, if the second application process uses a self-drawing method, then see... Figure 12B As shown, the second application process will generate a second bitmap, which contains the third application interface of the second application process. The second application process can then send the second bitmap to the system rendering process. Furthermore, as... Figure 12B As shown, the system rendering process can also combine the first rendering tree with the rendering tree corresponding to the first application (such as...). Figure 12B The system rendering tree shown is merged to obtain a second rendering tree, and GPU rendering is performed based on the second rendering tree. This involves calling the GPU to perform rasterization to generate a first-bit image, which can include both a first application interface and a second application interface. Then, the system rendering process uses HWC to composite the first-bit image and the second bitmap to obtain a first display interface, which is then submitted to the screen for display. Thus, the screen of the electronic device can display a first application interface containing a web application, a second application interface containing the first application, and a third application interface containing the second application, for example... Figure 3D As shown, the first display interface can simultaneously display the status bar, web page, and video application playback interface.

[0210] Based on this implementation method, native applications within electronic devices can still use the original self-drawing method, be compatible with the existing rendering methods of native applications, and reduce the workload caused by modifying the rendering process of native applications.

[0211] In summary, this application provides a method for rendering web pages that supports various web applications, such as clients, browsers, and mini-programs, regardless of page content or number. This method leverages vertical integration to co-construct a rendering tree with other applications. For example, it can merge the rendering results of the web application with the system, then perform unified rasterization and compositing, thereby reducing the performance and load overhead of self-drawing, lowering the power consumption of web page rendering, and is not limited by page content or number. Furthermore, by vertically integrating with the operating system, this method supports the reuse of native component rendering data, inherently supporting the fusion rendering of web pages and native components, and providing more flexible web development capabilities.

[0212] Figure 13 This is a schematic diagram of the structure of a computer device 1300 provided in an embodiment of this application. The computer device 1300 may be the electronic device described above. For example... Figure 13 As shown, computer device 1300 may include: one or more processors 1301; one or more memories 1302; a communication interface 1303; and one or more computer programs 1304. These components can be connected via one or more communication buses 1305. The one or more computer programs 1304 are stored in the memory 1302 and configured to be executed by the one or more processors 1301. The one or more computer programs 1304 include instructions. For example, when computer device 1300 is an electronic device as described above, the instructions can be used to perform relevant steps of the electronic device as in the corresponding embodiments above, such as performing relevant steps of the processes in the foregoing embodiments. The communication interface 1303 is used to enable communication between computer device 1300 and other devices; for example, the communication interface may be a transceiver.

[0213] This application also provides a computer program product, including a computer program that, when run on a computer, causes the computer to perform the methods described in the above embodiments.

[0214] This application also provides a graphical user interface for an electronic device, the electronic device having a display screen, a memory, and a processor, the processor being used to execute one or more computer programs stored in the memory, the graphical user interface including the graphical user interface displayed when the electronic device performs the methods in the above embodiments.

[0215] This application also provides a chip system including a processor and an interface, wherein the processor is configured to call and execute instructions from the interface to enable the chip system to implement the methods described in the above embodiments.

[0216] The methods provided in the embodiments of this application above are described from the perspective of an electronic device as the executing entity. To implement the functions of the methods provided in the embodiments of this application above, the electronic device may include hardware structures and / or software modules, implementing the above functions in the form of hardware structures, software modules, or a combination of hardware structures and software modules. Whether a particular function is executed in the form of hardware structures, software modules, or a combination of hardware structures and software modules depends on the specific application and design constraints of the technical solution.

[0217] As used in the above embodiments, depending on the context, the term "when..." can be interpreted as meaning "if..." or "after...". Similarly, depending on the context, the phrases "when it is determined" or "if (the stated condition or event) is interpreted as meaning "if it is determined..." or "in response to determining..." or "when (the stated condition or event) is detected" or "in response to detecting (the stated condition or event)".

[0218] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., a solid-state disk (SSD)). Where there is no conflict, the solutions in the above embodiments can be combined.

[0219] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied 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.

[0220] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in one or more blocks of the flowchart illustrations and / or one or more blocks of the block diagrams.

[0221] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means that implement the functions specified in one or more flowcharts and / or one or more block diagrams.

[0222] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, such that the instructions, which execute on the computer or other programmable apparatus, provide steps for implementing the functions specified in one or more flowcharts and / or one or more block diagrams.

[0223] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A page rendering method, characterized in that, The method is applied to an electronic device running a system rendering process and a first application process of a web application; the method includes: The first application process generates a first rendering tree, which is used to draw the first application interface corresponding to the web page in the web application. The first application process sends the first rendering tree to the system rendering process; The system rendering process generates a second rendering tree based on the first rendering tree and the rendering node corresponding to the first application, wherein the first application is an application in the electronic device other than the Web application. The system rendering process generates a first display interface based on the second rendering tree. The first display interface includes the first application interface and a second application interface corresponding to the first application.

2. The method according to claim 1, characterized in that, The method further includes: The first application process generates a first drawing instruction list for the first application interface based on the first rendering tree, and sends the first drawing instruction list to the system rendering process; or, The system rendering process generates a first drawing instruction list for the first application interface based on the first rendering tree. The system rendering process generates the first display interface based on the second rendering tree, including: The system rendering process generates the first display interface based on the second rendering tree and the first drawing instruction list.

3. The method according to claim 1 or 2, characterized in that, The web page includes native controls, and the second rendering tree also includes rendering nodes corresponding to the native controls.

4. The method according to claim 3, characterized in that, The first rendering tree includes the rendering nodes corresponding to the native controls.

5. The method according to claim 4, characterized in that, The method further includes: The first application process receives a third rendering tree sent by the system rendering process, the third rendering tree including the rendering node corresponding to the native control; The first application process generates a fourth rendering tree, which includes rendering nodes corresponding to Web controls in the Web page; The first application process generates the first rendering tree, including: The first application process generates the first rendering tree based on the third rendering tree and the fourth rendering tree.

6. The method according to claim 4, characterized in that, The method further includes: The system rendering process generates a third rendering tree, which includes the rendering nodes corresponding to the native controls; The system rendering process generates a second rendering tree based on the first rendering tree and the rendering node corresponding to the first application, including: The system rendering process generates the second rendering tree based on the first rendering tree, the third rendering tree, and the rendering node corresponding to the first application; wherein, the first rendering tree includes the rendering node corresponding to the Web control in the Web page.

7. The method according to any one of claims 1 to 6, characterized in that, The system rendering process generates a second rendering tree based on the first rendering tree and the rendering node corresponding to the first application, including: The system rendering process creates a fifth rendering tree, and uses the root node of the first rendering tree and the root node of the rendering node corresponding to the first application as child nodes of the root node in the fifth rendering tree to obtain the second rendering tree; or, The system rendering process takes the root node in the first rendering tree as a child node of one of the rendering nodes corresponding to the first application to obtain the second rendering tree.

8. The method according to any one of claims 1 to 7, characterized in that, The first rendering tree uses a first data format, which is a format supported by the system rendering process, and the first application process supports a second data format.

9. The method according to any one of claims 1 to 8, characterized in that, The first application process sends the first rendering tree to the system rendering process, including: The first application process writes the first rendering tree to the first shared memory, and the system rendering process reads the first rendering tree from the first shared memory; or, The first application process adds the first rendering tree to the first message queue, and the system rendering process retrieves the first rendering tree from the first message queue.

10. The method according to any one of claims 1 to 9, characterized in that, The electronic device also runs a second application process of a second application, which is an application other than the web application. The system rendering process generates a first display interface based on the second rendering tree, including: The system rendering process generates a first bitmap based on the second rendering tree. The first bitmap includes the first application interface and the second application interface. The system rendering process obtains a second bitmap, which includes the third application interface of the second application process; The system rendering process generates the first display interface based on the first bitmap and the second bitmap.

11. The method according to any one of claims 1 to 10, characterized in that, The first application process sends the first rendering tree to the system rendering process, including: When the first application process determines that the electronic device is in the first rendering mode, the first application process sends the first rendering tree to the system rendering process.

12. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method as described in any one of claims 1 to 11.

13. A chip system, characterized in that, The chip system includes a processing circuit and a storage medium, wherein the storage medium stores instructions; when the instructions are executed by the processing circuit, they implement the method as described in any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1 to 11.

15. A computer program product, characterized in that, The computer program product includes a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1 to 11.

Images