Interface display method, electronic equipment and readable storage medium

Abstract

The invention provides an interface display method, electronic equipment and a readable storage medium. The problems that display resources are not displayed completely or blank or images are stuck due to the fact that display resources are not rendered in time after a browser window is adjusted are solved to a certain extent. The method is applied to the electronic equipment, and can be used for displaying a complete page corresponding to the adjusted size of a browser window in the adjusted browser window after the user adjusts the browser window. The method comprises the following steps: firstly, displaying an interface comprising an image corresponding to the size of a browser window before adjustment and a skeleton screen corresponding to display resources which are not rendered yet, and after the display resources which are not rendered yet are rendered, displaying the display resources which are not rendered yet. And displaying an interface with complete display content corresponding to the size of the adjusted browser window in the adjusted browser window.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to an interface display method, an electronic device, and a readable storage medium. Background Art

[0002] Browser applications are essential software for electronic devices such as smartphones and laptops. When a user opens a page using a browser, the browser kernel starts a new process, which renders the display resources corresponding to the browser window through the process of building a Document Object Model (DOM) tree, style calculation and layout, layering, layer drawing, layer segmentation, rasterization, and rendering tile commands. The rendered display resources are then synthesized to display them in the browser window.

[0003] However, when the user adjusts the size of the browser window, the browser kernel needs to re-render the display resources in the adjusted browser window, and then perform synthesis processing on the re-rendered display resources to display the corresponding resources in the adjusted browser window. After the user adjusts the browser window, the browser kernel still needs to spend a certain amount of time to re-render and display the display resources corresponding to the adjusted size of the browser window. Therefore, after the browser window is adjusted, the display resources corresponding to the browser window cannot be displayed in time, resulting in incomplete display of display resources, blank or screen freeze. Summary of the invention

[0004] The present application provides an interface display method, an electronic device and a readable storage medium, which to a certain extent solve the problem that after adjusting the window displayed on the electronic device, the display resources are not fully displayed, are blank or the screen is stuck due to the long time spent on rendering the display resources, thereby improving the image display performance.

[0005] In order to achieve the above objectives, this application adopts the following technical solutions:

[0006] In a first aspect, the present application provides an interface display method, which is applied to an electronic device, and the method includes: displaying a first window of an application, the first window including a first interface corresponding to a first display resource; in response to a zoom-in operation on the first window, displaying a second window of the application, the size of the second window being larger than the size of the first window; displaying a second interface in the second window, the second interface including a skeleton screen corresponding to a third display resource and a second display resource that has been rendered, the second display resource including the first display resource. When the third display resource is rendered, displaying a third interface in the second window, the third interface including the second display resource and the third display resource.

[0007] The interface display method provided by the present application, after performing a zoom operation on the first window, first displays the second interface including the second display resource and the skeleton screen in the enlarged second window, and then, after the third display resource corresponding to the skeleton screen is rendered, the third interface including the second display resource and the third display resource is displayed in the enlarged second window. Based on the above method, after the user adjusts the window displayed by the electronic device, the second interface including the skeleton screen can be viewed first before the complete display resource of the third interface is displayed in the adjusted window, which effectively reduces the white screen display time from the window adjustment to the complete display resource display, thereby improving the user experience.

[0008] It should be understood that the interface display method provided in each embodiment of the present application can be executed by the electronic device based on a browser-type application. The browser-type application can include various applications that can realize web browsing or applications based on web kernel encapsulation, and is not necessarily limited to a traditional browser. For example, the application can include an instant messaging application, etc.

[0009] In a possible implementation of the first aspect, displaying the second interface in the second window includes: acquiring a first rasterization resource corresponding to the rendered second display resource and a second rasterization resource corresponding to the skeleton screen, synthesizing the first rasterization resource and the second rasterization resource to obtain the second interface; and displaying the second interface in the second window.

[0010] In a possible implementation of the first aspect, a method for acquiring a second rasterized resource corresponding to a skeleton screen includes: determining a document object model DOM tree corresponding to a third display resource; determining visible element nodes in the DOM tree; and filling and rasterizing the visible element nodes according to a preset fill color to obtain a second rasterized resource.

[0011] In a possible implementation of the first aspect, the method further includes: when the third display resource is not rendered within a preset time, displaying a fourth interface in the second window, the fourth interface includes the fourth display resource and the second display resource that have been rendered within the preset time, and the fourth display resource is a portion of the third display resource that has been rendered. When the third display resource is rendered after the preset time, displaying the third interface in the second window.

[0012] Based on the above possible implementation methods, if the third display resource is still not rendered within the preset time, then before displaying the third interface corresponding to the enlarged second window, the fourth interface can be displayed using the fourth display resource and the second display resource that have been rendered within the preset time, thereby further reducing the white screen display time from window adjustment to the complete display resource display, avoiding the white screen caused by the failure to render the third display resource, and improving the user experience.

[0013] In a possible implementation of the first aspect, when the third display resource completes rendering, displaying the third interface in the second window includes: when the third display resource completes rendering within a preset time, displaying the third interface in the second window.

[0014] In a possible implementation of the first aspect, the third display resource includes pictures and texts; the skeleton screen includes picture elements and text elements corresponding to the third display resources; and the layout of the skeleton screen is consistent with the layout of the third display resources.

[0015] In a second aspect, the present application provides an electronic device, including: a processor and a display, the display being configured to display a first window of an application, the first window including a first interface corresponding to a first display resource; the processor being configured to display a second window of the application through the display in response to a zoom-in operation on the first window, the size of the second window being larger than the size of the first window; and displaying a second interface in the second window through the display, the second interface including a skeleton screen corresponding to a third display resource and a second display resource that has been rendered, the second display resource including the first display resource. When the third display resource is rendered, a third interface is displayed in the second window through the display, the third interface including the second display resource and the third display resource.

[0016] In a possible implementation of the second aspect, the processor is configured to: obtain a first rasterization resource corresponding to the rendered second display resource and a second rasterization resource corresponding to the skeleton screen, synthesize the first rasterization resource and the second rasterization resource to obtain a second interface, and display the second interface in a second window through the display.

[0017] In a possible implementation of the second aspect, the processor is specifically configured to: determine a document object model DOM tree corresponding to a third display resource; determine visible element nodes in the DOM tree; fill and rasterize the visible element nodes according to a preset fill color to obtain a second rasterized resource.

[0018] In a possible implementation of the second aspect, the processor is configured to: when the third display resource is not rendered within a preset time, display a fourth interface in the second window through the display, the fourth interface includes the fourth display resource and the second display resource that have been rendered within the preset time, and the fourth display resource is a portion of the display resource that has been rendered in the third display resource. When the third display resource is rendered after the preset time, display the third interface in the second window through the display.

[0019] In a possible implementation of the second aspect, the processor is configured to display the third interface in the second window through the display when the third display resource completes rendering within a preset time.

