Page display method and device, electronic device, and storage medium

Abstract

The present disclosure relates to a page display method and device, electronic device, and storage medium, the method comprising: receiving a display instruction for a page; adjusting the display amount of the first display object layer of the page in response to the display instruction; determining the display adjustment amount of the second display object layer of the page according to the display amount; and adjusting the display state of the second display object layer in response to the display adjustment amount. The present disclosure is compatible with page display of various browsers, such as computer browsers and mobile browsers, and can achieve complex animation effects based on scrolling behavior, thereby improving the smoothness of web page interaction, avoiding freezes and frame drops, and improving user experience.

Description

Technical Field

[0001] The present disclosure relates to page display technology, and in particular to a page display method and device, electronic equipment, and storage medium. Background Art

[0002] At present, when users browse web pages, since web pages generally display a lot of content, users often have the habit of dragging web pages. At present, the dragging method of users is generally analyzed based on the Document Object Model (DOM) corresponding to the web page, and a web page dragging method responsive to the user's dragging action is generated to display the relevant web page to the user. However, since web applications process the actual web page content of the user, when the user drags a lot of interface content, the response time for the user's dragging is not only quite long, but also intermittent when dynamically displaying the web page, affecting the user's experience, resulting in poor optimization of the animation effect of the current web page, resulting in visual freezes, and affecting the viewer's visual perception and experience. Summary of the invention

[0003] The present invention provides a page display method and device, an electronic device, and a storage medium.

[0004] According to a first aspect of an embodiment of the present disclosure, a page display method is provided, including:

[0005] Receive display instructions for the page;

[0006] In response to the display instruction, adjusting the display amount of the first display object layer of the page;

[0007] determining a display adjustment amount of a second display object layer of the page according to the display amount;

[0008] The presentation state of the second presentation object layer is adjusted in response to the presentation adjustment amount.

[0009] Optionally, the first display object layer and the second display object layer are respectively provided with a first interface building component and a second interface building component; the first interface building component includes a first virtual document object model (DOM) corresponding to the first display object layer, and the second interface building component includes a second virtual DOM corresponding to the second display object layer.

[0010] Optionally, determining the display adjustment amount of the second display object layer of the page according to the display amount includes:

[0011] Acquire, by the first interface building component, a scrolling amount of the first display object layer of the page, the scrolling amount being used as a display amount of the first display object layer;

[0012] The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0013] Optionally, the adjusting the display state of the second display object layer in response to the display adjustment amount includes:

[0014] Smoothing the adjustment animation frame through the second interface building component, calling the animation execution thread to obtain the smoothed adjustment animation frame, using the obtained adjustment animation frame as a display animation frame of the second virtual DOM, so that the display state of the second virtual DOM changes;

[0015] In response to the display state change of the second virtual DOM, the display animation frame of the second virtual DOM is rendered to adjust the display state of the second display object layer.

[0016] Optionally, before calculating, by the second interface building component, an adjustment animation frame of the second display object layer corresponding to the scrolling amount, the method further includes:

[0017] The first interface building component stores the acquired scrolling amount in a scrolling amount queue.

[0018] Optionally, calculating, by the second interface building component, an adjustment animation frame of the second display object layer corresponding to the scrolling amount, and using the adjustment animation frame as the display adjustment amount includes:

[0019] Obtaining a predetermined scrolling amount from the scrolling amount queue;

[0020] The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the predetermined scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0021] Optionally, the method further includes:

[0022] Based on the display update frequency in the display parameter, the animation execution thread is called in a loop or recursive manner to continuously change the display state of the second virtual DOM so that the second display object layer is displayed in an animated manner.

[0023] According to a second aspect of an embodiment of the present disclosure, a page display device is provided, including:

[0024] A receiving unit, used to receive a display instruction for a page;

[0025] A first adjustment unit, configured to adjust a display amount of a first display object layer of the page in response to the display instruction;

[0026] A determining unit, configured to determine a display adjustment amount of a second display object layer of the page according to the display amount;

[0027] The second adjustment unit is configured to adjust the display state of the second display object layer in response to the display adjustment amount.

[0028] Optionally, the first display object layer and the second display object layer are respectively provided with a first interface building component and a second interface building component; the first interface building component includes a first virtual document object model DOM corresponding to the first display object layer, and the second interface building component includes a second virtual DOM corresponding to the second display object layer.

