WO2017152776A1 - 网络引擎启动方法及装置 - Google Patents

网络引擎启动方法及装置 Download PDF

Info

Publication number
WO2017152776A1
WO2017152776A1 PCT/CN2017/074722 CN2017074722W WO2017152776A1 WO 2017152776 A1 WO2017152776 A1 WO 2017152776A1 CN 2017074722 W CN2017074722 W CN 2017074722W WO 2017152776 A1 WO2017152776 A1 WO 2017152776A1
Authority
WO
WIPO (PCT)
Prior art keywords
transition image
graphics buffer
network engine
display
page content
Prior art date
Application number
PCT/CN2017/074722
Other languages
English (en)
French (fr)
Inventor
吴栋磊
程轲
闵洪波
Original Assignee
阿里巴巴集团控股有限公司
吴栋磊
程轲
闵洪波
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 阿里巴巴集团控股有限公司, 吴栋磊, 程轲, 闵洪波 filed Critical 阿里巴巴集团控股有限公司
Publication of WO2017152776A1 publication Critical patent/WO2017152776A1/zh
Priority to US16/124,023 priority Critical patent/US20190080017A1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44568—Immediately runnable code
    • G06F9/44578—Preparing or optimising for loading
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present application relates to network engine technology, and in particular, to a network engine startup method.
  • the application also relates to a network engine starting device.
  • Terminal devices such as personal computers and smart phones have become an important part of people's daily lives. Users can usually launch a browser or Web App (Web-based application) by clicking an icon or a button to achieve the desired function.
  • the browser or Web App usually needs to start the web engine.
  • the web engine renders the page according to the HTML, XML or Image returned from the server and outputs it on the display device for presentation to the user.
  • the startup process of the Web engine usually includes: downloading a network resource, converting the obtained webpage document into a DOM Tree, and then constructing a render tree for rendering the Dom Tree, and performing layout processing on each node of the rendering tree to determine Its display position on the screen, finally traversing the rendering tree to draw each node into the graphics buffer, and notifying the module that provides the display service (usually called the display system or graphics system) to render the data in the graphics buffer to the rendering Display the hardware buffer of the device to complete the rendering of the page content.
  • the display service usually called the display system or graphics system
  • the startup process of the web engine needs to perform the above operations, it is usually time consuming, generally more than 300ms, that is, from the time when the user executes the startup of the Web App or the browser, to the time when the content of the page is displayed, on the screen.
  • some terminal devices use an additional independent window to display transition animations while launching the web engine.
  • a smartphone using the Android system performs a transition animation display through a window management process. In this way, for the entire system In this case, the overhead of the transition animation takes up extra memory, which increases memory overhead.
  • the embodiment of the present application provides a network engine startup method to solve the problem that an existing network engine startup mode needs to occupy an extra buffer when displaying a transition animation.
  • the embodiment of the present application further provides a network engine starting device.
  • the application provides a network engine startup method, including:
  • the network engine reuses a graphics buffer used to display the transition image when displaying the page content, and the graphics buffer is configured to store user interface data for display and output by the display service module.
  • the displaying the transition image comprises: displaying the transition image in an animated manner.
  • the animation manner includes any one or combination of the following: gradient transparency, gradient size expansion, movement, and rotation.
  • the step of acquiring and displaying the transition image and the step of starting the web engine to display the page content are respectively implemented asynchronously in different threads of the application process.
  • the displaying the transition image comprises:
  • the decoded data is written into the graphics buffer to display the transition image.
  • the acquiring manner of the transition image file includes: obtaining according to a path specified in a configuration file of the Web App.
  • the transition image file includes: obtaining according to a preset path.
  • the step of acquiring a graphics buffer by applying to the graphics buffer management module, and the other steps included in the displaying the transition image are respectively implemented in different threads.
  • the displaying the transition image comprises:
  • Data is written to the graphics buffer in accordance with a preset color scheme to display a transition image corresponding to the color scheme.
  • the starting network engine displays page content, including:
  • the network engine determines whether the preset condition is met during the process of downloading the resource and rendering the layout
  • the laid out page content is drawn into the graphics buffer.
  • the preset condition includes: the transition image is displayed.
  • the network engine performs the following operations during the process of downloading the resource and rendering the layout:
  • the preset conditions include:
  • the transition image is displayed, and the size of the drawable area satisfies a first screen requirement
  • the drawing the laid page content into the graphics buffer comprises: drawing the laid out first screen page content into the graphics buffer.
  • the network engine performs the following operations during the process of downloading the resource and rendering the layout:
  • the preset condition includes: the size of the drawable area satisfies a first screen requirement
  • the drawing the laid page content into the graphics buffer comprises: drawing the laid out first screen page content into the graphics buffer.
  • the process of rendering the layout by the network engine is performed hierarchically;
  • the drawing the laid page content into the graphics buffer comprises: synthesizing and drawing the layered layout page content into the graphics buffer.
  • the application further provides a network engine starting device, including:
  • a transition image display unit for displaying a transition image
  • a network engine startup unit configured to start a network engine and display page content; wherein the network engine multiplexes a graphics buffer used by the transition image display unit when displaying the page content.
  • the transition image display unit is specifically configured to display the transition image in an animated manner.
  • transition image display unit and the network engine startup unit are respectively used to implement respective functions asynchronously by using different threads.
  • the transition image display unit includes:
  • a file acquisition subunit for acquiring a transition image file
  • a graphics buffer application sub-unit for acquiring a graphics buffer by applying to the graphics buffer management module
  • a decoding subunit configured to read a transition image file acquired by the file obtaining subunit and perform a decoding operation
  • the first graphics buffer is written to the subunit for writing data obtained by the decoding subunit into the graphics buffer to display a transition image.
  • the file obtaining subunit is specifically configured to obtain a transition image file according to a path specified in a configuration file of the Web App.
  • the file obtaining subunit is specifically configured to acquire a transition image file according to a preset path.
  • the graphics buffer application subunit, and other subunits in the transition image display unit respectively use different threads to implement respective functions.
  • the transition image display unit includes:
  • a graphics buffer application sub-unit for acquiring a graphics buffer by applying to the graphics buffer management module
  • the second image buffer write subunit is configured to write data into the graphics buffer according to a preset color scheme to display a transition image corresponding to the color scheme.
  • the network engine startup unit includes:
  • condition determining subunit configured to determine whether a preset condition is met during the working of the rendering layout subunit
  • a graphics buffer obtaining subunit configured to acquire a graphics buffer used by the transition image display unit when the output of the condition determining subunit is YES;
  • a layout content drawing subunit for drawing the laid out page content into the graphics buffer is
  • the preset condition adopted by the condition determining subunit is: the transition image display unit completes display of the transition image.
  • the network engine startup unit further includes:
  • a drawable area calculation subunit configured to calculate a size of the drawable area according to the position information of the laid out page content
  • the preset condition adopted by the condition determining subunit is: the transition image display unit completes the display of the transition image, and the size of the drawable area calculated by the drawable area calculation subunit satisfies the first screen requirement;
  • the layout content drawing sub-unit is specifically configured to draw the laid-out first-screen page content into the graphics buffer obtained by the graphics buffer acquisition sub-unit.
  • the network engine startup unit further includes:
  • a drawable area calculation subunit configured to calculate a size of the drawable area according to the position information of the laid out page content
  • the preset condition adopted by the condition determining subunit is: the size of the drawable area calculated by the drawable area calculating subunit satisfies the first screen requirement;
  • the layout content drawing sub-unit is specifically configured to draw the laid-out first-screen page content into the graphics buffer obtained by the graphics buffer acquisition sub-unit.
  • the rendering layout sub-unit is specifically used by the network engine to download resources and layered for rendering layout;
  • the layout content drawing sub-unit is specifically configured to synthesize and draw the layered layout of the page content into the graphics buffer obtained by the graphics buffer acquisition sub-unit.
  • the network engine startup method provided by the present application includes a process of displaying a transition image and displaying a page content by starting a network engine, and in the above process, the network engine reuses a graphic used to display the transition animation when displaying the page content. Buffer.
  • the same graphics buffer is reused, so not only the fast feedback to the user input is realized during the startup process of the network engine, but also because of the transition image
  • the display generates additional buffer overhead, saving memory usage.
  • FIG. 1 is a flow chart of an embodiment of a network engine startup method of the present application
  • FIG. 2 is a schematic diagram of a process flow of displaying a transition image by a splash module provided by an embodiment of the present application
  • FIG. 3 is a schematic diagram of a multi-thread processing process provided by an embodiment of the present application.
  • FIG. 4 is a schematic diagram of an embodiment of a network engine launching apparatus of the present application.
  • displaying user interface data (UI data) on the display device is the most basic way to implement interaction with the user.
  • the application or system can write user interface data that needs to be displayed or updated to the respective graphics buffer.
  • the graphics buffer refers to a memory block for display, which is usually managed by a dedicated module, such as a graphics buffer management module, which is responsible for storing and managing graphics buffers, for example, according to applications or system requests. Assign a graphics buffer to it. Since the graphics buffer is used to store the UI data to be displayed, and the display resolutions of different electronic devices are different, the size of the graphics buffer may also be different. For example, the resolution is 1080p, and the size of each graphics buffer is usually 8MB.
  • the module responsible for providing the display service ie, the display service module
  • the display service module can be notified for display, and the display service module is corresponding to each application by software or hardware.
  • the UI data in the graphics buffer of the system is calculated, merged, and finally rendered and output to the hardware buffer of the display device, thereby realizing the display function of the user interface.
  • the technical solution of the present application is to implement multiplexing of the graphics buffer between the startup network engine and the display transition image based on the above display technology. Since the startup of the network engine is time consuming, in order to provide quick feedback to the user input, the technical solution of the present application also adopts a method of displaying a transition image, and the module responsible for displaying the transition image is referred to herein as a splash module.
  • the core of the technical solution of the present application is that the network engine does not re-apply new during the startup process.
  • the graphics buffer but reuse the graphics buffer used by the splash module to display the page content, thereby avoiding the overhead of additional graphics buffers and reducing the memory resources.
  • FIG. 1 is a flowchart of an embodiment of a network engine startup method according to the present application. The method includes the following steps:
  • Step 101 Display a transition image.
  • the splash module can be called to display the transition image, and then the web engine is started. Displaying the content of the page, and multiplexing the graphics buffer used by the splash module when displaying the content of the page, that is, the web engine acquires a graphics buffer used when the splash module displays the transition image, and outputs the content of the page to be displayed to the In the graphics buffer.
  • the embodiment provides a preferred embodiment: the startup of the splash module and the web engine is implemented in a multi-thread asynchronous manner.
  • the application process creates a separate splash thread for executing the splash module, which is responsible for displaying the transition image; and the task of starting the web engine is done by the main thread (also known as the web engine thread).
  • the splash module is a lightweight module, it can be displayed to the user in a quick manner, providing timely feedback function; on the other hand, it can not block the startup process of the web engine.
  • the subsequent text of this embodiment focuses on the implementation manner using the multi-thread asynchronous mode.
  • the splash module can display a transition image according to a preset color scheme.
  • the preset color scheme can specify two or more colors to be arranged according to a specific rule.
  • the specific implementation process includes: acquiring a graphics buffer by applying to the graphics buffer management module; writing data to the graphics buffer according to a preset color scheme to display a transition image corresponding to the color scheme.
  • this embodiment provides a preferred embodiment for presenting a transition image in accordance with a transition image file.
  • the transition image file may be a pre-designed map Slice files, such as bmp files or jpg files.
  • the process of displaying the transition image by the splash module includes several steps of acquiring a transition image, applying a graphics buffer, decoding, and writing a graphics buffer, respectively corresponding to steps 101-1 to 101-4 shown below. , further described below in conjunction with FIG. 2.
  • Step 101-1 Obtain a transition image file.
  • the splash module can acquire transition image files in a variety of ways.
  • the splash module can be obtained according to the path specified in the Web App configuration file.
  • the path information of the transition image can be configured. If the user clicks on the icon corresponding to the Web App, the transition can be made when the Web App process is created. The path of the image is passed to the splash module so that the splash module can get the transition image file based on the path.
  • the splash module can acquire a transition image file according to a preset path.
  • Step 101-2 Obtain a graphics buffer by applying to the graphics buffer management module.
  • the splash module sends a request for requesting a graphics buffer to the graphics buffer management module, and the graphics buffer management module can search for a graphics buffer with or without idle in the graphics buffer it manages, and if found, the graphics buffer Return to the splash module; if not found, you can reapply memory to create a free graphics buffer and return the newly created graphics buffer to the splash module.
  • the graphics buffer management module returns the memory address of the graphics buffer to the splash module, and the splash module can subsequently perform the operation of writing data into the graphics buffer according to the obtained memory address.
  • Step 101-3 reading the transition image file and performing a decoding operation.
  • the splash module reads the acquired transition image file, and performs a corresponding decoding operation according to the data storage format of the transition image file, and converts the data in the transition image file into a format that can be displayed on the display device, for example, converting into RGB.
  • the color value corresponding to the color mode is not limited to the color mode.
  • Step 101-4 Write the decoded data into the graphics buffer to display the transition image.
  • the splash module writes the decoded data into the graphics buffer acquired in step 101-2 to display the transition image on the display device.
  • the display service module may actively detect an event that the graphics buffer is updated, and may also actively notify the display service module after the operation of writing the decoded data to the graphics buffer is completed by the splash module.
  • the display service module is responsible for outputting the data to be displayed in the graphics buffer to a hardware buffer of the display device for display.
  • the transition image may be displayed in an animated manner, ie, the transition animation is displayed.
  • the animation mode includes any one or combination of the following: gradient transparency (Alpha), gradient size scaling (Scale), movement (Translate), rotation (Rotate), which one or which animation mode is adopted, which can be preset, Can be specified in the web app's configuration file.
  • the splash module finishes writing the graphics buffer, it can notify the display service module to calculate and render the data in the graphics buffer according to the specific animation mode, and output it to the display.
  • the device's hardware buffer which renders an animation on the display device. For example, the animation of the movement can be achieved by progressive adjustment of the display position.
  • the splash module performs operations such as requesting a graphics buffer, image decoding, and writing a graphics buffer in a splash thread created for it.
  • This embodiment provides a preferred embodiment of multi-threaded concurrent implementation of the splash module function.
  • the splash thread performs the operation of acquiring the transition image file, and the decoding operation, and the getbuf thread executes the operation of applying the graphics buffer, and the memory address of the obtained graphics buffer is passed through the thread.
  • the data sharing mechanism or communication mechanism is passed to the splash thread, and the splash thread writes the decoded data into the graphics buffer, thereby realizing the function of quickly presenting the transition image to the user.
  • FIG. 3 is a schematic diagram of a multi-thread processing process provided by this embodiment.
  • Step 102 Start a network engine and display page content.
  • the network engine first performs necessary initialization operations, and then generally can perform the following operations: downloading a page document to be displayed (for example, an html file) and various resources involved in the page document; parsing the page document Convert to a DOM tree; create a render tree for rendering the DOM tree according to style information such as CSS, the nodes in the render tree usually correspond to the visible parts in the page content, usually with color , size, etc. display attributes of the rectangle, the order of these rectangles is consistent with the display order; the layout of the nodes of the rendering tree to determine its display position on the screen; finally traverse the rendering tree and draw the nodes into the network engine application In the graphics buffer, to render the page content on the display device.
  • a page document to be displayed for example, an html file
  • various resources involved in the page document parsing the page document Convert to a DOM tree
  • create a render tree for rendering the DOM tree according to style information such as CSS the nodes in the render tree usually correspond to the visible parts in the page content, usually
  • the network engine reuses the graphics buffer used in step 101 in the process of executing the original processing flow to display the page content, that is, the application for displaying the transition image.
  • the graphics buffer is reused during the startup of the web engine. There is no additional buffer overhead due to the display of the transition image, which saves memory usage. The following describes the processing of the web engine in this step.
  • the network engine generates a DOM tree and a rendering tree according to the downloaded resource, and lays out the nodes of the rendering tree to determine the display position on the screen. In the process, the network engine determines whether the preset condition is met, and if so, obtains the display transition.
  • the graphics buffer used in the image, and the laid out page content ie, the nodes that have been laid out in the rendering tree) are drawn into the graphics buffer.
  • the obtaining a graphics buffer used to display the transition image generally refers to acquiring information such as a memory address and a size of the graphics buffer.
  • the web engine thread can obtain the memory address and size of the graphics buffer used by the splash thread through the data sharing mechanism or communication mechanism between the threads.
  • the preset condition may be: the transition image is displayed.
  • the splash thread can send a notification to the web engine thread after the transition image is displayed, so that the web engine thread can obtain the graphics buffer used by the splash thread to display the transition image, and draw the laid out page content. Go to the graphics buffer.
  • This processing method can ensure the integrity of the transition animation display process and realize the page content to the user as soon as possible for the implementation of displaying the transition image in an animated manner.
  • the embodiment further provides a preferred embodiment for displaying the complete first screen content.
  • the preset The condition is that the transition image is displayed and the size of the drawable area meets the requirements of the first screen.
  • the drawable area refers to an area in a display screen corresponding to a node that has been laid out in the rendering tree; the first screen (above the fold, or the first screen) means that after the page is opened, the screen is displayed.
  • the first screen presented on the screen that is, the screen that can be seen by the user without performing a scrolling operation.
  • the web engine can perform the following operations in the process of downloading the resource and rendering the layout: calculating the size of the drawable area based on the location information of the laid out page content.
  • the size of the drawable area is calculated according to the display position of the layout node on the screen.
  • the layout of the nodes in the rendering tree is continued until the size of the drawable area satisfies the requirements of the first screen, that is, the area of the drawable area If the size is greater than or equal to the size of the first screen, the graphics buffer can be obtained from the splash thread, and the content of the laid out first screen page is drawn into the graphics buffer.
  • the web engine since the web engine has prepared the first screen content, the user is displayed by writing the graphics buffer, which is usually the complete first screen content without white screen or partial white screen.
  • the phenomenon from the perspective of visual experience, realizes seamless switching from transition image display to page content display, which can ensure a good browsing experience for users.
  • this embodiment further provides another preferred embodiment capable of displaying the content of the first screen page as soon as possible, that is, the preset condition is that the size of the drawable area satisfies the requirements of the first screen.
  • the network engine calculates the size of the drawable area according to the position information of the already laid out page content in the process of downloading the resource and rendering the layout; the difference is that The trigger condition for the web engine to obtain the graphics buffer from the splash thread is only: the size of the drawable area meets the requirements of the first screen.
  • the splash thread can be notified that the content of the first screen page is ready, and the graphics buffer is obtained from the splash thread and written to it. The content of the first page without waiting for the transition image to be displayed.
  • the content of the first screen page can be displayed to the user as soon as possible, especially in the scene in which the transition image is displayed in an animated manner, which can reduce the time for the user to watch the transition animation, and the page that the user really cares or is interested in.
  • the content is presented as quickly as possible.
  • the bottom layer is a window, and a picture is set thereon, and buttons, links, and the like can be set on the picture. Therefore, when the web engine performs the rendering layout and prepares the drawable page content, it is usually performed in a layered manner. After the preset condition is met and the graphics buffer is obtained, the layered prepared content to be drawn can be layered. The composite is constructed by the overlay relationship between the layers, and the synthesized data is written into the graphics buffer obtained from the splash thread. This can reduce the repeated write operation to the graphics buffer and improve the execution efficiency.
  • FIG. 4 is a schematic diagram of an embodiment of a network engine starting device according to the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment. The device embodiments described below are merely illustrative.
  • the network engine starting device of the embodiment includes: a transition image display unit 401, configured to display a transition image; a network engine starting unit 402, configured to start a network engine, and display page content; wherein the network engine is displayed on the page In the case of content, the graphics buffer used by the transition image display unit is multiplexed.
  • the transition image display unit is specifically configured to display a transition diagram by using an animation manner image.
  • transition image display unit and the network engine startup unit are respectively used to implement respective functions asynchronously by using different threads.
  • the transition image display unit includes:
  • a file acquisition subunit for acquiring a transition image file
  • a graphics buffer application sub-unit for acquiring a graphics buffer by applying to the graphics buffer management module
  • a decoding subunit configured to read a transition image file acquired by the file obtaining subunit and perform a decoding operation
  • the first graphics buffer is written to the subunit for writing data obtained by the decoding subunit into the graphics buffer to display a transition image.
  • the file obtaining subunit is specifically configured to obtain a transition image file according to a path specified in a configuration file of the Web App.
  • the file obtaining subunit is specifically configured to acquire a transition image file according to a preset path.
  • the graphics buffer application subunit, and other subunits in the transition image display unit respectively use different threads to implement respective functions.
  • the transition image display unit includes:
  • a graphics buffer application sub-unit for acquiring a graphics buffer by applying to the graphics buffer management module
  • the second image buffer write subunit is configured to write data into the graphics buffer according to a preset color scheme to display a transition image corresponding to the color scheme.
  • the network engine startup unit includes:
  • condition determining subunit configured to determine whether a preset condition is met during the working of the rendering layout subunit
  • a graphics buffer obtaining subunit configured to acquire a graphics buffer used by the transition image display unit when the output of the condition determining subunit is YES;
  • a layout content drawing subunit for drawing the laid out page content into the graphics buffer is
  • the preset condition adopted by the condition determining subunit is: the transition image display unit completes display of the transition image.
  • the network engine startup unit further includes:
  • a drawable area calculation subunit configured to calculate a size of the drawable area according to the position information of the laid out page content
  • the preset condition adopted by the condition determining subunit is: the transition image display unit completes the display of the transition image, and the size of the drawable area calculated by the drawable area calculation subunit satisfies the first screen requirement;
  • the layout content drawing sub-unit is specifically configured to draw the laid-out first-screen page content into the graphics buffer obtained by the graphics buffer acquisition sub-unit.
  • the network engine startup unit further includes:
  • a drawable area calculation subunit configured to calculate a size of the drawable area according to the position information of the laid out page content
  • the preset condition adopted by the condition determining subunit is: the size of the drawable area calculated by the drawable area calculating subunit satisfies the first screen requirement;
  • the layout content drawing sub-unit is specifically configured to draw the laid-out first-screen page content into the graphics buffer obtained by the graphics buffer acquisition sub-unit.
  • the rendering layout sub-unit is specifically used by the network engine to download resources and layered for rendering layout;
  • the layout content drawing sub-unit is specifically configured to synthesize and draw the layered layout of the page content into the graphics buffer obtained by the graphics buffer acquisition sub-unit.
  • a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
  • processors CPUs
  • input/output interfaces network interfaces
  • memory volatile and non-volatile memory
  • the memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory.
  • RAM random access memory
  • ROM read only memory
  • Memory is an example of a computer readable medium.
  • Computer readable media including both permanent and non-persistent, removable and non-removable media may be implemented by any method or technology.
  • the information can be computer readable instructions, data structures, modules of programs, or other data.
  • Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device.
  • computer readable media does not include non-transitory computer readable media, such as modulated data signals and carrier waves.
  • embodiments of the present application can be provided as a method, system, or computer program product.
  • the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment in combination of software and hardware.
  • the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computational Linguistics (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Databases & Information Systems (AREA)
  • General Health & Medical Sciences (AREA)
  • Data Mining & Analysis (AREA)
  • Controls And Circuits For Display Device (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种网络引擎启动方法，包括：显示过渡图像；启动网络引擎，显示页面内容；其中，所述网络引擎在显示页面内容时，复用显示过渡图像所使用的图形缓冲区，所述图形缓冲区用于存储供显示服务模块显示输出的用户界面数据。本申请同时提供一种网络引擎启动装置。采用本申请提供的网络引擎启动方法，由于网络引擎的启动过程和过渡图像的显示过程，复用了相同的图形缓冲区，因此在网络引擎的启动过程中不仅实现了对用户输入的快速反馈，而且没有因为过渡图像的显示而产生额外的缓冲区开销，节省对内存的占用。

Description

网络引擎启动方法及装置 技术领域
本申请涉及网络引擎技术，具体涉及一种网络引擎启动方法。本申请同时涉及一种网络引擎启动装置。
背景技术
个人电脑、智能手机等终端设备已经成为了人们日常生活的重要组成部分。用户通常可以通过点击图标或者按键等方式，启动浏览器或者Web App(基于Web的应用)，以实现所需的功能。浏览器或者Web App通常需要启动web engine(网络引擎)，由web engine根据从服务器端返回的HTML、XML或者Image等资源，进行页面渲染并在显示设备上输出，以呈现给用户。
Web engine的启动过程通常包括：下载网络资源，将获取的网页文档转换为DOM Tree，随后构造用于渲染Dom Tree的渲染树(render tree)，并对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置，最后遍历渲染树将每个节点绘制到图形缓冲区中，并通知提供显示服务的模块(通常称为显示系统或者图形系统)将图形缓冲区中的数据渲染输出到显示设备的硬件缓冲区中，从而完成页面内容的呈现。
由于web engine的启动过程需要执行上述操作，因此通常比较耗时，一般在300ms以上，也就是说从用户执行启动Web App或者浏览器的操作，到页面内容显示出来的这段时间内，屏幕上通常没有内容显示，可能导致用户认为输入操作没有得到任何反馈，甚至可能重复执行相同的操作，影响用户的使用体验。
针对这一问题，有的终端设备在启动web engine的同时，采用一个额外的独立窗口专门用于显示过渡动画，例如：采用Android系统的智能手机通过窗口管理进程进行过渡动画的展示。采用这种方式，对于整个系统 来说，由于过渡动画的显示占用了额外的缓冲区，从而增大内存开销。
发明内容
本申请实施例提供一种网络引擎启动方法，以解决现有的网络引擎启动方式在显示过渡动画时需要占用额外缓冲区的问题。本申请实施例还提供一种网络引擎启动装置。
本申请提供一种网络引擎启动方法，包括：
显示过渡图像；
启动网络引擎，显示页面内容；
其中，所述网络引擎在显示页面内容时，复用显示过渡图像所使用的图形缓冲区，所述图形缓冲区用于存储供显示服务模块显示输出的用户界面数据。
可选的，所述显示过渡图像包括：采用动画方式显示过渡图像。
可选的，所述动画方式包括以下任意一种或者组合：渐变透明度、渐变尺寸伸缩、移动、旋转。
可选的，所述获取并显示过渡图像的步骤和所述启动网络引擎显示页面内容的步骤，分别在应用程序进程的不同线程中异步实施。
可选的，所述显示过渡图像包括：
获取过渡图像文件；
通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
读取所述过渡图像文件并执行解码操作；
将解码得到的数据写入所述图形缓冲区中，以显示所述过渡图像。
可选的，当所述方法由启动Web App的指令触发时，所述过渡图像文件的获取方式包括：根据Web App的配置文件中指定的路径获取。
可选的，当所述方法由启动浏览器的指令触发时，所述过渡图像文件 的获取方式包括：根据预先设定的路径获取。
可选的，所述通过向图形缓冲区管理模块申请的方式获取图形缓冲区的步骤，以及所述显示过渡图像所包含的其他步骤，分别在不同的线程中实施。
可选的，所述显示过渡图像包括：
通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
按照预设的颜色方案向所述图形缓冲区中写入数据，以显示对应于所述颜色方案的过渡图像。
可选的，所述启动网络引擎，显示页面内容，包括：
所述网络引擎在下载资源以及渲染布局的过程中，判断是否满足预设条件；
若满足，执行下述操作：
获取显示过渡图像时所使用的图形缓冲区；
将已布局好的页面内容绘制到所述图形缓冲区中。
可选的，所述预设条件包括：所述过渡图像显示完毕。
可选的，所述网络引擎在下载资源以及渲染布局的过程中，还执行下述操作：
根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
所述预设条件包括：
所述过渡图像显示完毕、且所述可绘制区域的尺寸满足首屏要求；
所述将已布局好的页面内容绘制到所述图形缓冲区中，包括：将已布局好的首屏页面内容绘制到所述图形缓冲区中。
可选的，所述网络引擎在下载资源以及渲染布局的过程中，还执行下述操作：
根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
所述预设条件包括：所述可绘制区域的尺寸满足首屏要求；
所述将已布局好的页面内容绘制到所述图形缓冲区中，包括：将已布局好的首屏页面内容绘制到所述图形缓冲区中。
可选的，所述网络引擎渲染布局的过程，是分层进行的；
所述将已布局好的页面内容绘制到所述图形缓冲区中，包括：将已分层布局好的页面内容合成并绘制到所述图形缓冲区中。
相应的，本申请还提供一种网络引擎启动装置，包括：
过渡图像显示单元，用于显示过渡图像；
网络引擎启动单元，用于启动网络引擎，显示页面内容；其中，所述网络引擎在显示页面内容时，复用过渡图像显示单元所使用的图形缓冲区。
可选的，所述过渡图像显示单元，具体用于采用动画方式显示过渡图像。
可选的，所述过渡图像显示单元和所述网络引擎启动单元，分别用于采用不同的线程异步实现各自的功能。
可选的，所述过渡图像显示单元包括：
文件获取子单元，用于获取过渡图像文件；
图形缓冲区申请子单元，用于通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
解码子单元，用于读取所述文件获取子单元所获取的过渡图像文件并执行解码操作；
第一图形缓冲区写入子单元，用于将所述解码子单元得到的数据写入所述图形缓冲区中，以显示过渡图像。
可选的，所述文件获取子单元具体用于，根据Web App的配置文件中指定的路径获取过渡图像文件。
可选的，所述文件获取子单元具体用于，根据预先设定的路径获取过渡图像文件。
可选的，所述图形缓冲区申请子单元，以及所述过渡图像显示单元中的其他子单元，分别采用不同的线程实现各自的功能。
可选的，所述过渡图像显示单元包括：
图形缓冲区申请子单元，用于通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
第二图像缓冲区写入子单元，用于按照预设的颜色方案向所述图形缓冲区中写入数据，以显示对应于所述颜色方案的过渡图像。
可选的，所述网络引擎启动单元包括：
渲染布局子单元，用于网络引擎下载资源以及渲染布局；
条件判断子单元，用于在渲染布局子单元工作期间，判断是否满足预设条件；
图形缓冲区获取子单元，用于当所述条件判断子单元的输出为是时，获取所述过渡图像显示单元所使用的图形缓冲区；
布局内容绘制子单元，用于将已布局好的页面内容绘制到所述图形缓冲区中。
可选的，所述条件判断子单元所采用的预设条件为：所述过渡图像显示单元完成过渡图像的显示。
可选的于，所述网络引擎启动单元还包括：
可绘制区域计算子单元，用于根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
所述条件判断子单元所采用的预设条件为：所述过渡图像显示单元完成过渡图像的显示、且所述可绘制区域计算子单元计算的可绘制区域的尺寸满足首屏要求；
所述布局内容绘制子单元，具体用于将已布局好的首屏页面内容绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
可选的，所述网络引擎启动单元还包括：
可绘制区域计算子单元，用于根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
所述条件判断子单元所采用的预设条件为：所述可绘制区域计算子单元计算的可绘制区域的尺寸满足首屏要求；
所述布局内容绘制子单元，具体用于将已布局好的首屏页面内容绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
可选的，所述渲染布局子单元，具体用于网络引擎下载资源以及分层进行渲染布局；
所述布局内容绘制子单元，具体用于将已分层布局好的页面内容合成并绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
与现有技术相比，本申请具有以下优点：
本申请提供的网络引擎启动方法，包括显示过渡图像、以及通过启动网络引擎显示页面内容的过程，并且在上述过程中，所述网络引擎在显示页面内容时，复用显示过渡动画所使用的图形缓冲区。采用本方法，由于网络引擎的启动过程和过渡图像的显示过程，复用了相同的图形缓冲区，因此在网络引擎的启动过程中不仅实现了对用户输入的快速反馈，而且没有因为过渡图像的显示而产生额外的缓冲区开销，节省对内存的占用。
附图说明
图1是本申请的一种网络引擎启动方法的实施例的流程图；
图2是本申请实施例提供的splash模块显示过渡图像的处理流程的示意图；
图3是本申请实施例提供的多线程处理流程的示意图；
图4是本申请的一种网络引擎启动装置的实施例的示意图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是，本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此，本申请不受下面公开的具体实施的限制。
在本申请中，分别提供了一种网络引擎启动方法，以及一种网络引擎启动装置，在下面的实施例中逐一进行详细说明。为了便于理解，先对本申请涉及的相关技术以及本申请的技术方案作简要的说明。
对于在个人电脑、移动通讯设备等电子设备中运行的应用程序或者系统来说，在显示设备上显示用户界面数据(UI数据)，是实现与用户交互的最基本方式。应用程序或者系统可以向各自的图形缓冲区(Graphics buffer)中写入需要显示或者更新的用户界面数据。
所述图形缓冲区是指，用于显示的内存块，通常由专门的模块进行管理，例如：图形缓冲区管理模块，该模块负责存储与管理图形缓冲区，例如可以根据应用程序或者系统的请求为其分配图形缓冲区。由于图形缓冲区用于存储待显示的UI数据，而不同电子设备的显示分辨率不同，因此图形缓冲区的大小也可能不同，以分辨率为1080p为例，每块图形缓冲区的大小通常为8MB。
应用程序或者系统向各自的图形缓冲区中写入UI数据后，可以通知负责提供显示服务的模块(即显示服务模块)进行显示，显示服务模块通过软件或者硬件的方式，将对应于各个应用程序以及系统的图形缓冲区中的UI数据进行计算、合并，并最终渲染输出到显示设备的硬件缓冲区中，从而实现用户界面的显示功能。
本申请的技术方案，则是在上述显示技术的基础上，在启动网络引擎与显示过渡图像两者之间实现了图形缓冲区的复用。由于启动网络引擎比较耗时，为了对用户输入做出快速反馈，本申请的技术方案同样采用了显示过渡图像的方式，在本文中将负责显示过渡图像的模块称为splash模块。而本申请技术方案的核心在于，网络引擎在启动过程中并没有重新申请新 的图形缓冲区，而是复用了splash模块所使用的图形缓冲区进行页面内容的显示，从而避免产生额外的图形缓冲区开销，减少对内存资源的占用。
下面对本申请的实施例进行详细说明。
请参考图1，其为本申请的一种网络引擎启动方法的实施例的流程图。所述方法包括如下步骤：
步骤101、显示过渡图像。
当用户通过点击图标或者按键等方式启动浏览器或者Web App时，通常会启动相应的应用程序进程，在应用程序进程的主线程中，可以先调用splash模块显示过渡图像，然后再启动web engine进行页面内容的显示，并且在显示页面内容时复用splash模块所采用的图形缓冲区，即：web engine获取splash模块显示过渡图像时使用的图形缓冲区，并将待显示的页面内容输出到所述图形缓冲区中。
为了能够更快地启动web engine，以便用户尽早看到页面内容，本实施例提供一种优选实施方式：splash模块和web engine的启动以多线程异步的方式实施。例如，应用程序进程创建一个单独的splash线程用于执行splash模块，负责显示过渡图像；而启动web engine的任务则由主线程完成(也可以称为web engine线程)。采用这种方式，一方面由于splash模块是一个轻量级模块，因此能够以很快的方式显示给用户，提供及时反馈功能；另一方面，可以不阻塞web engine的启动过程。本实施例的后续文字，重点针对采用多线程异步方式的实施方式进行说明。
作为比较简单易行的实施方式，splash模块可以按照预设的颜色方案显示过渡图像，例如，预设颜色方案可以指定两种或者两种以上颜色按照特定规律排列显示。具体实施过程包括：通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；按照预设的颜色方案向所述图形缓冲区中写入数据，以显示对应于所述颜色方案的过渡图像。
优选地，为了增加过渡图像的美观性、或者在过渡图像中传达特定的信息，例如：应用程序标志、广告语等，本实施例提供根据过渡图像文件展示过渡图像的优选实施方式。所述过渡图像文件可以是预先设计好的图 片文件，例如：bmp文件或者jpg文件等。
采用这种优选实施方式，splash模块显示过渡图像的过程包括获取过渡图像、申请图形缓冲区、解码、写图形缓冲区这样几个步骤，分别对应于如下所示的步骤101-1至101-4，下面结合图2作进一步描述。
步骤101-1、获取过渡图像文件。
splash模块可以通过多种方式获取过渡图像文件。
如果本实施例所述方法由启动Web App的指令触发时，splash模块可以根据Web App配置文件中指定的路径获取。例如：在Android系统中，每个应用程序都有对应的Manifest配置文件，其中可以配置过渡图像的路径信息，如果用户点击了对应于Web App的图标，在Web App进程被创建时，可以将过渡图像的路径传递给splash模块，从而splash模块可以根据该路径获取过渡图像文件。
如果本实施例所述方法由启动浏览器的指令触发时，splash模块可以根据预先设定的路径获取过渡图像文件。
步骤101-2、通过向图形缓冲区管理模块申请的方式，获取图形缓冲区。
splash模块向图形缓冲区管理模块发送申请图形缓冲区的请求，所述图形缓冲区管理模块可以在其管理的图形缓冲区中查找有无空闲的图形缓冲区，若找到，则将该图形缓冲区返回给splash模块；若没有找到，则可以重新申请内存创建空闲图形缓冲区，并将新创建的图形缓冲区返回给splash模块。在具体实施时，图形缓冲区管理模块返回给splash模块的可以是图形缓冲区的内存地址，splash模块后续则可以根据获取的内存地址执行向图形缓冲区中写入数据的操作。
步骤101-3、读取所述过渡图像文件并执行解码操作。
splash模块读取已获取的过渡图像文件，并根据过渡图像文件的数据存储格式执行相应的解码操作，将过渡图像文件中的数据转换成可以在显示设备上输出显示的格式，例如：转换成RGB色彩模式对应的颜色值。
步骤101-4、将解码得到的数据写入所述图形缓冲区中，以显示所述过渡图像。
splash模块将解码后的数据写入在步骤101-2获取的图形缓冲区中，以在显示设备上显示所述过渡图像。在具体实施时，显示服务模块可以主动检测所述图形缓冲区被更新的事件，也可以由splash模块在完成向图形缓冲区写入解码数据的操作后，主动通知显示服务模块。显示服务模块负责所述图形缓冲区中的待显示数据输出到显示设备的硬件缓冲区中进行显示。
优选地，为了提供更为友好的用户交互方式，可以采用动画方式显示过渡图像，即：显示过渡动画。所述动画方式包括以下任意一种或者组合：渐变透明度(Alpha)、渐变尺寸伸缩(Scale)、移动(Translate)、旋转(Rotate)，具体采用哪种或者哪些动画方式，可以预先设定，也可以在Web App的配置文件中指定。在采用动画方式的情况下，splash模块在完成图形缓冲区的写入操作后，可以按照具体的动画方式，通知显示服务模块对图形缓冲区中的数据进行相应的计算、渲染，并输出到显示设备的硬件缓冲区中，从而在显示设备上呈现动画效果。例如：通过对显示位置的渐进调整，可以实现移动的动画效果。
至此通过步骤101-1至步骤101-4，对过渡图像的显示过程进行了说明。在上面描述的实施方式中，splash模块在单独为其创建的splash线程中完成了申请图形缓冲区、图像解码、以及写图形缓冲区等操作。
优选地，为了尽可能快速地显示过渡图像，给用户提供及时反馈，本实施例提供多线程并发实现splash模块功能的优选实施方式。例如：在splash线程启动后，再创建一个getbuf线程，splash线程执行获取过渡图像文件、以及解码的操作，getbuf线程则执行申请图形缓冲区的操作，并将获取的图形缓冲区的内存地址通过线程间的数据共享机制或者通讯机制传递给splash线程，splash线程将解码后的数据写入所述图形缓冲区中，从而实现了向用户快速呈现过渡图像的功能。请参见图3，其为本实施例提供的多线程处理流程的示意图。
步骤102、启动网络引擎，显示页面内容。
现有技术中，网络引擎在启动后，首先执行必要的初始化操作，随后通常可以执行以下操作：下载待展示的页面文档(例如：html文件)及页面文档中涉及的各种资源；解析页面文档，转换为DOM树；根据CSS等样式信息，创建用于渲染DOM树的渲染树(render tree)，所述渲染树中的节点通常与页面内容中的可视部分相对应，通常为带有颜色、尺寸等显示属性的矩形，这些矩形的顺序与显示顺序一致；对渲染树的节点进行布局处理，确定其在屏幕上的显示位置；最后遍历渲染树并将其中的节点绘制到网络引擎申请的图形缓冲区中，以在显示设备上呈现页面内容。
而本实施例提供的网络引擎启动方法，网络引擎在执行原有处理流程显示页面内容的过程中，复用了在步骤101中所使用的图形缓冲区，也就是说，为了显示过渡图像所申请的图形缓冲区，在web engine的启动过程中得到了重复利用，没有因为过渡图像的显示而导致额外的缓冲区开销，从而节省了对内存的占用。下面对本步骤中web engine的处理过程作进一步说明。
网络引擎根据下载的资源生成DOM树及渲染树，并对渲染树的节点进行布局，确定在屏幕上的显示位置，在该过程中网络引擎判断是否满足预设条件，若满足，则获取显示过渡图像时所使用的图形缓冲区，并将已布局好的页面内容(即：渲染树中已布局好的各节点)绘制到所述图形缓冲区中。
在具体实施时，所述获取显示过渡图像所使用的图形缓冲区，通常是指获取所述图形缓冲区的内存地址以及大小等信息。对于采用多线程异步实施的方式，web engine线程可以通过线程间的数据共享机制或者通讯机制，从splash线程获取其使用的图形缓冲区的内存地址以及大小等信息。
所述预设条件可以为：过渡图像显示完毕。采用这种方式，splash线程可以在过渡图像显示完毕后向web engine线程发送通知，从而web engine线程可以向splash线程获取其显示过渡图像所使用的图形缓冲区，并将已布局好的页面内容绘制到所述图形缓冲区中。这种处理方式，对于采用动画方式显示过渡图像的实施方式，可以保证过渡动画显示过程的完整性，并且可以尽快向用户呈现页面内容。
优选地，为了向用户呈现完整的首屏信息，避免出现白屏或者部分白屏的现象，本实施例还提供了显示完整首屏内容的优选实施方式，在这种情况下，所述预设条件为：过渡图像显示完毕、且可绘制区域的尺寸满足首屏要求。
其中，所述可绘制区域是指，渲染树中已布局好的节点所对应的显示屏幕中的区域；所述首屏(above the fold，或者，first screen)是指，打开页面后，在显示屏幕上所呈现的第一屏，即：无需执行滚屏操作就能被用户看到的画面。
采用这种优选实施方式，web engine在下载资源以及渲染布局的过程中，可以执行下述操作：根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸。在具体实施时，可以在对渲染树中的节点进行逐一布局的过程中，每完成一个节点的布局，就根据已布局节点在屏幕上的显示位置，计算可绘制区域的尺寸。当检测到过渡图像显示完毕后，如果当前可绘制区域的尺寸尚未达到首屏的大小，则继续进行渲染树中节点的布局，直到可绘制区域的尺寸满足首屏要求，即：可绘制区域的尺寸大于或者等于首屏的大小，才可以向splash线程获取图形缓冲区，并将已布局好的首屏页面内容绘制到所述图形缓冲区中。
采用这种优选实施方式，由于web engine已经将首屏内容准备好了，因此通过写图形缓冲区向用户显示出来的，通常是完整的首屏内容，而不会出现白屏或者部分白屏的现象，从而从视觉体验的角度，实现了过渡图像显示到页面内容显示的无缝切换，能够保证用户良好的浏览体验。
此外，本实施例还提供另一种能够尽快展示首屏页面内容的优选实施方式，即，所述预设条件为：可绘制区域的尺寸满足首屏要求。采用这种优选实施方式，与之前描述的优选实施方式类似，网络引擎在下载资源以及渲染布局的过程中，也根据已布局好页面内容的位置信息，计算可绘制区域的尺寸；不同之处在于，web engine向splash线程获取图形缓冲区的触发条件仅为：可绘制区域的尺寸满足首屏要求。即：当web engine计算得到的可绘制区域的尺寸大于或者等于首屏大小时，就可以通知splash线程首屏页面内容已准备好，并向splash线程获取图形缓冲区、向其中写入 首屏页面内容，而无需等待过渡图像显示完毕。
采用这种优选实施方式，可以尽快地向用户展示首屏页面内容，特别是在采用动画方式显示过渡图像的场景下，能够减少用户观看过渡动画的时间，而将用户真正关心或者感兴趣的页面内容尽可能快地呈现出来。
需要说明的是，由于web页面中包含的各种页面元素通常是分层的，例如：最底层为窗口，在其上设置有图片，图片上又可以设置按钮、链接等等。因此，web engine在进行渲染布局、准备可绘制的页面内容的时候，通常采用分层的方式进行，在满足预设条件、获取图形缓冲区后，则可以将分层准备好的待绘制内容，通过层与层之间的叠加覆盖关系进行合成(composite)，并将合成后的数据写入从splash线程获取的图形缓冲区中。这样可以减少对图形缓冲区的重复写入操作，提高执行效率。
至此，通过步骤101-步骤102，对本实施例提供的网络引擎启动方法的具体实施方式进行了详细说明。通过上述描述可以看出，采用本实施例提供的网络引擎启动方法，由于网络引擎的启动过程和过渡图像的显示过程，复用了相同的图形缓冲区，因此在网络引擎的启动过程中不仅实现了对用户输入的快速反馈，而且没有因为过渡图像的显示而产生额外的缓冲区开销，节省对内存的占用。
在上述的实施例中，提供了一种网络引擎启动方法，与之相对应的，本申请还提供一种网络引擎启动装置。请参看图4，其为本申请的一种网络引擎启动装置的实施例示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。
本实施例的一种网络引擎启动装置，包括：过渡图像显示单元401，用于显示过渡图像；网络引擎启动单元402，用于启动网络引擎，显示页面内容；其中，所述网络引擎在显示页面内容时，复用过渡图像显示单元所使用的图形缓冲区。
可选的，所述过渡图像显示单元，具体用于采用动画方式显示过渡图 像。
可选的，所述过渡图像显示单元和所述网络引擎启动单元，分别用于采用不同的线程异步实现各自的功能。
可选的，所述过渡图像显示单元包括：
文件获取子单元，用于获取过渡图像文件；
图形缓冲区申请子单元，用于通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
解码子单元，用于读取所述文件获取子单元所获取的过渡图像文件并执行解码操作；
第一图形缓冲区写入子单元，用于将所述解码子单元得到的数据写入所述图形缓冲区中，以显示过渡图像。
可选的，所述文件获取子单元具体用于，根据Web App的配置文件中指定的路径获取过渡图像文件。
可选的，所述文件获取子单元具体用于，根据预先设定的路径获取过渡图像文件。
可选的，所述图形缓冲区申请子单元，以及所述过渡图像显示单元中的其他子单元，分别采用不同的线程实现各自的功能。
可选的，所述过渡图像显示单元包括：
图形缓冲区申请子单元，用于通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
第二图像缓冲区写入子单元，用于按照预设的颜色方案向所述图形缓冲区中写入数据，以显示对应于所述颜色方案的过渡图像。
可选的，所述网络引擎启动单元包括：
渲染布局子单元，用于网络引擎下载资源以及渲染布局；
条件判断子单元，用于在渲染布局子单元工作期间，判断是否满足预设条件；
图形缓冲区获取子单元，用于当所述条件判断子单元的输出为是时，获取所述过渡图像显示单元所使用的图形缓冲区；
布局内容绘制子单元，用于将已布局好的页面内容绘制到所述图形缓冲区中。
可选的，所述条件判断子单元所采用的预设条件为：所述过渡图像显示单元完成过渡图像的显示。
可选的，所述网络引擎启动单元还包括：
可绘制区域计算子单元，用于根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
所述条件判断子单元所采用的预设条件为：所述过渡图像显示单元完成过渡图像的显示、且所述可绘制区域计算子单元计算的可绘制区域的尺寸满足首屏要求；
所述布局内容绘制子单元，具体用于将已布局好的首屏页面内容绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
可选的，所述网络引擎启动单元还包括：
可绘制区域计算子单元，用于根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
所述条件判断子单元所采用的预设条件为：所述可绘制区域计算子单元计算的可绘制区域的尺寸满足首屏要求；
所述布局内容绘制子单元，具体用于将已布局好的首屏页面内容绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
可选的，所述渲染布局子单元，具体用于网络引擎下载资源以及分层进行渲染布局；
所述布局内容绘制子单元，具体用于将已分层布局好的页面内容合成并绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任 何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
2、本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims (27)

  1. 一种网络引擎启动方法，其特征在于，包括：
    显示过渡图像；
    启动网络引擎，显示页面内容；
    其中，所述网络引擎在显示页面内容时，复用显示过渡图像所使用的图形缓冲区，所述图形缓冲区用于存储供显示服务模块显示输出的用户界面数据。
  2. 根据权利要求1所述的网络引擎启动方法，其特征在于，所述显示过渡图像包括：采用动画方式显示过渡图像。
  3. 根据权利要求2所述的网络引擎启动方法，其特征在于，所述动画方式包括以下任意一种或者组合：渐变透明度、渐变尺寸伸缩、移动、旋转。
  4. 根据权利要求1所述的网络引擎启动方法，其特征在于，所述获取并显示过渡图像的步骤和所述启动网络引擎显示页面内容的步骤，分别在应用程序进程的不同线程中异步实施。
  5. 根据权利要求1所述的网络引擎启动方法，其特征在于，所述显示过渡图像包括：
    获取过渡图像文件；
    通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
    读取所述过渡图像文件并执行解码操作；
    将解码得到的数据写入所述图形缓冲区中，以显示所述过渡图像。
  6. 根据权利要求5所述的网络引擎启动方法，其特征在于，当所述方法由启动Web App的指令触发时，所述过渡图像文件的获取方式包括：根据Web App的配置文件中指定的路径获取。
  7. 根据权利要求5所述的网络引擎启动方法，其特征在于，当所述方法由启动浏览器的指令触发时，所述过渡图像文件的获取方式包括：根据预先设定的路径获取。
  8. 根据权利要求5所述的网络引擎启动方法，其特征在于，所述通过向图形缓冲区管理模块申请的方式获取图形缓冲区的步骤，以及所述显示过渡图像所包含的其他步骤，分别在不同的线程中实施。
  9. 根据权利要求1所述的网络引擎启动方法，其特征在于，所述显示过渡图像包括：
    通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
    按照预设的颜色方案向所述图形缓冲区中写入数据，以显示对应于所述颜色方案的过渡图像。
  10. 根据权利要求1所述的网络引擎启动方法，其特征在于，所述启动网络引擎，显示页面内容，包括：
    所述网络引擎在下载资源以及渲染布局的过程中，判断是否满足预设条件；
    若满足，执行下述操作：
    获取显示过渡图像时所使用的图形缓冲区；
    将已布局好的页面内容绘制到所述图形缓冲区中。
  11. 根据权利要求10所述的网络引擎启动方法，其特征在于，所述预设条件包括：所述过渡图像显示完毕。
  12. 根据权利要求11所述的网络引擎启动方法，其特征在于，所述网络引擎在下载资源以及渲染布局的过程中，还执行下述操作：
    根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
    所述预设条件包括：
    所述过渡图像显示完毕、且所述可绘制区域的尺寸满足首屏要求；
    所述将已布局好的页面内容绘制到所述图形缓冲区中，包括：将已布 局好的首屏页面内容绘制到所述图形缓冲区中。
  13. 根据权利要求10所述的网络引擎启动方法，其特征在于，所述网络引擎在下载资源以及渲染布局的过程中，还执行下述操作：
    根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
    所述预设条件包括：所述可绘制区域的尺寸满足首屏要求；
    所述将已布局好的页面内容绘制到所述图形缓冲区中，包括：将已布局好的首屏页面内容绘制到所述图形缓冲区中。
  14. 根据权利要求10所述的网络引擎启动方法，其特征在于，所述网络引擎渲染布局的过程，是分层进行的；
    所述将已布局好的页面内容绘制到所述图形缓冲区中，包括：将已分层布局好的页面内容合成并绘制到所述图形缓冲区中。
  15. 一种网络引擎启动装置，其特征在于，包括：
    过渡图像显示单元，用于显示过渡图像；
    网络引擎启动单元，用于启动网络引擎，显示页面内容；其中，所述网络引擎在显示页面内容时，复用过渡图像显示单元所使用的图形缓冲区。
  16. 根据权利要求15所述的网络引擎启动装置，其特征在于，所述过渡图像显示单元，具体用于采用动画方式显示过渡图像。
  17. 根据权利要求15所述的网络引擎启动装置，其特征在于，所述过渡图像显示单元和所述网络引擎启动单元，分别用于采用不同的线程异步实现各自的功能。
  18. 根据权利要求15所述的网络引擎启动装置，其特征在于，所述过渡图像显示单元包括：
    文件获取子单元，用于获取过渡图像文件；
    图形缓冲区申请子单元，用于通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
    解码子单元，用于读取所述文件获取子单元所获取的过渡图像文件并执行解码操作；
    第一图形缓冲区写入子单元，用于将所述解码子单元得到的数据写入所述图形缓冲区中，以显示过渡图像。
  19. 根据权利要求18所述的网络引擎启动装置，其特征在于，所述文件获取子单元具体用于，根据Web App的配置文件中指定的路径获取过渡图像文件。
  20. 根据权利要求18所述的网络引擎启动装置，其特征在于，所述文件获取子单元具体用于，根据预先设定的路径获取过渡图像文件。
  21. 根据权利要求18所述的网络引擎启动装置，其特征在于，所述图形缓冲区申请子单元，以及所述过渡图像显示单元中的其他子单元，分别采用不同的线程实现各自的功能。
  22. 根据权利要求15所述的网络引擎启动装置，其特征在于，所述过渡图像显示单元包括：
    图形缓冲区申请子单元，用于通过向图形缓冲区管理模块申请的方式，获取图形缓冲区；
    第二图像缓冲区写入子单元，用于按照预设的颜色方案向所述图形缓冲区中写入数据，以显示对应于所述颜色方案的过渡图像。
  23. 根据权利要求15所述的网络引擎启动装置，其特征在于，所述网络引擎启动单元包括：
    渲染布局子单元，用于网络引擎下载资源以及渲染布局；
    条件判断子单元，用于在渲染布局子单元工作期间，判断是否满足预设条件；
    图形缓冲区获取子单元，用于当所述条件判断子单元的输出为是时，获取所述过渡图像显示单元所使用的图形缓冲区；
    布局内容绘制子单元，用于将已布局好的页面内容绘制到所述图形缓冲区中。
  24. 根据权利要求23所述的网络引擎启动装置，其特征在于，所述条件判断子单元所采用的预设条件为：所述过渡图像显示单元完成过渡图像的显示。
  25. 根据权利要求24所述的网络引擎启动装置，其特征在于，所述网络引擎启动单元还包括：
    可绘制区域计算子单元，用于根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
    所述条件判断子单元所采用的预设条件为：所述过渡图像显示单元完成过渡图像的显示、且所述可绘制区域计算子单元计算的可绘制区域的尺寸满足首屏要求；
    所述布局内容绘制子单元，具体用于将已布局好的首屏页面内容绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
  26. 根据权利要求23所述的网络引擎启动装置，其特征在于，所述网络引擎启动单元还包括：
    可绘制区域计算子单元，用于根据已布局好的页面内容的位置信息，计算可绘制区域的尺寸；
    所述条件判断子单元所采用的预设条件为：所述可绘制区域计算子单元计算的可绘制区域的尺寸满足首屏要求；
    所述布局内容绘制子单元，具体用于将已布局好的首屏页面内容绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
  27. 根据权利要求23所述的网络引擎启动装置，其特征在于，所述渲染布局子单元，具体用于网络引擎下载资源以及分层进行渲染布局；
    所述布局内容绘制子单元，具体用于将已分层布局好的页面内容合成并绘制到所述图形缓冲区获取子单元获取的图形缓冲区中。
PCT/CN2017/074722 2016-03-09 2017-02-24 网络引擎启动方法及装置 WO2017152776A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US16/124,023 US20190080017A1 (en) 2016-03-09 2018-09-06 Method, system, and device that invokes a web engine

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201610134803.5A CN107179920B (zh) 2016-03-09 2016-03-09 网络引擎启动方法及装置
CN201610134803.5 2016-03-09

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US16/124,023 Continuation-In-Part US20190080017A1 (en) 2016-03-09 2018-09-06 Method, system, and device that invokes a web engine

Publications (1)

Publication Number Publication Date
WO2017152776A1 true WO2017152776A1 (zh) 2017-09-14

Family

ID=59790021

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/074722 WO2017152776A1 (zh) 2016-03-09 2017-02-24 网络引擎启动方法及装置

Country Status (3)

Country Link
US (1) US20190080017A1 (zh)
CN (1) CN107179920B (zh)
WO (1) WO2017152776A1 (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107766532A (zh) * 2017-10-27 2018-03-06 深圳市行云易通科技有限公司 一种前端Node.js自动化正静态方法
CN110908724B (zh) * 2019-12-03 2024-06-07 深圳市迅雷网络技术有限公司 一种Android App启动方法及相关组件
CN111275607B (zh) * 2020-01-17 2022-05-24 腾讯科技（深圳）有限公司 界面显示方法、装置、计算机设备及存储介质
CN113157175A (zh) * 2020-01-22 2021-07-23 阿里巴巴集团控股有限公司 特效引擎，使用其的交互特效生成方法和用户交互方法
CN112487322B (zh) * 2020-12-16 2024-05-28 Vidaa美国公司 一种第三方应用Loading页面的加载方法及显示设备
CN117648137A (zh) * 2022-01-10 2024-03-05 荣耀终端有限公司 应用启动方法、电子设备及可读存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101136815A (zh) * 2006-08-31 2008-03-05 腾讯科技（深圳）有限公司 在网络直播缓冲过程中播放广告的方法及系统
CN103064925A (zh) * 2012-12-21 2013-04-24 广东欧珀移动通信有限公司 定时处理网页的方法装置
CN103294688A (zh) * 2012-02-24 2013-09-11 宇龙计算机通信科技(深圳)有限公司 网页浏览方法及系统
CN103618936A (zh) * 2013-12-16 2014-03-05 乐视致新电子科技（天津）有限公司 智能电视及其浏览器中链接页面的预加载方法和装置
CN105205157A (zh) * 2015-09-28 2015-12-30 北京奇艺世纪科技有限公司 一种页面加载的方法、装置及系统

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103034467B (zh) * 2012-12-06 2016-03-23 小米科技有限责任公司 图像显示方法、装置及移动终端
CN103257897B (zh) * 2013-06-03 2016-08-31 贝壳网际（北京）安全技术有限公司 移动终端浏览器的启动方法、装置及移动终端
KR102122454B1 (ko) * 2013-10-02 2020-06-12 삼성전자주식회사 이전 타일의 이미지를 이용하여 현재 프레임을 렌더링하는 방법 및 장치
CN109558184A (zh) * 2015-09-28 2019-04-02 北京奇虎科技有限公司 浏览器启动方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101136815A (zh) * 2006-08-31 2008-03-05 腾讯科技（深圳）有限公司 在网络直播缓冲过程中播放广告的方法及系统
CN103294688A (zh) * 2012-02-24 2013-09-11 宇龙计算机通信科技(深圳)有限公司 网页浏览方法及系统
CN103064925A (zh) * 2012-12-21 2013-04-24 广东欧珀移动通信有限公司 定时处理网页的方法装置
CN103618936A (zh) * 2013-12-16 2014-03-05 乐视致新电子科技（天津）有限公司 智能电视及其浏览器中链接页面的预加载方法和装置
CN105205157A (zh) * 2015-09-28 2015-12-30 北京奇艺世纪科技有限公司 一种页面加载的方法、装置及系统

Also Published As

Publication number Publication date
CN107179920B (zh) 2021-06-04
US20190080017A1 (en) 2019-03-14
CN107179920A (zh) 2017-09-19

Similar Documents

Publication Publication Date Title
WO2017152776A1 (zh) 网络引擎启动方法及装置
US11134118B2 (en) Method and apparatus for browser application to load first screen of web page
JP6185843B2 (ja) 複数のアプリケーション又はプロセスに渡るアニメーション調整
EP2805258B1 (en) Low resolution placeholder content for document navigation
CN108279966B (zh) 网页截图方法、装置、终端及存储介质
RU2583730C2 (ru) Адаптивная визуализация изображения и использование фиктивного изображения
WO2018133663A1 (zh) 页面生成方法、终端和存储介质
WO2019042329A1 (zh) 一种用户界面渲染的方法及装置
US9183672B1 (en) Embeddable three-dimensional (3D) image viewer
KR101494844B1 (ko) 메타 데이터를 이용한 차트 변환 시스템 및 그 방법
CN111339458B (zh) 页面呈现方法和装置
US20150331836A9 (en) Graceful degradation of level-of-detail in document rendering
KR20160120343A (ko) 크로스 플랫폼 렌더링 엔진
RU2632128C1 (ru) Способ и система загрузки фрагментов изображения на клиентское устройство
WO2014190821A1 (zh) 一种创建应用的方法及装置
WO2019033995A1 (zh) 一种页面更新方法和装置
US20170123641A1 (en) Automatically generating network applications from design mock-ups
US20130036196A1 (en) Method and system for publishing template-based content
US9886465B2 (en) System and method for rendering of hierarchical data structures
CN106874023B (zh) 动态页面加载方法和装置
WO2022033131A1 (zh) 基于json数据格式的动画渲染方法
CN104809123A (zh) 一种网页渲染方法及系统
US20140375657A1 (en) Synchronization Points for State Information
JP6395160B2 (ja) 電子表示装置の文書配置
EP3008697B1 (en) Coalescing graphics operations

Legal Events

Date Code Title Description
NENP Non-entry into the national phase

Ref country code: DE

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

Ref document number: 17762462

Country of ref document: EP

Kind code of ref document: A1

122 Ep: pct application non-entry in european phase

Ref document number: 17762462

Country of ref document: EP

Kind code of ref document: A1