WO2024056100A1 - 页面渲染方法、装置、设备、存储介质及计算机程序产品 - Google Patents

页面渲染方法、装置、设备、存储介质及计算机程序产品 Download PDF

Info

Publication number
WO2024056100A1
WO2024056100A1 PCT/CN2023/119518 CN2023119518W WO2024056100A1 WO 2024056100 A1 WO2024056100 A1 WO 2024056100A1 CN 2023119518 W CN2023119518 W CN 2023119518W WO 2024056100 A1 WO2024056100 A1 WO 2024056100A1
Authority
WO
WIPO (PCT)
Prior art keywords
tree
layout
node
page
rendering
Prior art date
Application number
PCT/CN2023/119518
Other languages
English (en)
French (fr)
Inventor
黄为伟
黄思程
孙广东
Original Assignee
腾讯科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 腾讯科技（深圳）有限公司 filed Critical 腾讯科技（深圳）有限公司
Publication of WO2024056100A1 publication Critical patent/WO2024056100A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/901—Indexing; Data structures therefor; Storage structures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • the present application relates to the field of computer technology, and in particular, to a page rendering method, device, equipment, storage medium and computer program product.
  • UI User Interface
  • Electronic devices can display the user interface on the screen of the electronic device by rendering the page, and can respond to the feedback of objects in the user interface. operation in response.
  • WebView a web page view engine
  • WebView As a specific implementation of an open standard, WebView already has extremely reliable rendering capabilities and good performance.
  • WebView After research, it was found that for some program pages, especially small program pages, WebView has a problem of relatively high hardware resource usage when rendering, which makes the rendering not timely enough when rendering on mobile terminals and other types of electronic devices.
  • Embodiments of the present application provide a page rendering method, device, equipment, storage medium and computer program product, which can improve the rendering rate when rendering a page.
  • embodiments of the present application provide a page rendering method, which is applied to electronic devices, including:
  • a cross-platform layout system to obtain the layout information of the target page; wherein the layout information of the target page is obtained by the cross-platform layout system by traversing each node in the layout node tree and performing node layout processing.
  • the node tree is built based on the page configuration tree;
  • the target page is drawn.
  • a page rendering device including:
  • a logical processing unit configured to parse the target page and obtain the corresponding page configuration tree
  • a rendering unit configured to use a cross-platform layout system to obtain the layout information of the target page; wherein the layout information of the target page is obtained by the cross-platform layout system by performing node layout processing by traversing each node in the layout node tree. , the layout node tree is constructed based on the page configuration tree;
  • the rendering unit is further configured to generate drawing instructions based on the layout information of the target page and the rendering object tree;
  • a graphics drawing unit configured to draw the target page in response to the drawing instruction.
  • embodiments of the present application provide an electronic device, which includes an input interface and an output interface, and further includes:
  • a processor adapted to implement one or more instructions
  • Computer storage medium stores one or more instructions, the one or more instructions are suitable for the processor to load and execute the above page rendering method.
  • embodiments of the present application provide a computer storage medium in which computer program instructions are stored.
  • the computer program instructions are executed by a processor, they are used to execute the above page rendering method.
  • inventions of the present application provide a computer program product.
  • the computer program product includes a computer program.
  • the computer program is stored in a computer storage medium.
  • the processor of the electronic device reads the computer program from the computer storage medium.
  • the processor Executing the computer program causes the electronic device to execute the above page rendering method.
  • a page rendering method is provided based on the layout rendering framework and the cross-platform layout system to collaboratively realize the rendering process of the page.
  • the page configuration tree Widget Tree corresponding to the target page is obtained.
  • the cross-platform layout system can be called through the layout rendering framework.
  • the cross-platform layout system uses the layout node tree Yoga Tree built based on the page configuration tree Widget Tree, and traverses each node in the layout node tree Yoga Tree to perform node layout processing.
  • the layout information of the target page in turn, the drawing instructions can be generated based on the layout information of the target page, and the drawing instructions can be completed in response to the drawing instructions; among them, the layout rendering framework can quickly build the user interface, and introduces more features in the layout tasks of the rendering process.
  • Figure 1 is a schematic diagram of triggering display of a target page provided by an embodiment of the present application
  • Figure 2 is a schematic diagram of a rendering process based on the target rendering engine Skyline provided by an embodiment of the present application
  • Figure 3 is a schematic diagram of cross-language communication provided by an embodiment of the present application.
  • Figure 4 is a schematic flowchart of a page rendering method provided by an embodiment of the present application.
  • Figure 5 is a schematic diagram of creating a page configuration tree Widget Tree corresponding to a target page provided by an embodiment of the present application
  • Figure 6a is a schematic flowchart of obtaining layout information of a target page provided by an embodiment of the present application
  • Figure 6b is a schematic diagram for determining the layout information of each node in the Render Object Tree provided by the embodiment of the present application;
  • Figure 7 is a schematic flow chart of another page rendering method provided by an embodiment of the present application.
  • Figure 8 is a schematic structural diagram of a page rendering device provided by an embodiment of the present application.
  • Figure 9 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.
  • the embodiment of the present application provides a page rendering solution that can perform style parsing processing on the target page to obtain the page configuration tree corresponding to the target page (for example, it can be a Widget Tree), and then the cross-platform layout system can be called through the layout rendering framework to obtain the target
  • the layout information of the page in turn, the drawing instructions can be generated based on the layout information of the target page and the rendering object tree (Render Object Tree) obtained by the layout rendering framework according to the page configuration tree Widget Tree, and respond to the drawing instructions to complete the drawing of the target page;
  • the cross-platform layout system builds a layout node tree based on the page configuration tree Widget Tree (for example, it can be a Yoga Tree), and obtains the layout information of the target page by traversing each node in the layout node tree Yoga Tree for node layout processing
  • the target page may be a web page, a program page, a mini-program page, etc. The embodiment of this application is explained assuming that the target page is a mini-pro
  • the page rendering solution can be executed by an electronic device, which can be a terminal device or a server;
  • the terminal device here can include but is not limited to: computers, smart phones, tablets, laptops, and smart home appliances. , vehicle-mounted terminals, smart wearable devices, etc.;
  • the server here can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or it can provide cloud services, cloud databases, cloud computing, Cloud servers for basic cloud computing services such as cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, Content Delivery Network (CDN), and big data and artificial intelligence platforms.
  • CDN Content Delivery Network
  • the page rendering solution can also be executed individually or collaboratively by other electronic devices with computing power, which is not limited by the embodiments of this application.
  • the page rendering solution can be executed collaboratively by the terminal device and the server; see Figure 1, which is a schematic diagram of a triggered display target page provided by an embodiment of the present application.
  • the object executes the triggered display target in the current page displayed on the terminal device.
  • the terminal device can send a page rendering request to the server; after receiving the page rendering request, the server can perform style parsing processing on the target page and call the cross-platform layout system through the layout rendering framework to obtain the layout information of the target page. and generate drawing instructions and other related operations to obtain the drawing instructions, and then the drawing instructions can be sent to the terminal device; after receiving the drawing instructions, the terminal device can respond to the drawing instructions to complete the drawing and display of the target page.
  • the page rendering solution can be executed by the target rendering engine Skyline deployed in the electronic device; the target rendering engine Skyline can be built based on the layout rendering framework and the cross-platform layout system, so that the target rendering engine can Skyline implements calls to the layout rendering framework and cross-platform layout system to obtain the layout information of the target page, and then implements the rendering process of the target page based on the layout information of the target page.
  • the layout rendering framework can be an existing user interface framework (i.e. UI framework) that can quickly build a user interface.
  • the user interface framework can be cross-platform, that is, it can be used on multiple platforms (such as Android platform and iOS platform). ) Build a user interface based on a user interface framework.
  • the user interface framework can be Flutter, which can quickly build native user interfaces in multiple platforms;
  • the cross-platform layout system can also be called a cross-platform layout engine, which is A layout system that can be used on multiple different platforms (can be understood as different operating systems) for page layout.
  • the cross-platform layout system is mainly used to implement the rendering process on multiple platforms (such as Android and iOS platforms).
  • the cross-platform layout system can be Yoga based on the flexible box layout mode (Flexbox).
  • the electronic device can perform style parsing processing on the target page through the target rendering engine Skyline to obtain the page configuration tree Widget Tree corresponding to the target page; and call the cross-platform layout system Yoga through the layout rendering framework Flutter to obtain the layout information of the target page. ;
  • the layout information of the target page is the cross-platform layout system Yoga It is obtained by traversing each node in the layout node tree for node layout processing.
  • the layout node tree is constructed based on the page configuration tree Widget Tree; the target rendering engine Skyline is based on the layout information of the target page and the rendering object tree.
  • Render Object Tree generates drawing instructions.
  • the rendering object tree is obtained by the layout rendering framework based on the page configuration tree Widget Tree.
  • the target rendering engine Skyline responds to the drawing instructions to draw and display the target page.
  • the target rendering engine Skyline can render the page through a logical processing thread (also called an AppService thread), a rendering thread, and a graphics drawing thread, where the logical processing thread can be used to perform style parsing processing on the target page.
  • the rendering thread can be used to call the cross-platform layout system through the layout rendering framework to obtain the layout information of the target page and generate drawing instructions.
  • the graphics drawing thread can be used to respond to the drawing instructions to complete the drawing of the target page, and then display the drawn target page.
  • the logic processing thread can be used to perform tasks such as applet JS logic, applet framework logic (also called applet framework operation nodes), style calculation, etc.
  • JS Logic is interactive logic, which can be used to respond to the operation of the object, such as the triggering of the response object, information entry, real-time location application, etc.
  • the subsequent operation of the response object triggering the display of the target page is used as an example, that is, the rendering of the target page is used as an example.
  • the application style of the target page is included in the page configuration tree Widget Tree corresponding to the target page.
  • the applet framework logic and style calculation tasks can collaboratively realize the construction of the page configuration tree Widget Tree corresponding to the target page.
  • the applet The framework logic is used to create a component node tree corresponding to the page template (which can be a component node tree Shadow Tree) based on the page template of the target page and the component data corresponding to the target page.
  • the style calculation task is used to create the target page based on the component node tree Shadow Tree.
  • the rendering thread can be used to perform layout (i.e., Layout), composition (i.e., Composite), and drawing (i.e., Paint) according to the obtained application style, that is, according to the obtained page configuration tree Widget Tree corresponding to the target page.
  • the graphics drawing thread can be used to perform tasks such as page drawing and display, that is, it can rasterize (i.e., Raster) the received drawing instructions and send the results after rasterization to the graphics processing
  • the target page is drawn and displayed in the Graphics Processing Unit (GPU).
  • GPU Graphics Processing Unit
  • FIG. 2 is a schematic diagram of a rendering process based on the target rendering engine Skyline provided by the embodiment of the present application; after the object performs related operations that trigger the display of the target page in the current page displayed on the terminal device, the target rendering engine Skyline can
  • the applet JS logic task is executed through the logic processing thread, that is, it can respond to the trigger operation of the object on the current page and generate a routing event for rendering the target page; it can execute the applet framework logic task based on the routing event, that is, it can execute the applet framework logic task according to the page template of the target page.
  • the style calculation task can be performed, that is, the page configuration tree Widget Tree corresponding to the target page can be created based on the component node tree Shadow Tree, and the corresponding widget tree of the target page can be created.
  • the page configuration tree Widget Tree is passed to the rendering thread.
  • the page configuration tree Widget Tree of the target page contains the application style of the target page.
  • the rendering thread can perform tasks such as layout and drawing to generate drawing instructions based on the obtained page configuration tree Widget Tree corresponding to the target page. In other words, the rendering thread can perform tasks such as layout and drawing to generate drawing instructions based on the obtained application style, and Pass drawing instructions to the graphics drawing thread.
  • the graphics drawing thread can perform tasks such as page drawing and display, that is, it can rasterize the received drawing instructions and send the rasterized results to the GPU to draw and display the target page.
  • the rendering process includes: JS logical processing, creation of the Document Object Model (DOM, Document Object Model) tree, Cascading Style Sheets (CSS, Cascading Style Sheets) ) parsing, style calculation, layout, drawing (synthesis), page drawing and display and other tasks.
  • DOM Document Object Model
  • CSS Cascading Style Sheets
  • the DOM tree creation task is similar to the applet framework logic task in the rendering process of the target rendering engine Skyline, and the CSS parsing and style calculation are similar to Style calculation tasks in the rendering process of the target rendering engine Skyline; since each task in the rendering process of WebView occurs on the main thread, and there are too many main thread tasks, the degree of parallelism is not high enough, and the JS logic processing task takes too long. Causing the interface to freeze.
  • the target rendering engine Skyline proposed in the embodiment can share the tasks in the rendering process by creating a rendering thread, which can improve the parallelism during processing and reduce the possibility of interface lag; and, the small program JS logic in the target rendering engine Skyline , Mini Program framework logic and other tasks are executed by the logic processing thread, which can reduce the cross-thread communication overhead when executing Mini Program JS logic tasks and Mini Program framework logic tasks.
  • the time required to render the same page using WebView and the target rendering engine Skyline the comparison found that in electronic devices with higher configurations, the time required to use the target rendering engine Skyline is about 50% to 60% of that of using WebView. , and the advantages are more obvious in electronic devices with lower configurations.
  • the target rendering engine Skyline keeps the syntax and interface of the upper-layer framework basically unchanged, and only needs to make local adjustments, mainly Strengthened the constraints on styles (WXSS styles), built-in components and some features. If you expect to call the target rendering engine Skyline to render the target page, obtain the configuration information for the target page, and configure the target page based on the configuration information.
  • the configuration information may include: using the configuration file of the target page to render the target page.
  • the renderer is set to the target rendering engine Skyline, and the configuration file of the target page is the json file corresponding to the target page; this can be achieved by adding the "renderer":"skyline” field in the configuration file of the target page.
  • the target rendering engine Skyline is called to process it.
  • the configuration may include: setting the username in the configuration file of the component.
  • the renderer used to render the component is the target rendering engine Skyline, and the configuration file of the component is the json file corresponding to the component; in some embodiments, if you want to call the target rendering engine Skyline to render a certain applet page, then Similar configurations need to be performed on the corresponding mini program pages; in some embodiments, if it is expected that all mini program pages in the mini program call the target rendering engine Skyline for rendering processing, the mini program can be configured globally.
  • the configuration It can include: setting the renderer as the target rendering engine Skyline in the global configuration file of the mini program, which is the app.json file.
  • the rule configuration information for the target rendering engine is also obtained, and the target page can be customized for the target.
  • the rule configuration information may include one or a combination of rule configuration information that prohibits global scrolling of the target page, and rule configuration information that allows customization of the navigation bar of the target page.
  • the rule configuration information for disabling global scrolling of the target page can be achieved by setting the configuration item "disableScroll" in the configuration file of the target page to true. At this time, if you need to scroll in a certain area of the target page, you need to use scrolling. View (i.e.
  • the rule configuration information that allows customization of the navigation bar of the target page can be to set the configuration item "navigationStyle" in the configuration file of the target page to "custom".
  • the target page needs to be configured Customize the navigation bar of the page; after configuring the target page and setting the renderer used to render the target page to the target rendering engine Skyline, the target page can be adapted to the rules of the target rendering engine Skyline, which can reduce manual labor.
  • the target rendering engine Skyline supports commonly used attributes, and the layout supports elastic layout (i.e., flex layout) as well as absolute positioning and relative positioning layout (i.e., absolute&relative positioning layout). Therefore, when configuring the target page, it will be used for rendering.
  • the style can also be adapted to the target rendering engine Skyline.
  • the target rendering engine Skyline supports the dependency on-demand injection feature. Normally, when the applet is started, all code packages (main packages, sub-packages, plug-in packages, extension libraries, etc.) that the startup page depends on are All JS codes will be merged and injected, including other unvisited pages and unused custom components.
  • the JS codes of all pages and custom components will be executed immediately, which results in a lot of unused code being injected in the mini program running environment. Execution affects the injection time and memory usage; while pressing Required injection allows the applet to inject only the custom components and page code required for the currently accessed page. Unvisited pages and custom components not declared on the current page will not be loaded and initialized, and the corresponding code files will not be executed. You can Reduce injection time and memory usage; in some embodiments, you can configure the dependency on-demand injection feature by adding the "lazyCodeLoading":"requiredComponents" field to the global configuration page of the applet.
  • the layout rendering framework Flutter can be called through the rendering thread to obtain the layout information of the target page, and then the drawing and display of the target page can be completed based on the layout information of the target page.
  • the programming language used by the target rendering engine Skyline is different from the programming language used by the layout rendering framework Flutter.
  • the target rendering engine Skyline usually uses JavaScript language, and Flutter usually uses Dart language, so JavaScript language and Dart language need to be implemented. Cross-language communication between them, so that the call to the layout rendering framework Flutter can be implemented through the target rendering engine Skyline.
  • the cross-language communication between the JavaScript language and the Dart language can be realized by relying on the host program object of the applet.
  • the logic processing thread of the target rendering engine Skyline can be run. Create a first communication interface between the environment and the interactive environment provided by the host program object to realize communication between the logical processing thread and the host program object. This can be achieved by creating an interactive environment between the running environment of the rendering thread of the target rendering engine Skyline and the interactive environment provided by the host program object. Create a second communication interface between the rendering thread and the host program object to realize communication between the rendering thread and the host program object; since the running environment of the logical processing thread is JavaScript VM (i.e.
  • the host program object can provide an interactive environment based on C/C++ language. That is, the native environment.
  • the running environment of the rendering thread is the running environment of the layout rendering framework Flutter, Dart VM (i.e. Dart program virtual machine), so cross-language communication between JavaScript and C/C++ can be achieved through the created first communication interface.
  • Dart VM i.e. Dart program virtual machine
  • the second communication interface realizes cross-language communication between Dart and C/C++, that is, the communication between the layout rendering framework Flutter and the host program object can be realized through the second communication interface.
  • the first communication interface can be used at this time It is the first communication interface built based on the JSBinding mechanism.
  • the second communication interface can be either Dart API or Dart FFI. In some embodiments, based on performance considerations, it is better to use Dart FFI as the second communication interface. .
  • Figure 3 is a schematic diagram of cross-language communication provided by the embodiment of the present application. Cross-language communication is implemented between JavaScript and C/C++ based on the JSBinding mechanism. Cross-language communication is implemented between Dart and C/C++ based on Dart FFI. Based on This enables cross-language communication between JavaScript and Dart.
  • object-related data is involved.
  • the component data corresponding to the target page includes object-related data.
  • the permission or consent of the subject is required, and the collection, use and processing of relevant data need to comply with local laws, regulations and standards.
  • FIG. 4 is a schematic flow chart of a page rendering method provided by an embodiment of the present application.
  • the page rendering method shown in Figure 4 can be executed by an electronic device.
  • the page rendering method shown in Figure 4 may include the following steps:
  • the electronic device performs style parsing processing on the target page to obtain the page configuration tree Widget Tree corresponding to the target page, which may include: parsing the target page to obtain component data (i.e., this.data); according to the page template of the target page and component data, create a component node tree Shadow Tree corresponding to the page template; create a page configuration tree Widget Tree corresponding to the target page based on the component node tree Shadow Tree; wherein, the page template of the target page can be used to describe the page structure of the target page
  • the template can be a WXML template
  • the component data can be the data in the page template that needs to be filled in the target page.
  • the electronic device performs style parsing processing on the target page, which can be implemented through the logical processing thread in the target rendering engine Skyline.
  • the page configuration tree Widget Tree corresponding to the target page contains the application style, which can be passed to target rendering
  • the rendering thread in Skyline is used for subsequent processing; after the object performs the relevant operations that trigger the display of the target page in the current page displayed on the terminal device, the target rendering engine Skyline can execute the applet JS logic task through the logic processing thread, that is, it can respond The triggering operation of the object on the current page generates a routing event for rendering the target page.
  • the applet framework logic task can be executed based on the routing event, that is, the related process of creating the component node tree Shadow Tree can be executed, and the style calculation task can be performed, that is, the applet framework logic task can be executed based on the routing event.
  • the component node tree Shadow Tree creates the page configuration tree Widget Tree corresponding to the target page, and passes the page configuration tree Widget Tree corresponding to the target page to the rendering thread, that is, to the layout rendering framework Flutter.
  • the component node tree Shadow Tree may also be created by calling the first communication interface to transfer content data to the host program object of the applet.
  • the content data may include page templates and component data. That is, the first communication interface is called to transfer content data to the host program object of the applet, where the content data includes the page template and the component data; the page is created according to the content data through the host program object.
  • the component node tree corresponding to the template may include page templates and component data.
  • the host program object may pass the created page configuration tree Widget Tree to the layout rendering framework Flutter through the second communication interface.
  • the electronic device creates a page configuration tree Widget Tree corresponding to the target page based on the component node tree Shadow Tree, which may include: performing style matching processing on each node in the component node tree Shadow Tree to obtain the widget tree in the component node tree Shadow Tree.
  • the element style (ComputedStyle) corresponding to each node generate the corresponding page configuration node (which can be a page configuration node Widget) according to the element style ComputedStyle corresponding to each node in the component node tree Shadow Tree; combine the corresponding elements of each node in the component node tree Shadow Tree
  • the page configuration node Widget gets the page configuration tree Widget Tree.
  • the electronic device performs style matching processing on each node in the component node tree Shadow Tree to obtain the element style ComputedStyle corresponding to each node in the component node tree Shadow Tree, which may include: traversing each node in the component node tree Shadow Tree Node; execute the expansion process (i.e. Inflate process) and style recalculation process (i.e. RecalcStyle process) on the currently traversed node. In this process, the style matching calculation of the currently traversed node will be performed to obtain the element style corresponding to the currently traversed node. ComputedStyle; In some embodiments, when traversing each node in the component node tree Shadow Tree, pre-order traversal, in-order traversal, etc. may be used.
  • the embodiments of this application are explained using pre-order traversal.
  • the combination when combining the page configuration node Widgets corresponding to each node in the component node tree Shadow Tree, the combination can be performed according to the structure of the component node tree Shadow Tree.
  • the target rendering engine Skyline can provide a component organization framework Exparser built into the basic library of the mini program; it can provide basic support for various components of the mini program and organize and manage the components; it can maintain Information related to the node tree of the entire page, and perform corresponding operations on the node tree.
  • the routing event can be sent to the mini program basic library; after the mini program basic library receives the routing event, it can be processed through the component organization framework Exparser According to the routing event, the applet framework logic task can be executed, that is, the related process of creating the component node tree Shadow Tree can be executed, and the component organization framework Exparser can also perform the style calculation task, that is, the page corresponding to the target page can be created based on the component node tree Shadow Tree. Configure the tree Widget Tree, and pass the page configuration tree Widget Tree corresponding to the target page to the rendering thread.
  • the electronic device uses the component organization framework Exparser to create the component node tree Shadow Tree corresponding to the page template, which may be in the JavaScript VM, the running environment of the logical processing thread, by calling the first communication interface to transfer the content data to the applet.
  • the host program object provides an interactive environment based on the C/C++ language (i.e., the native environment), it is created in the native environment.
  • the page configuration tree Widget corresponding to the target page can be created in the native environment based on the component node tree Shadow Tree.
  • FIG. 5 is a schematic diagram of creating a page configuration tree Widget Tree corresponding to a target page provided by an embodiment of the present application; wherein, 501 indicates the target The node tree corresponding to the page template of the page. 502 shows the component node tree Shadow Tree. The 503 mark shows the component node tree Shadow Tree obtained after performing style matching processing on each node in the component node tree Shadow Tree. The 504 mark indicates Shown is the page configuration tree Widget Tree. The 505 mark shows one of the page configuration node Widgets. The 506 mark shows the page configuration tree Widget Tree passed to the layout rendering framework Flutter.
  • S402 use the cross-platform layout system to obtain the layout information of the target page.
  • the cross-platform layout system Yoga obtains the layout information of the target page through a layout node tree Yoga Tree built based on the page configuration tree Widget Tree, and by traversing each node in the layout node tree Yoga Tree to perform node layout processing; in some embodiments Among them, the layout node tree Yoga Tree may be constructed by the cross-platform layout system Yoga based on the page configuration tree Widget Tree.
  • the cross-platform layout system Yoga may run in the native environment.
  • the cross-platform layout system Yoga first performs the Each node in the page configuration tree constructs an element tree, and then performs a difference analysis on the element tree to obtain the rendering object tree corresponding to the page configuration tree.
  • the number of rendering objects calls the Layout method to obtain the layout node tree Yoga Tree.
  • each Element object can be created by calling the createElement() method, thereby forming an element tree based on the Element object.
  • the layout node tree Yoga Tree can also be constructed on other platforms in the native environment that can realize the construction of the layout node tree Yoga Tree.
  • the layout node tree Yoga Tree is a cross-platform layout system Yoga based on the page
  • the configuration tree Widget Tree is constructed as an example to illustrate.
  • the electronic device calls the cross-platform layout system Yoga through the layout rendering framework Flutter to obtain the layout information of the target page.
  • This can be implemented through the rendering thread in the target rendering engine Skyline, which can include: calling the cross-platform layout system through the layout rendering framework Flutter.
  • Platform layout system Yoga build the layout node tree Yoga Tree corresponding to the page configuration tree Widget Tree through the cross-platform layout system Yoga; traverse each node in the layout node tree Yoga Tree through the cross-platform layout system Yoga to perform node layout processing, and obtain the target page Layout information, and store the layout information of the target page in the shared memory; obtain the layout information of the target page from the shared memory through the layout rendering framework Flutter.
  • the nodes contained in the layout node tree Yoga Tree correspond to each element that needs to be rendered when rendering the target page, that is, when jumping from the current page to the target page, the changed parts of the page; traverse the layout node tree Yoga Tree For each node, pre-order traversal, in-order traversal, etc. may be used.
  • the embodiments of this application are not limited; the layout information of the target page may include attribute information of each element that needs to be rendered when rendering the target page, such as size and position. and other related attributes.
  • the cross-platform layout system traverses the layout node tree and performs node layout processing on the nodes in the layout node tree.
  • Apply the layout algorithm to each node to obtain the layout information of each node.
  • the layout information obtained here at least includes the offset information between the node and its parent node; when the obtained layout information of a node does not include the size information of the node, Measure the node to obtain the size information of the node; incorporate the size information of the merged node into the layout information of the node; and finally determine the layout information of each node in the layout node tree as the layout information of the target page.
  • the block/flex layout algorithm can be applied to each node in the node layout tree. If the offset of the node relative to its parent node and the size information of the node (including width and height) can be obtained, Then the offset and size information between the node and the parent node are determined as the layout information of the node. Among them, the offset between a node and its parent node can be determined based on the location information of the node and the location information of its parent node, and refers to the offset between the location of the node and the location of its parent node. Shift amount.
  • the measure method can be called to perform measurement processing on the node. , get the width and height of the node.
  • Nodes such as pictures and text have fixed sizes. Taking the picture node as an example, the size of the picture has been determined when the picture is generated. However, for a cross-platform layout system, the size of the picture cannot be obtained through the layout algorithm. In this case, it is necessary to call the measure method from the solution of the picture. The encoder obtains the size information of the image.
  • the layout information of the target page may include the layout information of each node in the layout node tree Yoga Tree
  • the electronic device may also construct a rendering object tree Render Object Tree corresponding to the page configuration tree Widget Tree through the layout rendering framework Flutter, Among them, each node in the Render Object Tree corresponds to each node in the layout node tree Yoga Tree; then, at this time, the layout information of the target page is obtained from the shared memory through the layout rendering framework Flutter, which can include:
  • the layout rendering framework Flutter obtains the layout information of each node in the layout node tree Yoga Tree from the shared memory; based on the obtained layout information of each node, the layout information of each node in the Render Object Tree is determined accordingly.
  • the nodes contained in the Render Object Tree correspond to each element that needs to be rendered when rendering the target page, that is, when jumping from the current page to the target page, there are changes in the page.
  • the electronic device passes the layout
  • the rendering framework Flutter builds the rendering object tree Render Object Tree corresponding to the page configuration tree Widget Tree, which can include: building an element tree (Element Tree) according to each node in the page configuration tree Widget Tree, performing difference analysis on the element tree Element Tree, and obtaining the page Configure the rendering object tree Render Object Tree corresponding to the Widget Tree.
  • the electronic device performs difference analysis on the Element Tree through the layout rendering framework Flutter, and when obtaining the Render Object Tree corresponding to the page configuration tree Widget Tree, the element tree Element used to render the current page can be obtained. Tree, called the comparison element tree. Based on the node differences between the element tree Element Tree and the comparison element tree, the rendering object tree Render Object Tree corresponding to the page configuration tree Widget Tree is generated. In some embodiments, if the target page is the first applet page displayed after starting the applet, the comparison element tree is empty, and the rendering object tree Render corresponding to the page configuration tree Widget Tree can be directly generated based on the element tree Element Tree Object Tree.
  • the layout information of each node in the layout node tree Yoga Tree is obtained from the shared memory through the layout rendering framework Flutter, and the layout of each node in the Render Object Tree is determined accordingly based on the obtained layout information.
  • the information can be obtained by traversing the Render Object Tree based on the layout rendering framework Flutter.
  • the Render Object Tree can be traversed by pre-order traversal, in-order traversal, etc. This application The examples are not limiting.
  • Figure 6a is a schematic flow chart for obtaining the layout information of a target page provided by the embodiment of the present application; the electronic device can construct a rendering object tree Render Object corresponding to the page configuration tree Widget Tree through the layout rendering framework Flutter.
  • Tree calls the cross-platform layout system Yoga through the layout rendering framework Flutter; builds the layout node tree Yoga Tree corresponding to the page configuration tree Widget Tree through the cross-platform layout system Yoga, and traverses each node in the layout node tree Yoga Tree through the cross-platform layout system Yoga Perform node layout processing to obtain the layout information of each node in the layout node tree Yoga Tree, and store the layout information of each node in the layout node tree Yoga Tree into the shared memory; obtain the layout node tree from the shared memory through the layout rendering framework Flutter
  • the layout information of each node in the Yoga Tree is determined accordingly according to the obtained layout information.
  • the layout information of each node in the Render Object Tree is determined accordingly.
  • the electronic device calls the cross-platform layout system Yoga through the layout rendering framework Flutter, which can be implemented by rewriting the layout method used to traverse each node in the Render Object Tree to perform node layout processing, which can be implemented by rewriting
  • the subsequent layout method performLayout calls the layout method CalculateLayout used in the cross-platform layout system Yoga to implement operations related to node layout processing by traversing each node in the layout node tree Yoga Tree through the cross-platform layout system Yoga.
  • FIG 6b is a schematic diagram for determining the layout information of each node in the Render Object Tree provided by the embodiment of the present application; wherein, as shown by mark 601, it is the running environment of the layout rendering framework Flutter (ie Dart VM), The tree among them is the Render Object Tree. As shown in the 602 mark, it is the running environment of the cross-platform layout system (that is, the C/C++ native environment).
  • the layout rendering framework Flutter ie Dart VM
  • the tree among them is the layout node tree Yoga Tree; electronic devices use the layout rendering framework Flutter After building the Render Object Tree corresponding to the Widget Tree of the page configuration tree, you can use the rewritten
  • the layout method performLayout enters the main layout process; the cross-platform layout system Yoga is called to enter the layout sub-process. After the layout node tree Yoga Tree corresponding to the page configuration tree Widget Tree is built through the cross-platform layout system Yoga, all the layout nodes in the cross-platform layout system Yoga can be used.
  • the layout method CalculateLayout used enters the layout process in the cross-platform layout system Yoga.
  • the cross-platform layout system Yoga can traverse each node in the layout node tree Yoga Tree for node layout processing, and obtain the layout information of each node in the layout node tree Yoga Tree. And store the layout information of each node in the layout node tree Yoga Tree into the shared memory.
  • the obtained layout information of one of the nodes can be shown in Figure 6b, including: the upper edge top is 300 pixels (px), the left edge The left is 150px, the width is 10px, and the height is 10px; end the layout sub-process and return to the main layout process.
  • Flutter continues to execute the main layout process through the layout rendering framework Flutter, that is, continues to execute the rewritten layout method performLayout to obtain data from the shared memory.
  • S403 Generate drawing instructions based on the layout information of the target page and the Render Object Tree.
  • the Render Object Tree is obtained by the layout rendering framework based on the page configuration tree Widget Tree.
  • the relevant process of the layout rendering framework Flutter obtaining the rendering object tree Render Object Tree based on the page configuration tree Widget Tree has been explained in the above step S402. You can refer to the implementation process of step S402 for implementation; the layout information of the target page includes the rendering object tree Render Object Tree.
  • the layout information of each node in the Render Object Tree the electronic device generates drawing instructions based on the layout information of the target page and the Render Object Tree, which can be implemented through the rendering process, and can be based on the layout information of each node in the Render Object Tree, the Render Object Tree.
  • the traversal order of each node in the Render Object Tree and the node inheritance relationship are used to generate drawing instructions corresponding to each node in the Render Object Tree.
  • the electronic device responds to the drawing instruction and draws and displays the target page through a graphics drawing thread.
  • the graphics drawing thread can perform tasks such as page drawing and display; the received drawing instruction can be rasterized and The results after rasterization are sent to the GPU to draw and display the target page.
  • a page rendering method is provided based on the layout rendering framework and the cross-platform layout system to collaboratively realize the rendering process of the page.
  • the page configuration tree Widget Tree corresponding to the target page is obtained.
  • the cross-platform layout system can be called through the layout rendering framework.
  • the cross-platform layout system uses the layout node tree Yoga Tree built based on the page configuration tree Widget Tree, and traverses each node in the layout node tree Yoga Tree to perform node layout processing.
  • the layout information of the target page in turn, the drawing instructions can be generated based on the layout information of the target page, and the drawing instructions can be completed in response to the drawing instructions; among them, the layout rendering framework can quickly build the user interface, and introduces more features in the layout tasks of the rendering process.
  • FIG. 7 is a schematic flow chart of another page rendering method provided by an embodiment of the present application.
  • the page rendering method shown in Figure 7 can be executed by an electronic device.
  • the page rendering method shown in Figure 7 may include the following steps:
  • each node in the layout node tree Yoga Tree corresponds to each node in the rendering object tree Render Object Tree.
  • the cross-platform layout system Yoga traverses each node in the layout node tree Yoga Tree to perform node layout processing, obtains the layout information of each node in the layout node tree Yoga Tree, and stores the layout information of each node in the layout node tree Yoga Tree. to shared memory.
  • each node in the rendering object tree Render Object Tree is traversed for node layout processing to obtain the layout information of the target page.
  • the layout information of the target page includes the layout information of each node in the Render Object Tree.
  • S709 Generate drawing instructions based on the layout information of the target page and the rendering object tree Render Object Tree obtained by the layout rendering framework Flutter based on the page configuration tree Widget Tree.
  • Tree Render Object Tree generates drawing instructions, and responds to the drawing instructions to complete the drawing operation of the target page; the layout information of the target page includes the layout information of each node in the Render Object Tree.
  • steps S701 to S711 are similar to the related processes from steps S401 to S404 mentioned above; in some embodiments, the electronic device performs style parsing processing on the target page and obtains the page configuration tree Widget Tree corresponding to the target page. , you can call the cross-platform layout system Yoga through the layout rendering framework Flutter to obtain the layout information of each node in the layout node tree Yoga Tree, and store the layout information of each node in the layout node tree Yoga Tree into the shared memory.
  • the rendering framework Flutter traverses each node in the Render Object Tree to perform node layout processing; the layout rendering framework Flutter can first obtain the layout information of each node in the layout node tree Yoga Tree from the shared memory, and determine the rendering object tree Render accordingly.
  • the layout information of each node in the Object Tree and in the case of failure to obtain the layout information of each node in the layout node tree Yoga Tree, obtain the layout information obtained by traversing each node in the render object tree Render Object Tree and performing node layout processing through the layout rendering framework Flutter.
  • the layout information of the target page is accessed by traversing each node in the render object tree Render Object Tree and performing node layout processing through the layout rendering framework Flutter.
  • the cross-platform layout system can be first called through the layout rendering framework, and the layout information of each node in the layout node tree Yoga Tree can be obtained through the cross-platform layout system, and the layout information of each node in the layout node tree Yoga Tree can be stored. to the shared memory, and then obtain the layout information of each node in the Yoga Tree from the shared memory through the layout rendering framework, and correspondingly determine the layout information of each node in the Render Object Tree as the layout information of the target page. ; And when the layout information of each node in the Yoga Tree obtained from the shared memory through the layout rendering framework fails, perform node layout processing on each node in the Render Object Tree to obtain the rendering object tree.
  • the layout information of each node in the Tree can be dealt with when calling the cross-platform layout system through the layout rendering framework fails to obtain the layout information of the target page. This increases the fault tolerance rate of obtaining the layout information of the target page and improves page rendering. stability and reduce the possibility of rendering failure.
  • FIG. 8 is a schematic structural diagram of a page rendering device provided by an embodiment of the present application.
  • the page rendering device may include a configuration unit 801 , a logical processing unit 802 , a rendering unit 803 and a graphics drawing unit 804 .
  • the page rendering device shown in Figure 8 can run the following units:
  • the logical processing unit 802 is configured to parse the target page to obtain the corresponding page configuration tree; the rendering unit 803 is configured to use a cross-platform layout system to obtain the layout information of the target page; wherein the layout information of the target page is the
  • the cross-platform layout system is obtained by performing node layout processing by traversing each node in the layout node tree.
  • the layout node tree is constructed based on the page configuration tree; the rendering unit 803 is also configured to perform node layout processing based on the target page.
  • the layout information and rendering object tree are used to generate drawing instructions; the graphics drawing unit 804 is configured to respond to the drawing instructions and draw the target page.
  • the logical processing unit 802 parses the target page to obtain the page configuration tree corresponding to the target page, it performs the following operations: parses the target page to obtain component data; according to the page template of the target page and The component data is used to create a component node tree corresponding to the page template; and a page configuration tree corresponding to the target page is created based on the component node tree.
  • the target page is a mini-program page.
  • the logic processing unit 802 creates a component node tree corresponding to the page template based on the page template of the target page and the component data, it performs the following operations: calling the first communication interface to pass content data to the host program object of the mini-program, the content data including the page template and the component data; and creating a component node tree corresponding to the page template based on the content data through the host program object.
  • the logical processing unit 802 when the logical processing unit 802 creates the page configuration tree corresponding to the target page according to the component node tree, it performs the following operations: performs style matching processing on each node in the component node tree, and obtains The element style corresponding to each node in the component node tree; generate the corresponding page configuration node according to the element style corresponding to each node in the component node tree; combine the page configuration nodes corresponding to each node in the component node tree to obtain The page configuration tree.
  • the rendering unit 803 uses a cross-platform layout system to obtain the layout information of the target page, it performs the following operations: calls the cross-platform layout system through the layout rendering framework; obtains the page configuration tree corresponding to Laying out the node tree; traversing each node in the layout node tree through the cross-platform layout system, performing node layout processing, obtaining the layout information of the target page, and storing the layout information of the target page in the shared memory ; Obtain the layout information of the target page from the shared memory.
  • the rendering unit 803 traverses each node in the layout node tree through the cross-platform layout system, and when performing node layout processing, obtains the layout information of the target page, and performs the following operations: through the The cross-platform layout system traverses the layout node tree, applies a layout algorithm to each node in the layout node tree, and obtains layout information of each node.
  • the layout information at least includes an offset between a node and its parent node.
  • layout information of the node when the layout information of the node does not include the size information of the node, perform measurement processing on the node to obtain the size information of the node; incorporate the size information of the node into the layout information of the node;
  • the layout information of each node in the layout node tree is determined as the layout information of the target page.
  • the layout information of the target page includes the layout information of each node in the layout node tree;
  • the rendering unit 803 is also configured to: construct a rendering object tree corresponding to the page configuration tree; the rendering Each node in the object tree corresponds one-to-one to each node in the layout node tree;
  • the rendering unit 803 obtains the layout information of the target page from the shared memory, it performs the following operations: obtains the layout of each node in the layout node tree from the shared memory through the layout rendering framework. Information; correspondingly determine the layout information of each node in the rendering object tree according to the obtained layout information.
  • the rendering unit 803 is further configured to: construct an element tree according to each node in the page configuration tree; perform a difference analysis on the element tree to obtain a rendering object tree corresponding to the page configuration tree.
  • the configuration unit 801 is configured to: obtain the configuration information of the target page; the configuration information includes: adding the configuration file of the target page to The renderer used to render the target page is set as a target rendering engine; the target rendering engine renders the page through a logical processing thread, a rendering thread and a graphics drawing thread; wherein the logical processing thread is used to render the The target page is parsed, the rendering thread is used to call the cross-platform layout system through the layout rendering framework to obtain the layout information of the target page and generate the drawing instructions, and the graphics drawing thread is used to respond to the The drawing instruction completes the drawing of the target page.
  • the configuration unit 801 is further configured to: obtain rule configuration information for the target rendering engine; the rule configuration information includes rule configuration information that prohibits global scrolling of the target page, and allows for the The navigation bar of the target page carries one or a combination of two customized rule configuration information.
  • various steps involved in the page rendering methods shown in FIG. 4 and FIG. 7 may be executed by various units in the page rendering device shown in FIG. 8 .
  • step S401 shown in FIG. 4 can be executed by the logical processing unit 802 in the page rendering device shown in FIG. 8 ; steps S402 to step S403 shown in FIG. 4 can be executed by the rendering unit in the page rendering device shown in FIG. 8
  • Step S404 shown in FIG. 4 may be performed by the graphics drawing unit 804 in the page rendering device shown in FIG. 8 .
  • step S701 shown in FIG. 7 can be executed by the logical processing unit 802 in the page rendering device shown in FIG. 8 ; steps S702 to step S709 shown in FIG.
  • Step S710 shown in Figure 7 can be executed by the graphics drawing unit 804 in the page rendering device shown in Figure 8;
  • Step S711 shown in Figure 7 can be executed by the rendering unit in the page rendering device shown in Figure 8 803 and graphics drawing unit 804 are executed in cooperation.
  • each unit in the page rendering device shown in Figure 8 can be separately or entirely combined into one or several additional units, or some of the units can be further disassembled. It is divided into multiple units with smaller functions, which can achieve the same operation without affecting the realization of the technical effects of the embodiments of the present application.
  • the above units are divided based on logical functions. In practical applications, the function of one unit can also be realized by multiple units, or the functions of multiple units can be realized by one unit. In other embodiments of the present application, the page rendering device based on logical function division may also include other units. In actual applications, these functions may also be implemented with the assistance of other units, and may be implemented by multiple units in cooperation.
  • the method can be implemented on a general computing device such as a computer including a central processing unit (CPU), a random access storage medium (RAM), a read-only storage medium (ROM), and other processing elements and storage elements.
  • a computer program including program code capable of executing the steps involved in the corresponding methods as shown in Figure 4 and Figure 7 to construct the page rendering device as shown in Figure 8, and to implement page rendering according to the embodiment of the present application.
  • the computer program may be recorded on, for example, a computer-readable storage medium, loaded into the above-mentioned computing device through the computer-readable storage medium, and run therein.
  • a page rendering method is provided based on the layout rendering framework and the cross-platform layout system to realize the rendering process of the page.
  • the page configuration tree Widget Tree corresponding to the target page is obtained.
  • the cross-platform layout system can be called through the layout rendering framework.
  • the cross-platform layout system is obtained through the layout node tree Yoga Tree built based on the page configuration tree Widget Tree, and by traversing each node in the layout node tree Yoga Tree for node layout processing.
  • the layout information of the target page in turn, the drawing instructions can be generated based on the layout information of the target page, and the drawing and display of the target page can be completed in response to the drawing instructions; among them, the layout rendering framework can quickly build the user interface, and is introduced in the layout task of the rendering process.
  • a more professional cross-platform layout system performs layout processing to obtain the layout information of the target page, which can improve the acquisition rate of the layout information of the target page, thereby improving the rendering rate when rendering the page and achieving high efficiency.
  • Page rendering makes the rendering of pages in electronic devices more timely.
  • this application also provides an electronic device.
  • FIG. 9 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.
  • the electronic device shown in FIG. 9 may include at least a processor 901, an input interface 902, an output interface 903, and a computer storage medium 904.
  • the processor 901, the input interface 902, the output interface 903 and the computer storage medium 904 can be connected through a bus or other means.
  • the computer storage medium 904 may be stored in the memory of the electronic device.
  • the computer storage medium 904 is used to store a computer program.
  • the computer program includes program instructions.
  • the processor 901 is used to execute the program instructions stored in the computer storage medium 904.
  • the processor 901 (or CPU (Central Processing Unit)) is the computing core and control core of the electronic device. It is suitable for implementing one or more instructions, and is suitable for loading and executing one or more instructions to achieve the above. Page rendering method process or corresponding functions.
  • Embodiments of the present application also provide a computer storage medium (Memory).
  • the computer storage medium is a memory device in an electronic device and is used to store programs and data. It can be understood that the computer storage medium here may include a built-in storage medium in the terminal, and of course may also include an extended storage medium supported by the terminal.
  • the computer storage medium provides storage space, and the storage space stores the operating system of the terminal.
  • one or more instructions suitable for being loaded and executed by the processor 901 are also stored in the storage space. These instructions may be one or more computer programs (including program codes).
  • the computer storage medium here can be a high-speed random access memory (RAM) memory, or a non-volatile memory (non-volatile memory), such as at least one disk memory; it can also be At least one computer storage medium located remotely from the aforementioned processor.
  • RAM random access memory
  • non-volatile memory non-volatile memory
  • processor 901 can be configured as:
  • Parse the target page to obtain the corresponding page configuration tree call the cross-platform layout system through the layout rendering framework to obtain the layout information of the target page; wherein, the layout information of the target page is obtained by traversing the layout node tree of the cross-platform layout system Each node of is obtained after node layout processing, and the layout node tree is constructed based on the page configuration tree; based on the layout information of the target page and the rendering object tree, a drawing instruction is generated; in response to the drawing instruction, the The target page is drawn.
  • the processor 901 when the processor 901 parses the target page to obtain the corresponding page configuration tree, it performs the following operations: parses the target page to obtain component data; according to the page template of the target page and the component data, Create a component node tree corresponding to the page template; create a page configuration tree corresponding to the target page according to the component node tree.
  • the target page is an applet page.
  • the processor 901 creates a component node tree corresponding to the page template according to the page template of the target page and the component data
  • the processor 901 performs the following operations: Calling the first communication interface to transfer content data to the host program object of the applet, where the content data includes the page template and the component data; creating a page corresponding to the page template according to the content data through the host program object Component node tree.
  • the processor 901 when the processor 901 creates the page configuration tree corresponding to the target page according to the component node tree, the processor 901 performs the following operations: performs style matching processing on each node in the component node tree to obtain the The element style corresponding to each node in the component node tree; generate the corresponding page configuration node according to the element style corresponding to each node in the component node tree; combine the page configuration nodes corresponding to each node in the component node tree to obtain the Describe the page configuration tree.
  • the processor 901 uses a cross-platform layout system to obtain the layout information of the target page, it performs the following operations: calls the cross-platform layout system through the layout rendering framework; obtains the page The layout node tree corresponding to the surface configuration tree; the cross-platform layout system traverses each node in the layout node tree to perform node layout processing, obtains the layout information of the target page, and stores the layout information of the target page to the shared memory; and obtain the layout information of the target page from the shared memory through the layout rendering framework.
  • the processor 901 traverses each node in the layout node tree through the cross-platform layout system, performs node layout processing, and when obtaining the layout information of the target page, performs the following operations: through the The cross-platform layout system traverses the layout node tree, applies a layout algorithm to each node in the layout node tree, and obtains layout information of each node.
  • the layout information at least includes an offset between a node and its parent node.
  • the layout information of each node in the layout node tree is determined as the layout information of the target page. .
  • the layout information of the target page includes the layout information of each node in the layout node tree; the processor 901 is also configured to: construct a rendering object tree corresponding to the page configuration tree; the rendering Each node in the object tree corresponds one-to-one to each node in the layout node tree;
  • the processor 901 obtains the layout information of the target page from the shared memory, it performs the following operations: obtains the layout information of each node in the layout node tree from the shared memory through the layout rendering framework; According to each obtained layout information, the layout information of each node in the rendering object tree is determined correspondingly.
  • the processor 901 is further configured to: construct an element tree according to each node in the page configuration tree; perform a difference analysis on the element tree to obtain a rendering object tree corresponding to the page configuration tree.
  • the processor 901 before parsing the target page, is further configured to: obtain configuration information for the target page; the configuration information includes: using the configuration file of the target page for rendering the The renderer of the target page is set as a target rendering engine; the target rendering engine renders the page through a logical processing thread, a rendering thread and a graphics drawing thread; wherein the logical processing thread is used to perform style analysis on the target page Processing, the rendering thread is used to call the cross-platform layout system through the layout rendering framework to obtain the layout information of the target page and generate the drawing instructions, and the graphics drawing thread is used to respond to the drawing instructions to complete the Describes the drawing of the target page.
  • the processor 901 is further configured to: obtain rule configuration information for the target rendering engine; the rule configuration information includes rule configuration information that prohibits global scrolling of the target page, and allows for the The navigation bar of the target page carries one or a combination of two customized rule configuration information.
  • Embodiments of the present application provide a computer program product.
  • the computer program product includes a computer program.
  • the computer program is stored in a computer storage medium.
  • the processor of the electronic device reads the computer program from the computer storage medium, and the processor executes the computer program.
  • the program causes the electronic device to execute the method embodiments shown in FIG. 4 and FIG. 7 .
  • the computer-readable storage medium can be a magnetic disk, an optical disk, a read-only memory (Read-Only Memory, ROM) or a random access memory (Random Access Memory, RAM), etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开一种页面渲染方法、装置、设备、存储介质及计算机程序产品，其相关的实施例可以应用于云技术等场景中。该方法包括：解析目标页面得到对应的页面配置树；使用跨平台布局系统得到所述目标页面的布局信息；其中，所述目标页面的布局信息是所述跨平台布局系统通过遍历布局节点树中的各个节点进行节点布局处理后得到的，所述布局节点树是基于所述页面配置树构建的；基于所述目标页面的布局信息和渲染对象树，生成绘制指令，响应所述绘制指令，对所述目标页面进行绘制。

Description

页面渲染方法、装置、设备、存储介质及计算机程序产品
相关申请的交叉引用
本申请基于申请号为202211134809.4、申请日为2022年9月16日的中国专利申请提出，并要求以上中国专利申请的优先权，以上中国专利申请的全部内容在此引入本申请作为参考。
技术领域
本申请涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、设备、存储介质及计算机程序产品。
背景技术
用户界面(User Interface，简称UI)是实现人机交互和信息交换的媒介，电子设备可以通过对页面进行渲染处理将用户界面显示于电子设备的屏幕中，以及可以根据对象在用户界面中的反馈操作进行响应。
现有页面渲染方法中，通常采用网页视图引擎(即WebView)作为渲染器来对页面进行渲染处理，WebView作为开放标准的具体实现，已经具备了极为可靠的渲染能力和不俗的性能表现，但是经过研究发现，对于一些程序页面特别是小程序页面，WebView在进行渲染处理时存在硬件资源占用相对较高的问题，使得在移动端等类型的电子设备上进行渲染时渲染不够及时。
发明内容
本申请实施例提供一种页面渲染方法、装置、设备、存储介质及计算机程序产品，可提高对页面进行渲染处理时的渲染速率。
一方面，本申请实施例提供了一种页面渲染方法，应用于电子设备，包括：
解析目标页面得到对应的页面配置树；
使用跨平台布局系统得到所述目标页面的布局信息；其中，所述目标页面的布局信息是所述跨平台布局系统通过遍历布局节点树中的各个节点进行节点布局处理后得到的，所述布局节点树是基于所述页面配置树构建的；
基于所述目标页面的布局信息和渲染对象树，生成绘制指令；
响应所述绘制指令，对所述目标页面进行绘制。
一方面，本申请实施例提供了一种页面渲染装置，包括：
逻辑处理单元，配置为解析目标页面得到对应的页面配置树；
渲染单元，配置为使用跨平台布局系统得到所述目标页面的布局信息；其中，所述目标页面的布局信息是所述跨平台布局系统通过遍历布局节点树中的各个节点进行节点布局处理后得到的，所述布局节点树是基于所述页面配置树构建的；
所述渲染单元，还配置为基于所述目标页面的布局信息和渲染对象树，生成绘制指令；
图形绘制单元，配置为响应所述绘制指令，对所述目标页面进行绘制。
一方面，本申请实施例提供了一种电子设备，所述电子设备包括输入接口和输出接口，还包括：
处理器，适于实现一条或多条指令；以及，
计算机存储介质，所述计算机存储介质存储有一条或多条指令，所述一条或多条指令适于由所述处理器加载并执行上述页面渲染方法。
一方面，本申请实施例提供了一种计算机存储介质，所述计算机存储介质中存储有计算机程序指令，所述计算机程序指令被处理器执行时，用于执行上述页面渲染方法。
一方面，本申请实施例提供了一种计算机程序产品，计算机程序产品包括计算机程序，该计算机程序存储在计算机存储介质中；电子设备的处理器从计算机存储介质中读取该计算机程序，处理器执行该计算机程序，使得电子设备执行上述页面渲染方法。
本申请实施例中，提供了一种基于布局渲染框架和跨平台布局系统协同实现对页面进行渲染处理的页面渲染方法，在对目标页面进行样式解析处理，得到目标页面对应的页面配置树Widget Tree之后，可以通过布局渲染框架调用跨平台布局系统，跨平台布局系统通过基于页面配置树Widget Tree构建的布局节点树Yoga Tree，并通过遍历布局节点树Yoga Tree中的各个节点进行节点布局处理后得到目标页面的布局信息；进而可以基于目标页面的布局信息生成绘制指令，响应绘制指令完成目标页面的绘制；其中，布局渲染框架可以实现快速构建用户界面，并且在渲染流程的布局任务中引入了更为专业的跨平台布局系统来进行布局处理以得到目标页面的布局信息，可以提高目标页面的布局信息的获取速率，进而可提高对页面进行渲染处理时的渲染速率，实现高效页面渲染，使页面在电子设备中的渲染更加及时。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种触发显示目标页面的示意图；
图2是本申请实施例提供的一种基于目标渲染引擎Skyline的渲染流程的示意图；
图3是本申请实施例提供的一种跨语言通信的示意图；
图4是本申请实施例提供的一种页面渲染方法的流程示意图；
图5是本申请实施例提供的一种创建目标页面对应的页面配置树Widget Tree的示意图；
图6a是本申请实施例提供的一种得到目标页面的布局信息的流程示意图；
图6b是本申请实施例提供的一种确定渲染对象树Render Object Tree中各个节点的布局信息的示意图；
图7是本申请实施例提供的另一种页面渲染方法的流程示意图；
图8是本申请实施例提供的一种页面渲染装置的结构示意图；
图9是本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。 基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例提供了一种页面渲染方案，可以对目标页面进行样式解析处理，得到目标页面对应的页面配置树(例如可以是Widget Tree)，然后可以通过布局渲染框架调用跨平台布局系统得到目标页面的布局信息；进而可以基于目标页面的布局信息，以及布局渲染框架根据页面配置树Widget Tree得到的渲染对象树(Render Object Tree)，生成绘制指令，并响应绘制指令完成目标页面的绘制；其中，跨平台布局系统通过基于页面配置树Widget Tree构建的布局节点树(例如，可以是Yoga Tree)，并通过遍历布局节点树Yoga Tree中的各个节点进行节点布局处理后得到目标页面的布局信息；其中，目标页面可以为网页页面、程序页面以及小程序页面等，本申请实施例以目标页面为小程序页面进行阐述。
在一些实施例中，该页面渲染方案可以由电子设备执行，该电子设备可以为终端设备或者服务器；此处的终端设备可包括但不限于：计算机、智能手机、平板电脑、笔记本电脑、智能家电、车载终端、智能可穿戴设备等；此处的服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。
在一些实施例中，该页面渲染方案还可以由其他有计算力的电子设备单独或协同执行，本申请实施例不做限制。例如，该页面渲染方案可以由终端设备和服务器协同执行；参见图1，为本申请实施例提供的一种触发显示目标页面的示意图，对象在显示于终端设备的当前页面中执行了触发显示目标页面的相关操作之后，终端设备可以发送页面渲染请求至服务器；服务器在接收到页面渲染请求之后，可以执行对目标页面进行样式解析处理、通过布局渲染框架调用跨平台布局系统得到目标页面的布局信息以及生成绘制指令等相关操作，来得到绘制指令，进而可以将绘制指令发送至终端设备；终端设备在接收到绘制指令之后，可以响应绘制指令完成目标页面的绘制显示。
在一个实施例中，该页面渲染方案可以由部署于电子设备中的目标渲染引擎Skyline执行；该目标渲染引擎Skyline可以基于布局渲染框架以及跨平台布局系统构建得到，以使可以通过该目标渲染引擎Skyline实现对布局渲染框架和跨平台布局系统的调用来得到目标页面的布局信息，进而基于目标页面的布局信息实现对目标页面的渲染处理。其中，布局渲染框架可以为现有的能快速构建用户界面的用户界面框架(即UI框架)，该用户界面框架可以是跨平台的，即可以在多个平台中(例如安卓Android平台和iOS平台)基于用户界面框架构建用户界面，在一些实施例中，该用户界面框架可以为Flutter，其能快速在多个平台中构建原生用户界面；跨平台布局系统也可以称为跨平台布局引擎，是可以应用在多个不同平台(可以理解为不同操作系统)的，用于进行页面布局的布局系统，跨平台布局系统主要用于在多个平台中(例如安卓Android平台和iOS平台)实现渲染流程中与布局相关的任务，例如跨平台布局系统可以为基于弹性盒布局模式(Flexbox)的Yoga。
本申请实施例后续以布局渲染框架为Flutter，跨平台布局系统为Yoga进行阐述；通过引入跨平台布局系统Yoga来进行布局处理，可以降低由于布局渲染框架Flutter的基于约束Constraints的布局与网页Web上的布局之间的差异带来的学习成本。在一些实施例中，电子设备可以通过目标渲染引擎Skyline对目标页面进行样式解析处理，得到目标页面对应的页面配置树Widget Tree；通过布局渲染框架Flutter调用跨平台布局系统Yoga得到目标页面的布局信息；其中，目标页面的布局信息是跨平台布局系统Yoga 通过遍历布局节点树中的各个节点进行节点布局处理后得到的，所述布局节点树是基于所述页面配置树Widget Tree构建的；通过目标渲染引擎Skyline基于目标页面的布局信息，和渲染对象树Render Object Tree，生成绘制指令，渲染对象树是布局渲染框架根据页面配置树Widget Tree得到的；通过目标渲染引擎Skyline响应绘制指令，对目标页面进行绘制显示。
在一个实施例中，目标渲染引擎Skyline可以通过逻辑处理线程(也称为AppService线程)、渲染线程以及图形绘制线程对页面进行渲染处理，其中，逻辑处理线程可以用于对目标页面进行样式解析处理，渲染线程可以用于通过布局渲染框架调用跨平台布局系统得到目标页面的布局信息以及生成绘制指令，图形绘制线程可以用于响应绘制指令完成目标页面的绘制，然后显示绘制出的目标页面。在一些实施例中，逻辑处理线程可以用于执行小程序JS逻辑、小程序框架逻辑(也称为小程序框架操作节点)、样式计算等任务来得到需要渲染的页面的应用样式，其中，JS逻辑即交互逻辑，可以用于响应对象的操作，例如响应对象的触发、信息录入、实时位置申请等操作，后续以响应对象触发显示目标页面的操作为例，即以对目标页面的渲染为例；目标页面的应用样式包含于目标页面对应的页面配置树Widget Tree中，小程序框架逻辑和样式计算任务可以协同实现目标页面对应的页面配置树Widget Tree的构建，在一些实施例中，小程序框架逻辑用于根据目标页面的页面模板和目标页面对应的组件数据，创建页面模板对应的组件节点树(可以是组件节点树Shadow Tree)，样式计算任务用于根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree。在一些实施例中，渲染线程可以用于根据获取到的应用样式，即根据获取到的目标页面对应的页面配置树Widget Tree执行布局(即Layout)、合成(即Composite)、绘制(即Paint)等任务得到目标页面对应的绘制指令，图形绘制线程可以用于执行页面绘制显示等任务，即可以对接收到的绘制指令进行光栅化(即Raster)，将光栅化处理之后的结果发送至图形处理器(Graphics Processing Unit，GPU)中对目标页面进行绘制显示。
参见图2，为本申请实施例提供的一种基于目标渲染引擎Skyline的渲染流程的示意图；对象在显示于终端设备的当前页面中执行了触发显示目标页面的相关操作之后，目标渲染引擎Skyline可以通过逻辑处理线程执行小程序JS逻辑任务，即可以响应对象在当前页面的触发操作，生成渲染目标页面的路由事件；可以根据该路由事件执行小程序框架逻辑任务，即可以根据目标页面的页面模板和目标页面对应的组件数据，创建页面模板对应的组件节点树Shadow Tree；可以执行样式计算任务，即可以根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree，并将目标页面对应的页面配置树Widget Tree传递给渲染线程，该目标页面的页面配置树Widget Tree中包含了目标页面的应用样式。渲染线程可以根据获取到的目标页面对应的页面配置树Widget Tree，执行布局、绘制等任务生成绘制指令，换言之，渲染线程可以根据获取到的应用样式，执行布局、绘制等任务生成绘制指令，并将绘制指令传递给图形绘制线程。图形绘制线程可以执行页面绘制显示等任务，即可以对接收到的绘制指令进行光栅化，将光栅化处理之后的结果发送至GPU中对目标页面进行绘制显示。
对比现有页面渲染方法中采用WebView来对页面进行渲染处理的流程，该渲染流程包括：JS逻辑处理、文档对象模型(DOM，Document Object Model)树的创建、层叠样式表(CSS，Cascading Style Sheets)解析、样式计算、布局、绘制(合成)、页面绘制显示等任务，其中，DOM树的创建任务类似于目标渲染引擎Skyline的渲染流程中的小程序框架逻辑任务，CSS解析以及样式计算类似于目标渲染引擎Skyline的渲染流程中的样式计算任务；由于WebView的渲染流程中各个任务都发生在主线程，而主线程任务过多，导致并行度不够高，且JS逻辑处理任务耗时太久会导致界面卡顿。本申 请实施例提出的目标渲染引擎Skyline通过创建一条渲染线程来分担渲染流程中的任务，可以提高处理时的并行度，减少界面卡顿的可能性；并且，目标渲染引擎Skyline中的小程序JS逻辑、小程序框架逻辑等任务均由逻辑处理线程执行，可以减少执行小程序JS逻辑任务与小程序框架逻辑任务时的跨线程通信开销。通过对比采用WebView和目标渲染引擎Skyline来对同一个页面进行渲染处理所需的时间，对比发现在配置较高的电子设备中，采用目标渲染引擎Skyline耗时约为采用WebView的50％至60％，并且在配置较低的电子设备中的优势更加明显。
在一个实施例中，将小程序从WebView迁移到目标渲染引擎Skyline时，无需大动干弋，因为目标渲染引擎Skyline保持了上层框架的语法、接口基本不变，只需要做局部调整，主要是加强了样式(WXSS样式)、内置组件及部分特性的约束。若期望调用目标渲染引擎Skyline对目标页面进行渲染处理，则获取针对目标页面的配置信息，基于配置信息对目标页面进行配置，该配置信息可以包括：将目标页面的配置文件中用于渲染目标页面的渲染器设置为目标渲染引擎Skyline，目标页面的配置文件即目标页面对应的json文件；可以通过在目标页面的配置文件中添加"renderer":"skyline"字段实现，通过该配置，即可以在需要对目标页面进行渲染处理时，调用目标渲染引擎Skyline来处理。在一些实施例中，若期望调用目标渲染引擎Skyline对目标页面中的某一组件进行渲染处理，则只需要对该组件进行配置，此时该配置可以包括：在该组件的配置文件中设置用于渲染该组件的渲染器为目标渲染引擎Skyline，该组件的配置文件即该组件对应的json文件；在一些实施例中，若期望调用目标渲染引擎Skyline对某一小程序页面进行渲染处理，则需要对相应小程序页面进行类似配置；在一些实施例中，若期望小程序中的所有小程序页面均调用目标渲染引擎Skyline来进行渲染处理，则可以对小程序进行全局配置，此时该配置可以包括：在小程序的全局配置文件中设置渲染器为目标渲染引擎Skyline，小程序的全局配置文件即app.json文件。
在一个实施例中，获取目标页面的配置信息，将用于渲染目标页面的渲染器设置为目标渲染引擎Skyline之后，还获取针对所述目标渲染引擎的规则配置信息，可以对目标页面进行针对目标渲染引擎Skyline的规则适配，规则配置信息可以包括禁止目标页面全局滚动的规则配置信息，和允许对目标页面的导航栏进行自定义的规则配置信息中的一种或者两种的组合。其中，禁止目标页面全局滚动的规则配置信息可以是将目标页面的配置文件中配置项"disableScroll"置为true实现，此时若需要实现在目标页面中的某一区域进行滚动，则需要采用滚动视图的方式(即scroll-view)实现；允许对目标页面的导航栏进行自定义的规则配置信息可以是将目标页面的配置文件中配置项"navigationStyle"置为"custom"，此时需要对目标页面的导航栏进行自定义设计；在对目标页面进行配置，将用于渲染目标页面的渲染器设置为目标渲染引擎Skyline之后，对目标页面进行针对目标渲染引擎Skyline的规则适配，可以减少人工对目标页面进行针对目标渲染引擎Skyline的规则适配时，由于遗忘或规则适配错误导致目标渲染引擎Skyline出错的可能性。
在一些实施例中，目标渲染引擎Skyline支持常用的属性，布局支持弹性布局(即flex布局)以及绝对定位和相对定位布局(即absolute&relative定位布局)，因此在对目标页面进行配置，将用于渲染目标页面的渲染器设置为目标渲染引擎Skyline之后，还可以针对目标渲染引擎Skyline进行样式适配。在一些实施例中，目标渲染引擎Skyline支持依赖按需注入特性，通常情况下，在小程序启动时，启动页面依赖的所有代码包(主包、分包、插件包、扩展库等)的所有JS代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的JS代码会被立刻执行，这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用；而按 需注入可以使得小程序仅注入当前访问页面所需的自定义组件和页面代码，未访问的页面、当前页面未声明的自定义组件不会被加载和初始化，对应代码文件将不被执行，可以减少注入耗时和内存占用；在一些实施例中，可以通过在小程序的全局配置页面中添加"lazyCodeLoading":"requiredComponents"字段实现对依赖按需注入特性的配置。
在一个实施例中，由于调用目标渲染引擎Skyline对目标页面进行渲染处理时，可以通过渲染线程调用布局渲染框架Flutter得到目标页面的布局信息，进而可以基于目标页面的布局信息完成目标页面的绘制显示，但通常来说，目标渲染引擎Skyline所使用的编程语言与布局渲染框架Flutter所使用的编程语言不同，目标渲染引擎Skyline通常使用JavaScript语言，Flutter通常使用Dart语言，所以需要实现JavaScript语言与Dart语言之间的跨语言通信，以使可以通过目标渲染引擎Skyline实现对布局渲染框架Flutter的调用。在一种可行的实施方式中，可以依托小程序的宿主程序对象来实现JavaScript语言与Dart语言之间的跨语言通信，在一些实施例中，可以通过在目标渲染引擎Skyline的逻辑处理线程的运行环境与宿主程序对象提供的交互环境之间创建第一通信接口，来实现逻辑处理线程与宿主程序对象的通信，可以通过在目标渲染引擎Skyline的渲染线程的运行环境与宿主程序对象提供的交互环境之间创建第二通信接口，实现渲染线程与宿主程序对象的通信；由于逻辑处理线程的运行环境为JavaScript VM(即JavaScript程序虚拟机)，宿主程序对象可以提供基于C/C++语言的交互环境，即原生环境，渲染线程的运行环境为布局渲染框架Flutter的运行环境，Dart VM(即Dart程序虚拟机)，所以可以通过创建的第一通信接口实现JavaScript与C/C++的跨语言通信，通过创建的第二通信接口实现Dart与C/C++的跨语言通信，也即可以通过第二通信接口实现布局渲染框架Flutter与宿主程序对象的通信。
在一些实施例中，由于JavaScript VM提供有通信机制(JSBinding机制)与C/C++通信，Dart VM提供有通信接口(Dart API和Dart FFI)与C/C++通信，所以此时第一通信接口可以为基于JSBinding机制构建的第一通信接口，第二通信接口可以为Dart API和Dart FFI中的任意一种；在一些实施例中，基于性能的考量，选用Dart FFI作为第二通信接口效果更好。参见图3，为本申请实施例提供的一种跨语言通信的示意图，JavaScript与C/C++之间基于JSBinding机制实现跨语言通信，Dart与C/C++之间基于Dart FFI实现跨语言通信，基于此可实现JavaScrip与Dart的跨语言通信。
特别需要说明的是，在本申请的具体实施方式中，涉及到对象相关的数据，例如目标页面对应的组件数据包括与对象相关的数据，当本申请实施例运用到具体产品或技术中时，需要获得对象许可或者同意，且相关数据的收集、使用和处理需要遵守当地法律法规和标准。
基于上述页面渲染方案，本申请实施例提供了一种页面渲染方法。参见图4，为本申请实施例提供的一种页面渲染方法的流程示意图。图4所示的页面渲染方法可由电子设备执行。图4所示的页面渲染方法可包括如下步骤：
S401，解析目标页面得到对应的页面配置树Widget Tree。
在一个实施例中，电子设备对目标页面进行样式解析处理，得到目标页面对应的页面配置树Widget Tree，可以包括：解析目标页面，得到组件数据(即this.data)；根据目标页面的页面模板和组件数据，创建页面模板对应的组件节点树Shadow Tree；根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree；其中，目标页面的页面模板可以为用于描述目标页面的页面结构的模板，可以为WXML模板，组件数据可以为需要填充至目标页面的页面模板中的数据。在一些实施例中，电子设备对目标页面进行样式解析处理，可以是通过目标渲染引擎Skyline中的逻辑处理线程实现的，目标页面对应的页面配置树Widget Tree中包含了应用样式，可以被传递至目标渲染引 擎Skyline中的渲染线程进行后续处理；对象在显示于终端设备的当前页面中执行了触发显示目标页面的相关操作之后，目标渲染引擎Skyline可以通过逻辑处理线程执行小程序JS逻辑任务，即可以响应对象在当前页面的触发操作，生成渲染目标页面的路由事件，可以根据该路由事件执行小程序框架逻辑任务，即可以执行创建组件节点树Shadow Tree的相关过程，可以执行样式计算任务，即可以根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree，并将目标页面对应的页面配置树Widget Tree传递给渲染线程，即传递给布局渲染框架Flutter。在一些实施例中，组件节点树Shadow Tree还可以是通过调用第一通信接口将内容数据传递给小程序的宿主程序对象后创建得到的，内容数据可以包括页面模板和组件数据。也即，调用第一通信接口将内容数据传递给小程序的宿主程序对象，所述内容数据包括所述页面模板和所述组件数据；通过所述宿主程序对象根据所述内容数据创建所述页面模板对应的组件节点树。
在一些实施例中，宿主程序对象可以是通过第二通信接口将创建得到的页面配置树Widget Tree传递给布局渲染框架Flutter的。
在一些实施例中，电子设备根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree，可以包括：对组件节点树Shadow Tree中的各个节点进行样式匹配处理，得到组件节点树Shadow Tree中各个节点对应的元素样式(ComputedStyle)；根据组件节点树Shadow Tree中各个节点对应的元素样式ComputedStyle生成对应的页面配置节点(可以是页面配置节点Widget)；组合组件节点树Shadow Tree中各个节点对应的页面配置节点Widget，得到页面配置树Widget Tree。在一些实施例中，电子设备对组件节点树Shadow Tree中的各个节点进行样式匹配处理，得到组件节点树Shadow Tree中各个节点对应的元素样式ComputedStyle，可以包括：遍历组件节点树Shadow Tree中的各个节点；对当前遍历的节点执行膨胀流程(即Inflate流程)及样式重计算流程(即RecalcStyle流程)，在该流程内会对当前遍历的节点进行样式匹配计算，得到当前遍历的节点对应的元素样式ComputedStyle；在一些实施例中，遍历组件节点树Shadow Tree中的各个节点时，可以采用先序遍历、中序遍历等方式，本申请实施例以先序遍历进行阐述。在一些实施例中，组合组件节点树Shadow Tree中各个节点对应的页面配置节点Widget时，可以按照组件节点树Shadow Tree的结构进行组合。
在一种可行的实施方式中，目标渲染引擎Skyline可以提供一种内置于小程序基础库中的组件组织框架Exparser；可以为小程序的各种组件提供基础支持以及对组件进行组织管理；可以维护整个页面的节点树相关信息，对节点树执行相应操作。在通过逻辑处理线程执行小程序JS逻辑任务生成渲染目标页面的路由事件之后，可以将该路由事件发送至小程序基础库中；小程序基础库接收到该路由事件之后，可以通过组件组织框架Exparser根据该路由事件执行小程序框架逻辑任务，即可以执行创建组件节点树Shadow Tree的相关过程，还可以由组件组织框架Exparser执行样式计算任务，即可以根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree，并将目标页面对应的页面配置树Widget Tree传递给渲染线程。
在一些实施例中，电子设备通过组件组织框架Exparser创建页面模板对应的组件节点树Shadow Tree，可以是在逻辑处理线程的运行环境JavaScript VM中，通过调用第一通信接口将内容数据传递给小程序的宿主程序对象提供的基于C/C++语言的交互环境(即原生环境)后，在原生环境中创建得到的，然后可以在原生环境中根据组件节点树Shadow Tree创建目标页面对应的页面配置树Widget Tree，进而可以通过第二通信接口将页面配置树Widget Tree传递至布局渲染框架Flutter的运行环境Dart VM中，以实现将页面配置树Widget Tree传递至布局渲染框架Flutter。参见图5，为本申请实施例提供的一种创建目标页面对应的页面配置树Widget Tree的示意图；其中，501所示为目标 页面的页面模板对应的节点树，502所示为组件节点树Shadow Tree，503标记所示为对组件节点树Shadow Tree中的各个节点进行样式匹配处理后得到的组件节点树Shadow Tree，504标记所示为页面配置树Widget Tree，505标记所示为其中一个页面配置节点Widget，506标记所示为传递至布局渲染框架Flutter中的页面配置树Widget Tree。
S402，使用跨平台布局系统得到目标页面的布局信息。
其中，跨平台布局系统Yoga通过基于页面配置树Widget Tree构建的布局节点树Yoga Tree，并通过遍历布局节点树Yoga Tree中的各个节点进行节点布局处理后得到目标页面的布局信息；在一些实施例中，布局节点树Yoga Tree可以是跨平台布局系统Yoga基于页面配置树Widget Tree构建的，跨平台布局系统Yoga可以运行于原生环境中，在一些实施例中，跨平台布局系统Yoga首先根据所述页面配置树中的各个节点构建元素树，然后对元素树进行差异分析，得到页面配置树对应的渲染对象树，渲染对象数在发起布局的时候，调用Layout方法，得到布局节点树Yoga Tree。在根据页面配置树中的各个节点构建元素树时，可以通过调用createElement()方法创建每个Element对象，从而基于Element对象形成元素树。在一些实施例中，布局节点树Yoga Tree也可以是原生环境中其他能实现布局节点树Yoga Tree的构建的平台构建的，本申请实施例以布局节点树Yoga Tree是跨平台布局系统Yoga基于页面配置树Widget Tree构建的为例进行阐述。
在一个实施例中，电子设备通过布局渲染框架Flutter调用跨平台布局系统Yoga得到目标页面的布局信息，可以是通过目标渲染引擎Skyline中的渲染线程实现的，可以包括：通过布局渲染框架Flutter调用跨平台布局系统Yoga；通过跨平台布局系统Yoga构建页面配置树Widget Tree对应的布局节点树Yoga Tree；通过跨平台布局系统Yoga遍历布局节点树Yoga Tree中的各个节点进行节点布局处理，得到目标页面的布局信息，并将目标页面的布局信息存储至共享内存中；通过布局渲染框架Flutter从共享内存中获取目标页面的布局信息。其中，布局节点树Yoga Tree中包含的节点对应于渲染目标页面时需要被渲染的各个元素，即从当前页面跳转到目标页面时，页面中有变化的部分；遍历布局节点树Yoga Tree中的各个节点时，可以采用先序遍历、中序遍历等方式，本申请实施例不做限制；目标页面的布局信息可以包括渲染目标页面时需要被渲染的各个元素的属性信息，例如与尺寸、位置等相关的属性。在一些实施例中，通过跨平台布局系统Yoga遍历布局节点树Yoga Tree中的各个节点进行节点布局处理的过程中，通过所述跨平台布局系统遍历所述布局节点树对所述布局节点树中的各个节点应用布局算法，得到各个节点的布局信息，这里得到的布局信息至少包括节点与其父节点之间的偏移信息；当得到的一个节点的布局信息中不包括该节点的尺寸信息时，对该节点进行测量处理，得到该节点的尺寸信息；将并节点的尺寸信息纳入所述节点的布局信息；最后将布局节点树中各个节点的布局信息确定为所述目标页面的布局信息。其中，可以是对节点布局树中各个节点应用block/flex的布局算法，如果此时能够得到节点相对于其父节点之间的偏移量，以及该节点的尺寸信息(包括宽度和高度)，那么将该节点与且父节点之间的偏移量和尺寸信息确定为该节点的布局信息。其中，一个节点与其父节点之间的偏移量，可以是基于该节点的位置信息与其父节点的位置信息确定的，是指该节点所在的位置相对于其父节点所在的位置之间的偏移量。
在一些实施例中，如果通过布局算法，仅得到了节点与其父节点之间的偏移量，那么需要对该节点进行测量处理，在一些实施例中，可以调用measure方法，对节点进行测量处理，得到节点的宽度和高度。对于图片、文本等节点，是具有固定尺寸的。以图片节点为例，在生成图片的时候就已经确定出图片的尺寸了，但是对于跨平台布局系统来说，通过布局算法得不到图片的尺寸，此时需要通过调用measure方法从图片的解 码器获取图片的尺寸信息。
在一些实施例中，目标页面的布局信息可以包括布局节点树Yoga Tree中各个节点的布局信息，则电子设备还可以通过布局渲染框架Flutter构建页面配置树Widget Tree对应的渲染对象树Render Object Tree，其中，渲染对象树Render Object Tree中的各个节点与布局节点树Yoga Tree中的各个节点一一对应；那么此时，通过布局渲染框架Flutter从共享内存中获取目标页面的布局信息，可以包括：通过布局渲染框架Flutter从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息；根据获取到的各个节点的布局信息，对应地确定渲染对象树Render Object Tree中各个节点的布局信息。
其中，渲染对象树Render Object Tree中包含的节点对应于渲染目标页面时需要被渲染的各个元素，即从当前页面跳转到目标页面时，页面中有变化的部分，基于此，电子设备通过布局渲染框架Flutter构建页面配置树Widget Tree对应的渲染对象树Render Object Tree，可以包括：根据页面配置树Widget Tree中的各个节点构建元素树(Element Tree)，对元素树Element Tree进行差异分析，得到页面配置树Widget Tree对应的渲染对象树Render Object Tree。在一些实施例中，电子设备通过布局渲染框架Flutter，对元素树Element Tree进行差异分析，得到页面配置树Widget Tree对应的渲染对象树Render Object Tree时，可以获取用于渲染当前页面的元素树Element Tree，称为对比元素树，基于该元素树Element Tree和对比元素树之间的节点差异，生成页面配置树Widget Tree对应的渲染对象树Render Object Tree。在一些实施例中，若目标页面为启动小程序后显示的第一个小程序页面，则对比元素树为空，可以直接基于该元素树Element Tree生成页面配置树Widget Tree对应的渲染对象树Render Object Tree。
在一些实施例中，通过布局渲染框架Flutter从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息，根据获取到的各布局信息，对应地确定渲染对象树Render Object Tree中各个节点的布局信息，可以是基于布局渲染框架Flutter对渲染对象树Render Object Tree进行遍历得到的，在一些实施例中，对渲染对象树Render Object Tree进行遍历可以采用先序遍历、中序遍历等方式，本申请实施例不做限制。
在一个实施例中，参见图6a，为本申请实施例提供的一种得到目标页面的布局信息的流程示意图；电子设备可以通过布局渲染框架Flutter构建页面配置树Widget Tree对应的渲染对象树Render Object Tree，通过布局渲染框架Flutter调用跨平台布局系统Yoga；通过跨平台布局系统Yoga构建页面配置树Widget Tree对应的布局节点树Yoga Tree，通过跨平台布局系统Yoga遍历布局节点树Yoga Tree中的各个节点进行节点布局处理，得到布局节点树Yoga Tree中各个节点的布局信息，并将布局节点树Yoga Tree中各个节点的布局信息存储至共享内存中；通过布局渲染框架Flutter从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息，根据获取到的各布局信息，对应地确定渲染对象树Render Object Tree中各个节点的布局信息。
在一些实施例中，电子设备通过布局渲染框架Flutter调用跨平台布局系统Yoga，可以通过重写用于遍历渲染对象树Render Object Tree中的各个节点进行节点布局处理的布局方法实现，可以通过重写后的布局方法performLayout调用跨平台布局系统Yoga中所使用的布局方法CalculateLayout，来实现通过跨平台布局系统Yoga遍历布局节点树Yoga Tree中的各个节点进行节点布局处理的相关操作。参见图6b，为本申请实施例提供的一种确定渲染对象树Render Object Tree中各个节点的布局信息的示意图；其中，如601标记所示为布局渲染框架Flutter的运行环境(即Dart VM)，其中的树为渲染对象树Render Object Tree，如602标记所示为跨平台布局系统的运行环境(即C/C++原生环境)，其中的树为布局节点树Yoga Tree；电子设备通过布局渲染框架Flutter构建页面配置树Widget Tree对应的渲染对象树Render Object Tree之后，可以通过重写后的 布局方法performLayout进入布局主流程；调用跨平台布局系统Yoga进入布局子流程，在通过跨平台布局系统Yoga构建页面配置树Widget Tree对应的布局节点树Yoga Tree之后，可以通过跨平台布局系统Yoga中所使用的布局方法CalculateLayout进入跨平台布局系统Yoga中的布局流程，跨平台布局系统Yoga可以遍历布局节点树Yoga Tree中的各个节点进行节点布局处理，得到布局节点树Yoga Tree中各个节点的布局信息，并将布局节点树Yoga Tree中各个节点的布局信息存储至共享内存中，例如得到的其中一个节点的布局信息可以如图6b中所示，包括：上边缘top为300像素(px)、左边缘left为150px、宽width为10px、高height为10px；结束布局子流程并返回布局主流程，通过布局渲染框架Flutter继续执行布局主流程，即继续执行重写后的布局方法performLayout，以从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息，并根据获取到的各布局信息，对应地确定渲染对象树Render Object Tree中各个节点的布局信息；得到渲染对象树Render Object Tree中各个节点的布局信息之后，结束布局主流程。基于上述描述可知，基于重写布局渲染框架Flutter中的布局方法以及设定共享内存的方式，打通了布局渲染框架Flutter中的布局过程和跨平台布局系统中的布局过程，实现了通过布局渲染框架Flutter对跨平台布局系统Yoga的调用，可以提高目标页面的布局信息的获取速率，进而可以提高对页面进行渲染处理时的渲染速率。
S403，基于目标页面的布局信息和渲染对象树Render Object Tree，生成绘制指令。
在一个实施例中，渲染对象树Render Object Tree是布局渲染框架根据页面配置树Widget Tree得到的。布局渲染框架Flutter根据页面配置树Widget Tree得到渲染对象树Render Object Tree的相关过程已在上述步骤S402中进行阐述，可参考步骤S402的实现过程实现；目标页面的布局信息包括渲染对象树Render Object Tree中各个节点的布局信息；电子设备基于目标页面的布局信息和渲染对象树Render Object Tree，生成绘制指令可以通过渲染流程实现，可以基于渲染对象树Render Object Tree中各个节点的布局信息、渲染对象树Render Object Tree中各个节点的遍历顺序以及节点继承关系等，生成渲染对象树Render Object Tree中各个节点对应的绘制指令。
S404，响应绘制指令，对目标页面进行绘制。
在一个实施例中，电子设备响应绘制指令，对目标页面进行绘制显示可以是通过图形绘制线程实现的，图形绘制线程可以执行页面绘制显示等任务；可以对接收到的绘制指令进行光栅化，将光栅化处理之后的结果发送至GPU中对目标页面进行绘制显示。
本申请实施例中，提供了一种基于布局渲染框架和跨平台布局系统协同实现对页面进行渲染处理的页面渲染方法，在对目标页面进行样式解析处理，得到目标页面对应的页面配置树Widget Tree之后，可以通过布局渲染框架调用跨平台布局系统，跨平台布局系统通过基于页面配置树Widget Tree构建的布局节点树Yoga Tree，并通过遍历布局节点树Yoga Tree中的各个节点进行节点布局处理后得到目标页面的布局信息；进而可以基于目标页面的布局信息生成绘制指令，响应绘制指令完成目标页面的绘制；其中，布局渲染框架可以实现快速构建用户界面，并且在渲染流程的布局任务中引入了更为专业的跨平台布局系统来进行布局处理以得到目标页面的布局信息，可以提高目标页面的布局信息的获取速率，进而可提高对页面进行渲染处理时的渲染速率，实现高效页面渲染，使页面在电子设备中的渲染更加及时。
基于上述页面渲染方法的相关实施例，本申请实施例提供了另一种页面渲染方法。参见图7，为本申请实施例提供的另一种页面渲染方法的流程示意图。图7所示的页面渲染方法可由电子设备执行。图7所示的页面渲染方法可包括如下步骤：
S701，对目标页面进行解析得到对应的页面配置树Widget Tree。
S702，通过布局渲染框架Flutter根据页面配置树Widget Tree中的各个节点构建元 素树Element Tree。
S703，通过布局渲染框架Flutter对元素树Element Tree进行差异分析，得到页面配置树Widget Tree对应的渲染对象树Render Object Tree。
S704，通过布局渲染框架Flutter调用跨平台布局系统Yoga。
S705，通过跨平台布局系统Yoga构建页面配置树Widget Tree对应的布局节点树Yoga Tree。
其中，布局节点树Yoga Tree中的各个节点与渲染对象树Render Object Tree中的各个节点一一对应。
S706，通过跨平台布局系统Yoga遍历布局节点树Yoga Tree中的各个节点进行节点布局处理，得到布局节点树Yoga Tree中各个节点的布局信息，并将布局节点树Yoga Tree中各个节点的布局信息存储至共享内存中。
S707，通过布局渲染框架Flutter从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息，并根据获取到的各布局信息，对应地确定渲染对象树Render Object Tree中各个节点的布局信息。
S708，若通过布局渲染框架Flutter从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息失败，则遍历渲染对象树Render Object Tree中的各个节点进行节点布局处理，得到目标页面的布局信息。
其中，目标页面的布局信息包括渲染对象树Render Object Tree中各个节点的布局信息。
S709，基于目标页面的布局信息，以及布局渲染框架Flutter根据页面配置树Widget Tree得到的渲染对象树Render Object Tree，生成绘制指令。
S710，响应绘制指令完成目标页面的绘制。
S711，若通过布局渲染框架Flutter从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息成功，则执行基于目标页面的布局信息，以及布局渲染框架Flutter根据页面配置树Widget Tree得到的渲染对象树Render Object Tree，生成绘制指令，以及响应绘制指令完成目标页面的绘制的操作；目标页面的布局信息包括渲染对象树Render Object Tree中各个节点的布局信息。
其中，步骤S701至步骤S711的相关过程与上述步骤S401至步骤S404的相关过程类似；在一些实施例中，电子设备在对目标页面进行样式解析处理，得到目标页面对应的页面配置树Widget Tree之后，既可以通过布局渲染框架Flutter调用跨平台布局系统Yoga得到布局节点树Yoga Tree中各个节点的布局信息，并将布局节点树Yoga Tree中各个节点的布局信息存储至共享内存中，还可以通过布局渲染框架Flutter遍历渲染对象树Render Object Tree中的各个节点进行节点布局处理；布局渲染框架Flutter可以优先从共享内存中获取布局节点树Yoga Tree中各个节点的布局信息，并对应地确定渲染对象树Render Object Tree中各个节点的布局信息，并在获取布局节点树Yoga Tree中各个节点的布局信息失败的情况下，获取通过布局渲染框架Flutter遍历渲染对象树Render Object Tree中的各个节点进行节点布局处理得到的目标页面的布局信息。
本申请实施例中，可以先通过布局渲染框架调用跨平台布局系统，通过跨平台布局系统得到布局节点树Yoga Tree中各个节点的布局信息，并将布局节点树Yoga Tree中各个节点的布局信息存储至共享内存中，再通过布局渲染框架从共享内存中获取的布局节点树Yoga Tree中各个节点的布局信息，对应地确定渲染对象树Render Object Tree中各个节点的布局信息，作为目标页面的布局信息；并在通过布局渲染框架从共享内存中获取的布局节点树Yoga Tree中各个节点的布局信息失败的情况下，对渲染对象树Render Object Tree中的各个节点进行节点布局处理，来得到渲染对象树Render Object  Tree中各个节点的布局信息，可以在通过布局渲染框架调用跨平台布局系统得到目标页面的布局信息失败的情况下进行兜底处理，增大了目标页面的布局信息获取的容错率，提高了页面渲染的稳定性，减少渲染失败的可能。
基于上述页面渲染方法实施例，本申请实施例提供了一种页面渲染装置。参见图8，为本申请实施例提供的一种页面渲染装置的结构示意图，该页面渲染装置可包括配置单元801、逻辑处理单元802、渲染单元803以及图形绘制单元804。图8所示的页面渲染装置可运行如下单元：
逻辑处理单元802，配置为对解析目标页面得到对应的页面配置树；渲染单元803，配置为使用跨平台布局系统得到所述目标页面的布局信息；其中，所述目标页面的布局信息是所述跨平台布局系统通过遍历布局节点树中的各个节点进行节点布局处理后得到的，所述布局节点树是基于所述页面配置树构建的；所述渲染单元803，还配置为基于所述目标页面的布局信息和渲染对象树，生成绘制指令；图形绘制单元804，配置为响应所述绘制指令，对所述目标页面进行绘制。
在一个实施例中，所述逻辑处理单元802解析目标页面得到所述目标页面对应的页面配置树时，执行如下操作：解析所述目标页面，得到组件数据；根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树；根据所述组件节点树创建所述目标页面对应的页面配置树。
在一个实施例中，所述目标页面为小程序页面，所述逻辑处理单元802根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树时，执行如下操作：调用第一通信接口将内容数据传递给小程序的宿主程序对象，所述内容数据包括所述页面模板和所述组件数据；通过所述宿主程序对象根据所述内容数据创建所述页面模板对应的组件节点树。
在一个实施例中，所述逻辑处理单元802根据所述组件节点树创建所述目标页面对应的页面配置树时，执行如下操作：对所述组件节点树中的各个节点进行样式匹配处理，得到所述组件节点树中各个节点对应的元素样式；根据所述组件节点树中各个节点对应的元素样式，生成对应的页面配置节点；组合所述组件节点树中各个节点对应的页面配置节点，得到所述页面配置树。
在一个实施例中，所述渲染单元803使用跨平台布局系统得到所述目标页面的布局信息时，执行如下操作：通过布局渲染框架调用所述跨平台布局系统；获取所述页面配置树对应的布局节点树；通过所述跨平台布局系统遍历所述布局节点树中的各个节点，进行节点布局处理，得到所述目标页面的布局信息，并将所述目标页面的布局信息存储至共享内存中；从所述共享内存中获取所述目标页面的布局信息。
在一个实施例中，所述渲染单元803通过所述跨平台布局系统遍历所述布局节点树中的各个节点，进行节点布局处理时，得到所述目标页面的布局信息，执行如下操作：通过所述跨平台布局系统遍历所述布局节点树，对所述布局节点树中的各个节点应用布局算法，得到所述各个节点的布局信息，所述布局信息至少包括节点与其父节点之间的偏移信息；当节点的布局信息中不包括所述节点的尺寸信息时，对所述节点进行测量处理，得到所述节点的尺寸信息；将所述节点的尺寸信息纳入所述节点的布局信息；将所述布局节点树中各个节点的布局信息确定为所述目标页面的布局信息。
在一个实施例中，所述目标页面的布局信息包括所述布局节点树中各个节点的布局信息；所述渲染单元803还配置为：构建所述页面配置树对应的渲染对象树；所述渲染对象树中的各个节点与所述布局节点树中的各个节点一一对应；
所述渲染单元803从所述共享内存中获取所述目标页面的布局信息时，执行如下操作：通过所述布局渲染框架从所述共享内存中获取所述布局节点树中各个节点的布局 信息；根据获取到的各布局信息，对应地确定所述渲染对象树中各个节点的布局信息。
在一个实施例中，所述渲染单元803还配置为：根据所述页面配置树中的各个节点构建元素树；对所述元素树进行差异分析，得到所述页面配置树对应的渲染对象树。
在一个实施例中，在所述逻辑处理单元802解析目标页面之前，所述配置单元801配置为：获取所述目标页面的配置信息；所述配置信息包括：将所述目标页面的配置文件中用于渲染所述目标页面的渲染器设置为目标渲染引擎；所述目标渲染引擎通过逻辑处理线程、渲染线程以及图形绘制线程对页面进行渲染处理；其中，所述逻辑处理线程用于对所述目标页面进行解析处理，所述渲染线程用于通过所述布局渲染框架调用所述跨平台布局系统得到所述目标页面的布局信息以及生成所述绘制指令，所述图形绘制线程用于响应所述绘制指令完成所述目标页面的绘制。
在一个实施例中，所述配置单元801还配置为：获取针对所述目标渲染引擎的规则配置信息；所述规则配置信息包括禁止所述目标页面全局滚动的规则配置信息，和允许对所述目标页面的导航栏进行自定义的规则配置信息中的一种或者两种的组合。
根据本申请的一个实施例，图4以及图7所示的页面渲染方法所涉及的各个步骤可以是由图8所示的页面渲染装置中的各个单元来执行的。例如，图4所示的步骤S401可由图8所示的页面渲染装置中的逻辑处理单元802来执行；图4所示的步骤S402至步骤S403可由图8所示的页面渲染装置中的渲染单元803来执行；图4所示的步骤S404可由图8所示的页面渲染装置中的图形绘制单元804来执行。又如，图7所示的步骤S701可由图8所示的页面渲染装置中的逻辑处理单元802来执行；图7所示的步骤S702至步骤S709可由图8所示的页面渲染装置中的渲染单元803来执行；图7所示的步骤S710可由图8所示的页面渲染装置中的图形绘制单元804来执行；图7所示的步骤S711可由图8所示的页面渲染装置中的渲染单元803和图形绘制单元804协同执行。
根据本申请的另一个实施例，图8所示的页面渲染装置中的各个单元可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本申请的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本申请的其它实施例中，基于逻辑功能划分的页面渲染装置也可以包括其它单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。
根据本申请的另一个实施例，可以通过在包括中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件的例如计算机的通用计算设备上运行能够执行如图4以及图7所示的相应方法所涉及的各步骤的计算机程序(包括程序代码)，来构造如图8中所示的页面渲染装置，以及来实现本申请实施例页面渲染方法。所述计算机程序可以记载于例如计算机可读存储介质上，并通过计算机可读存储介质装载于上述计算设备中，并在其中运行。
本申请实施例中，提供了一种基于布局渲染框架和跨平台布局系统协同实现对页面进行渲染处理的页面渲染方法，在对目标页面进行样式解析处理，得到目标页面对应的页面配置树Widget Tree之后，可以通过布局渲染框架调用跨平台布局系统，跨平台布局系统通过基于页面配置树Widget Tree构建的布局节点树Yoga Tree，并通过遍历布局节点树Yoga Tree中的各个节点进行节点布局处理后得到目标页面的布局信息；进而可以基于目标页面的布局信息生成绘制指令，响应绘制指令完成目标页面的绘制显示；其中，布局渲染框架可以实现快速构建用户界面，并且在渲染流程的布局任务中引入了更为专业的跨平台布局系统来进行布局处理以得到目标页面的布局信息，可以提高目标页面的布局信息的获取速率，进而可提高对页面进行渲染处理时的渲染速率，实现高效 页面渲染，使页面在电子设备中的渲染更加及时。
基于上述的页面渲染方法实施例以及页面渲染装置实施例，本申请还提供了一种电子设备。参见图9，为本申请实施例提供的一种电子设备的结构示意图。图9所示的电子设备可至少包括处理器901、输入接口902、输出接口903以及计算机存储介质904。其中，处理器901、输入接口902、输出接口903以及计算机存储介质904可通过总线或其他方式连接。
计算机存储介质904可以存储在电子设备的存储器中，计算机存储介质904用于存储计算机程序，计算机程序包括程序指令，处理器901用于执行计算机存储介质904存储的程序指令。处理器901(或称CPU(Central Processing Unit，中央处理器))是电子设备的计算核心以及控制核心，其适于实现一条或多条指令，适于加载并执行一条或多条指令从而实现上述页面渲染方法流程或相应功能。
本申请实施例还提供了一种计算机存储介质(Memory)，计算机存储介质是电子设备中的记忆设备，用于存放程序和数据。可以理解的是，此处的计算机存储介质既可以包括终端中的内置存储介质，当然也可以包括终端所支持的扩展存储介质。计算机存储介质提供存储空间，该存储空间存储了终端的操作系统。并且，在该存储空间中还存放了适于被处理器901加载并执行的一条或多条的指令，这些指令可以是一个或一个以上的计算机程序(包括程序代码)。需要说明的是，此处的计算机存储介质可以是高速随机存取存储器(random access memory，RAM)存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器；还可以是至少一个位于远离前述处理器的计算机存储介质。
在一个实施例中，可由处理器901加载并执行计算机存储介质中存放的一条或多条指令，以实现上述有关图4以及图7的页面渲染方法实施例中的方法的相应步骤，在一些实施例中，处理器901可配置为：
解析目标页面得到对应的页面配置树；通过布局渲染框架调用跨平台布局系统得到所述目标页面的布局信息；其中，所述目标页面的布局信息是所述跨平台布局系统通过遍历布局节点树中的各个节点进行节点布局处理后得到的，所述布局节点树是基于所述页面配置树构建的；基于所述目标页面的布局信息和渲染对象树，生成绘制指令；响应所述绘制指令，对所述目标页面进行绘制。
在一个实施例中，所述处理器901解析目标页面得到对应的页面配置树时，执行如下操作：解析所述目标页面，得到组件数据；根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树；根据所述组件节点树创建所述目标页面对应的页面配置树。
在一个实施例中，所述目标页面为小程序页面，所述处理器901根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树时，执行如下操作：调用第一通信接口将内容数据传递给小程序的宿主程序对象，所述内容数据包括所述页面模板和所述组件数据；通过所述宿主程序对象根据所述内容数据创建所述页面模板对应的组件节点树。
在一个实施例中，所述处理器901根据所述组件节点树创建所述目标页面对应的页面配置树时，执行如下操作：对所述组件节点树中的各个节点进行样式匹配处理，得到所述组件节点树中各个节点对应的元素样式；根据所述组件节点树中各个节点对应的元素样式，生成对应的页面配置节点；组合所述组件节点树中各个节点对应的页面配置节点，得到所述页面配置树。
在一个实施例中，所述处理器901使用跨平台布局系统得到所述目标页面的布局信息时，执行如下操作：通过所述布局渲染框架调用所述跨平台布局系统；获取所述页 面配置树对应的布局节点树；通过所述跨平台布局系统遍历所述布局节点树中的各个节点进行节点布局处理，得到所述目标页面的布局信息，并将所述目标页面的布局信息存储至共享内存中；通过所述布局渲染框架从所述共享内存中获取所述目标页面的布局信息。
在一个实施例中，所述处理器901通过所述跨平台布局系统遍历所述布局节点树中的各个节点，进行节点布局处理，得到所述目标页面的布局信息时，执行如下操作：通过所述跨平台布局系统遍历所述布局节点树，对所述布局节点树中的各个节点应用布局算法，得到所述各个节点的布局信息，所述布局信息至少包括节点与其父节点之间的偏移信息；当节点的布局信息中不包括所述节点的尺寸信息时，对所述节点进行测量处理，得到所述节点的尺寸信息；将所述节点的尺寸信息纳入所述节点的布局信息；将所述布局节点树中各个节点的布局信息确定为所述目标页面的布局信息。。
在一个实施例中，所述目标页面的布局信息包括所述布局节点树中各个节点的布局信息；所述处理器901还配置为：构建所述页面配置树对应的渲染对象树；所述渲染对象树中的各个节点与所述布局节点树中的各个节点一一对应；
所述处理器901从所述共享内存中获取所述目标页面的布局信息时，执行如下操作：通过所述布局渲染框架从所述共享内存中获取所述布局节点树中各个节点的布局信息；根据获取到的各布局信息，对应地确定所述渲染对象树中各个节点的布局信息。
在一个实施例中，所述处理器901还配置为：根据所述页面配置树中的各个节点构建元素树；对所述元素树进行差异分析，得到所述页面配置树对应的渲染对象树。
在一个实施例中，所述处理器901解析目标页面之前，还配置为：获取对所述目标页面的配置信息；所述配置信息包括：将所述目标页面的配置文件中用于渲染所述目标页面的渲染器设置为目标渲染引擎；所述目标渲染引擎通过逻辑处理线程、渲染线程以及图形绘制线程对页面进行渲染处理；其中，所述逻辑处理线程用于对所述目标页面进行样式解析处理，所述渲染线程用于通过所述布局渲染框架调用所述跨平台布局系统得到所述目标页面的布局信息以及生成所述绘制指令，所述图形绘制线程用于响应所述绘制指令完成所述目标页面的绘制。
在一个实施例中，所述处理器901还配置为：获取针对所述目标渲染引擎的规则配置信息；所述规则配置信息包括禁止所述目标页面全局滚动的规则配置信息，和允许对所述目标页面的导航栏进行自定义的规则配置信息中的一种或者两种的组合。
本申请实施例提供了一种计算机程序产品，计算机程序产品包括计算机程序，该计算机程序存储在计算机存储介质中；电子设备的处理器从计算机存储介质中读取该计算机程序，处理器执行该计算机程序，使得电子设备执行上述如图4以及图7所示的方法实施例。其中，计算机可读存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (15)

  1. 一种页面渲染方法，应用于电子设备，包括：
    解析目标页面得到对应的页面配置树；
    使用跨平台布局系统得到所述目标页面的布局信息；其中，所述跨平台布局系统遍历布局节点树中的各个节点，进行节点布局处理得到所述目标页面的页面布局信息，所述布局节点树是利用所述页面配置树构建的；
    基于所述页面布局信息和渲染对象树，生成绘制指令；
    响应所述绘制指令，对所述目标页面进行绘制。
  2. 如权利要求1所述的方法，其中，所述解析目标页面得到对应的页面配置树，包括：
    解析所述目标页面，得到组件数据；
    根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树；
    根据所述组件节点树创建所述目标页面对应的页面配置树。
  3. 如权利要求2所述的方法，其中，所述目标页面为小程序页面，所述根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树，包括：
    调用第一通信接口将内容数据传递给小程序的宿主程序对象，所述内容数据包括所述页面模板和所述组件数据；
    通过所述宿主程序对象根据所述内容数据创建所述页面模板对应的组件节点树。
  4. 如权利要求2或3所述的方法，其中，所述根据所述组件节点树创建所述目标页面对应的页面配置树，包括：
    对所述组件节点树中的各个节点进行样式匹配处理，得到所述组件节点树中各个节点对应的元素样式；
    根据所述组件节点树中各个节点对应的元素样式，生成对应的页面配置节点；
    组合所述组件节点树中各个节点对应的页面配置节点，得到所述页面配置树。
  5. 如权利要求1至3任一项所述的方法，其中，所述使用跨平台布局系统得到所述目标页面的布局信息，包括：
    通过布局渲染框架调用所述跨平台布局系统；
    获取所述页面配置树对应的布局节点树；
    通过所述跨平台布局系统遍历所述布局节点树中的各个节点，进行节点布局处理，得到所述目标页面的布局信息，将所述目标页面的布局信息存储至共享内存中；
    从所述共享内存中获取所述目标页面的布局信息。
  6. 如权利要求5所述的方法，其中，所述通过所述跨平台布局系统遍历所述布局节点树中的各个节点，进行节点布局处理，得到所述目标页面的布局信息，包括：
    通过所述跨平台布局系统遍历所述布局节点树，对所述布局节点树中的各个节点应用布局算法，得到所述各个节点的布局信息，所述布局信息至少包括所述节点与其父节点之间的偏移信息；
    当节点的布局信息中不包括所述节点的尺寸信息时，对所述节点进行测量处理，得到所述节点的尺寸信息；
    将所述节点的尺寸信息纳入所述节点的布局信息；
    将所述布局节点树中各个节点的布局信息确定为所述目标页面的布局信息。
  7. 如权利要求5所述的方法，其中，所述目标页面的布局信息包括所述布局节点树中各个节点的布局信息；所述方法还包括：
    构建所述页面配置树对应的渲染对象树；所述渲染对象树中的各个节点与所述布局节点树中的各个节点一一对应；
    所述从所述共享内存中获取所述目标页面的布局信息，包括：
    通过所述布局渲染框架从所述共享内存中获取所述布局节点树中各个节点的布局信息；
    根据获取到的各布局信息，对应地确定所述渲染对象树中各个节点的布局信息。
  8. 如权利要求1至3任一项所述的方法，其中，所述方法还包括：
    根据所述页面配置树中的各个节点构建元素树；
    对所述元素树进行差异分析，得到所述页面配置树对应的渲染对象树。
  9. 如权利要求1至3任一项所述的方法，其中，所述对目标页面进行样式解析处理之前，还包括：
    获取所述目标页面的配置信息；
    所述配置信息包括：将所述目标页面的配置文件中用于渲染所述目标页面的渲染器设置为目标渲染引擎；所述目标渲染引擎通过逻辑处理线程、渲染线程以及图形绘制线程对页面进行渲染处理；
    其中，所述逻辑处理线程用于对所述目标页面进行解析处理，所述渲染线程用于通过所述布局渲染框架调用所述跨平台布局系统得到所述目标页面的布局信息以及生成所述绘制指令，所述图形绘制线程用于响应所述绘制指令，对所述目标页面进行绘制。
  10. 如权利要求9所述的方法，其中，所述方法还包括：
    获取针对所述目标渲染引擎的规则配置信息；
    所述规则配置信息包括禁止所述目标页面全局滚动的规则配置信息，和允许对所述目标页面的导航栏进行自定义的规则配置信息中的一种或者两种的组合。
  11. 一种页面渲染装置，包括：
    逻辑处理单元，配置为对目标页面进行解析得到对应的页面配置树；
    渲染单元，配置为使用跨平台布局系统得到所述目标页面的布局信息；其中，所述跨平台布局系统通过遍历布局节点树中的各个节点，进行节点布局处理得到所述目标页面的布局信息，所述布局节点树是基于所述页面配置树构建的；
    所述渲染单元，还配置为基于所述目标页面的布局信息和渲染对象树，生成绘制指令；
    图形绘制单元，配置为响应所述绘制指令，对所述目标页面进行绘制。
  12. 如权利要求11所述的装置，其中，所述逻辑处理单元对目标页面进行样式解析处理，得到所述目标页面对应的页面配置树，包括：
    解析所述目标页面，得到组件数据；
    根据所述目标页面的页面模板和所述组件数据，创建所述页面模板对应的组件节点树；
    根据所述组件节点树创建所述目标页面对应的页面配置树。
  13. 一种电子设备，所述电子设备包括输入接口和输出接口，还包括：
    处理器，适于实现一条或多条指令；以及，
    计算机存储介质，所述计算机存储介质存储有一条或多条指令，所述一条或多条指令适于由所述处理器加载并执行如权利要求1至10任一项所述的页面渲染方法。
  14. 一种计算机存储介质，所述计算机存储介质中存储有计算机程序指令，所述计算机程序指令被处理器执行时，用于执行如权利要求1至10任一项所述的页面渲染方法。
  15. 一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序 被处理器执行时，用于加载并执行如权利要求1至10任一项所述的页面渲染方法。
PCT/CN2023/119518 2022-09-16 2023-09-18 页面渲染方法、装置、设备、存储介质及计算机程序产品 WO2024056100A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202211134809.4A CN117762407A (zh) 2022-09-16 2022-09-16 页面渲染方法、装置、设备、存储介质及计算机程序产品
CN202211134809.4 2022-09-16

Publications (1)

Publication Number Publication Date
WO2024056100A1 true WO2024056100A1 (zh) 2024-03-21

Family

ID=90274287

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/119518 WO2024056100A1 (zh) 2022-09-16 2023-09-18 页面渲染方法、装置、设备、存储介质及计算机程序产品

Country Status (2)

Country Link
CN (1) CN117762407A (zh)
WO (1) WO2024056100A1 (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150170397A1 (en) * 2012-06-08 2015-06-18 Lg Electronics Inc. Rendering method of 3d web-page and terminal using the same
CN111309424A (zh) * 2020-02-12 2020-06-19 中国平安人寿保险股份有限公司 一种页面还原方法及相关设备
CN112817595A (zh) * 2021-02-20 2021-05-18 Oppo广东移动通信有限公司 界面渲染方法、装置、存储介质及电子设备
CN114924815A (zh) * 2022-03-31 2022-08-19 北京达佳互联信息技术有限公司 页面渲染方法、装置、电子设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150170397A1 (en) * 2012-06-08 2015-06-18 Lg Electronics Inc. Rendering method of 3d web-page and terminal using the same
CN111309424A (zh) * 2020-02-12 2020-06-19 中国平安人寿保险股份有限公司 一种页面还原方法及相关设备
CN112817595A (zh) * 2021-02-20 2021-05-18 Oppo广东移动通信有限公司 界面渲染方法、装置、存储介质及电子设备
CN114924815A (zh) * 2022-03-31 2022-08-19 北京达佳互联信息技术有限公司 页面渲染方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN117762407A (zh) 2024-03-26

Similar Documents

Publication Publication Date Title
CN111552473B (zh) 一种应用程序的处理方法、装置及设备
EP3053028B1 (en) Rendering interpreter for visualizing data provided from restricted environment container
CN107992301B (zh) 用户界面实现方法、客户端及存储介质
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
EP3005301B1 (en) Animation editing
US20160098250A1 (en) Application prototyping tool
CN107656759B (zh) 一种用于用户界面的渲染方法和装置
US9069829B2 (en) Data items manager
CN111339458A (zh) 页面呈现方法和装置
CN113126990A (zh) 一种页面开发方法、装置、设备及存储介质
CN110750664A (zh) 图片的显示方法及装置
CN111737618A (zh) 用于Web端的矢量图显示方法、装置和计算机设备
AU2016256364B2 (en) Rendering graphical assets natively on multiple screens of electronic devices
CN111367518A (zh) 页面布局方法、装置、计算设备及计算机存储介质
WO2024056100A1 (zh) 页面渲染方法、装置、设备、存储介质及计算机程序产品
KR20160019526A (ko) 그래픽 동작들 통합
CN115659087B (zh) 页面渲染方法、设备及存储介质
CN111079382A (zh) 基于mvvm模式的表单渲染方法及系统
US11789747B2 (en) Simulated visual hierarchy while facilitating cross-extension communication
US11281477B2 (en) Assigning computing resources to execution of evaluators for image animation
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN113791783B (zh) 控件生成方法、装置、设备及存储介质
CN112486378B (zh) 图形生成方法、装置、终端及存储介质
CN113741891A (zh) 一种页面处理方法、装置、电子设备及存储介质
CN116149760B (zh) 基于Vue框架的前端项目打包方法及装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23864828

Country of ref document: EP

Kind code of ref document: A1