[0029] Optionally, the determining unit is further configured to:

[0030] The scrolling amount of the first display object layer obtained by the first interface building component is received through the second interface building component, an adjustment animation frame of the second display object layer corresponding to the scrolling amount is calculated, and the adjustment animation frame is used as the display adjustment amount; wherein, the first interface building component obtains the scrolling amount of the first display object layer of the page, and the scrolling amount is used as the display amount of the first display object layer.

[0031] Optionally, the second adjustment unit is further used to:

[0032] Smoothing the adjustment animation frame through the second interface building component, calling the animation execution thread to obtain the smoothed adjustment animation frame, using the obtained adjustment animation frame as a display animation frame of the second virtual DOM, so that the display state of the second virtual DOM changes;

[0033] In response to the display state change of the second virtual DOM, the display animation frame of the second virtual DOM is rendered to adjust the display state of the second display object layer.

[0034] Optionally, the device further comprises:

[0035] The storage unit is configured to store the acquired scrolling amount in a scrolling amount queue through the first interface building component before the determining unit calculates the adjustment animation frame corresponding to the scrolling amount of the second display object layer through the second interface building component.

[0036] Optionally, the determining unit is further configured to:

[0037] Obtaining a predetermined scrolling amount from the scrolling amount queue;

[0038] The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the predetermined scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0039] Optionally, the second adjustment unit is further used to:

[0040] The animation execution thread is called in a loop or recursively manner to continuously change the display state of the second virtual DOM so that the second display object layer is displayed in an animated manner.

[0041] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, comprising: a processor and a memory for storing processor executable instructions, wherein the processor is configured to execute the steps of the above-mentioned page display method when calling the executable instructions in the memory.

[0042] According to a fourth aspect of an embodiment of the present disclosure, a non-temporary computer-readable storage medium is provided. When instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to perform the steps of the above-mentioned page display method.

[0043] The technical solution provided by the embodiments of the present disclosure may have the following beneficial effects:

[0044] In the embodiment of the present disclosure, the page is layered into a first display object layer and a second display object layer, and a first interface construction component and a second interface construction component are respectively set for the first display object layer and the second display object layer; the virtual DOM corresponding to the real DOM is controlled by the first interface construction component and the second interface construction component respectively, so as to control the real DOM, i.e., the first display object layer and the second display object layer, so as to realize the scrolling operation of the text content layer in the web page, and the animation effect layer performs animation display corresponding to the text content layer. In the embodiment of the present disclosure, in response to the user's display instruction in the web application background, only the virtual DOM is called and processed, and after the animation display processing is completed, the virtual DOM animation frame to be displayed is rendered to form an actual display page, thereby ensuring the rapid output of a dynamic display web page in response to the display instruction.

[0045] The technical solution of the disclosed embodiment is compatible with page displays of various browsers, such as computer browsers and mobile browsers, and can achieve complex animation effects based on scrolling behavior, thereby improving the smoothness of web page interaction, avoiding freezes and frame drops, and improving user experience.

[0046] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0048] Figure 1 A schematic diagram of a page display method flow chart shown in an embodiment of the present disclosure;

[0049] Figure 2 A schematic diagram of an implementation structure of a page display method shown in an embodiment of the present disclosure;

[0050] Figure 3 A schematic diagram of the structure of a page display device shown in an embodiment of the present disclosure;

[0051] Figure 4 A block diagram of an electronic device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0052] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and apparatuses consistent with some aspects of the present disclosure as detailed in the appended claims.

[0053] Figure 1 A schematic diagram of a page display method flow diagram of an embodiment of the present disclosure is shown as follows: Figure 1 As shown, the page display method of the embodiment of the present disclosure includes the following steps:

[0054] S11, receiving a display instruction for a page.

[0055] In the embodiment of the present disclosure, the display instruction may be any browsing instruction of a web page, such as scrolling, dragging, sliding, etc. The display instruction is initiated by a user, or may be an adjustment instruction for a web page initiated by an electronic device such as a mobile phone or a computer based on an internal instruction.

[0056] S12: In response to the display instruction, adjust the display amount of the first display object layer of the page.