[0020] In a possible implementation of the second aspect, the third display resource includes pictures and texts; the skeleton screen includes picture elements and text elements corresponding to the third display resources; and the layout of the skeleton screen is consistent with the layout of the third display resources.

[0021] In a third aspect, the present application provides a chip system, the chip system including a processor, the processor executing a computer program stored in a memory to implement the method in any possible implementation manner of the first aspect.

[0022] In a fourth aspect, the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method in any possible implementation manner of the first aspect is implemented.

[0023] In a fifth aspect, the present application provides a computer program product, which includes computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the method in any possible implementation manner of the first aspect.

[0024] The technical effects of the second to fifth aspects provided in the present application can refer to the technical effects of the various possible implementation methods of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application.

[0026] Figure 2 A schematic diagram of the software structure of an electronic device provided in an embodiment of the present application.

[0027] Figure 3 A schematic diagram of a process for rendering and displaying a page in an existing browser provided in an embodiment of the present application.

[0028] Figure 4 A schematic diagram of a skeleton screen corresponding to a certain page provided in an embodiment of the present application.

[0029] Figure 5 A flowchart of an interface display method provided in an embodiment of the present application.

[0030] Figures 6 to 9 A schematic diagram of a scenario for adjusting a first window or a second window provided in an embodiment of the present application.

[0031] Fig.10 A schematic diagram of a second interface displayed in a second window provided in an embodiment of the present application.

[0032] Fig.11A schematic diagram of a process for generating a skeleton screen provided in an embodiment of the present application.

[0033] Fig.12 A schematic diagram of a third interface displayed in a second window provided in an embodiment of the present application.

[0034] Fig.13 A schematic diagram of a flow chart of displaying an interface in a second window provided in an embodiment of the present application. DETAILED DESCRIPTION

[0035] The technical solutions in the embodiments of the present application are described below in conjunction with the drawings and related embodiments in the embodiments of the present application. Among them, in the description of the embodiments of the present application, the terms used in the following embodiments are only for the purpose of describing specific embodiments, and are not intended to be used as limitations on the present application. As used in the specification and the appended claims of the present application, the singular expressions "a", "said", "above", "the" and "this" are intended to also include expressions such as "one or more", unless there is a clear indication to the contrary in the context. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" refer to one or more (including two). The term "and / or" is used to describe the association relationship of associated objects, indicating that three relationships can exist; for example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the associated objects before and after are in a "or" relationship.

[0036] References to "one embodiment" or "some embodiments" etc. described in this specification mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Thus, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways. The term "connection" includes direct connection and indirect connection, unless otherwise specified. "First" and "second" are used for descriptive purposes only and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated.

[0037] In the embodiments of the present application, the words "exemplarily" or "for example" are used to indicate examples, illustrations or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplarily" or "for example" is intended to present related concepts in a specific way.

[0038] The interface display method provided in the embodiment of the present application can be applied to electronic devices. For example, electronic devices may include but are not limited to personal computers (personal computers, PCs), smart phones, netbooks, tablet computers, smart cameras, wearable devices, PDAs, smart TVs, personal digital assistants (personal digital assistants, PDAs), portable multimedia players (portable multimedia player, PMP), projection devices, smart screen devices, augmented reality (augmented reality, AR) / virtual reality (virtual reality, VR) devices, mixed reality (mixedreality, MR) devices, vehicle-mounted devices, smart screens, cloud servers, televisions or somatosensory game consoles in human-computer interaction scenarios, etc. The embodiment of the present application does not impose any restrictions on the specific types of electronic devices.

[0039] See also Figure 1 , which is a structural diagram of an electronic device 100 provided in the present application. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 131, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0040] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0041] For example, when the electronic device 100 is a mobile phone or a tablet computer, it may include all the components shown in the figure, or may include only some of the components shown in the figure.

[0042] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0043] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0044] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0045] In some embodiments, the processor 110 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0046] The charging management module 140 is used to receive charging input from a charger. The charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 may receive charging input from a wired charger through the USB interface 130. In some wireless charging embodiments, the charging management module 140 may receive wireless charging input through a wireless charging coil of the electronic device 100. While the charging management module 140 is charging the battery 142, it may also power the electronic device through the power management module 141.

[0047] The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and supplies power to the processor 110, the internal memory 131, the external memory interface 120, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle number, and battery health status (leakage, impedance).

[0048] In some other embodiments, the power management module 141 may also be disposed in the processor 110. In some other embodiments, the power management module 141 and the charging management module 140 may also be disposed in the same device.

[0049] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0050] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0051] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, etc. the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1.

[0052] In some embodiments, at least some functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 may be disposed in the same device as at least some modules of the processor 110.

[0053] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0054] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0055] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-CDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology, etc. GNSS may include the global positioning system (GPS), the global navigation satellite system (GLONASS), the Beidou navigation satellite system (BDS), the quasi-zenith satellite system (QZSS) and / or the satellite based augmentation system (SBAS).

[0056] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0057] The display screen 194 is used to display images, videos, etc. For example, various display interfaces in the embodiments of the present application. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode or an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0058] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

[0059] The internal memory 131 can be used to store computer executable program codes, and the executable program codes include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 131. The internal memory 131 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.). The data storage area can store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.).

[0060] In addition, the internal memory 131 may include a high-speed random access memory and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0061] See also Figure 2, which is a schematic diagram of the software structure of the electronic device of the embodiment of the present application. The operating system in the electronic device may be an Android system, a Microsoft Windows system (Windows), an Apple mobile operating system (iOS) or a Harmony OS, etc. Here, the operating system of the electronic device is taken as an example for explanation.

[0062] In some embodiments, the Hongmeng system can be divided into four layers, including the kernel layer, the system service layer, the framework layer, and the application layer, and the layers communicate with each other through software interfaces.

[0063] like Figure 2 As shown in Figure 1, the kernel layer includes the kernel abstract layer (KAL) and the driver subsystem. KAL includes multiple kernels, such as the Linux kernel of the Linux system and the LiteOS kernel of the lightweight IoT system. The driver subsystem can include the hardware driver foundation (HDF). The hardware driver framework can provide unified peripheral access capabilities and a driver development and management framework. The kernel layer of multiple kernels can select the corresponding kernel for processing according to the needs of the system.

[0064] The system service layer is the core capability set of the Hongmeng system, and provides services to applications through the framework layer. This layer may include the system basic capability subsystem set, the basic software service subsystem set, the enhanced software service subsystem set, and the hardware service subsystem set.

[0065] The system basic capability subsystem set provides basic capabilities for the operation, scheduling, migration and other operations of distributed applications on devices of the Hongmeng system. It may include subsystems such as distributed soft bus, distributed data management, distributed task scheduling, Ark multi-language runtime, public basic library, multi-mode input, graphics, security, artificial intelligence (AI), user program framework, etc. Among them, the Ark multi-language runtime provides C or C++ or JavaScript (JS) multi-language runtime and basic system class libraries, and can also provide runtime for Java programs statically compiled using the Ark compiler (that is, the part developed in Java language in the application or framework layer).

