WO2024260252A1 - 一种页面渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品 - Google Patents

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

Info

Publication number
WO2024260252A1
WO2024260252A1 PCT/CN2024/097277 CN2024097277W WO2024260252A1 WO 2024260252 A1 WO2024260252 A1 WO 2024260252A1 CN 2024097277 W CN2024097277 W CN 2024097277W WO 2024260252 A1 WO2024260252 A1 WO 2024260252A1
Authority
WO
WIPO (PCT)
Prior art keywords
rendering
rendering function
browser
function
calling
Prior art date
Legal status (The legal status 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 status listed.)
Ceased
Application number
PCT/CN2024/097277
Other languages
English (en)
French (fr)
Inventor
张长荣
江炜洲
卢强
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology (Shenzhen) Co Ltd
Original Assignee
Tencent Technology (Shenzhen) Co Ltd
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 Tencent Technology (Shenzhen) Co Ltd filed Critical Tencent Technology (Shenzhen) Co Ltd
Priority to EP24825148.0A priority Critical patent/EP4645122A4/en
Priority to JP2025546965A priority patent/JP2026510235A/ja
Publication of WO2024260252A1 publication Critical patent/WO2024260252A1/zh
Priority to US19/319,494 priority patent/US20260004384A1/en
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/20—Processor architectures; Processor configuration, e.g. pipelining
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/547—Remote procedure calls [RPC]; Web services
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/46—Multiprogramming arrangements
    • G06F9/48—Program initiating; Program switching, e.g. by interrupt
    • G06F9/4806—Task transfer initiation or dispatching
    • G06F9/4843—Task transfer initiation or dispatching by program, e.g. task dispatcher, supervisor, operating system
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/46—Multiprogramming arrangements
    • G06F9/50—Allocation of resources, e.g. of the central processing unit [CPU]
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/46—Multiprogramming arrangements
    • G06F9/50—Allocation of resources, e.g. of the central processing unit [CPU]
    • G06F9/5005—Allocation of resources, e.g. of the central processing unit [CPU] to service a request
    • G06F9/5011—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resources being hardware resources other than CPUs, Servers and Terminals
    • G06F9/5016—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resources being hardware resources other than CPUs, Servers and Terminals the resource being the memory
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/544—Buffers; Shared memory; Pipes
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/60—Memory management
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00—Indexing scheme relating to G06F9/00
    • G06F2209/50—Indexing scheme relating to G06F9/50
    • G06F2209/509—Offload
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00—Indexing scheme relating to G06F9/00
    • G06F2209/54—Indexing scheme relating to G06F9/54
    • G06F2209/541—Client-server
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00—Indexing scheme relating to G06F9/00
    • G06F2209/54—Indexing scheme relating to G06F9/54
    • G06F2209/545—Gui
    • 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 graphics processing technology, and in particular to a page rendering method, device, electronic device, computer-readable storage medium, and computer program product.
  • Mini programs are applications that can be used without downloading and installing, thus providing great convenience for users in using different applications.
  • the operation of mini programs is achieved with the help of embedded browsers (such as WebView). That is, the business logic code of the mini program is interpreted and executed by the browser process, and the graphics rendering function is called by the browser process to render the page frame of the mini program.
  • embedded browsers such as WebView
  • the embodiments of the present application provide a page rendering method, device, electronic device, computer-readable storage medium and computer program product, which can improve the running stability of the mini program.
  • the present application embodiment provides a page rendering method, which is applied to an electronic device, including:
  • a browser process of the browser is started through a client process of the application client, and a business logic code of the applet is executed through the browser process, and the applet runs in the application client;
  • the browser process In response to the browser process executing a calling code for a first rendering function in the business logic code, sending a calling processing request to a client process through the browser process; wherein the first rendering function is a graphics rendering function called by the browser process, and the first rendering function is used to render a page frame of the applet;
  • the second rendering function is used to perform graphics rendering on the page frame of the mini program to obtain a rendering result of the page frame of the mini program.
  • the present application provides a page rendering device, including:
  • a process startup module configured to, in response to a startup operation for a mini-program, start a browser process of a browser through a client process of an application client, and execute the business logic code of the mini-program through the browser process, wherein the mini-program runs in the application client;
  • a request sending module configured to send a call processing request to a client process through the browser process in response to the browser process executing a call code for a first rendering function in the business logic code; wherein the first rendering function is a graphics rendering function called by the browser process, and the first rendering function is used to render a page frame of the applet;
  • a calling processing module configured to, in response to the calling processing request, determine, through the client process, a second rendering function corresponding to the first rendering function, and call the second rendering function; wherein the second rendering function and the first rendering function have the same graphics rendering function;
  • the graphics rendering module is configured to perform graphics rendering on the page frame of the mini program through the second rendering function to obtain a rendering result of the page frame of the mini program.
  • An embodiment of the present application provides an electronic device, including:
  • Memory for storing computer executable instructions or computer programs
  • An embodiment of the present application provides a computer-readable storage medium storing computer-executable instructions or a computer program for causing a processor to execute and implement the page rendering method provided in the embodiment of the present application.
  • An embodiment of the present application provides a computer program product, including a computer program or computer executable instructions, which, when executed by a processor, can implement the page rendering method provided in the embodiment of the present application.
  • the electronic device when the mini-program is started, the electronic device will first start the browser process through the application client process, execute the business logic code of the mini-program through the browser process, and when executing the calling code for the first rendering function in the business logic code, send a call processing request to the client process through the browser process, so as to convert the browser process's call to the first rendering function into a call to the second rendering function by the client process through the call processing request, and perform graphics rendering on the page frame of the mini-program through the second rendering function.
  • the second rendering function is a rendering function with the same graphics rendering function as the first rendering function, in this way, under the premise of ensuring that the graphics rendering function can be implemented normally, the graphics rendering process of the page frame of the mini-program is transferred to the application client for implementation, so that the browser only serves as an executor of the business logic code, thereby greatly reducing the browser's memory consumption and reducing the possibility of the browser process being forced to stop, and ultimately reducing the risk of the mini-program being forced to close, thereby improving the running stability of the mini-program.
  • FIG1 is a schematic diagram of rendering of a page frame of a mini program
  • FIG2 is a schematic diagram of the architecture of a page rendering system provided in an embodiment of the present application.
  • FIG3 is a schematic diagram of the structure of the terminal in FIG2 provided in an embodiment of the present application.
  • FIG4 is a flowchart of a page rendering method according to an embodiment of the present application.
  • FIG5 is a second flow chart of the page rendering method provided in an embodiment of the present application.
  • FIG6 is a third flow chart of the page rendering method provided in an embodiment of the present application.
  • FIG7 is a schematic diagram of the principle of rendering a game screen of a mini-game provided in an embodiment of the present application.
  • FIG8 is a schematic diagram of recording a call to a WebGL function provided by an embodiment of the present application.
  • FIG. 9 is another schematic diagram of recording calls to WebGL functions provided in an embodiment of the present application.
  • first ⁇ second involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that “first ⁇ second” can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.
  • module refers to a computer program or a part of a computer program with a predetermined function, and works together with other related parts to achieve a predetermined goal, and can be fully or partially implemented by using software, hardware (such as processing circuits or memories) or a combination thereof.
  • a processor or multiple processors or memories
  • each module or unit can be part of an overall module or unit that includes the function of the module or unit.
  • Mini Program also known as Web Program, is a program developed based on a front-end language (such as JavaScript) to implement services in a Hypertext Markup Language (HTML) page. It is downloaded by the client via a network (such as the Internet) and interpreted and executed in the client's browser or embedded browser, saving the steps of installation in the client.
  • a mini program for clocking in or gaming services can be downloaded and run in a social network client.
  • Clients are applications that users need to download and install on their terminals (e.g., smartphones) before they can use the application, such as browser clients or social network clients.
  • Client process It is a process allocated to the client on the terminal and is used to implement various functions of the client.
  • Embedded browser is a browser embedded in native applications (referring to applications that can run directly on the operating system). Native applications can use embedded browsers to display web pages. Different operating systems will have different embedded browsers. For example, some operating systems can use UIWebView and WKWebview to display web pages.
  • Browser process It is a process allocated by the embedded browser on the terminal and is used to implement various functions of the browser process.
  • Page frame refers to the unit of rendering and display of the screen content of the mini program. That is, the screen content of the mini program is rendered in units of one page frame and displayed in units of one page frame. Therefore, the screen content of the mini program can be dynamically presented by continuously displaying multiple page frames.
  • Rendering function refers to the function used to define and describe how a page is displayed in web development or applet development. It is usually responsible for converting data into a visual HTML structure and presenting it on the user interface.
  • page rendering functions may vary in different frameworks and platforms, but their core purpose is similar, that is, to define the display logic of the page.
  • Command cache a cache space used to store call information of rendering functions.
  • Business logic code is the code used to complete the business logic. In the embodiment of the present application, it refers to the business logic code of the mini-program, that is, the code part that implements various functions and interactions in the mini-program. These codes may include functions such as login verification, page jump, data request and processing, component operation, etc. Generally speaking, the business logic code of the mini-program mainly includes the following aspects:
  • Page life cycle function In the mini program, each page has its own life cycle function, including callback functions for different stages such as page loading, page display, page hiding, page unloading, etc. Various logical operations can be performed in these functions.
  • the mini program needs to interact with the server for data. It can send requests and process the returned data through the built-in request method, including data parsing, data display and other operations.
  • Event monitoring and processing The pages in the mini program can monitor various user interaction events, such as click events, sliding events, input events, etc., and can implement the corresponding business logic through event processing functions.
  • Component operation Various built-in components and custom components can be used in the mini program to implement different functions of the page, and the display, hiding, style and other operations of the components can be controlled through the relevant API.
  • the business logic code of a mini program is the code part responsible for implementing the various functions and interactions of the mini program. Through these codes, various complex logics and interactive effects of the mini program can be realized.
  • Mini programs are applications that can be used without downloading and installing, thus providing great convenience for users in using different applications. For example, users can use mini programs to clock in and out without installing the corresponding client, or play games and entertainment without installing the corresponding client.
  • the operation of the applet is realized by means of an embedded browser (such as WebView), that is, the business logic code of the applet is interpreted and executed by the browser process, and the graphics rendering function is called by the browser process to render the page frame of the applet.
  • an embedded browser such as WebView
  • FIG1 is a schematic diagram of rendering of a page frame of a mini program.
  • the code of a mini program is usually divided into a business logic code (i.e., the code written by the creator of the mini program to implement the functions of the mini program) 11, an application programming interface (Application Programming Interface, API) 12 for calling the client, and a calling interface for a rendering function 13, which is used to render the page frame of the mini program.
  • a business logic code i.e., the code written by the creator of the mini program to implement the functions of the mini program
  • API Application Programming Interface
  • the embedded browser may be upgraded along with the terminal's operating system (i.e., when the operating system is upgraded, the embedded browser may also be upgraded accordingly).
  • the upgrade of the embedded browser may bring some operational failures (bugs), so when the browser process is used to render the page frame of the applet, a failure may also occur, thereby affecting the normal use of the applet.
  • the embodiments of the present application provide a page rendering method, apparatus, device, computer-readable storage medium, and computer program product, which can reduce the risk of mini-programs being forcibly closed.
  • the following describes an exemplary application of an electronic device for page rendering provided by the embodiments of the present application.
  • the electronic device provided by the embodiments of the present application can be implemented as various types of terminals such as laptops, tablet computers, desktop computers, set-top boxes, mobile devices (for example, mobile phones, portable music players, personal digital assistants, dedicated messaging devices, portable gaming devices), and can also be implemented as a server
  • an exemplary application when the electronic device is implemented as a terminal will be described.
  • FIG. 2 is a schematic diagram of the architecture of the page rendering system provided in an embodiment of the present application.
  • the terminal terminal 400-1 and terminal 400-2 are shown as examples
  • the network 300 can be a wide area network or a local area network, or a combination of the two.
  • a database 500 is also provided for providing data support to the server 200.
  • the database 500 can be independent of the server 200, and can also be configured in the server 200.
  • Figure 2 shows a situation where the database 500 is independent of the server 200.
  • Terminal 400-1 and terminal 400-2 are used to respond to the user's startup operation on the graphical interface 410-1 and the graphical interface 410-2 for the small program, download the program code of the small program from the server 200 through the client process and start the browser process of the browser, and execute the business logic code in the program code of the small program through the browser process; in response to the business logic code, call the first rendering function for the page frame of the small program, send a call processing request to the client process through the browser process, wherein the first rendering function is a graphics rendering function that can be called by the browser process; in response to the call processing request, determine the corresponding second rendering function for the first rendering function through the client process, and call the second rendering function; wherein the second rendering function is a graphics rendering function that can be called by the client process; through the second rendering function, perform graphics rendering on the page frame of the small program to obtain the rendering result of the page frame of the small program; and display the rendering result of each page frame in turn on the graphical interface 410-1 and the graphical interface 410-2.
  • the server 200 is used to send the program code of the mini-program to the terminal 400 - 1 and the terminal 400 - 2 .
  • Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and network within a wide area network or a local area network to achieve data computing, storage, processing, and sharing.
  • Cloud computing is a general term for network technology, information technology, integration technology, management platform, and application technology based on the cloud computing business model. It can form a resource pool, which is used on demand and flexible and convenient. Cloud computing technology will become an important support. The system background services of the technical network require a large amount of computing and storage resources, which need to be realized through cloud computing.
  • server 200 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.
  • Terminals 400-1 and 400-2 may be smart phones, tablet computers, laptops, desktop computers, smart speakers, smart watches, smart home appliances, car terminals, etc., but are not limited thereto.
  • the terminals and servers may be directly or indirectly connected via wired or wireless communications, which is not limited in the embodiments of the present application.
  • FIG. 3 is a schematic diagram of the structure of the terminal (an implementation of an electronic device) in FIG. 2 provided in an embodiment of the present application.
  • the terminal 400 shown in FIG. 3 includes: at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430.
  • the various components in the terminal 400 are coupled together via a bus system 440. It is understandable that the bus system 440 is used to achieve connection and communication between these components.
  • the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for the sake of clarity, various buses are labeled as bus system 440 in FIG. 3 .
  • Processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.
  • DSP digital signal processor
  • the user interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and/or one or more visual display screens.
  • the user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.
  • the memory 450 may be removable, non-removable, or a combination thereof.
  • Exemplary hardware devices include solid-state memory, hard disk drives, optical disk drives, etc.
  • the memory 450 may optionally include one or more storage devices that are physically remote from the processor 410.
  • the memory 450 includes a volatile memory or a nonvolatile memory, and may also include both volatile and nonvolatile memories.
  • the nonvolatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM).
  • the memory 450 described in the embodiments of the present application is intended to include any suitable type of memory.
  • memory 450 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplarily described below.
  • Operating system 451 including system programs for processing various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic services and processing hardware-based tasks;
  • a network communication module 452 for reaching other computing devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 include: Bluetooth, Wireless Compatibility Certification (WiFi), and Universal Serial Bus (USB), etc.;
  • a presentation module 453 for enabling presentation of information via one or more output devices 431 (e.g., display screen, speaker, etc.) associated with the user interface 430 (e.g., a user interface for operating peripherals and displaying content and information);
  • output devices 431 e.g., display screen, speaker, etc.
  • the user interface 430 e.g., a user interface for operating peripherals and displaying content and information
  • the input processing module 454 is used to detect one or more user inputs or interactions from one of the one or more input devices 432 and translate the detected inputs or interactions.
  • the page rendering device provided in the embodiment of the present application can be implemented in software.
  • FIG. 3 shows a page rendering device 455 stored in the memory 450, which can be software in the form of a program and a plug-in, including the following software modules: a process startup module 4551, a request sending module 4552, a call processing module 4553, a graphics rendering module 4554, a script processing module 4555, and a mapping generation module 4556. These modules are logical, so they can be arbitrarily combined or further split according to the functions implemented. The functions of each module will be described below.
  • the page rendering device provided in the embodiments of the present application can be implemented in hardware.
  • the page rendering device provided in the embodiments of the present application can be a processor in the form of a hardware decoding processor, which is programmed to execute the page rendering method provided in the embodiments of the present application.
  • the processor in the form of a hardware decoding processor can adopt one or more application specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field programmable gate arrays (FPGAs), or other electronic components.
  • ASICs application specific integrated circuits
  • DSPs digital signal processor
  • PLDs programmable logic devices
  • CPLDs complex programmable logic devices
  • FPGAs field programmable gate arrays
  • a terminal or a server can implement the page rendering method provided in the embodiments of the present application by running a computer program.
  • the computer program can be a native program or software module in the operating system; it can be a native application (APP, Application), that is, a program that needs to be installed in the operating system to run, such as a social network APP or an instant messaging APP; it can also be a small program, that is, a program that can be run only by downloading it to a browser environment; it can also be a small program that can be embedded in any APP.
  • the above-mentioned computer program can be an application, module or plug-in in any form.
  • the embodiments of the present application can be applied to the page rendering scenarios of small programs of application software, operating systems, etc.
  • the page rendering method provided by the embodiments of the present application is described.
  • the electronic device that implements the page rendering method of the embodiments of the present application can be a terminal, a server, or a combination of the two. Therefore, the execution subject of each step will not be repeated in the following.
  • Figure 4 is a flowchart diagram of the page rendering method provided in an embodiment of the present application, and will be explained in conjunction with the steps shown in Figure 4.
  • a browser process of a browser is started through a client process of an application client, and a business logic code of the small program is executed through the browser process.
  • the embodiment of the present application is implemented in the scenario of performing graphic rendering on the page frame of the applet, and the page frame after the graphic rendering is used to present the screen content of the applet.
  • the electronic device will detect in real time whether a startup operation for the applet is received.
  • the browser process of the browser will be started through the client process of the application client, and the business logic code of the applet will be interpreted and executed through the browser process, thereby realizing the business function of the applet.
  • the mini-program in the embodiment of the present application may be a game mini-program (also referred to as a mini-game), an office software mini-program, or various types of mini-programs such as music mini-programs, and the embodiment of the present application is not limited thereto.
  • the client process refers to the process of the client of the application program embedded with the mini program, that is, the mini program is running in the application client, and thus, the startup operation for the mini program refers to the operation of entering the mini program triggered on the application client (hereinafter referred to as the client).
  • the startup operation can be implemented by clicking the icon of the mini program, scanning the QR code of the mini program, etc.
  • the above-mentioned application can refer to a social network application, or it can be a music application, a game application, etc., and thus, the client can be a social network client, a music client, a game client, etc.
  • the mini program can be embedded in these clients and run to provide the functions of the mini program to users who have installed these clients.
  • the browser in the embodiment of the present application can be a browser provided by the client, or an embedded browser provided by the operating system of the electronic device, which is not limited in the embodiment of the present application.
  • the browser process refers to the process allocated by the electronic device to the browser.
  • the business logic code of a mini program is the code used to implement the specific functions of the mini program, which is generally written by the creator of the mini program.
  • the business logic code of the mini program will be pulled from the server by the client when the mini program is started for the first time. It can also be extracted from the client's cache file when it is not started for the first time.
  • the business logic code will call the first rendering function to render the page frames of the applet one by one or in parallel.
  • the first rendering function is a graphics rendering function that can be called by the browser process, and the business logic code is executed by the browser process.
  • the browser process executes the calling code for the first rendering function in the business logic code
  • the browser process executes the calling code for the first rendering function in the business logic code, indicating that the browser process has executed the calling code for the first rendering function.
  • the first rendering function is called by the browser process to render the page.
  • the electronic device in response to the browser process executing the calling code for the first rendering function in the business logic code, the electronic device will forward the function call of the page rendering in the browser process to the client process by calling the processing request, so as to implement the function call of the page rendering through the client.
  • the browser can be regarded as only an executor of the business logic code, and only a few pages need to be loaded, thereby reducing the memory consumption of the browser.
  • the browser process can send a call processing request to the client process in a variety of ways.
  • the calling information of the first rendering function is written into the command cache through the browser process to record the calling of the first rendering function through the command cache.
  • the browser process can write the calling information of all the first rendering functions called for each page frame into the same command cache, or write the calling information of each first rendering function into the command cache allocated to it (that is, the browser process allocates a command cache for each first rendering function, and only the calling information of the corresponding first rendering function is written into each command cache).
  • the calling information of the first rendering function needs to include at least the function identifier of the first rendering function and the calling parameters of the first rendering function (which can also be understood as the input parameters of the first rendering function).
  • the function identifier is used to distinguish different first rendering functions, and the function identifier can be the function name of the first rendering function, or it can be the function identifier of the first rendering function.
  • the calling parameters of the first rendering function can vary according to the specific rendering function of the first rendering function. For example, when the first rendering function is a graphics drawing function, the calling parameters of the first rendering function are the coordinates of each point of the graphics. When the first rendering function is a shading function, the calling parameters of the first rendering function are the color code.
  • command cache in the embodiment of the present application can be created by the browser process itself, or it can be created by the client process and injected into the browser process.
  • the method may also include the following processing: generating script code for the command cache through the client process, and injecting the script code for the command cache into the browser process.
  • the script code of the command cache is used to create the command cache and control the browser process to write the call information of the first rendering function into the command cache. That is, the client process generates a section of script code that can be automatically executed.
  • the script code is used to open a command cache that can be read and written, intercept the call of the first rendering function, and control the browser process to record the corresponding call information.
  • injecting the script code of the command cache into the browser process can be achieved by creating a thread in the browser process and making the thread execute the script code of the command cache, or by generating an executable file corresponding to the script code and using the executable file to replace the call code (or code segment) for the first rendering function in the browser process, that is, replacing the call code for the first rendering function with the executable file.
  • the electronic device After the electronic device writes the call information of the first rendering function in the command cache through the browser process, it will generate a call processing request for the first rendering function through the browser process, and pack the command cache with the call information written into the call processing request, and send the call processing request to the client process through cross-process communication. In this way, after receiving the call processing request, the client process can parse the command cache therefrom to obtain the call information of the first rendering function.
  • the electronic device can, after the browser process writes the call information of the first rendering function into the command cache, immediately generate a call processing request for the command cache through the browser process and send it to the client process; or, after the browser process writes the call information of the first rendering function into the command cache, when certain request sending conditions are met (i.e., when the call processing request needs to be sent), generate a call processing request for the command cache through the browser process and send it to the client.
  • the request sending condition may mean that the first rendering function is a synchronous rendering function with a return value (such as the gl.createBuffer function), or that the calling information of all first rendering functions called for the page frame has been recorded in the command cache.
  • a return value such as the gl.createBuffer function
  • a call process is generated for a command cache through a browser process.
  • the request is generated and the call processing request is sent to the client process.
  • This can be achieved by the following processing: when the first rendering function called by the business logic code is a synchronous rendering function with a return value, the call processing request is generated for the command cache through the browser process, and the call processing request is sent to the client process.
  • the synchronous rendering function can only continue to run after obtaining the return value, otherwise it will remain in a suspended state to continue waiting for the return value. Therefore, when the first rendering function is a synchronous rendering function with a return value, the command cache needs to be submitted to the client process in a timely manner so that the client process generates a corresponding return value for the first rendering function and returns it, so that the first rendering function can continue to execute.
  • S1022 in Figure 5 that is, generating a call processing request for the command cache through the browser process, and sending the call processing request to the client process, can also be achieved through the following processing: when the call information of each of the multiple first rendering functions that need to be called when the page frame is rendered has been recorded in the command cache, generating a call processing request for the command cache through the browser process, and sending the call processing request to the client process.
  • cross-process communication takes a certain amount of time to achieve, and a page frame may need to call multiple, for example dozens or hundreds of first rendering functions, to complete graphics rendering.
  • These first rendering functions can all be regarded as the first rendering functions that the page frame needs to call when rendering.
  • the electronic device When the call information of each of these first rendering functions has been recorded in the command cache, the electronic device will generate a call processing request for the command cache through the browser process and send it to the client process. In this way, the calls of all the first rendering functions required for a page frame can be submitted to the client process in batches, thereby reducing the number of cross-process communications and improving the processing efficiency of the page frame during graphics rendering.
  • sending the call processing request to the client process can be implemented through an XMLHttpRequest (XHR) request, or based on technologies such as the WebSocket protocol, which is not limited in the embodiment of the present application.
  • XHR XMLHttpRequest
  • sending the call processing request to the client process can be achieved through the following processing: through the browser process, the access address of the call processing request is set to the service address of the client process; through the client process, the call processing request is intercepted at the service address to complete the sending of the call processing request to the client process.
  • the browser process directly uses the service address of the client process as the access address for calling the processing request. Then the client process can intercept the request sent by the browser process at its service address through the request interception control (such as the WKURLSchemeHandler control) to achieve cross-process communication between the browser process and the client process and complete the sending of the calling processing request.
  • the request interception control such as the WKURLSchemeHandler control
  • S103 In response to the call processing request, determine, through the client process, a second rendering function corresponding to the first rendering function, and call the second rendering function.
  • the electronic device responds to the call processing request through the client process, and determines a second rendering function that has the same graphics rendering function as the first rendering function, and the second rendering function is an image rendering function that can be called by the client process. Then, the electronic device calls the second rendering function through the client process, thereby converting the call to the first rendering function into a call to the second rendering function, so that the second rendering function can be used to render the page frame of the applet later.
  • the first rendering function and the second rendering function can perform the same graphics rendering function, but are different in the way they are called.
  • the first rendering function is a function for creating a buffer object (such as the creatBuffer function in WebGL)
  • the second rendering function is also a function for creating a buffer object (such as a function for creating a buffer object in OpenGL).
  • the second rendering function can be obtained by the client process from the existing graphics rendering functions that can be called by the client process according to the function of the first rendering function.
  • a correspondence table between various graphics rendering functions that can be called by the browser process and graphics rendering functions that can be called by the client process with the same graphics rendering function can be established in advance, and then the second rendering function corresponding to the first rendering function can be queried from the correspondence table.
  • the second rendering function can also be a function that the client process performs on the first rendering function.
  • the converted and rewritten data are not limited in the embodiments of the present application.
  • calling the second rendering function can be implemented by the following processing: through the client process, parsing the calling parameters of the first rendering function from the command cache, and converting the calling parameters of the first rendering function into calling parameters of the second rendering function; through the client process, passing the calling parameters of the second rendering function to the second rendering function, thereby completing the call to the second rendering function.
  • the electronic device parses the command cache from the call processing request through the client process, and parses the call parameters of the first rendering function from the command cache, and converts them into call parameters available to the second rendering function, and finally passes the converted call parameters as input parameters of the second rendering function to the second rendering function to implement the call of the second rendering function.
  • the electronic device converts them according to the second rendering function parameter format through the client process, and inputs the conversion results into the second rendering parameters to complete the call.
  • the electronic device uses the second rendering function to perform graphics rendering processing on each page frame of the mini-program, such as drawing patterns and coloring each page frame. After completing the graphics rendering, the rendering result of each page frame can be obtained.
  • the electronic device will first start the browser process through the client process when the user starts the mini-program, execute the business logic code of the mini-program through the browser, and when the business logic code needs to call the first rendering function, send a call processing request to the client process through the browser process, so as to convert the browser process's call to the first rendering function into a call to the second rendering function by the client process through the call processing request, and perform graphics rendering on the mini-program's page frame through the second rendering function.
  • the graphics rendering process of the mini-program's page frame can be transferred to the client implementation, so that the browser only acts as an executor of the business logic code without the resource overhead required to call the graphics processor, thereby greatly reducing the browser's memory consumption and reducing the possibility of the browser process being forced to stop, and ultimately reducing the risk of the mini-program being forced to close.
  • the graphics rendering process of the mini-program's page frame is transferred to the client, which unbinds the graphics rendering of the browser and the mini-program's page frame. In this way, even if the browser upgrade may cause operational failures, it will not affect the graphics rendering of the mini-program's page frame, thereby ensuring the normal use of the mini-program.
  • the browser process when the first rendering function is a synchronous rendering function with a return value, the browser process will immediately carry the command cache in the call processing request and send it to the client process to realize the submission of the command cache, and will continue the subsequent execution only after obtaining the return value. It can be seen that this method still takes some time to continue to write the subsequent call information of the first rendering function into the command cache and submit the command cache because it needs to wait for the return value to be returned, thereby affecting the operation efficiency.
  • FIG6 is a flow chart of the page rendering method provided in an embodiment of the present application.
  • the method may further include the following processing:
  • the first rendering function is a synchronous rendering function with a return value
  • a virtual return value is returned for the first rendering function through the browser process, and the virtual return value and the calling information of the first rendering function are written into the command cache together.
  • the electronic device when the first rendering function is a synchronous rendering function with a return value, the electronic device will first generate a virtual return value for the first rendering function through the browser process, and return the virtual return value to the first rendering function, so that the first rendering function can continue to run.
  • the browser process does not need to wait for the return value of the first rendering function, so that it can continue to record the call information of other subsequent first rendering functions, and after completing the recording of the call information of all first rendering functions for the page frame, submit the command cache to the client process at one time.
  • the virtual return value can be randomly generated by the browser process according to the format of the return value of the first rendering function, or it can be the historical return value of the first rendering function, which is not limited in the embodiments of the present application.
  • the electronic device will write the calling information (i.e., function identifier, calling parameters, etc.) and the virtual return value of the first rendering function into the command cache through the browser process, so that the subsequent client process can parse the calling information and virtual return value of the first rendering function from the command cache.
  • calling information i.e., function identifier, calling parameters, etc.
  • the method further includes: through the client process, parsing the command cache from the call processing request, and extracting the virtual return value from the command cache; through the client process, using the return value of the second rendering function as the real return value of the first rendering function, and establishing a mapping relationship between the real return value and the virtual return value.
  • mapping relationship is used to determine the corresponding real return value for the virtual return value in the command cache at a future time.
  • the call to the first rendering function is converted into a call to the second rendering function, so that the second rendering function has the same function as the first rendering function, and therefore, the return value of the second rendering function can be used as the real return value of the first rendering function.
  • the function of the first rendering function is to create a buffer object
  • the function of the second rendering function is also to create a buffer object, so that the return value of the second rendering function can be the identifier of the buffer object (for example, bufferID), and the return value of the first rendering function should also be the identifier of the buffer object.
  • the electronic device will directly determine the return value of the second rendering function as the real return value of the first rendering function through the client process, and bind the real return value and the virtual return value by establishing a mapping relationship between the real return value and the virtual return value.
  • the client process can directly determine the real return value for the first rendering function through the mapping relationship, so as to facilitate the subsequent functions.
  • the embodiment of the present application is implemented in the scenario of rendering the game screen (called page frame) of a small game (called applet).
  • the rendering of the game screen of the small game is switched from WebView (called browser) to the client of the social application.
  • FIG7 is a schematic diagram of the principle of rendering the game screen of the mini-game provided by an embodiment of the present application.
  • the call of the first rendering function 73 (exemplarily, the first rendering function can be a WebGL function) in the browser process 71 (also referred to as the WebView process) is forwarded to the client process 72 through cross-process communication, while the business logic code of the mini-game, i.e., the JS code 74, is still running in the browser process 71, and at the same time, the client process 72 is called through the application programming interface 75 to implement file reading and writing, information logging, etc.
  • the JS code may need to be called dozens or even hundreds of times for each frame of the game screen. If each WebGL function is called, it needs to be forwarded to the client through cross-process communication. Therefore, in the embodiment of the present application, the call of the WebGL function is recorded in the command cache through the browser process, and when submission is required, the call of the WebGL function is submitted to the client process in batches at one time through cross-process communication for batch processing.
  • the client process will inject script code of the command cache into the browser process.
  • the script code is used to intercept the call of the WebGL function of the JS code and record the call of the WebGL function into the command cache.
  • Figure 8 is a schematic diagram of recording the call of the WebGL function provided by the embodiment of the present application.
  • the browser process writes the call of the WebGL function, that is, the function ID (called function identification) of the WebGL function and the call parameters, into the command cache for subsequent batch submission.
  • the command cache When a frame ends or a synchronous function (called a synchronous rendering function) is called, the command cache needs to be submitted to the client process.
  • the command cache can be converted into binary data, so that cross-process communication can be implemented using XHR, that is, the browser process will carry the command cache data through an XHR request and submit it to the client process, and the client process will intercept the XHR request (called a call processing request) through WKURLSchemeHandler.
  • cross-process communication can also be implemented through WebScoket, Prompt, postMessage, etc.
  • a synchronous function with a return value such as calling gl.createBuffer
  • the browser process will submit the command cache once and wait for the return value, so that the rendering efficiency is not very high.
  • the call can be written into the command cache without triggering a synchronous submission.
  • the browser process returns a false BufferID (called a virtual return value) and writes the false BufferID to the command cache together with the function call.
  • the client process parses the command cache and generates a true BufferID (called a real return value), it maps the true BufferID and the false BufferID.
  • the client process can directly replace the false BufferID with the true BufferID based on the mapping relationship to achieve the function.
  • FIG. 9 is another schematic diagram of recording the call of WebGL function provided by an embodiment of the present application.
  • the command buffer in addition to recording the function identifiers (i.e., function IDs) and call parameters of some WebGL functions that do not have return values, a virtual return value (i.e., fake BufferID) is also recorded for the create command buffer (createBuffer) function so as to pass it to the client process.
  • function IDs i.e., function IDs
  • fake BufferID i.e., fake BufferID
  • the client process When the client process is rendering, that is, when the client process receives the instruction from the browser process indicating that a canvas needs to be created and calls the WebGL function through getContext (the client process does not execute the instruction at this time), the corresponding drawing layer (such as EAGLView) and EAGLContext will be created on the client. After that, after the client process receives the command cache, it will convert the call of the WebGL function into an OpenGL ES function (called the second rendering function) to achieve rendering.
  • the second rendering function OpenGL ES function
  • the browser is only an executor of the JS code.
  • the browser only needs to load a very small or even blank HTML page (which can ensure the normal execution of the JS code), without any GPU resource-related overhead. This can greatly reduce the memory consumption of WebView itself.
  • the browser since the browser is no longer required to render, the impact of browser upgrade failures on the rendering of the game screen can be avoided.
  • the software module stored in the page rendering device 455 of the memory 450 may include:
  • a process start module 4551 is configured to start a browser process of a browser through a client process of an application client in response to a start operation for the mini program, and execute the business logic code of the mini program through the browser process, and the mini program runs in the application client;
  • the request sending module 4552 is configured to respond to the browser process executing the business logic code to A calling code of a first rendering function sends a calling processing request to a client process through the browser process; wherein the first rendering function is a graphics rendering function called by the browser process, and the first rendering function is used to render a page frame of the applet;
  • a call processing module 4553 is configured to, in response to the call processing request, determine, through the client process, a second rendering function corresponding to the first rendering function, and call the second rendering function; wherein the second rendering function and the first rendering function have the same graphics rendering function;
  • the graphics rendering module 4554 is configured to perform graphics rendering on the page frame of the mini program through the second rendering function to obtain the rendering result of the page frame of the mini program.
  • the request sending module 4552 is also configured to, in response to the browser process executing a calling code for a first rendering function in the business logic code, write the calling information of the first rendering function in the command cache through the browser process; generate the call processing request for the command cache through the browser process, and send the call processing request to the client process.
  • the request sending module 4552 is also configured to generate the call processing request for the command cache through the browser process when the first rendering function is a synchronous rendering function with a return value, and send the call processing request to the client process.
  • the script processing module 4555 is further configured to create a thread in the browser process and use the thread to execute the script code in the command cache; or, generate an executable file corresponding to the script code in the command cache and replace the calling code for the first rendering function with the executable file.
  • the call information includes: call parameters; the call processing module 4553 is further configured to parse the call parameters of the first rendering function from the command cache through the client process; The method further comprises: converting the calling parameter of the first rendering function into the calling parameter of the second rendering function; and passing the calling parameter of the second rendering function to the second rendering function through the client process to complete the calling of the second rendering function.
  • the embodiment of the present application provides a computer program product, which includes a computer program or a computer executable instruction, and the computer program or the computer executable instruction is stored in a computer-readable storage medium.
  • the processor of the electronic device reads the computer executable instruction from the computer-readable storage medium, and the processor executes the computer executable instruction, so that the electronic device executes the page rendering method described in the embodiment of the present application.
  • An embodiment of the present application provides a computer-readable storage medium storing computer-executable instructions, wherein computer-executable instructions are stored.
  • the processor will execute the page rendering method provided by an embodiment of the present application, for example, the page rendering method shown in FIG. 4 .
  • the computer-readable storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface storage, optical disk, or CD-ROM; or it may be various devices including one or any combination of the above memories.
  • computer executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.
  • computer-executable instructions may, but do not necessarily, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, such as, for example, in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).
  • HTML HyperText Markup Language
  • computer executable instructions may be deployed to be executed on one electronic device, or on multiple electronic devices located at one site, or on multiple electronic devices distributed at multiple sites and interconnected by a communication network.
  • the electronic device when the user starts the applet, the electronic device will first start the browser process through the client process, execute the business logic code of the applet through the browser, and when the business logic code needs to call the first rendering function, send a call processing request to the client process through the browser process, so as to convert the browser process's call to the first rendering function into a call to the second rendering function by the client process through the call processing request, and perform graphics rendering on the page frame of the applet through the second rendering function.
  • the graphics rendering process of the page frame of the applet can be transferred to the client implementation, so that the browser is only used as an executor of the business logic code, thereby greatly reducing the memory consumption of the browser and reducing the possibility of the browser process being forced to stop, and ultimately reducing the risk of the applet being forced to close.
  • the graphics rendering process of the page frame of the applet is transferred to the client implementation, which realizes the unbinding of the graphics rendering of the page frame of the browser and the applet. In this way, even if the upgrade of the browser may cause an operating failure, it will not affect the graphics rendering of the page frame of the applet, thereby ensuring the normal use of the applet.