[0057] In the embodiment of the present disclosure, the web page can be divided into two layers or multiple layers, and the two layers are respectively the first display object layer and the second display object layer. As an example, the first display object layer can be a text content layer, which belongs to the normal document flow, and the user can view the content by scrolling; the second display object layer animation effect layer depends on the scrolling of the content of the text content layer to achieve dynamic changes and display the animation effect of the web page. Here, the display amount of the first display object layer is that when the user performs browsing instructions such as dragging on the web page, the text content currently displayed on the web page is determined, and based on the browsing instructions, the web page content that the user is about to browse is determined, and how to display the content that the user is about to browse to the user from the current display page. The embodiment of the present disclosure determines the current display page and the web page content that the user is about to browse, so as to adjust the page from the current page to the web page interface that is about to be displayed to the user in an animated manner. The web page content between the current interface and the display page that the user is about to browse is the display amount of the first display object layer.

[0058] In the embodiment of the present disclosure, the first display object layer and the second display object layer are respectively provided with a first interface building component and a second interface building component; the first interface building component includes a first virtual DOM corresponding to the first display object layer, and the second interface building component includes a second virtual DOM corresponding to the second display object layer. Here, the first virtual DOM is a text content layer corresponding to the first display object layer, and the first display object layer is implemented based on rendering the first virtual DOM.

[0059] As an implementation method, the first interface construction component and the second interface construction component can both be React components. Here, the first interface construction component and the second interface construction component can be combined, that is, the corresponding functions of the first interface construction component and the second interface construction component are implemented by one React component.

[0060] S13: Determine a display adjustment amount of a second display object layer of the page according to the display amount.

[0061] In the embodiment of the present disclosure, determining the display adjustment amount of the second display object layer of the page according to the display amount specifically includes:

[0062] The first interface building component obtains the scrolling amount of the first display object layer of the page, and the scrolling amount is used as the display amount of the first display object layer; the second interface building component receives the scrolling amount of the first display object layer obtained by the first interface building component, calculates the adjustment animation frame of the second display object layer corresponding to the scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0063] That is to say, when the first display object layer of the page generates a scrolling amount in response to a display instruction, the first display object layer also generates a corresponding scrolling amount. Therefore, the second interface building component can obtain the scrolling amount of the first display object layer based on the data interaction between the second interface building component and the first interface building component.

[0064] S14: Adjust the display state of the second display object layer in response to the display adjustment amount.

[0065] In the embodiment of the present disclosure, the adjustment animation frame is smoothed by the second interface building component, the animation execution thread is called based on the display parameter to obtain the smoothed adjustment animation frame, the obtained adjustment animation frame is used as the display animation frame of the second virtual DOM, so that the display state of the second virtual DOM is changed;

[0066] In response to the display state change of the second virtual DOM, the display animation frame of the second virtual DOM is rendered to adjust the display state of the second display object layer. Here, the display parameter mainly refers to the display update frequency of the display screen of the electronic device. The animation display effect of the embodiment of the present disclosure is ensured to be consistent with the display update frequency as much as possible to improve the animation display effect.

[0067] In the disclosed embodiment, based on the display update frequency in the display parameters, the animation execution thread is called in a cyclic or recursive manner, and the smoothed adjustment animation frame is continuously called for the second virtual DOM to continuously change the display state of the second virtual DOM. By rendering the second virtual DOM, the adjustment animation frame generates a web page interface with corresponding text display content, so that the second display object layer can be displayed in an animated manner, and the user experiences the dynamic display of the web page.

[0068] In the disclosed embodiment, the animation execution thread may be requestAnimationFrame.

[0069] As an implementation method, the display state of the second display object layer in the embodiment of the present disclosure can also be adjusted by adjusting the up, down, left, and right movement of pixels of the second display object layer within the display update cycle to achieve an animation effect. However, compared with the animation execution thread method such as calling requestAnimationFrame, the animation display effect is relatively poor.

[0070] The essence of the technical solution of the embodiment of the present disclosure is further explained below through specific examples.

[0071] Figure 2 A schematic diagram of a page display method according to an embodiment of the present disclosure is shown in FIG. Figure 2As shown, in the example disclosed in the present invention, the page needs to be layered. The upper layer is the text content layer, which is equivalent to the aforementioned first display object layer. The text content layer is the content that should be displayed in the page and belongs to the normal document flow. The user can view the web page content by scrolling; the lower layer is the animation effect layer, which corresponds to the aforementioned second display object layer, and relies on the scrolling of the upper layer content to achieve dynamic changes. The upper layer of the web page here corresponds to the first display object layer of the embodiment of the present invention, and the lower layer corresponds to the second display object layer. The embodiment of the present invention is not limited to the layering method of the text content layer and the animation effect layer, and can also be divided into at least one other display layer and animation effect layer. The embodiment of the present invention mainly solves how to better animate the display page.