[0066] The basic software service subsystem set provides public and general software services for the Hongmeng system, including event notification, telephone, multimedia, design for x (DFX), MSDP&DV and other subsystems.

[0067] The enhanced software service subsystem set provides the Hongmeng system with differentiated capability-enhanced software services for different devices, including smart screen proprietary services, wearable proprietary services, and Internet of Things (IoT) proprietary service subsystems.

[0068] The hardware service subsystem set provides hardware services for the Hongmeng system, including location services, biometric recognition, wearable proprietary hardware services, IoT proprietary hardware services and other subsystems.

[0069] The framework layer provides multi-language user program frameworks and capability frameworks in Java, C, C++, JS, and other languages ​​for Hongmeng system application development, two user interface (UI) frameworks (including the JavaUI framework for Java and the JS UI framework for JS), and multi-language framework application programming interfaces (APIs) open to various software and hardware services. Depending on the degree of componentization of the system, the APIs supported by Hongmeng system devices will also vary.

[0070] The application layer includes system applications and third-party applications (or extended applications). System applications may include applications installed by default on electronic devices such as the desktop, control bar, settings, and phone. Extended applications can be non-essential applications developed and designed by the manufacturer of the electronic device, such as electronic device managers, device migration, notes, weather, and other applications. Third-party non-system applications can be developed by other manufacturers, but can run applications in the Hongmeng system, such as games, navigation, social or shopping applications.

[0071] An application consists of one or more FAs (Feature Ability) or PAs (Particle Ability). FA has a UI interface and provides the ability to interact with users, while PA has no UI interface and provides the ability to run tasks in the background and unified data access abstraction. Applications developed based on FA or PA can implement specific business functions, support cross-device scheduling and distribution, and provide users with a consistent and efficient application experience.

[0072] Multiple electronic devices running the Hongmeng system can achieve hardware mutual assistance and resource sharing through distributed soft bus, distributed device virtualization, distributed data management and distributed task scheduling.

[0073] In order to better understand the embodiments of the present application, first Figure 3 The specific process of rendering and displaying an image corresponding to the size of the browser window is exemplarily introduced.

[0074] When a user opens a page through a browser APP, a corresponding rendering process is started. The rendering process first renders and displays a frame of image corresponding to the browser window in the opened page. See Figure 3 , the process of rendering the image corresponding to the browser window by the rendering process may include:

[0075] Step 1: Build the DOM tree.

[0076] Building a DOM tree is parsing Hypertext Markup Language (HTML), which means using the HTML parser in the rendering process to convert the HTML program file corresponding to the open page into a tree-like DOM structure.

[0077] Step 2: Style calculation and layout.

[0078] During the rendering process, style calculation refers to calculating the specific style between each element node in the DOM tree based on the DOM tree constructed in step 1.

[0079] Layout is also called rearrangement. Usually, a layout tree is created first, that is, a layout tree containing only visible element nodes is created based on the constructed DOM tree. For example, all visible element nodes in the DOM tree can be looped through and the visible element nodes are added to the layout tree. Invisible element nodes in the DOM tree are not added to the layout tree to complete the creation of the layout tree. Afterwards, the geometric information of each element node in the layout tree is calculated based on the created layout tree. The geometric information may include the width and height of each element node in the layout tree and the specific position information of each element node in the page.

[0080] Step 3: Layering.

[0081] Layering means dividing each element node in the layout tree into layers, which can also be understood as dividing the page into multiple layers. During the rendering process, the main thread in the rendering process will use the preset layering strategy to traverse the layout tree so that each element node in the layout tree has a corresponding layer, and finally form a layer tree or a layer tree. After dividing each element node in the layout tree into layers, if the visible element node in a layer is changed, it will only affect the layer corresponding to the changed visible element node, and will not affect other layers. In this way, only the changed layer needs to be rendered in the subsequent rendering process, which can improve rendering efficiency.

[0082] Step 4: Layer drawing.

[0083] After the layer tree is constructed, the main thread in the rendering process will draw each layer in the layer tree and generate a corresponding drawing layer instruction set, which includes the drawing information and drawing instructions corresponding to each layer. Specifically, the main thread in the rendering process will draw each divided layer into multiple corresponding small instructions, and then compose the multiple small instructions into an instruction set according to the drawing order. In other words, this step will generate a corresponding drawing layer instruction set for each layer, and the generated drawing layer instruction set is used to describe how to generate the image corresponding to the layer.

[0084] See also Figure 3 , steps 1 to 4 can be performed by the main rendering thread in the rendering process. After the main rendering thread completes the layer drawing in step 4, it submits the generated layer drawing instruction set to the synthesis thread in the rendering process, and the synthesis thread executes the subsequent steps.

[0085] Step 5: Divide the layers into blocks.

[0086] Layer segmentation is to segment each layer into multiple small tiles. In the specific execution process, the synthesis thread will apply for multiple segmenters from the thread pool to complete the segmentation of the layer to speed up the segmentation process. In the process of programming, the corresponding identifier (ID) and other information will be set for each layer to distinguish the small tiles.

[0087] It should be noted that a page opened in a browser APP may be relatively large, and only the display resources corresponding to a partial area of ​​the above page can be displayed through the browser window. If the complete page is rendered and displayed after the user opens a page, then since it takes a lot of time to render the complete page, this will reduce the display speed of the display resources corresponding to the size of the browser window in the complete page. Therefore, the synthesis thread will divide the layer into small tiles, and give priority to rasterizing the tiles in the image corresponding to the browser window.

[0088] Step 6: Rasterization.

[0089] After each layer is divided into more small tiles, the specific color value of each pixel in each layer area can be determined according to the drawing layer instruction set in step 4, that is, each small tile is rasterized, that is, after rasterization, each small tile in each layer can be converted into a corresponding bitmap (i.e., rasterized resource). In order to speed up the rasterization process, the synthesis thread usually submits the tile information after the layer is tiled to the graphics processing unit (GPU) thread in the browser process, so as to use the GPU thread to quickly complete the rasterization process and save the generated bitmap in the GPU memory or the central processing unit (CPU).

[0090] Step 7: Draw block commands.

[0091] Draw tile commands (DrawQuad) are also guidance information (quads). Specifically, when each tile is rasterized by the GPU thread, the GPU thread submits the bitmap corresponding to each layer after the rasterization process to the synthesis thread in the rendering process. The synthesis thread generates corresponding drawing tile commands or guidance information based on the bitmap of each layer. The drawing tile command includes the location of each bitmap in the memory, the specific location of each bitmap in the image, and operation information such as rotation, scaling, special effects, etc. Subsequently, the synthesis thread submits the generated drawing tile command to the browser process, and the browser process performs synthesis operations based on the drawing tile command to display the rendered display resources on the display.