Landscapes

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

Abstract

本申请提供了一种页面渲染方法、装置、设备、存储介质及程序产品；本申请实施例可以应用于应用软件、操作系统等的小程序的页面渲染场景中；方法包括：响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过浏览器进程执行小程序的业务逻辑代码，小程序在应用程序客户端中运行；响应于浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码，通过浏览器进程向客户端进程发送调用处理请求；第一渲染函数是浏览器进程调用的图形渲染函数，第一渲染函数用于渲染小程序的页面帧；响应于调用处理请求，通过客户端进程确定第一渲染函数相对应的第二渲染函数，并对第二渲染函数进行调用；第二渲染函数和第一渲染函数的图形渲染功能相同；通过第二渲染函数，对小程序的页面帧进行图形渲染，得到小程序的页面帧的渲染结果。

Description

一种页面渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品
相关申请的交叉引用
本申请基于申请号为202310732158.7、申请日为2023年6月19日的中国专利申请提出，并要求以上中国专利申请的优先权，以上中国专利申请的全部内容在此引入本申请作为参考。
技术领域
本申请涉及图形处理技术，尤其涉及一种页面渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品。
背景技术
小程序是一种不需要下载安装即可使用的应用，从而能够为使用者在不同应用的使用上提供巨大的便利。相关技术中，是借助于嵌入式浏览器(例如WebView)实现小程序的运行的。也即，通过浏览器进程对小程序的业务逻辑代码进行解释和执行，以及通过浏览器进程调用图形渲染函数，以对小程序的页面帧进行渲染。然而，采用浏览器进程对小程序的页面帧进行渲染，会使得小程序被强制关闭的风险较高。
发明内容
本申请实施例提供一种页面渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品，能够提高小程序的运行稳定性。
本申请实施例的技术方案是这样实现的：
本申请实施例提供一种页面渲染方法，应用于电子设备，包括：
响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过所述浏览器进程执行所述小程序的业务逻辑代码，所述小程序在所述应用程序客户端中运行；
响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程向客户端进程发送调用处理请求；其中，所述第一渲染函数是所述浏览器进程调用的图形渲染函数，所述第一渲染函数用于渲染所述小程序的页面帧；
响应于所述调用处理请求，通过所述客户端进程确定所述第一渲染函数相对应的第二渲染函数，并对所述第二渲染函数进行调用；其中，所述第二渲染函数和所述第一渲染函数的图形渲染功能相同；
通过所述第二渲染函数，对所述小程序的所述页面帧进行图形渲染，得到所述小程序的所述页面帧的渲染结果。
本申请实施例提供一种页面渲染装置，包括：
进程启动模块，配置为响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过所述浏览器进程执行所述小程序的业务逻辑代码，所述小程序在所述应用程序客户端中运行；
请求发送模块，配置为响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程向客户端进程发送调用处理请求；其中，所述第一渲染函数是所述浏览器进程调用的图形渲染函数，所述第一渲染函数用于渲染所述小程序的页面帧；
调用处理模块，配置为响应于所述调用处理请求，通过所述客户端进程确定所述第一渲染函数相对应的第二渲染函数，并对所述第二渲染函数进行调用；其中，所述第二渲染函数和所述第一渲染函数的图形渲染功能相同；
图形渲染模块，配置为通过所述第二渲染函数，对所述小程序的所述页面帧进行图形渲染，得到所述小程序的所述页面帧的渲染结果。
本申请实施例提供一种电子设备，包括：
存储器，用于存储计算机可执行指令或计算机程序；
处理器，用于执行所述存储器中存储的计算机可执行指令或者计算机程序时，实现本申请实施例提供的页面渲染方法。
本申请实施例提供一种计算机可读存储介质，存储有计算机可执行指令或者计算机程序，用于引起处理器执行时，实现本申请实施例提供的页面渲染方法。
本申请实施例提供一种计算机程序产品，包括计算机程序或计算机可执行指令，所述计算机程序或计算机可执行指令被处理器执行时实现本申请实施例提供的页面渲染方法。
本申请实施例具有以下有益效果：电子设备会在小程序启动时，先通过应用程序客户端进程启动浏览器进程，通过浏览器进程执行小程序的业务逻辑代码，并在执行到业务逻辑代码中针对第一渲染函数的调用代码时，通过浏览器进程向客户端进程发送调用处理请求，以通过调用处理请求将浏览器进程对第一渲染函数的调用转换为客户端进程对第二渲染函数的调用，并通过第二渲染函数对小程序的页面帧进行图形渲染，由于第二渲染函数是与第一渲染函数具有相同图形渲染功能的渲染函数，如此，在保证图形渲染功能能够正常实现的前提下，将小程序的页面帧的图形渲染过程转移到应用程序客户端实现，使得浏览器只是作为业务逻辑代码的执行器，从而能够大大降低浏览器的内存消耗，减少浏览器进程被强制停止的可能性，最终也就降低了小程序被强制关闭的风险，从而提高小程序的运行稳定性。
附图说明
图1是小程序的页面帧的渲染示意图；
图2是本申请实施例提供的页面渲染系统的架构示意图；
图3是本申请实施例提供的图2中的终端的结构示意图；
图4是本申请实施例提供的页面渲染方法的流程示意图一；
图5是本申请实施例提供的页面渲染方法的流程示意图二；
图6是本申请实施例提供的页面渲染方法的流程示意图三；
图7是本申请实施例提供的对小游戏的游戏画面进行渲染的原理示意图；
图8是本申请实施例提供的对WebGL函数的调用进行记录的一种示意图；
图9是本申请实施例提供的对WebGL函数的调用进行记录的另一种示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一 步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
在以下的描述中，所涉及的术语“第一\第二”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
本申请实施例中，术语“模块”或“单元”是指有预定功能的计算机程序或计算机程序的一部分，并与其他相关部分一共工作以实现预定目标，并且可以通过使用软件、硬件(如处理电路或存储器)或其组合来全部实现或部分实现。同样的，一个处理器(或多个处理器或存储器)可用来实现一个或多个模块或单元。此外，每个模块或单元都可以是包含该模块或单元功能的整体模块或单元的一部分。
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。
对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。
1)小程序(Mini Program)，也称为网络程序(Web Program)，是一种基于面向前端的语言(例如JavaScript)开发的，在超文本标记语言(Hyper Text Markup Language，HTML)页面中实现服务的程序，由客户端经由网络(如互联网)下载，并在客户端的浏览器或嵌入式浏览器中解释和执行的软件，节省在客户端中安装的步骤。例如，可以在社交网络客户端中下载、运行用于实现打卡，或者是游戏服务的小程序。
2)客户端，是使用者需要下载并安装在终端(例如，智能手机)上才可以使用的应用程序。例如，浏览器客户端或者社交网络客户端。
3)客户端进程，是终端上为客户端分配的进程，用于实现客户端的各项功能。
4)嵌入式浏览器(WebView)，是嵌入在原生应用(指能够直接运行于操作系统的应用程序)中的浏览器，原生应用可以使用嵌入式浏览器展示网络页面。不同的操作系统上会有不同的嵌入式浏览器，例如，一些操作系统上可以使用UIWebView和WKWebview展示网络页面。
5)浏览器进程，是终端上位嵌入式浏览器分配的进程，用于实现浏览器进程的各项功能。
6)页面帧，是指小程序的画面内容的渲染和显示的单位，即小程序的画面内容，是以一个页面帧为单位进行页面渲染，并且以一个页面帧为单位进行显示，从而通过多个页面帧连续显示，就可以动态地呈现小程序的画面内容。
7)响应于，用于表示所执行的操作所依赖的条件或状态，当满足所依赖的条件或状态时，所执行的一个或多个操作可以是实时的，可以具有设定的延迟；在没有特别说明的情况下，所执行的多个操作不存在执行先后顺序的限制。
8)渲染函数，是指Web开发或小程序开发中用于定义和描述页面如何显示的函数。它通常负责将数据转换成可视化的HTML结构，并将其呈现到用户界面上。在不同的框架和平台中，页面渲染函数的实现方式和概念可能有所不同，但其核心目的相似，即定义页面的显示逻辑。
9)命令缓存，用于存储渲染函数的调用信息的缓存空间。
10)业务逻辑代码，是用于完成业务逻辑的代码，在本申请实施例中，是指小程序的业务逻辑代码，也即是在小程序中实现各种功能和交互的代码部分。这些代码可以包括登录验证、页面跳转、数据请求和处理、组件操作等功能。一般来说，小程序的业务逻辑代码主要包括以下几个方面：
1.页面生命周期函数：在小程序中每个页面都有自己的生命周期函数，包括页面加载、页面显示、页面隐藏、页面卸载等不同阶段的回调函数，可以在这些函数中执行各种逻辑操作。
2.数据请求和处理：小程序需要与服务器进行数据交互，可以通过内置的请求方法发送请求并处理返回的数据，包括数据解析、数据展示等操作。
3.事件监测和处理：小程序中的页面可以监测用户的各种交互事件，比如点击事件、滑动事件、输入事件等，可以通过事件处理函数来实现相应的业务逻辑。
4.页面跳转和传参：小程序中需要实现页面之间的跳转，可以通过内置的应用程序编程接口(Application Programming Interface，API)实现页面跳转，并可以通过参数传递数据。
5.组件操作：小程序中可以使用各种内置组件和自定义组件来实现页面的不同功能，可以通过相关API控制组件的显示、隐藏、样式等操作。
总的来说，小程序的业务逻辑代码就是负责实现小程序各种功能和交互的代码部分，通过这些代码可以实现小程序的各种复杂逻辑和交互效果。
小程序是一种不需要下载安装即可使用的应用，从而能够为使用者在不同应用的使用上提供巨大的便利。例如，使用者可以在不安装相应的客户端的情况下，通过小程序实现考勤打卡，或者是在不安装相应的客户端的情况下，通过小程序实现游戏娱乐等等。
相关技术中，是借助于嵌入式浏览器(例如WebView)实现小程序的运行的。也即，通过浏览器进程对小程序的业务逻辑代码进行解释和执行，以及通过浏览器进程调用图形渲染函数，以对小程序的页面帧进行渲染。
示例性的，图1是小程序的页面帧的渲染示意图。参见图1，小程序的代码通常会分为业务逻辑代码(即小程序的创建者所编写的用于实现小程序的功能的代码)11、调用客户端的应用程序编程接口(Application Programming Interface，API)12和渲染函数13的调用接口，渲染函数13用于对小程序的页面帧进行渲染。当客户端检测到针对小程序的启动操作之后，客户端进程会启动操作系统的嵌入式浏览器的浏览器进程，浏览器进程执行业务逻辑代码11，并调用渲染函数13，同时会通过API 12调用客户端进程，以实现文件读写、信息登录等。
然而，随着小程序使用时长的增加，这种方式所需要的渲染的页面帧的数量也会增加，会使得嵌入式浏览器的内存占用过高，从而导致出现浏览器进程被终端强制停止，最终使得小程序无法继续使用。由此可见，相关技术中，使用浏览器进程对小程序的页面帧进行渲染，会使得小程序被强制关闭的风险较高。
另外，嵌入式浏览器还可能会随着终端的操作系统一起升级(即操作系统升级时，嵌入式浏览器也可能会相应地升级)。然而，嵌入式浏览器的升级可能会带来一些运行故障(Bug)，如此，在使用浏览器进程对小程序的页面帧进行渲染时，也可能会出现故障，从而影响小程序的正常使用。
本申请实施例提供一种页面渲染方法、装置、设备、计算机可读存储介质和计算机程序产品，能够降低小程序被强制关闭的风险。下面说明本申请实施例提供的用于页面渲染的电子设备的示例性应用，本申请实施例提供的电子设备可以实施为笔记本电脑，平板电脑，台式计算机，机顶盒，移动设备(例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备)等各种类型的终端，也可以实施为服务 器。下面，将说明电子设备实施为终端时的示例性应用。
参见图2，图2是本申请实施例提供的页面渲染系统的架构示意图。为实现支撑一个页面渲染应用，在页面渲染系统100中，终端(示例性示出了终端400-1和终端400-2)通过网络300连接服务器200，网络300可以是广域网或者局域网，又或者是二者的组合。在页面渲染系统100中，还设置有数据库500，用于向服务器200提供数据支持。其中，数据库500可以独立于服务器200，也可以配置在服务器200中。图2示出的是数据库500独立于服务器200的情况。
终端400-1和终端400-2分别用于响应于使用者在图形界面410-1和图形界面410-2上针对小程序的启动操作，通过客户端进程从服务器200下载小程序的程序代码以及启动浏览器的浏览器进程，并通过浏览器进程执行小程序的程序代码中的业务逻辑代码；响应于业务逻辑代码针对小程序的页面帧调用第一渲染函数，通过浏览器进程向客户端进程发送调用处理请求，其中，第一渲染函数是浏览器进程能够调用的图形渲染函数；响应于调用处理请求，通过客户端进程针对第一渲染函数确定相对应的第二渲染函数，并对第二渲染函数进行调用；其中，第二渲染函数是客户端进程能够调用的图形渲染函数；通过第二渲染函数，对小程序的页面帧进行图形渲染，得到小程序的页面帧的渲染结果；将每个页面帧的渲染结果依次展示在图形界面410-1和图形界面410-2上。
服务器200用于将小程序的程序代码下发给终端400-1和终端400-2。
本申请实施例可以借助于云技术(Cloud Technology)实现，云技术是指在广域网内或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、存储、处理和共享的一种托管技术。
云计算是基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台、以及应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络的系统后台服务需要大量的计算和存储资源，需要通过云计算实现。
示例性的，服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端400-1和终端400-2可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表、智能家电、车载终端等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请实施例中不做限制。
参见图3，图3是本申请实施例提供的图2中的终端(电子设备的一种实施)的结构示意图。图3所示的终端400包括：至少一个处理器410、存储器450、至少一个网络接口420和用户接口430。终端400中的各个组件通过总线系统440耦合在一起。可理解，总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图3中将各种总线都标为总线系统440。
处理器410可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。
用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器450可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器450可选地包括在物理位置上远离处理器410的一个或多个存储设备。
存储器450包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Memory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memory)。本申请实施例描述的存储器450旨在包括任意适合类型的存储器。
在一些实施例中，存储器450能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。
操作系统451，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；
网络通信模块452，用于经由一个或多个(有线或无线)网络接口420到达其他计算设备，示例性的网络接口420包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等；
呈现模块453，用于经由一个或多个与用户接口430相关联的输出装置431(例如，显示屏、扬声器等)使得能够呈现信息(例如，用于操作外围设备和显示内容和信息的用户接口)；
输入处理模块454，用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中，本申请实施例提供的页面渲染装置可以采用软件方式实现，图3示出了存储在存储器450中的页面渲染装置455，其可以是程序和插件等形式的软件，包括以下软件模块：进程启动模块4551、请求发送模块4552、调用处理模块4553、图形渲染模块4554、脚本处理模块4555和映射生成模块4556，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。
在另一些实施例中，本申请实施例提供的页面渲染装置可以采用硬件方式实现，作为示例，本申请实施例提供的页面渲染装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本申请实施例提供的页面渲染方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC，Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD，Programmable Logic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)或其他电子元件。
在一些实施例中，终端或服务器(均为电子设备可能的实施)可以通过运行计算机程序来实现本申请实施例提供的页面渲染方法。举例来说，计算机程序可以是操作系统中的原生程序或软件模块；可以是本地(Native)应用程序(APP，Application)，即需要在操作系统中安装才能运行的程序，如社交网络APP或者即时通信APP；也可以是小程序，即只需要下载到浏览器环境中就可以运行的程序；还可以是能够嵌入至任意APP中的小程序。总而言之，上述计算机程序可以是任意形式的应用程序、模块或插件。
本申请实施例可以应用于应用软件、操作系统等的小程序的页面渲染场景中。下面，说明本申请实施例提供的页面渲染方法，如前所述，实现本申请实施例的页面渲染方法的电子设备可以为终端、服务器，又或者是二者的结合。因此在下文中不再重复说明各个步骤的执行主体。
将结合本申请实施例提供的电子设备的示例性应用和实施，说明本申请实施例提供的页面渲染方法。
参见图4，图4是本申请实施例提供的页面渲染方法的流程示意图一，将结合图4示出的步骤进行说明。
S101、响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过浏览器进程执行小程序的业务逻辑代码。
本申请实施例是在对小程序的页面帧进行图形渲染的场景下实现的，经过图形渲染之后的页面帧，用于对小程序的画面内容进行呈现。本申请实施例中，电子设备会实时检测是否接收到针对小程序的启动操作，当接收到针对小程序的启动操作，并触发小程序的运行之后，就会通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过浏览器进程对小程序的业务逻辑代码进行解释和执行，从而实现小程序的业务功能。
本申请实施例中的小程序可以是游戏类的小程序(也可以称为小游戏)，也可以是办公软件类的小程序，或者是音乐类等各种类型的小程序，本申请实施例在此不做限定。
需要说明的是，本申请实施例中，客户端进程是指嵌入了小程序的应用程序的客户端的进程，也即小程序是在该应用程序客户端中运行，从而，针对小程序的启动操作，是指在应用程序客户端(以下简称为客户端)上所触发的进入小程序的操作。该启动操作可以通过点击小程序的图标、扫描小程序的二维码等方式实现。其中，上述的应用程序可以是指社交网络应用程序，也可以是音乐应用程序、游戏应用程序等，从而，客户端可以是社交网络客户端、音乐客户端、游戏客户端等等。小程序即是可以嵌入在这些客户端中运行，以向安装了这些客户端的使用者提供小程序所具有的功能。
本申请实施例中的浏览器可以是客户端所提供的浏览器，也可以是电子设备的操作系统所提供的嵌入式浏览器，本申请实施例在此不做限定。浏览器进程是指电子设备针对浏览器所分配的进程。
小程序的业务逻辑代码，是用于实现小程序的具体功能的代码，其一般由小程序的创建者编写。小程序的业务逻辑代码会在小程序首次启动时，由客户端从服务器拉取得到，在非首次启动时，也可以从客户端的缓存文件中提取得到。
S102、响应于浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码，通过浏览器进程向客户端进程发送调用处理请求。
为了将小程序的画面内容展示出来，业务逻辑代码会调用第一渲染函数对小程序的页面帧逐个或者并行进行渲染。需要说明的是，第一渲染函数是浏览器进程能够调用的图形渲染函数，而业务逻辑代码通过浏览器进程进行执行，当浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码时，其中浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码，表示浏览器进程已经执行了针对第一渲染函数的调用代码，此时如果通过浏览器进程调用第一渲染函数，以进行页面渲染。那么由于浏览器进程调用第一渲染函数进行页面渲染时，容易造成浏览器所占用的内存过大，导致浏览器进程被强制停止。为了避免该情况，本申请实施例中，响应于浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码，电子设备会将浏览器进程内的页面渲染的函数调用，通过调用处理请求转发至客户端进程，以通过客户端实现页面渲染的函数调用。如此，浏览器就可以仅看作为业务逻辑代码的执行器，仅需要加载极少的页面，从而能够减少浏览器的内存消耗。
本申请实施例中，浏览器进程可以通过多种方式，向客户端进程发送调用处理请求。
参见图5，图5是本申请实施例提供的页面渲染方法的流程示意图二。在本申请的一些实施例中，图4中S102的过程，即响应于浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码，通过浏览器进程向客户端进程发送调用处理请求，可以通过S1021至S1022实现，如下：
S1021、响应于浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码， 通过浏览器进程在命令缓存中写入第一渲染函数的调用信息。
电子设备执行至业务逻辑代码中针对第一渲染函数的调用代码时，会通过浏览器进程，将第一渲染函数的调用信息写入到命令缓存中，以通过命令缓存对第一渲染函数的调用进行记录。其中，浏览器进程可以将针对每个页面帧所调用的所有第一渲染函数的调用信息，均写入同一个命令缓存中，也可以将每个第一渲染函数的调用信息，分别写入针对其所分配的命令缓存中(即浏览器进程针对每个第一渲染函数均分配了命令缓存，每个命令缓存中只会写入所对应的第一渲染函数的调用信息)。
本申请实施例中，第一渲染函数的调用信息，至少需要包括第一渲染函数的函数标识和第一渲染函数的调用参数(也可以理解为第一渲染函数的入参)。其中，函数标识用于对不同的第一渲染函数进行区分，函数标识可以为第一渲染函数的函数名称，也可以为第一渲染函数的函数标识。第一渲染函数的调用参数可以依据第一渲染函数的具体的渲染功能变化，例如，第一渲染函数为图形绘制函数时，第一渲染函数的调用参数即为图形的各个点的坐标，第一渲染函数为着色函数时，第一渲染函数的调用参数即为颜色代码。
需要说明的是，本申请实施例中的命令缓存可以是由浏览器进程本身创建的，也可以是由客户端进程创建并注入进行浏览器进程的。
在一些实施例中，在图5中S1021之前，即响应于浏览器进程执行至业务逻辑代码中针对第一渲染函数的调用代码，通过浏览器进程在命令缓存中写入第一渲染函数的调用信息之前，该方法还可以包括以下处理：通过客户端进程，生成命令缓存的脚本代码，并将命令缓存的脚本代码注入至浏览器进程中。
需要说明的是，命令缓存的脚本代码用于创建命令缓存，并控制浏览器进程将第一渲染函数的调用信息写入至命令缓存中。也即，客户端进程生成了一段可以自动执行的脚本代码，该脚本代码用于开辟一个可进行读写的命令缓存，同时对第一渲染函数的调用进行拦截，并控制浏览器进程将对应的调用信息进行记录。其中，将命令缓存的脚本代码注入至浏览器进程，可以通过在浏览器进程中创建线程，并使该线程执行命令缓存的脚本代码实现，也可以通过生成一个脚本代码所对应可执行文件，利用该可执行文件对浏览器进程中针对第一渲染函数的调用代码(或代码段)进行替换来实现，也就是说将针对第一渲染函数的调用代码替换为该可执行文件。
S1022、通过浏览器进程，针对命令缓存生成调用处理请求，并将调用处理请求发送至客户端进程。
电子设备通过浏览器进程在命令缓存中写入第一渲染函数的调用信息之后，就会通过浏览器进程，生成针对第一渲染函数的调用处理请求，并将写入了调用信息的命令缓存打包至调用处理请求中，通过跨进程通讯，将调用处理请求发送至客户端进程。如此，客户端进程在接收到调用处理请求之后，就能够从中解析得到命令缓存，从而得到第一渲染函数的调用信息。
需要说明的是，本申请实施例中，电子设备可以在浏览器进程将第一渲染函数的调用信息写入至命令缓存之后，立即通过浏览器进程针对命令缓存生成调用处理请求并发送至客户端进程，也可以在浏览器进程将第一渲染函数的调用信息写入命令缓存之后，在达到一定的请求发送条件时(即需要进行调用处理请求的发送时)，再通过浏览器进程针对命令缓存生成调用处理请求并发送至客户端。
其中，请求发送条件可以是指第一渲染函数为存在返回值的同步渲染函数(例如gl.creatBuffer函数)，也可以是针对页面帧所调用的所有第一渲染函数的调用信息均已经被记录在命令缓存中，本申请实施例在此不做限定。
在一些实施例中，图5中S1022，即通过浏览器进程，针对命令缓存生成调用处理 请求，并将调用处理请求发送至客户端进程，可以通过以下处理实现：当业务逻辑代码调用的第一渲染函数为存在返回值的同步渲染函数时，通过浏览器进程，针对命令缓存生成所述调用处理请求，并将调用处理请求发送至客户端进程。
需要说明的是，同步渲染函数必须要在得到返回值之后才能够继续运行，否则会一直处于暂停运行状态，以继续等待返回值。因此，当第一渲染函数为存在返回值的同步渲染函数时，需要及时将命令缓存提交给客户端进程，以使得客户端进程针对第一渲染函数生成对应的返回值并返回，从而使得第一渲染函数能够继续执行。
在另一些实施例中，图5中S1022，即通过浏览器进程，针对命令缓存生成调用处理请求，并将调用处理请求发送至客户端进程，还可以通过以下处理实现：当页面帧在渲染时所需要调用的多个第一渲染函数各自的调用信息均已被记录在命令缓存时，通过浏览器进程，针对命令缓存生成调用处理请求，并将调用处理请求发送至客户端进程。
可以理解的是，跨进程通讯需要消耗一定的时间才能实现，而一个页面帧可能需要调用多个，例如几十或上百个第一渲染函数，才能够完成图形渲染，这些第一渲染函数均可以看作是该页面帧在渲染时所需要的调用的第一渲染函数。当这些第一渲染函数各自的调用信息，均已经被记录在命令缓存中时，电子设备才会通过浏览器进程，针对命令缓存生成调用处理请求，并将其发送给客户端进程。如此，能够将一个页面帧所需要的所有第一渲染函数的调用批量提交给客户端进程，从而能够减少跨进程通讯的次数，提升页面帧在图形渲染时的处理效率。
需要说明的是，本申请实施例中，将调用处理请求发送至客户端进程，可以通过XMLHttpRequest(XHR)请求实现，也可以基于WebSocket协议等技术实现，本申请实施例在此不做限定。
在一些实施例中，将调用处理请求发送至客户端进程，可以通过以下处理实现：通过浏览器进程，将调用处理请求的访问地址设置为客户端进程的服务地址；通过客户端进程，在服务地址对调用处理请求进行拦截，完成将调用处理请求发送至客户端进程。
也即，浏览器进程直接将客户端进程的服务地址作为调用处理请求的访问地址，然后客户端进程可以通过请求拦截控件(例如WKURLSchemeHandler控件)，在其服务地址对浏览器进程发来的请求进行拦截，以实现浏览器进程和客户端进程之间的跨进程通讯，完成调用处理请求的发送。
S103、响应于调用处理请求，通过客户端进程确定第一渲染函数对应的第二渲染函数，并对第二渲染函数进行调用。
电子设备通过客户端进程对调用处理请求进行响应，确定出与第一渲染函数具有相同图形渲染功能的第二渲染函数，且第二渲染函数是客户端进程能够调用的图像渲染函数。接着，电子设备会通过客户端进程调用第二渲染函数，从而实现将对第一渲染函数的调用转换为对第二渲染函数的调用，以便于后续利用第二渲染函数实现对小程序的页面帧的渲染。
也就是说，本申请实施例中，第一渲染函数和第二渲染函数所能够进行的图形渲染功能相同，而在被调用的方式上存在不同。例如，若第一渲染函数为创建缓冲区对象的函数(例如WebGL中的creatBuffer函数)时，第二渲染函数也为缓冲区创建对象的函数(例如OpenGL中用于创建缓冲区对象的函数)。
需要说明的是，第二渲染函数可以是客户端进程根据第一渲染函数的功能，从已有的可被客户端进程调用的图形渲染函数中筛选得到的。在实现时，可以预先建立具有相同图形渲染功能的，浏览器进程能够调用的各个图形渲染函数，与客户端进程能够调用的图形渲染函数之间的对应关系表，然后从该对应关系表中查询第一渲染函数对应的第二渲染函数。在一些实施例中，第二渲染函数也可以是客户端进程对第一渲染函数进行 转换改写之后得到的，本申请实施例在此不做限定。
本申请实施例中，当调用信息包括调用参数时，对第二渲染函数进行调用，可以通过以下处理实现：通过客户端进程，从命令缓存中解析得到第一渲染函数的调用参数，并将第一渲染函数的调用参数转换为第二渲染函数的调用参数；通过客户端进程，将第二渲染函数的调用参数，传递至第二渲染函数，完成将对第二渲染函数的调用。
电子设备通过客户端进程，从调用处理请求中解析得到命令缓存，并从命令缓存中解析得到第一渲染函数的调用参数，并将其转换成第二渲染函数可用的调用参数，最后将转换得到的调用参数作为第二渲染函数的入参，传递至第二渲染函数中，以实现对第二渲染函数的调用。例如，当第一渲染函数的调用参数为需要绘制的图形各个坐标点时，电子设备会通过客户端进程将其按照第二渲染函数参数格式进行转换，并将转换结果输入进第二渲染参数中，完成调用。
需要说明的是，在将第一渲染函数的调用参数转换为第二渲染函数可用的调用参数时，可以参考第二渲染函数对应的官方文档和指南，以确保正确理解和使用不同函数的参数及其含义。逐一比较第一渲染函数和第二渲染函数中需要转换的调用参数，注意对应参数的差异和相似之处，进行适当的修改和调整，并且调用参数可能在第一渲染函数和第二渲染函数中的顺序有细微的差异，为了确保参数传递的顺序是正确的，因此还需要将转换得到的调用参数按照第二渲染函数要求的函数参数顺序进行排列，从而确保第二渲染函数能够正常运行并实现相同的图形渲染效果。
S104、通过第二渲染函数，对小程序的页面帧进行图形渲染，得到小程序的页面帧的渲染结果。
电子设备通过第二渲染函数，针对小程序的每个页面帧进行图形渲染的处理，例如针对每个页面帧进行图案绘制、着色等等，在完成图形渲染之后，就能够得到每个页面帧的渲染结果。
可以理解的是，相比于相关技术中，通过浏览器进程调用图形渲染函数对小程序的页面帧进行渲染，会造成浏览器的内存占用过高，从而使得小程序被强制关闭的风险较高的问题，本申请实施例中，电子设备会在使用者启动小程序时，先通过客户端进程启动浏览器进程，通过浏览器进行对小程序的业务逻辑代码进行执行，并在业务逻辑代码需要调用第一渲染函数时，通过浏览器进程向客户端进程发送调用处理请求，以通过调用处理请求将浏览器进程对第一渲染函数的调用转换为客户端进程对第二渲染函数的调用，并通过第二渲染函数对小程序的页面帧进行图形渲染，如此，能够将小程序的页面帧的图形渲染过程转移到客户端实现，使得浏览器只是作为业务逻辑代码的执行器，而无需调用图形处理器所需的资源开销，从而能够大大降低浏览器的内存消耗，减少浏览器进程被强制停止的可能性，最终也就降低了小程序被强制关闭的风险。另外，将小程序的页面帧的图形渲染过程转移到客户端实现，实现了将浏览器和小程序的页面帧的图形渲染的解绑，如此，即使浏览器的升级可能会带来运行故障，也不会对小程序的页面帧的图形渲染带来影响，从而能够保证小程序正常使用。
需要说明的是，在上述方案中，当第一渲染函数为存在返回值的同步渲染函数时，浏览器进程会立即将命令缓存携带在调用处理请求中发送给客户端进程，以实现命令缓存的提交，并且在得到返回值之后，才会继续后续执行。可见，这种方式由于需要等待返回值的返回，从而仍旧需要花费一些时间才能够继续将后续的第一渲染函数的调用信息写入命令缓存中，并提交命令缓存，从而使得运行效率受到影响。
对此，参见图6，图6是本申请实施例提供的页面渲染方法的流程示意图三。在本申请的一些实施例中，在图5中S1022之前，即通过浏览器进程，针对命令缓存生成调用处理请求，并将调用处理请求发送至客户端进程之前，该方法还可以包括以下处理：
S1023、当第一渲染函数为存在返回值的同步渲染函数时，响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过浏览器进程，针对第一渲染函数返回虚拟返回值，并将虚拟返回值和第一渲染函数的调用信息，共同写入至命令缓存中。
也就是说，当第一渲染函数为存在返回值的同步渲染函数时，电子设备会通过浏览器进程，先针对第一渲染函数生成虚拟返回值，并将该虚拟返回值返回给第一渲染函数，以使得第一渲染函数能够继续运行，如此，浏览器进程便无需针对第一渲染函数进行返回值的等待，从而能够继续对后续其他的第一渲染函数的调用信息进行记录，并在针对页面帧完成对所有的第一渲染函数的调用信息的记录之后，一次性地将命令缓存提交至客户端进程。其中，虚拟返回值可以是浏览器进程，依据第一渲染函数的返回值的格式随机生成的，也可以是第一渲染函数的历史返回值，本申请实施例在此不做限定。
需要说明的是，为了使得后续客户端进程能够正确将对第一渲染函数的调用转换为对第二渲染函数的调用，电子设备会通过浏览器进程，将第一渲染函数的调用信息(即函数标识、调用参数等)以及虚拟返回值写入到命令缓存中，以供后续客户端进程从命令缓存中解析得到第一渲染函数的调用信息和虚拟返回值。
当命令缓存中存在第一渲染函数的虚拟返回值时，在本申请的一些实施例中，通过第二渲染函数，对小程序的页面帧进行图形渲染，得到小程序的页面帧的渲染结果之后，该方法还包括：通过客户端进程，从调用处理请求中解析得到命令缓存，并从命令缓存中提取得到虚拟返回值；通过客户端进程，将第二渲染函数的返回值作为第一渲染函数的真实返回值，并建立真实返回值与虚拟返回值之间的映射关系。
其中，映射关系用于在未来时间针对命令缓存中的虚拟返回值确定对应的真实返回值。
需要说明的是，由于本申请实施例中，针对第一渲染函数的调用被转换为针对第二渲染函数的调用，从而第二渲染函数与第一渲染函数具有相同的功能，因此，第二渲染函数的返回值就能够作为第一渲染函数的真实返回值。例如，当第一渲染函数的功能为创建缓冲区对象时，第二渲染函数的功能也会为创建缓冲区对象，从而第二渲染函数的返回值可以为缓冲区对象的标识(例如bufferID)，而第一渲染函数的返回值也应该为缓冲区对象的标识，因此，电子设备会通过客户端进程，直接将第二渲染函数的返回值确定为第一渲染函数的真实返回值，并通过建立真实返回值和虚拟返回值之间的映射关系，将真实返回值和虚拟返回值进行绑定，如此，当浏览器进程在未来时间针对第一渲染函数再次向客户端进程传递虚拟返回值时，客户端进程可以通过该映射关系，直接为第一渲染函数确定真实返回值，以便于后续功能的进行。
下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。
本申请实施例是在对小游戏(称为小程序)的游戏画面(称为页面帧)进行渲染的场景下实现的。在本申请实施例中，对小游戏的游戏画面的渲染，由WebView(称为浏览器)切换到了社交应用的客户端实现。
图7是本申请实施例提供的对小游戏的游戏画面进行渲染的原理示意图。参见图7，本申请实施例中，将浏览器进程71(也可称为WebView进程)内的第一渲染函数73(示例性地，第一渲染函数可以为WebGL函数)的调用，通过跨进程通讯，转发到客户端进程72来实现，而小游戏的业务逻辑代码，即JS代码74，仍旧在浏览器进程71中运行，同时会通过应用程序编程接口75调用客户端进程72，以实现文件读写、信息登录等。
然而，WebGL函数的接口的数量很多，JS代码针对每一帧的游戏画面可能需要几十乃至上百次的调用，若每次调查WebGL函数，都需要通过跨进程通讯以转发到客户 端进程来实现，那么使得小游戏的游戏画面的渲染的运行性能非常差。因此，本申请实施例中，会通过浏览器进程，将WebGL函数的调用记录到命令缓存中，当需要提交时，通过跨进程通讯将WebGL函数的调用一次性批量提交给客户端进程，以进行批量处理。
在实现时，会由客户端进程在浏览器进程中注入命令缓存的脚本代码，该脚本代码用于拦截JS代码的WebGL函数的调用，以及将WebGL函数的调用记录到命令缓存中。
示例性的，图8是本申请实施例提供的对WebGL函数的调用进行记录的一种示意图。当JS代码执行WebGL函数时，浏览器进程会将WebGL函数的调用，即WebGL函数的函数ID(称为函数标识)以及调用参数，写入到命令缓存中，以便于后续进行批量提交。
当一帧结束或者是遇到同步函数(称为同步渲染函数)的调用时，需要将命令缓存提交给客户端进程。本申请实施例中，命令缓存可以转换为二进制的数据，从而跨进程通讯可以使用XHR方式实现，即浏览器进程会通过XHR请求携带命令缓存的数据，提交给客户端进程，客户端进程通过WKURLSchemeHandler拦截该XHR请求(称为调用处理请求)。当然，跨进程通讯也可以通过WebScoket、Prompt、postMessage等方式实现。
正常情况下，当调用有返回值的同步函数，例如调用gl.createBuffer，时，浏览器进程会对命令缓存进行一次提交，并等待返回值，从而使得渲染效率不是很高。对此，本申请实施例中，可以在调用有返回值的同步函数时，将调用写入命令缓存中，而不触发同步提交。此时，在调用该同步函数时，浏览器进程会返回一个假BufferID(称为虚拟返回值)，并将假BufferID与函数调用一起写入至命令缓存中。客户端进程在解析命令缓存，并生成真BufferID(称为真实返回值)之后，会对真BufferID和假BufferID进行映射，之后，当浏览器进程再次传递假BufferID时，客户端进程可以直接依据该映射关系将假BufferID替换为真BufferID，以实现功能。
示例性的，图9是本申请实施例提供的对WebGL函数的调用进行记录的另一种示意图。在命令缓存中，除了记录了一些不具有返回值的WebGL函数的函数标识(也即函数ID)和调用参数之外，针对创建命令缓存(createBuffer)函数还记录了虚拟返回值(也即假BufferID)，以便将其传递给客户端进程。
客户端进程在渲染时，即客户端进程在收到浏览器进程传递的指令表明需要创建画布，并通过getContext调用WebGL函数时(此时客户端进程针对该指令并不会进行执行)，会在客户端创建对应的绘制图层(例如EAGLView)，并创建EAGLContext。之后，客户端进程接收到命令缓存之后，会将WebGL函数的调用转换为OpenGL ES的函数(称为第二渲染函数)，从而实现渲染。
最终，浏览器只是作为JS代码的执行器，此时，对于浏览器而言，其只需要加载极小，甚至空白的HTML页面(能够保证JS代码的正常执行即可)，没有GPU资源相关的开销，如此，就能够大大减少WebView本身的内存消耗。同时，由于不再需要浏览器进行渲染，从而能够避免浏览器升级的故障针对小游戏的游戏画面的渲染带来的影响。
下面继续说明本申请实施例提供的页面渲染装置455的实施为软件模块的示例性结构，在一些实施例中，如图3所示，存储在存储器450的页面渲染装置455中的软件模块可以包括：
进程启动模块4551，配置为响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过所述浏览器进程执行所述小程序的业务逻辑代码，所述小程序在所述应用程序客户端中运行；
请求发送模块4552，配置为响应于所述浏览器进程执行至所述业务逻辑代码中针对 第一渲染函数的调用代码，通过所述浏览器进程向客户端进程发送调用处理请求；其中，所述第一渲染函数是所述浏览器进程调用的图形渲染函数，所述第一渲染函数用于渲染所述小程序的页面帧；
调用处理模块4553，配置为响应于所述调用处理请求，通过所述客户端进程确定所述第一渲染函数相对应的第二渲染函数，并对所述第二渲染函数进行调用；其中，所述第二渲染函数和所述第一渲染函数的图形渲染功能相同；
图形渲染模块4554，配置为通过所述第二渲染函数，对所述小程序的所述页面帧进行图形渲染，得到所述小程序的所述页面帧的渲染结果。
在本申请的一些实施例中，所述请求发送模块4552，还配置为响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程在命令缓存中写入所述第一渲染函数的调用信息；通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程。
在本申请的一些实施例中，所述请求发送模块4552，还配置为当所述所述第一渲染函数为存在返回值的同步渲染函数时，通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程。
在本申请的一些实施例中，所述请求发送模块4552，还配置为当所述页面帧在渲染时所需要调用的多个第一渲染函数各自的调用信息均已被记录在所述命令缓存时，通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程。
在本申请的一些实施例中，所述页面渲染装置455还包括：脚本处理模块4555，配置为通过所述客户端进程，生成所述命令缓存的脚本代码，并将所述命令缓存的脚本代码注入至所述浏览器进程中；所述命令缓存的脚本代码用于创建所述命令缓存，并控制所述浏览器进程将所述第一渲染函数的调用信息写入至所述命令缓存中。
在本申请的一些实施例中，所述脚本处理模块4555，还配置为在所述浏览器进程中创建线程，利用所述线程执行所述命令缓存的脚本代码；或者，生成所述命令缓存的脚本代码对应的可执行文件，将针对所述第一渲染函数的调用代码替换为所述可执行文件。
在本申请的一些实施例中，所述请求发送模块4552，还配置为通过所述浏览器进程，将所述调用处理请求的访问地址设置为所述客户端进程的服务地址；通过所述客户端进程，在所述服务地址对所述调用处理请求进行拦截，完成将所述调用处理请求发送至所述客户端进程。
在本申请的一些实施例中，所述请求发送模块4552，还配置为当所述第一渲染函数为存在返回值的同步渲染函数时，响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程，针对所述第一渲染函数返回虚拟返回值，并将所述虚拟返回值和所述第一渲染函数的调用信息，共同写入至所述命令缓存中。
在本申请的一些实施例中，所述页面渲染装置455还包括：映射生成模块4556，配置为通过所述客户端进程，从所述调用处理请求中解析得到所述命令缓存，并从所述命令缓存中提取得到所述虚拟返回值；通过所述客户端进程，将所述第二渲染函数的返回值作为所述第一渲染函数的真实返回值，并建立所述真实返回值与所述虚拟返回值之间的映射关系；其中，所述映射关系用于在未来时间针对所述命令缓存中的所述虚拟返回值确定对应的真实返回值。
在本申请的一些实施例中，所述调用信息包括：调用参数；所述调用处理模块4553，还配置为通过所述客户端进程，从所述命令缓存中解析得到所述第一渲染函数的调用参 数，并将所述第一渲染函数的调用参数转换为第二渲染函数的调用参数；通过所述客户端进程，将所述第二渲染函数的调用参数，传递至所述第二渲染函数，完成将对所述第二渲染函数的调用。
本申请实施例提供了一种计算机程序产品，该计算机程序产品包括计算机程序或计算机可执行指令，该计算机程序或计算机可执行指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机可执行指令，处理器执行该计算机可执行指令，使得该电子设备执行本申请实施例上述的页面渲染方法。
本申请实施例提供一种存储有计算机可执行指令的计算机可读存储介质，其中存储有计算机可执行指令，当计算机可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的页面渲染方法，例如，如图4示出的页面渲染方法。
在一些实施例中，计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中，计算机可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例，计算机可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言(HTML，Hyper Text Markup Language)文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。
作为示例，计算机可执行指令可被部署为在一个电子设备上执行，或者在位于一个地点的多个电子设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个电子设备上执行。
综上所述，通过本申请实施例，电子设备会在使用者启动小程序时，先通过客户端进程启动浏览器进程，通过浏览器进行对小程序的业务逻辑代码进行执行，并在业务逻辑代码需要调用第一渲染函数时，通过浏览器进程向客户端进程发送调用处理请求，以通过调用处理请求将浏览器进程对第一渲染函数的调用转换为客户端进程对第二渲染函数的调用，并通过第二渲染函数对小程序的页面帧进行图形渲染，如此，能够将小程序的页面帧的图形渲染过程转移到客户端实现，使得浏览器只是作为业务逻辑代码的执行器，从而能够大大降低浏览器的内存消耗，减少浏览器进程被强制停止的可能性，最终也就降低了小程序被强制关闭的风险。另外，将小程序的页面帧的图形渲染过程转移到客户端实现，实现了将浏览器和小程序的页面帧的图形渲染的解绑，如此，即使浏览器的升级可能会带来运行故障，也不会对小程序的页面帧的图形渲染带来影响，从而能够保证小程序正常使用。
以上所述，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。