[0072] In the disclosed embodiment, the upper and lower layers of the page are both implemented through the React component, and the React component is provided with a virtual DOM. The disclosed embodiment is to manipulate the virtual DOM, and the upper and lower layers of the page can be realized by rendering the virtual DOM accordingly. Compared with manipulating real DOM elements, the processing performance of controlling the virtual DOM is better, and different processing can be performed separately. The React component of the text content layer includes a virtual DOM and a scrolling amount queue. After the text content layer React component obtains the scrolling amount of the text content layer, the scrolling amount is stored in the scrolling amount queue.

[0073] The text content layer React component monitors the user's scrolling operation on the text content layer, and continuously obtains the current scrolling amount, and stores the obtained scrolling amount in the scrolling amount queue. The scrolling amount queue can accurately reflect the scrolling process of the text content layer of the page.

[0074] The animation effect layer React component communicates between the text content layer React component and the animation effect layer React component, passes the scroll amount in the scroll amount queue to the animation effect layer React component, performs data mapping, and calculates the animation frame of the animation effect layer React component corresponding to the current scroll amount.

[0075] The animation effect layer React component also smoothes the animation frames to adapt to the display update frequency of different display screens, making the animation display effect of the animation effect layer better.

[0076] The animation effect layer React component changes the state of the virtual DOM in the animation effect layer component by calling the requestAnimationFrame thread, that is, the requestAnimationFrame thread continuously captures the adjusted animation frame as the virtual DOM in the animation effect layer React component to be displayed, thereby changing the state of the virtual DOM in the animation effect layer. Then the relevant image processor renders the state of the virtual DOM in the animation effect layer React component, that is, generates a real DOM, that is, generates an interface to be displayed in the network element. These display interfaces form animation effects through continuous updates to achieve corresponding network element animation output.

[0077] In the embodiment of the present disclosure, before the second interface building component calculates the adjustment animation frame corresponding to the scrolling amount of the second display object layer, the first interface building component stores the acquired scrolling amount in a scrolling amount queue.

[0078] The animation effect layer React component obtains the predetermined scrolling amount from the scrolling amount queue; calculates the adjustment animation frame corresponding to the predetermined scrolling amount of the second display object layer through the second interface construction component, and uses the adjustment animation frame as the display adjustment amount. By continuously calling requestAnimationFrame in a loop or recursive manner, the state of the virtual DOM in the animation effect layer React component is continuously changed, and the virtual DOM is continuously rendered to continuously generate the real DOM, thereby realizing the animation display effect of the web page, thereby realizing the animation display effect of the page. Here, the cycle of the loop or recursion is adapted to the display update cycle of the display screen of the electronic device.

[0079] In the embodiments of the present disclosure, the electronic device may be a mobile phone, a personal laptop computer, a game console, a PAD, etc. that supports a web browser.

[0080] As an implementation method, the display state of the second display object layer in the embodiment of the present disclosure can also be adjusted by adjusting the up, down, left, and right movement of the pixels of the second display object layer within the display update cycle to achieve an animation effect, that is, using CSS3 to implement the animation update of the animation effect layer of the web page. However, this has poor controllability and cannot accurately control each frame of the animation. Compared with the aforementioned method of calling animation execution threads such as requestAnimationFrame, the animation display effect is relatively poor.

[0081] In the embodiment of the present disclosure, the upper and lower layer React components can be combined as long as it can be achieved. Figure 2 The corresponding function shown is OK.

[0082] In the embodiment of the present disclosure, the page is layered into a first display object layer and a second display object layer, and a first interface construction component and a second interface construction component are respectively set for the first display object layer and the second display object layer; the virtual DOM corresponding to the real DOM is controlled by the first interface construction component and the second interface construction component respectively, so as to control the real DOM, i.e., the first display object layer and the second display object layer, so as to realize the scrolling operation of the text content layer in the web page, and the animation effect layer performs animation display corresponding to the text content layer. The embodiment of the present disclosure is compatible with page display of various browsers, such as computer browsers and mobile browsers, etc., and can realize complex animation effects based on scrolling behavior, thereby improving the smoothness of web page interaction, avoiding freezes and frame drops, and improving the user experience.