[0092] In some examples, during the program implementation, the generated drawing tile commands are encapsulated in a compositor frame (CF). The viz (visual) thread running in the browser process is used to receive the drawing tile commands sent by the compositor thread, and synthesize the content in the CF or multiple CFs into a complete image (also called a page or interface) according to the drawing tile commands, that is, synthesize all layers into an image corresponding to the size of the browser window.

[0093] After synthesizing the image, the viz thread in the browser process saves the synthesized image to the back buffer of the graphics card. Since the image saved in the front buffer of the graphics card will be sent to the display, after the synthesized image is stored (or written) in the back buffer of the graphics card, the operating system will swap the front buffer and back buffer of the graphics card (that is, swap the positions of the front buffer and back buffer). In other words, the original front buffer is turned into the back buffer, and the original back buffer is turned into the front buffer, so that the display can read the synthesized image from the front buffer and display it on the display.

[0094] For example, the display usually reads the image in the front buffer of the graphics card at a fixed refresh rate and displays the image in the front buffer on the display screen of the display. The refresh rate of a general display is 60 Hz (hertz), that is, 60 images are fixedly read from the front buffer per second, that is, for the rendering process, the display has about 16.6 ms (milliseconds) of time to synthesize a frame of image. Correspondingly, the operating system controls the front buffer and the back buffer of the graphics card to swap approximately every 16.6 ms, so that the display reads a frame of newly synthesized image from the swapped front buffer for display.

[0095] In the technology of the above example, when the user adjusts the size of the browser window while using the browser APP to access a page, it is necessary to re-render and display the display resources corresponding to the adjusted size of the browser window by repeating the rendering process of steps 2 to 7. Since it takes a certain amount of time for the user to re-render and display the display resources corresponding to the adjusted size of the browser window after adjusting the browser window. Therefore, after the browser window is adjusted, the display resources corresponding to the browser window cannot be displayed in time, resulting in incomplete display of display resources, blank or stuck screen. Such a long-term phenomenon of incomplete display of display resources, blank or stuck screen seriously affects the user experience.

[0096] Therefore, in response to the above-mentioned problem of incomplete display of display resources, blankness or screen freeze caused by untimely rendering of display resources after the browser window is scaled, the present application provides the interface display method described in the following embodiments. This method can, after the user adjusts the browser window, for example, before displaying the complete display resources corresponding to the adjusted size of the browser window in the adjusted browser window, preferentially view the image corresponding to the size of the browser window before adjustment and the rough outline image corresponding to the display resources that have not yet been rendered and displayed, which is roughly outlined by blocks of preset colors, effectively reducing the white screen display time from the adjustment of the browser window to the display of the complete display resources, and improving the user experience.

[0097] The rough outline of the display resource that has not yet been rendered and displayed, which is roughly outlined by the block of preset color, can be understood as a skeleton screen corresponding to the image that has not yet been rendered and displayed. The skeleton screen (SkeletonScreen) can also be called a loading placeholder image, such as Figure 4 FIG. 1 is a schematic diagram of a skeleton screen corresponding to a certain image provided in an embodiment of the present application, see Figure 4The skeleton screen 401 may be used to display the basic structure (or framework) and layout of specific display resources to the user before the specific content is displayed, until the specific display resources are rendered, and then the rendered specific display resources are displayed at the corresponding position of the skeleton screen 401.

[0098] Based on the above Figure 4 The skeleton screen 401 may include picture elements 402 and text elements 403 corresponding to display resources, wherein the display resources may include pictures and texts, the picture elements 402 correspond one-to-one to the pictures in the display resources, and the text elements 403 correspond one-to-one to the texts in the display resources, that is, the layout of the display resources is consistent with the layout of the skeleton screen 401.

[0099] The following takes a laptop computer as an example, and describes the interface display method provided by the present application in combination with a specific embodiment.

[0100] like Figure 5 FIG. 1 is a flow chart of an interface display method provided in an embodiment of the present application, see Figure 5 , the method mainly comprises the following steps:

[0101] S501, displaying a first window of an application, where the first window includes a first interface corresponding to a first display resource.

[0102] It should be understood that in the embodiment of the present application, the application may be a browser APP, and correspondingly, the first window may be a browser window. When the application is other APPs, the corresponding first window may also adopt the aforementioned Figure 3 The rendering process shown shows windows corresponding to other APPs. This application does not limit this.

[0103] See also Figure 5 , taking the first window as a browser window as an example, the first window may refer to the window before the user adjusts the browser window in the process of using the browser APP to access the page. Correspondingly, the first interface may refer to a page corresponding to the size of the browser window, wherein the first interface includes but is not limited to images and text. It is not difficult to understand that functional controls such as navigation bars, title bars, option bars or scroll bars are usually set in the browser window. Therefore, after opening a certain application page through the browser APP, the size of the corresponding browser window will be slightly larger than the size of the interface displayed in the browser window. Therefore, in the embodiment of the present application, the size of the first interface may be consistent with the size of the first window, or it may be smaller than the size of the first window. The first display resource corresponds to the first interface, and the first display resource refers to the specific content displayed in the first interface. The first display resource may include images and / or text.

[0104] By way of example and not limitation, see Figure 6 The notebook computer may include a display unit and a keyboard unit, wherein the display unit and the keyboard unit are rotatably connected. Figure 6 The desktop 601 displayed by the display unit shown in FIG. 601 of the laptop computer displays application icons corresponding to multiple APPs, which may include a computer APP application icon 602, a recycle bin APP application icon 603, and a browser APP application icon 604. Figure 6 The desktop 601 shown may also display application icons corresponding to other APPs, which is not limited in this application.

[0105] Based on the above Figure 6 In the example shown, after the user triggers the browser APP application icon 604 on the desktop 601 of the laptop to select and start the browser APP, the following is directly displayed on the desktop 601 of the laptop: Figure 7 The floating window 701 shown may be used as the first window.

[0106] In some other examples, the first window may also be Figure 8 As shown, after the browser APP is started and the browser page is displayed in full screen on the display screen of the laptop computer, the user can click the downward restore control 801 in the upper right corner of the browser APP to display the following on the desktop of the laptop computer: Figure 7 The floating window 701 shown; in actual application, Fig. 9 As shown, the first window may also be displayed after the user performs one or more dragging operations on the suspended browser window 901, such as left-right, up-down, or dragging any corner of the window. Figure 7 The window shown.

[0107] Based on the above possible examples, the first interface 702 may be Figure 7 The page corresponding to the area selected by the dashed box.