Claims (14)

  1. 一种页面渲染方法，应用于电子设备，所述电子设备中包括应用程序客户端和浏览器，所述方法包括：
    响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过所述浏览器进程执行所述小程序的业务逻辑代码，所述小程序在所述应用程序客户端中运行；
    响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程向客户端进程发送调用处理请求；其中，所述第一渲染函数是所述浏览器进程调用的图形渲染函数，所述第一渲染函数用于渲染所述小程序的页面帧；
    响应于所述调用处理请求，通过所述客户端进程确定所述第一渲染函数相对应的第二渲染函数，并对所述第二渲染函数进行调用；其中，所述第二渲染函数和所述第一渲染函数的图形渲染功能相同；
    通过所述第二渲染函数，对所述小程序的所述页面帧进行图形渲染，得到所述小程序的所述页面帧的渲染结果。
  2. 根据权利要求1所述的方法，其中，所述响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程向客户端进程发送调用处理请求，包括：
    响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程在命令缓存中写入所述第一渲染函数的调用信息；
    通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程。
  3. 根据权利要求1或2所述的方法，其中，所述通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程，包括：
    当所述第一渲染函数为存在返回值的同步渲染函数时，通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程。
  4. 根据权利要求1至3任一项所述的方法，其中，所述通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程，包括：
    当在渲染所述页面帧时所需要调用的多个第一渲染函数各自的调用信息均已被记录在所述命令缓存时，通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程。
  5. 根据权利要求1至4任一项所述的方法，其中，所述响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程在命令缓存中写入所述第一渲染函数的调用信息之前，所述方法还包括：
    通过所述客户端进程，生成所述命令缓存的脚本代码；
    将所述命令缓存的脚本代码注入至所述浏览器进程中；所述命令缓存的脚本代码用于创建所述命令缓存；
    控制所述浏览器进程将所述第一渲染函数的调用信息写入至所述命令缓存中。
  6. 根据权利要求1至5任一项所述的方法，所述将所述命令缓存的脚本代码注入至所述浏览器进程中，包括：
    在所述浏览器进程中创建线程，利用所述线程执行所述命令缓存的脚本代码；或者，
    生成所述命令缓存的脚本代码对应的可执行文件，将针对所述第一渲染函数的调用代码替换为所述可执行文件。
  7. 根据权利要求1至6任一项所述的方法，其中，所述将所述调用处理请求发送至所述客户端进程，包括：
    通过所述浏览器进程，将所述调用处理请求的访问地址设置为所述客户端进程的服务地址；
    通过所述客户端进程，在所述服务地址对所述调用处理请求进行拦截，完成将所述调用处理请求发送至所述客户端进程。
  8. 根据权利要求1至7任一项所述的方法，其中，所述通过所述浏览器进程，针对所述命令缓存生成所述调用处理请求，并将所述调用处理请求发送至所述客户端进程之前，所述方法还包括：
    当所述第一渲染函数为存在返回值的同步渲染函数时，响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程，针对所述第一渲染函数返回虚拟返回值，并将所述虚拟返回值和所述第一渲染函数的调用信息，共同写入至所述命令缓存中。
  9. 根据权利要求1至8任一项所述的方法，其中，所述通过所述第二渲染函数，对所述小程序的所述页面帧进行图形渲染，得到所述小程序的所述页面帧的渲染结果之后，所述方法还包括：
    通过所述客户端进程，从所述调用处理请求中解析得到所述命令缓存，并从所述命令缓存中提取得到所述虚拟返回值；
    通过所述客户端进程，将所述第二渲染函数的返回值作为所述第一渲染函数的真实返回值，并建立所述真实返回值与所述虚拟返回值之间的映射关系；
    其中，所述映射关系用于针对所述命令缓存中的所述虚拟返回值确定对应的真实返回值。
  10. 根据权利要求1至9任一项所述的方法，其中，所述调用信息包括：调用参数；所述对所述第二渲染函数进行调用，包括：
    通过所述客户端进程，从所述命令缓存中解析得到所述第一渲染函数的调用参数，并将所述第一渲染函数的调用参数转换为第二渲染函数的调用参数；
    通过所述客户端进程，将所述第二渲染函数的调用参数，传递至所述第二渲染函数，完成将对所述第二渲染函数的调用。
  11. 一种页面渲染装置，所述装置包括：
    进程启动模块，配置为响应于针对小程序的启动操作，通过应用程序客户端的客户端进程启动浏览器的浏览器进程，并通过所述浏览器进程执行所述小程序的业务逻辑代码，所述小程序在所述应用程序客户端中运行；
    请求发送模块，配置为响应于所述浏览器进程执行至所述业务逻辑代码中针对第一渲染函数的调用代码，通过所述浏览器进程向客户端进程发送调用处理请求；其中，所述第一渲染函数是所述浏览器进程调用的图形渲染函数，所述第一渲染函数用于渲染所述小程序的页面帧；
    调用处理模块，配置为响应于所述调用处理请求，通过所述客户端进程确定所述第一渲染函数相对应的第二渲染函数，并对所述第二渲染函数进行调用；其中，所述第二渲染函数和所述第一渲染函数的图形渲染功能相同；
    图形渲染模块，配置为通过所述第二渲染函数，对所述小程序的所述页面帧进行图形渲染，得到所述小程序的所述页面帧的渲染结果。
  12. 一种电子设备，所述电子设备包括：
    存储器，用于存储计算机可执行指令或计算机程序；
    处理器，用于执行所述存储器中存储的计算机可执行指令或者计算机程序时，实现 权利要求1至10任一项所述的页面渲染方法。
  13. 一种计算机可读存储介质，存储有计算机可执行指令或者计算机程序，所述计算机可执行指令被处理器执行时实现权利要求1至10任一项所述的页面渲染方法。
  14. 一种计算机程序产品，包括计算机程序或计算机可执行指令，，所述计算机程序或计算机可执行指令被处理器执行时实现权利要求1至10任一项所述的页面渲染方法。