[0083] Figure 3 This is a schematic diagram of the composition structure of a page display device shown in an embodiment of the present disclosure, such as Figure 3 As shown, the page display device of the embodiment of the present disclosure includes:

[0084] The receiving unit 30 is used to receive a display instruction for a page;

[0085] A first adjustment unit 31, configured to adjust the display amount of the first display object layer of the page in response to the display instruction;

[0086] A determination unit 32, configured to determine a display adjustment amount of a second display object layer of the page according to the display amount;

[0087] The second adjusting unit 33 is configured to adjust the display state of the second display object layer in response to the display adjustment amount.

[0088] As an implementation method, the first display object layer and the second display object layer are respectively provided with a first interface building component and a second interface building component; the first interface building component includes a first virtual document object model DOM corresponding to the first display object layer, and the second interface building component includes a second virtual DOM corresponding to the second display object layer.

[0089] As an implementation manner, the determining unit 32 is further configured to:

[0090] The scrolling amount of the first display object layer obtained by the first interface building component is received by the second interface building component, and an adjustment animation frame corresponding to the scrolling amount of the second display object layer is calculated, and the adjustment animation frame is used as the display adjustment amount; wherein the first interface building component obtains the scrolling amount of the first display object layer of the page, and the scrolling amount is used as the display amount of the first display object layer

[0091] Optionally, the second adjusting unit 33 is further used to:

[0092] Smoothing the adjustment animation frame through the second interface building component, calling the animation execution thread to obtain the smoothed adjustment animation frame, using the obtained adjustment animation frame as a display animation frame of the second virtual DOM, so that the display state of the second virtual DOM changes;

[0093] In response to the display state change of the second virtual DOM, the display animation frame of the second virtual DOM is rendered to adjust the display state of the second display object layer.

[0094] exist Figure 3 Based on the page display device shown, the page display device of the embodiment of the present disclosure further includes:

[0095] Storage Unit( Figure 3 ), which is used to store the obtained scrolling amount in a scrolling amount queue through the first interface building component before the determining unit calculates the adjustment animation frame corresponding to the scrolling amount of the second display object layer through the second interface building component.

[0096] Optionally, the determining unit 32 is further configured to:

[0097] Obtaining a predetermined scrolling amount from the scrolling amount queue;

[0098] The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the predetermined scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0099] Optionally, the second adjusting unit 33 is further used to:

[0100] Based on the display update frequency in the display parameter, the animation execution thread is called in a loop or recursive manner to continuously change the display state of the second virtual DOM so that the second display object layer is displayed in an animated manner.

[0101] In an exemplary embodiment, the receiving unit 30, the first adjustment unit 31, the determination unit 32, the second adjustment unit 33, etc. can be implemented by one or more central processing units (CPU, Central Processing Unit), graphics processing units (GPU, Graphics Processing Unit), baseband processors (BP, Base Processor), application-specific integrated circuits (ASIC, Application Specific Integrated Circuit), digital signal processors (DSP, Digital Signal Processor), programmable logic devices (PLD, Programmable Logic Device), complex programmable logic devices (CPLD, Complex Programmable Logic Device), field programmable gate arrays (FPGA, Field-Programmable Gate Array), general-purpose processors, controllers, microcontrollers (MCU, Micro Controller Unit), microprocessors (Microprocessors), or other electronic components.

[0102] Regarding the page display device in the above embodiment, the specific manner in which each module and unit performs operations has been described in detail in the embodiment of the device, and will not be elaborated here.

[0103] Figure 4 is a block diagram of an electronic device 800 according to an exemplary embodiment. Figure 4 As shown, the electronic device 800 supports multi-screen output, and the electronic device 800 may include one or more of the following components: a processing component 802, a memory 804, a power component 806, a multimedia component 808, an audio component 810, an input / output (I / O) interface 812, a sensor component 814, and a communication component 816.

[0104] The processing component 802 generally controls the overall operation of the electronic device 800, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the above-mentioned method. In addition, the processing component 802 may include one or more modules to facilitate the interaction between the processing component 802 and other components. For example, the processing component 802 may include a multimedia module to facilitate the interaction between the multimedia component 808 and the processing component 802.