[0108] In other possible examples, the first interface may also be a page corresponding to the size of the browser window that is directly displayed in the opened browser window after the user triggers the application icon of the browser APP to select and start the browser APP; the first interface may also be any page corresponding to the browser window that is opened by the user through a series of operations such as URL search or keyword search in the started browser APP; the first interface may also be any of the aforementioned application pages corresponding to the size of the browser window that is reopened after closing any application page in the browser window.

[0109] S502: In response to a zoom-in operation on the first window, display a second window of the application, where the size of the second window is larger than the size of the first window.

[0110] In some embodiments, when the display screen of the electronic device is a touch screen, the operation of enlarging the first window may refer to an operation in which the user touches the display screen corresponding to the first window based on a preset trigger method such as an enlargement gesture, a stretch gesture, an adjustment gesture, a double-click gesture, or a long press gesture to enlarge the browser window.

[0111] In some embodiments, the operation of enlarging the first window may also be an operation of enlarging and adjusting the first window after the user selects any one or several positions in the first window, such as a maximized control, upper or lower or left or right border boundaries, and any corner, through an input device such as a mouse or touchpad.

[0112] In other implementations, the operation of enlarging the first window may also be an operation of the user controlling the first window to enlarge and adjust the first window through a specific key on an input device such as a keyboard or a handle. The embodiment of the present application does not impose any limitation on the specific operation of enlarging the first window.

[0113] It should be noted that, compared with the size of the first window, when the magnification ratio of the second window is less than the preset parameter (the preset parameter can be pre-configured in the operating system or customized by the user), the second interface may not be displayed in the enlarged second window. This is because the rendering request of the second interface corresponding to the enlarged second window cannot be determined after the enlargement operation is performed on the first window. For example, assuming that the length and width of the first window are 800px*600px respectively, and the second window is a window after the user selects the left border of the first window with the mouse and increases 1px along the length direction of the first window, then the length and width of the enlarged second window are 801px*600px respectively. Compared with the size of the first window, the magnification ratio of the second window is 1.00125, which can be said to be a small magnification ratio of the second window. In actual applications, due to the small magnification ratio of the second window, the position or size of the visible element node in the DOM tree of the interface corresponding to the first window may not change. In this case, even if the first window is enlarged, the rendering request of the second interface in the second window cannot be determined, which leads to the failure to display the second interface in the second window. Therefore, in the embodiment of the present application, the zoom-in operation on the first window needs to meet the requirement of being able to determine the rendering request of the second interface corresponding to the second window.

[0114] It is not difficult to understand that in the embodiment of the present application, the second window is a window after the first window is enlarged. The second window corresponds to the same application as the first window. For example, assuming that the application is a browser APP, the first window is a browser window, and similarly, the second window is also a browser window. The difference between the two is that the size of the browser window corresponding to the second window is larger than the size of the browser window corresponding to the first window.

[0115] S503, displaying a second interface in a second window, where the second interface includes a skeleton screen corresponding to a third display resource and a second display resource that has been rendered, where the second display resource includes the first display resource.

[0116] It should be understood that, still taking the first window as a browser window as an example, the second window can be a window that the user enlarges and adjusts when using the browser APP to access a page. Correspondingly, the second interface is a page corresponding to the size of the second window, and the first interface includes but is not limited to images and text. Fig.10 As shown, the second interface 101 may include Fig.10 In other words, the second interface may include not only the second display resource 1001 that has been rendered, but also the skeleton screen 1002 of the third display resource that has not been rendered, wherein the second display resource 1001 may include pictures and / or texts. Figure 7 In the first interface 702 shown, the second display resource 1001 may include not only the first display resource in the first interface 702, but also other display resources that have been rendered before the zoom-in operation is performed on the first window.

[0117] By way of example and not limitation, Figure 7 As an example, the second window can be triggered by the user. Figure 7 After maximizing the control 703 in the browser window shown in FIG. Figure 8 The full screen window 802 shown; correspondingly, the second interface 803 can be Figure 8 The page corresponding to the area selected by the dashed box. Fig. 9 The browser window 901 shown is taken as the first window as an example, and the second window can be a window after the browser window 901 is enlarged to a preset size after the user triggers the upper and lower borders and / or the left and right borders, or any corner of the browser window. Fig.10 As shown, the second interface 101 includes Fig.10 The second display resource 1001 and the skeleton screen 1002 page.

[0118] In some embodiments, the third display resource may include images and texts, and the skeleton screen may include picture elements and text elements corresponding to the third display resources. The picture elements in the skeleton screen correspond one-to-one to the images in the third display resources, and the text elements in the skeleton screen correspond one-to-one to the texts in the third display resources, that is, the layout in the skeleton screen is consistent with the layout of the third display resources.

[0119] In some embodiments, the second interface can be obtained by acquiring a first rasterization resource corresponding to the second display resource that has been rendered and a second rasterization resource corresponding to the skeleton screen, and then synthesizing the first rasterization resource and the second rasterization resource. It should be understood that the first rasterization resource may refer to a bitmap corresponding to the second display resource generated after rasterization is performed during the rendering process of the second display resource. The second rasterization resource may refer to a skeleton layer bitmap corresponding to the third display resource generated after rasterization is performed during the skeleton screen generation process.

[0120] In the embodiment of the present application, in order to speed up the display of the second interface in the second window, after the first interface corresponding to the size of the first window is displayed in the first window, the browser process pre-renders the other interfaces to be displayed in the first window except the first interface, and caches the pre-rendered rasterized resources (i.e., the first rasterized resources corresponding to the second display resources that have been rendered) after the pre-rendering process in the GPU or CPU. After the zoom operation is performed on the first window, the pre-rendered rasterized resources cached in the GPU or CPU can be reused preferentially, effectively avoiding the above-mentioned zoom operation after the zoom operation is performed on the first window. Figure 3 The rendering process described in step 2 to step 7 in the illustrated embodiment re-renders the second display resource and the third display resource in the second window, which wastes a lot of time and simplifies the rendering process flow of the second display resource.

[0121] It is understandable that during the rendering and display process of the first interface by the browser process and the pre-rendering process of other interfaces to be displayed in the first window except the first interface, some pre-rendering parameters will be generated, and the pre-rendering parameters can be used to identify the pre-rendered rasterization resources. Exemplarily, the pre-rendering parameters may include but are not limited to the layer identification information of each layer, the layer block ID after the block processing of each layer, the identification information of whether the rasterization is ended, and the drawing tile command corresponding to each layer block. Other pre-rendering parameters may also be generated in the actual rendering process, such as the drawing information identification corresponding to each layer, etc., which is not limited in this application. In an embodiment of the present application, the pre-rendered rasterization resources cached in the GPU or CPU can be determined by comparing the layer block ID, the identification information of whether the rasterization is ended, and the drawing tile command corresponding to each layer block in the pre-rendering parameters, so as to use the pre-rendered rasterization resources to determine the first rasterization resource of the second display resource that has been rendered.