PCT/CN2024/097277 2023-06-19 2024-06-04 一种页面渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品 Ceased WO2024260252A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
EP24825148.0A EP4645122A4 (en) 2023-06-19 2024-06-04 PAGE RENDERING METHOD AND APPARATUS, ELECTRONIC DEVICE, COMPUTER-READABLE STORAGE MEDIA AND COMPUTER PROGRAM PRODUCT
JP2025546965A JP2026510235A (ja) 2023-06-19 2024-06-04 ページレンダリング方法、装置、電子機器、及びコンピュータプログラム
US19/319,494 US20260004384A1 (en) 2023-06-19 2025-09-04 Page rendering method

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202310732158.7A CN119166920A (zh) 2023-06-19 2023-06-19 一种页面渲染方法、装置、设备、存储介质及程序产品
CN202310732158.7 2023-06-19

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US19/319,494 Continuation US20260004384A1 (en) 2023-06-19 2025-09-04 Page rendering method

Publications (1)

Publication Number Publication Date
WO2024260252A1 true WO2024260252A1 (zh) 2024-12-26

Family

ID=93885903

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2024/097277 Ceased WO2024260252A1 (zh) 2023-06-19 2024-06-04 一种页面渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品

Country Status (5)

Country Link
US (1) US20260004384A1 (zh)
EP (1) EP4645122A4 (zh)
JP (1) JP2026510235A (zh)
CN (1) CN119166920A (zh)
WO (1) WO2024260252A1 (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN120255971B (zh) * 2025-06-06 2025-12-05 花瓣支付(深圳)有限公司 一种交互实现方法和电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005165873A (ja) * 2003-12-04 2005-06-23 Masahiro Ito Ｗｅｂ３Ｄ画像表示システム
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN110704136A (zh) * 2019-09-27 2020-01-17 北京百度网讯科技有限公司 小程序组件的渲染方法、客户端、电子设备及存储介质
CN113791789A (zh) * 2021-08-13 2021-12-14 成都中鱼互动科技有限公司 一种通用浏览器上检测webgl上下文的方法
CN114371838A (zh) * 2022-01-10 2022-04-19 百度在线网络技术（北京）有限公司 一种小程序画布渲染方法、装置、设备及存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9910833B2 (en) * 2012-11-13 2018-03-06 International Business Machines Corporation Automatically rendering web and/or hybrid applications natively in parallel
CN107832108B (zh) * 2016-09-14 2021-05-07 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备
CN112861057B (zh) * 2021-02-10 2024-03-01 北京百度网讯科技有限公司 基于小程序的页面渲染方法、装置、设备及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005165873A (ja) * 2003-12-04 2005-06-23 Masahiro Ito Ｗｅｂ３Ｄ画像表示システム
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN110704136A (zh) * 2019-09-27 2020-01-17 北京百度网讯科技有限公司 小程序组件的渲染方法、客户端、电子设备及存储介质
CN113791789A (zh) * 2021-08-13 2021-12-14 成都中鱼互动科技有限公司 一种通用浏览器上检测webgl上下文的方法
CN114371838A (zh) * 2022-01-10 2022-04-19 百度在线网络技术（北京）有限公司 一种小程序画布渲染方法、装置、设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP4645122A4 *

Also Published As

Publication number Publication date
EP4645122A4 (en) 2026-04-29
EP4645122A1 (en) 2025-11-05
JP2026510235A (ja) 2026-04-02
CN119166920A (zh) 2024-12-20
US20260004384A1 (en) 2026-01-01

Similar Documents

Publication Publication Date Title
US20180357085A1 (en) Method and apparatus for running android application on windows system
US20140053063A1 (en) User interface control framework for stamping out controls using a declarative template
CN112035172A (zh) 操作系统启动方法、装置、服务器及存储介质
US12386599B2 (en) Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product
US20120323950A1 (en) Embedded query formulation service
CN103179166A (zh) 在客户端中提供服务的方法和客户端
CN111625290B (zh) 一种Android平台下布局文件预加载方法、装置及电子设备
CN101909082A (zh) 一种基于模型驱动的网格门户配置系统及配置方法
CN108319474A (zh) 一种页面信息生成方法、装置和设备
US20260004384A1 (en) Page rendering method
KR101249735B1 (ko) 범용 운영체제 상에서 안드로이드 어플리케이션을 실행하기 위한 단말장치 및 방법, 그리고 이를 위한 컴퓨터로 판독가능한 기록매체
CN119011207A (zh) 一种主应用的集成方法、装置和微前端架构
CN111984258A (zh) 页面构建方法和设备
EP4428675A1 (en) Cloud technology-based graphic program online development method and system, and related device
CN114911541A (zh) 配置信息的处理方法、装置、电子设备及存储介质
US11604662B2 (en) System and method for accelerating modernization of user interfaces in a computing environment
CN114995847A (zh) 热更新方法、装置、设备及计算机可读存储介质
CN112632436B (zh) 一种网页显示方法、装置、电子设备及存储介质
CN109960522B (zh) 一种软件升级方法及装置
CN118656110A (zh) 页面配置方法及设备
CN118642817A (zh) 资源创建方法、装置、计算机设备、存储介质及程序产品
CN118001737A (zh) 一种游戏引擎页面和原生页面的交互方法和装置
CN116501596A (zh) 应用程序的测试方法及装置
CN115268985A (zh) 一种用于RPC服务的Mock方法、装置及计算机可读存储介质
CN113590166A (zh) 应用程序的更新方法、装置以及计算机可读存储介质

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: 24825148

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2024825148

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2024825148

Country of ref document: EP

Effective date: 20250729

ENP Entry into the national phase

Ref document number: 2024825148

Country of ref document: EP

Effective date: 20250729

ENP Entry into the national phase

Ref document number: 2025546965

Country of ref document: JP

Kind code of ref document: A

WWE Wipo information: entry into national phase

Ref document number: 2025546965

Country of ref document: JP

WWE Wipo information: entry into national phase

Ref document number: 11202504764U

Country of ref document: SG

WWP Wipo information: published in national office

Ref document number: 11202504764U

Country of ref document: SG

WWP Wipo information: published in national office

Ref document number: 2024825148

Country of ref document: EP

NENP Non-entry into the national phase

Ref country code: DE