[0105] The memory 804 is configured to store various types of data to support operations on the device 800. Examples of such data include instructions for any application or method operating on the electronic device 800, contact data, phone book data, messages, images, videos, etc. The memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0106] The power component 806 provides power to the various components of the electronic device 800. The power component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the electronic device 800.

[0107] The multimedia component 808 includes a screen that provides an output interface between the electronic device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 808 includes a front camera and / or a rear camera. When the device 800 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and the rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0108] The audio component 810 is configured to output and / or input audio signals. For example, the audio component 810 includes a microphone (MIC), and when the electronic device 800 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 804 or sent via the communication component 816. In some embodiments, the audio component 810 also includes a speaker for outputting audio signals.

[0109] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: a home button, a volume button, a start button, and a lock button.

[0110] The sensor assembly 814 includes one or more sensors for providing various aspects of status assessment for the electronic device 800. For example, the sensor assembly 814 can detect the open / closed state of the device 800, the relative positioning of components, such as the display and keypad of the electronic device 800, and the sensor assembly 814 can also detect the position change of the electronic device 800 or a component of the electronic device 800, the presence or absence of contact between the user and the electronic device 800, the orientation or acceleration / deceleration of the electronic device 800, and the temperature change of the electronic device 800. The sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 814 may also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 814 may also include an accelerometer, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0111] The communication component 816 is configured to facilitate wired or wireless communication between the electronic device 800 and other devices. The electronic device 800 can access a wireless network based on a communication standard, such as Wi-Fi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 816 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0112] In an exemplary embodiment, the electronic device 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors or other electronic components to perform the image processing steps of the above-described embodiments.

[0113] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, and the instructions can be executed by a processor 820 of an electronic device 800 to complete the steps of the page display method of the above embodiment. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0114] The embodiment of the present disclosure also records a non-transitory computer-readable storage medium. When the instructions in the storage medium are executed by the processor of the electronic device, the electronic device can execute the page display method of the above embodiment. The method includes:

[0115] Receive display instructions for the page;

[0116] In response to the display instruction, adjusting the display amount of the first display object layer of the page;

[0117] determining a display adjustment amount of a second display object layer of the page according to the display amount;

[0118] The presentation state of the second presentation object layer is adjusted in response to the presentation adjustment amount.

[0119] Optionally, the first display object layer and the second display object layer are respectively provided with a first interface building component and a second interface building component; the first interface building component includes a first virtual document object model (DOM) corresponding to the first display object layer, and the second interface building component includes a second virtual DOM corresponding to the second display object layer.

[0120] Optionally, determining the display adjustment amount of the second display object layer of the page according to the display amount includes:

[0121] Acquire the scrolling amount of the first display object layer of the page through the first virtual DOM in the first interface building component, and use the scrolling amount as the display amount of the first display object layer;

[0122] The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0123] Optionally, the adjusting the display state of the second display object layer in response to the display adjustment amount includes:

[0124] Smoothing the adjustment animation frame through the second interface building component, calling the animation execution thread to obtain the smoothed adjustment animation frame, using the obtained adjustment animation frame as a display animation frame of the second virtual DOM, so that the display state of the second virtual DOM changes;

[0125] In response to the display state change of the second virtual DOM, the display animation frame of the second virtual DOM is rendered to adjust the display state of the second display object layer.

[0126] Optionally, before calculating, by the second interface building component, an adjustment animation frame of the second display object layer corresponding to the scrolling amount, the method further includes:

[0127] The first interface building component stores the acquired scrolling amount in a scrolling amount queue.

[0128] Optionally, calculating, by the second interface building component, an adjustment animation frame of the second display object layer corresponding to the scrolling amount, and using the adjustment animation frame as the display adjustment amount includes:

[0129] Obtaining a predetermined scrolling amount from the scrolling amount queue;

[0130] The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the predetermined scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

[0131] Optionally, the method further includes:

[0132] Based on the display update frequency in the display parameter, the animation execution thread is called in a loop or recursive manner to continuously change the display state of the second virtual DOM so that the second display object layer is displayed in an animated manner.

[0133] The disclosed embodiment also records an electronic device, including: a processor and a memory for storing processor executable instructions, wherein the processor is configured to execute the steps of the page display method of the above embodiment when calling the executable instructions in the memory.