[0122] It should be noted that the first rasterized resource corresponding to the second display resource can be obtained by Figure 3 The embodiment shown in the figure is obtained, and the acquisition of the second rasterization resource corresponding to the skeleton screen needs to be performed as follows Fig.11 The flowchart shown is obtained, see Fig.11 , the specific generation process of the skeleton screen can include:

[0123] Step 1: Filter visible element nodes.

[0124] The main thread in the browser process determines the DOM tree corresponding to the third display resource, and filters out visible element nodes from the DOM tree.

[0125] Step 2: Fill with color.

[0126] Based on the visible element nodes filtered from the DOM tree, the main thread in the browser process fills the visible element nodes according to the preset fill color and generates a skeleton screen drawing instruction. The skeleton screen drawing instruction includes a skeleton screen drawing style corresponding to the third display resource (such as a rectangular frame or a circular frame) and specific position information in the second window.

[0127] It should be understood that the preset fill color can be pre-configured or user-defined. Exemplarily, the preset fill color can be pre-configured as pure gray. The present application does not limit the specific setting method and specific value of the preset fill color.

[0128] Step 3: Rasterization.

[0129] In order to speed up the rasterization processing of the unfinished rendering of the third display resource, the main thread in the browser process sends the generated skeleton screen drawing instruction to the GPU thread, so that the GPU thread accelerates the rasterization processing and generates a second rasterization resource corresponding to the skeleton screen.

[0130] Step 4: Synthesis.

[0131] During the actual synthesis process, the viz thread in the browser process can not only be used to receive the second rasterization resource submitted by the GPU thread, but also can be used to receive the first rasterization resource corresponding to the second display resource cached in the GPU. Afterwards, the received first rasterization resource and the second rasterization resource are synthesized to form a second interface including the second display resource and the skeleton screen.

[0132] Similarly, after the viz thread synthesizes the second interface, it saves the second interface to the back buffer of the graphics card. Based on the save operation of the second interface in the back buffer of the graphics card, the operating system swaps the front buffer and the back buffer of the graphics card so that the display can read the second interface from the front buffer and display the second interface in the second window.

[0133] S504: After the third display resource has finished rendering, a third interface is displayed in the second window, where the third interface includes the second display resource and the third display resource.

[0134] It should be understood that the third interface may refer to a page with specific display resources displayed in the second window. The third interface may include images and / or text. Fig.12 , the third interface 1201 can be Fig.12 The page corresponding to the area selected in the dashed box is Fig.10 The third interface 101 shown corresponds to the second interface 101. In the embodiment of the present application, the third interface may include not only the second display resource that has been rendered, but also the third display resource that has been rendered.

[0135] In some possible examples, in order to achieve a natural connection between the second interface and the third interface in the second window, a preset playback effect (such as circle in, circle out, fade in or fade out, etc.) can be added after the second interface is displayed in the second window and before the third interface is displayed in the second window, so as to achieve a smooth transition between the second interface and the third interface in the second window, and effectively avoid the sudden disappearance and sudden appearance of the picture, which may cause an abrupt viewing effect for the user.

[0136] It should be noted that, during the rendering and display process of the third interface, the viz thread in the browser process needs to receive the third rasterization resource corresponding to the third display resource, and then perform synthesis processing on the first rasterization resource corresponding to the second display resource and the third rasterization resource corresponding to the third display resource to form a third interface including the second display resource and the third display resource. The third rasterization resource may refer to a bitmap corresponding to the third display resource generated after performing rasterization processing on the third display resource during the rendering process. The specific steps for obtaining the third rasterization resource can refer to the following. Figure 3 The process shown is obtained after rasterization processing and will not be repeated here.

[0137] Assuming that the refresh rate of the monitor is 60HZ, since the operating system controls the graphics card's front buffer and back buffer to swap approximately every 16.6ms so that the monitor reads a new frame of image from the swapped front buffer for display, then when the third rasterization resource corresponding to the third display resource has not completed rendering within 16.6ms, the viz thread in the browser process cannot synthesize the third interface including the second display resource and the third display resource. Correspondingly, the monitor cannot read the synthesized third interface from the swapped front buffer, resulting in a white screen.

[0138] Therefore, in the process of displaying the third interface, in order to reduce the generation of a white screen, in the embodiment of the present application, when the third display resource has completed rendering within a preset time, the third interface can be displayed in the second window according to the third display resource that has completed rendering. In other words, if the third display resource has completed rendering within the preset time, then the viz thread in the browser process can synthesize the first rasterized resource and the third rasterized resource, and save the synthesized third interface to the back buffer of the graphics card, so that the display reads the third interface from the front buffer and displays it on the display screen of the display.

[0139] On the contrary, when the third display resource is not rendered within the preset time, the fourth interface can be displayed in the second window, and the fourth interface includes the fourth display resource and the second display resource that have been rendered within the preset time, and the fourth display resource is the part of the display resource that has been rendered in the third display resource; until the third display resource is rendered, the third interface is displayed in the second window according to the third display resource and the second display resource that have been rendered. It should be understood that the fourth interface can also include images and / or texts, and the images and / or texts in the fourth interface correspond to the fourth display resource.

[0140] Similarly, during the display of the fourth interface, the viz thread in the browser process can synthesize the fourth rasterization resource corresponding to the fourth display resource and the first rasterization resource corresponding to the second display resource, and save the synthesized fourth interface to the back buffer of the graphics card, so that the subsequent display can read the fourth interface from the interchanged front buffer and display it on the display screen of the display. It should be understood that the fourth rasterization resource may refer to a bitmap corresponding to the fourth display resource generated after rasterization processing is performed during the rendering process of the fourth display resource. The specific steps for obtaining the fourth rasterization resource can refer to the following. Figure 3 The process shown is obtained after rasterization processing, which will not be described in detail here. Based on such an implementation, an interface with gradually increasing content can be displayed in the second window, further improving the browsing experience of the user.

[0141] It is understandable that the preset time is set to prevent the operating system from periodically controlling the front and back buffers in the graphics card to perform swap operations when the viz thread does not have any interface synthesis, thereby causing a white screen.

[0142] In the actual program design process, the above-mentioned preset time can be pre-configured in the configuration file. For example, the specific value of the above-mentioned preset time can be 50ms, 100ms, 150ms or 200ms, etc. The embodiment of the present application does not impose any limitation on the specific value of the preset time.

[0143] Based on the above possible implementation methods, if the third display resource is still not rendered within the preset time, then before displaying the third interface, the fourth display resource and the second display resource that have been rendered within the preset time can be used to preferentially display the fourth interface, thereby further reducing the white screen display time after the first window is enlarged to the complete display resource display, thereby avoiding the problem of incomplete display, jamming or even white screen of display resources in the second window due to untimely rendering of the third rasterization resource corresponding to the third display resource.