[0134] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0135] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A page display method, characterized in that: The method comprises: Receive display instructions for the page; In response to the display instruction, adjusting the display amount of the first display object layer of the page; wherein the first display object layer is provided with a first interface building component; the first interface building component includes a first virtual document object model DOM corresponding to the first display object layer; Determining the display adjustment amount of the second display object layer of the page according to the display amount; wherein the second display object layer is provided with a second interface building component; the second interface building component includes a second virtual DOM corresponding to the second display object layer; determining the display adjustment amount of the second display object layer of the page according to the display amount comprises: obtaining the scrolling amount of the first display object layer of the page through the first interface building component, and using the scrolling amount as the display amount of the first display object layer; calculating the adjustment animation frame of the second display object layer corresponding to the scrolling amount through the second interface building component, and using the adjustment animation frame as the display adjustment amount; The display state of the second display object layer is adjusted in response to the display adjustment amount; the display state of the second display object layer is adjusted in response to the display adjustment amount, including: smoothing the adjustment animation frame through the second interface construction component, calling the animation execution thread to obtain the smoothed adjustment animation frame, and using the obtained adjustment animation frame as the display animation frame of the second virtual DOM to change the display state of the second virtual DOM; in response to the display state change of the second virtual DOM, rendering the display animation frame of the second virtual DOM to adjust the display state of the second display object layer.

2. The method according to claim 1, characterized in that Before calculating, by the second interface building component, the adjustment animation frame of the second display object layer corresponding to the scrolling amount, the method further includes: The first interface building component stores the acquired scrolling amount in a scrolling amount queue.

3. The method according to claim 2, characterized in that Calculating, by the second interface building component, an adjustment animation frame corresponding to the scrolling amount of the second display object layer, and using the adjustment animation frame as the display adjustment amount comprises: Obtaining a predetermined scrolling amount from the scrolling amount queue; The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the predetermined scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

4. The method according to claim 1, characterized in that: The animation execution thread is called in a loop or recursively manner to continuously change the display state of the second virtual DOM so that the second display object layer is displayed in an animated manner.

5. A page display device, characterized in that: The device comprises: A receiving unit, used to receive a display instruction for a page; A first adjustment unit is used to adjust the display amount of the first display object layer of the page in response to the display instruction; wherein the first display object layer is provided with a first interface building component; the first interface building component includes a first virtual document object model DOM corresponding to the first display object layer; a determination unit, configured to determine a display adjustment amount of a second display object layer of the page according to the display amount; wherein the second display object layer is provided with a second interface building component; the second interface building component includes a second virtual DOM corresponding to the second display object layer; the determination unit is specifically configured to obtain a scrolling amount of the first display object layer of the page through the first interface building component, and use the scrolling amount as the display amount of the first display object layer; calculate an adjustment animation frame of the second display object layer corresponding to the scrolling amount through the second interface building component, and use the adjustment animation frame as the display adjustment amount; A second adjustment unit is used to adjust the display state of the second display object layer in response to the display adjustment amount; the second adjustment unit is specifically used to smooth the adjustment animation frame through the second interface building component, call the animation execution thread to obtain the smoothed adjustment animation frame, use the obtained adjustment animation frame as the display animation frame of the second virtual DOM, so that the display state of the second virtual DOM changes; in response to the display state change of the second virtual DOM, render the display animation frame of the second virtual DOM to adjust the display state of the second display object layer.

6. The device according to claim 5, characterized in that The device also includes: The storage unit is configured to store the acquired scrolling amount in a scrolling amount queue through the first interface building component before the determining unit calculates the adjustment animation frame corresponding to the scrolling amount of the second display object layer through the second interface building component.

7. The device according to claim 6, characterized in that The determining unit is further configured to: Obtaining a predetermined scrolling amount from the scrolling amount queue; The second interface building component calculates an adjustment animation frame of the second display object layer corresponding to the predetermined scrolling amount, and uses the adjustment animation frame as the display adjustment amount.

8. The device according to claim 5, characterized in that The second adjustment unit is further used for: The animation execution thread is called in a loop or recursively manner to continuously change the display state of the second virtual DOM so that the second display object layer is displayed in an animated manner.

9. An electronic device, characterized in that: The electronic device comprises: a processor and a memory for storing processor executable instructions, wherein the processor is configured to execute the steps of the page display method as claimed in any one of claims 1 to 4 when calling the executable instructions in the memory.

10. A non-transitory computer-readable storage medium, when instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to perform the steps of the page display method as described in any one of claims 1 to 4.

Images