[0144] It is worth noting that based on the above Fig.11 In the generation process of the skeleton screen shown in FIG. 1 , after determining the visible element nodes from the DOM tree corresponding to the third display resource, the visible element nodes are filled and rasterized according to the preset filling color, and the second rasterized resource corresponding to the skeleton screen can be obtained. Figure 3 In the rendering process shown in the figure, the browser process renders the second rasterized resource of the skeleton screen at a faster speed and takes a shorter time. Therefore, after the first window is zoomed in, the corresponding second interface can be displayed in the second window in a shorter time. In order to further reduce the occurrence of partial white screen in the period from the second interface to the third interface, the embodiment of the present application can be implemented as follows: Fig.13The processing method shown is used to improve the timeliness of interface display.

[0145] like Fig.13 FIG. 1 is a schematic diagram of a processing flow of multiple processes in a browser according to an embodiment of the present application on an interface in a second window, see Fig.13 The processes involved mainly include the browser process and the rendering process. The data interaction process between the above processes can specifically include:

[0146] Step 1301: The UI framework sends a zoom-in operation instruction to the browser process.

[0147] As an example but not limitation, the UI framework may be Ark UI, Sencha Touch framework, or Flutter framework, etc.

[0148] In response to the user's zoom operation on the first window, the UI framework can send a zoom operation instruction on the first window to the browser process. Exemplarily, the UI framework can send the zoom operation instruction on the first window to the browser process by triggering the drag event callback DRAG_START function, so that the browser process executes subsequent step 1302 according to the received zoom operation instruction.

[0149] Based on the interface display method provided in the embodiment of the present application, after the browser process receives the zoom operation instruction, the browser process no longer executes the aforementioned Figure 3 The display strategy in the embodiment shown in the figure is not used, but the subsequent step 1302 is executed. It is not difficult to understand that, assuming that the refresh rate of the display is still 60HZ, the aforementioned Figure 3 The display delivery strategy in the illustrated embodiment means that even if the viz thread in the browser process does not receive any new rasterization resources and does not synthesize any new interface within 16.6ms, the operating system still swaps the front and back buffers of the graphics card approximately every 16.6ms, so that the display reads the corresponding data from the front buffer, resulting in a white screen in some areas.

[0150] Step 1302: In response to the received zoom-in operation instruction, the browser process determines whether a third display resource that has been rendered is received or a preset time has been exceeded.

[0151] After receiving the zoom operation instruction for the first window in step 1302, the browser process determines whether the rendered third display resource has been received, or whether the preset time has been exceeded, wherein the preset time is counted from the time when the browser process receives the zoom operation instruction sent by the UI framework. If the browser process does not receive the rendered third display resource and the preset time (e.g., 50ms) has not been exceeded, the browser process will execute step 1303.

[0152] If the browser process receives the third display resource that has completed rendering, or exceeds a preset time (eg, 50 ms), the browser process will execute step 1304 .

[0153] Step 1303: The browser process blocks rendering synthesis.

[0154] It should be understood that the browser process blocks the rendering synthesis and no longer executes the above Figure 3 The display sending strategy in the embodiment shown means that the browser process will prohibit the operating system from periodically (e.g., approximately every 16.6 ms) swapping the front and back buffers of the graphics card to avoid the display reading corresponding data from the front buffer and causing a partial white screen. In other words, in response to the received zoom instruction, the browser process needs to determine whether the third display resource that has been rendered is received or whether the preset time has been exceeded. If the browser process does not receive the third display resource that has been rendered within the preset time, the browser process will prohibit the operating system from swapping the front and back buffers of the graphics card approximately every 16.6 ms within the preset time until the preset time has been exceeded, and the browser process will execute the subsequent step 1304.

[0155] Step 1304: The browser process sends a rendering request to the rendering process.

[0156] It should be understood that, contrary to step 1303, when the browser process receives the third display resource that has been rendered or exceeds the preset time, the browser process sends a corresponding rendering request to the rendering process. That is to say, the browser process receiving the third display resource that has been rendered or exceeding the preset time can be specifically divided into the following two situations. The first situation is: the browser process receives the third display resource that has been rendered but has not exceeded the preset time, that is, the browser process receives the third display resource that has been rendered within the preset time; the second situation is: the browser process exceeds the preset time but still has not received the third display resource that has been rendered. In response to the above two different situations, the browser process can send two different rendering requests to the rendering process.

[0157] In the first case, the rendering request sent by the browser process to the rendering process may include: performing rendering processing on the third display resource that has completed rendering.

[0158] Specifically, when the browser process receives the third display resource that has been rendered, the browser process sends a rendering request to the rendering process to render the third display resource, so that the rendering process renders the third display resource that has been rendered, obtains a third rasterized resource corresponding to the third display resource, and then executes step 1305. The specific steps for obtaining the third rasterized resource can refer to the following. Figure 3 The relevant descriptions of steps 2 to 6 are obtained and will not be repeated here.

[0159] For the second case, the rendering request sent by the browser process to the rendering process may include: rendering a fourth display resource that has been rendered within a preset time, wherein the fourth display resource is a portion of the third display resource.

[0160] In some examples, when the preset time has passed but the rendered third display resource is still not received, the browser process sends a rendering request to the rendering process to render the fourth display resource, so that the rendering process renders the rendered fourth display resource to obtain a fourth rasterized resource corresponding to the fourth display resource, and then executes step 1305. The fourth rasterized resource may refer to a bitmap corresponding to the fourth display resource generated after rasterization is performed during the rendering process of the fourth display resource. The specific steps for obtaining the fourth rasterized resource may refer to the following. Figure 3 The relevant descriptions of steps 2 to 6 are obtained and will not be repeated here.

[0161] Step 1305: The rendering process sends a synthesized frame to the browser process in response to the rendering request, and cancels the timeout of the preset time.

[0162] It should be understood that the formation of the composite frame can refer to the relevant description of the corresponding formation of the composite frame in the third interface or the fourth interface in the above-mentioned embodiment, which will not be repeated here. After the rendering process forms the composite frame, it sends the composite frame to the browser process so that the browser process executes step 1306 to composite and display the composite frame.

[0163] Step 1306: The browser process performs a synthesis display operation based on the received synthetic frame.

[0164] It is not difficult to understand, see Figure 3 In the example shown, the composite frame includes the drawing tile command generated by the rendering process (specifically, the composite thread in the rendering process), and the browser process (specifically, the viz thread in the browser process) receives the drawing tile command sent by the rendering process and composites the corresponding interface according to the drawing tile command. Afterwards, the browser process saves the composite interface to the back buffer of the graphics card, so that the display can read the corresponding composite interface from the front buffer after the exchange and display it.

[0165] Step 1307: The browser process sends information to the application process to allow the next zoom-in operation to be performed.

[0166] It should be understood that in an actual application, during the execution of a zoom-in operation, the browser process and the rendering process only respond to the rendering and display process corresponding to the zoom-in operation until the zoom-in operation is completed.

[0167] Step 1308: The application process completes the zoom-in operation.

[0168] It is not difficult to understand that the application process ends the current zoom-in operation in response to the received information sent by the browser process allowing the next zoom-in operation to be performed.

[0169] In the above example, the browser process may include the browser main thread, GPU thread, and viz thread, and the rendering process may include the rendering main thread and synthesis thread. The browser main thread in the browser process is mainly used for data interaction with the UI framework and the viz thread. The data interaction process between the GPU thread and viz thread in the browser process and the rendering main thread and synthesis thread in the rendering process can be seen in the following figure. Figure 3 The relevant description in the example shown is not repeated here.

[0170] In addition, it is understandable that the above Fig.13 The flowchart diagram of the processing flow of multiple processes in the browser on the interface in the second window is only an example. The flowchart diagram provided in the embodiment of the present application does not constitute a specific limitation on the processing flow of displaying the interface in the second window.

[0171] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0172] Based on the interface display methods provided in the above embodiments, the embodiments of the present application also provide the following contents:

[0173] The embodiments of the present application provide an image display device and / or electronic device for executing the above-mentioned interface display method, which can achieve the same effect as the above-mentioned implementation method.

[0174] In the case of an integrated unit, the image display device and / or electronic device may include a processor (or processing module) and a display (or display module), wherein the processor may implement or execute various exemplary interface display methods described in conjunction with the disclosure of this application. The display may be used to display the windows and / or interfaces in the aforementioned various embodiments.

[0175] Optionally, the above-mentioned image display device and / or electronic device may also include a memory (or storage module), and the memory may be used to store computer programs or instructions.

[0176] An embodiment of the present application provides a computer program product, which includes a program. When the program is executed by an electronic device, the electronic device implements the interface display method shown in the above embodiments.

[0177] An embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the interface display method shown in the above embodiments is implemented.

[0178] An embodiment of the present application provides a chip, which includes a memory and a processor. The processor executes a computer program stored in the memory to control the above-mentioned electronic device to execute the interface display method shown in the above-mentioned embodiments.

[0179] It should be understood that the processor mentioned in the embodiments of the present application may be a CPU, or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0180] It should also be understood that the memory mentioned in the embodiments of the present application may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate synchronous dynamic random access memory (doubledatarate SDRAM, DDR SDRAM), enhanced synchronous dynamic random access memory (enhanced SDRAM, ESDRAM), synchronous link dynamic random access memory (synchlink DRAM, SLDRAM), and direct rambus RAM (DR RAM).

[0181] Those skilled in the art can clearly understand that, for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. In the above embodiments, the description of each embodiment has its own emphasis. For the part that is not described or recorded in detail in a certain embodiment, refer to the relevant description of other embodiments.

[0182] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0183] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the system embodiments described above are only schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0184] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0185] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0186] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device capable of carrying the computer program code to a large-screen device, a recording medium, a computer memory, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), an electric carrier signal, a telecommunication signal, and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0187] Finally, it should be noted that the above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. An interface display method, applied to an electronic device, characterized in that: The method comprises: Display a first window of the application, wherein the first window includes a first interface corresponding to a first display resource; In response to the zoom-in operation on the first window, displaying a second window of the application, wherein the size of the second window is larger than the size of the first window; Displaying a second interface in the second window, the second interface including a skeleton screen corresponding to a third display resource and a second display resource that has been rendered, the second display resource including the first display resource; When the third display resource completes rendering, a third interface is displayed in the second window, where the third interface includes the second display resource and the third display resource.

2. The method according to claim 1, characterized in that The displaying the second interface in the second window includes: Acquire a first rasterization resource corresponding to the second display resource that has completed rendering and a second rasterization resource corresponding to the skeleton screen; synthesizing the first rasterization resource and the second rasterization resource to obtain the second interface; The second interface is displayed in the second window.

3. The method according to claim 2, characterized in that The method for acquiring the second rasterization resource corresponding to the skeleton screen includes: Determine a document object model DOM tree corresponding to the third display resource; Determine the visible element nodes in the DOM tree; The visible element node is filled and rasterized according to a preset filling color to obtain the second rasterization resource.

4. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: When the third display resource is not rendered within the preset time, a fourth interface is displayed in the second window, wherein the fourth interface includes the fourth display resource that has been rendered within the preset time and the second display resource, and the fourth display resource is a portion of the third display resource that has been rendered; When the third display resource completes rendering after the preset time, the third interface is displayed in the second window.

5. The method according to any one of claims 1 to 4, characterized in that: The method of displaying a third interface in the second window after the third display resource has finished rendering includes: When the third display resource completes rendering within a preset time, the third interface is displayed in the second window.

6. The method according to any one of claims 1 to 5, characterized in that: The third display resource includes pictures and texts; the skeleton screen includes picture elements and text elements corresponding to the third display resources; and the layout of the skeleton screen is consistent with the layout of the third display resources.

7. An electronic device, characterized in that: include: A processor and a display, wherein the display is configured to display a first window of an application, wherein the first window includes a first interface corresponding to a first display resource; The processor is configured to, in response to a zoom-in operation on the first window, display a second window of the application through the display, wherein a size of the second window is larger than a size of the first window; Displaying a second interface in the second window through the display, the second interface including a skeleton screen corresponding to a third display resource and a second display resource that has been rendered, the second display resource including the first display resource; When the third display resource is rendered, a third interface is displayed in the second window through the display, and the third interface includes the second display resource and the third display resource.

8. The electronic device according to claim 7, characterized in that: The processor is configured to: Acquire a first rasterization resource corresponding to the second display resource that has completed rendering and a second rasterization resource corresponding to the skeleton screen; synthesizing the first rasterization resource and the second rasterization resource to obtain the second interface; The second interface is displayed in the second window through the display.

9. The electronic device according to claim 8, characterized in that: The processor is specifically configured to: Determine a document object model DOM tree corresponding to the third display resource; Determine the visible element nodes in the DOM tree; The visible element node is filled and rasterized according to a preset filling color to obtain the second rasterization resource.

10. The electronic device according to any one of claims 7 to 9, characterized in that: The processor is configured to: When the third display resource is not rendered within the preset time, a fourth interface is displayed in the second window through the display, wherein the fourth interface includes the fourth display resource that has been rendered within the preset time and the second display resource, and the fourth display resource is a portion of the third display resource that has been rendered; When the third display resource completes rendering after the preset time, the third interface is displayed in the second window through the display.

11. The electronic device according to any one of claims 7 to 10, characterized in that: The processor is configured to display the third interface in the second window through the display when the third display resource completes rendering within a preset time.

12. The electronic device according to any one of claims 7 to 11, characterized in that: The third display resource includes pictures and texts; the skeleton screen includes picture elements and text elements corresponding to the third display resources; and the layout of the skeleton screen is consistent with the layout of the third display resources.

13. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

Images