Webpage loading method and device and electronic equipment
By prioritizing the loading and rendering of anchor web page content, the problem of long-term display of anchor web pages is solved, and faster page display and improved user experience is achieved.
Patent Information
- Application Number
- CN202410145748.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-01-31
- Publication Date
- 2025-08-01
AI Technical Summary
During the browsing process of web pages with anchors, the process of loading, rendering and displaying web pages is carried out in the order of content, resulting in the display of anchor pages taking a long time and affecting the user experience.
By changing the loading and rendering order of each part of the web page, the content of the anchor web page is loaded and rendered first, and the shared memory is used to realize the interaction between the loading process and the rendering process, reducing the rendering load of non-anchor areas and ensuring that the anchor area is given priority.
The display rate of anchor web pages is accelerated, allowing users to see the target page faster, and improving users' user experience.
Smart Images

Figure CN120407976A_ABST
Abstract
Description
Technical Field
[0001] Embodiments of the present application relate to the field of web page loading, and more specifically, to a method, apparatus, and electronic device for loading a web page. Background Art
[0002] Currently, during the browsing of a long web page with an anchor, the processes of web page loading, web page rendering, and web page display are carried out in the order of the web page content. After the entire web page is loaded and rendered, it will jump to the anchor page for the user to view. This makes the time-consuming for the anchor page display relatively long, and it is easy for the user to perceive slow web page loading during web page access, thus affecting the user experience. Summary of the Invention
[0003] The present application provides a method, apparatus, and electronic device for loading a web page. Through this method, apparatus, and electronic device, for a web page containing an anchor, the order of loading and rendering each part of the web page can be changed, and the content corresponding to the anchor web page can be preferentially loaded and rendered, thereby accelerating the display rate of the anchor web page, enabling the user to see the target page faster, and thus enhancing the user experience.
[0004] In a first aspect, a method for loading a web page is provided. The method includes: receiving a first request message for requesting to load a first web page, where the first web page contains an anchor corresponding to the first request message; loading the content corresponding to the tree of a first area in the first web page and the content corresponding to the parent node tree, where the parent node tree is the parent node tree of the tree of the first area, and the anchor is located in the first area; rendering the content corresponding to the tree of the first area and the content corresponding to the parent node tree; and displaying the content corresponding to the tree of the first area and the content corresponding to the parent node tree in a first display window.
[0005] In some embodiments, the first request message includes the URL of the first web page. When there is a "#" identifier in the URL of the first web page, it is determined that the first web page contains an anchor.
[0006] Wherein, the tree of the first area in the first web page refers to the tree-like structure corresponding to the first area web page in the first web page. The first area web page in the first web page is the anchor page. The content corresponding to the tree of the first area in the first web page can be understood as the content of the anchor page, and the content of the first web page includes the content of the anchor page. By way of example, the tree of the first area can be understood as the anchor area tree. For the source code or tree-like structure of a web page, it may include a parent node tree, an anchor area tree, and the sibling tree of the anchor area tree. It should be understood that from the perspective of the displayed web page, the content displayed by these three split trees is different. In some examples, the parent node tree does not include the data of the anchor area tree and its sibling tree.
[0007] Among them, the first display window refers to the display window for displaying the first web page after loading.
[0008] It can be understood that the above-mentioned first area can also be described as an anchor area. After loading the content corresponding to the tree of the first area in the first web page and the content corresponding to the parent node tree, the content corresponding to the tree of other areas in the first web page except the first area can be further loaded, or the content corresponding to the tree of other areas in the first web page except the first area may not be loaded.
[0009] In the embodiments of the present application, by changing the order of loading and rendering the content of each part of the web page, the content corresponding to the anchor web page can be preferentially loaded and rendered, so as to accelerate the display rate of the anchor web page, enabling the user to see the target page faster, thereby improving the user experience.
[0010] In combination with the first aspect, in a possible implementation manner, the method further includes: loading the content corresponding to the tree of the second area in the first web page, where the second area is the area in the first web page that is located after the first area; rendering the content corresponding to the tree of the second area.
[0011] Among them, the tree of the second area in the first web page refers to the tree-shaped structure corresponding to the web page of the second area in the first web page, and the web page of the second area in the first web page refers to the page in the first web page that is located after the anchor page.
[0012] In the embodiments of the present application, after loading and rendering the content of the anchor page so that the anchor page is preferentially displayed to the user, the page after the anchor page in the first web page can be further loaded and rendered, enabling the user to quickly view the content after the anchor page by scrolling down after viewing the content of the anchor page, thereby improving the user's web access experience.
[0013] In combination with the first aspect, in a possible implementation manner, the method further includes: loading the content corresponding to the tree of the third area in the first web page, where the third area is the area in the first web page that is located before the first area; rendering the content corresponding to the tree of the third area.
[0014] Among them, the tree of the third area in the first web page refers to the tree-shaped structure corresponding to the web page of the third area in the first web page, and the web page of the third area in the first web page refers to the page in the first web page that is located before the anchor page.
[0015] It can be understood that the web page of the third area in the first web page, the web page of the first area in the first web page, and the web page of the second area in the first web page constitute the first web page.
[0016] In the embodiments of the present application, after loading and rendering the content of the anchor page and making the anchor page be preferentially displayed to the user, the page before the anchor page in the first web page can be further loaded and rendered, so that the entire first web page can be normally displayed, thereby improving the user's web page access experience.
[0017] In combination with the first aspect, in a possible implementation manner, the method further includes: during the process of rendering the content corresponding to the tree of the first region and the content corresponding to the parent node tree, adding lazy loading tags to at least some of the nodes that make up the parent node tree.
[0018] In some embodiments, the above at least some nodes may be high-load nodes in the parent node tree. For example, they may be nodes whose load proportion among all nodes in the parent node tree is in the top a%, where the value of a may be any value between 1 and 90.
[0019] In the embodiments of the present application, while rendering the web page content corresponding to the parent node tree and the anchor region tree, the load of rendering the web page content corresponding to the parent node tree is reduced, so that there is more sufficient load for rendering the web page content corresponding to the anchor region tree, and the display rate of the anchor page can be further improved.
[0020] In combination with the first aspect, in a possible implementation manner, the height of the first region is greater than or equal to the height of the first display window, and the anchor point is located at the top position of the first region.
[0021] In the embodiments of the present application, the height of the preferentially loaded and rendered anchor page is greater than or equal to the height of the window for displaying the web page, which can make the content of the anchor page cover the entire display window, and the user can see as much web page content as possible within the display capability of the device.
[0022] In a second aspect, an electronic device is provided. The electronic device includes: a receiving module, configured to receive a first request message for requesting to load the first web page, where the first web page includes an anchor point corresponding to the first request message; a loading module, configured to load the content corresponding to the tree of the first region and the content corresponding to the parent node tree in the first web page, where the parent node tree is the parent node tree of the tree of the first region, and the anchor point is located in the first region; a rendering module, configured to render the content corresponding to the tree of the first region and the content corresponding to the parent node tree; and a display module, configured to display the content corresponding to the tree of the first region and the content corresponding to the parent node tree in a first display window.
[0023] In some embodiments, the first request message includes the URL of the first web page. When there is a "#" identifier in the URL of the first web page, it is determined that the first web page includes an anchor point.
[0024] Among them, the tree of the first area in the first web page refers to the tree structure corresponding to the web page of the first area in the first web page. The web page of the first area in the first web page is the anchor page. The content corresponding to the tree of the first area in the first web page can be understood as the content of the anchor page, and the content of the first web page includes the content of the anchor page.
[0025] Among them, the first display window refers to the display window that displays the loaded first web page.
[0026] In the embodiments of the present application, by changing the order of loading and rendering the content of each part of the web page, the content corresponding to the anchor web page can be preferentially loaded and rendered, so as to accelerate the display rate of the anchor web page, enabling the user to see the target page faster, thereby enhancing the user experience.
[0027] In combination with the second aspect, in a possible implementation, the loading module is further configured to: load the content corresponding to the tree of the second area in the first web page, where the second area is the area in the first web page that is after the first area; the rendering module is further configured to: render the content corresponding to the tree of the second area.
[0028] Among them, the tree of the second area in the first web page refers to the tree structure corresponding to the web page of the second area in the first web page, and the web page of the second area in the first web page refers to the page in the first web page that is after the anchor page.
[0029] In the embodiments of the present application, after loading and rendering the content of the anchor page and making the anchor page be preferentially presented to the user, the page after the anchor page in the first web page can be further loaded and rendered, enabling the user to quickly view the content after the anchor page by scrolling down after viewing the content of the anchor page, thereby enhancing the user's web access experience.
[0030] In combination with the second aspect, in a possible implementation, the loading module is further configured to: load the content corresponding to the tree of the third area in the first web page, where the third area is the area in the first web page that is before the first area; the rendering module is further configured to: render the content corresponding to the tree of the third area.
[0031] Among them, the tree of the third area in the first web page refers to the tree structure corresponding to the web page of the third area in the first web page, and the web page of the third area in the first web page refers to the page in the first web page that is before the anchor page.
[0032] It can be understood that the web page of the third area in the first web page, the web page of the first area in the first web page, and the web page of the second area in the first web page constitute the first web page.
[0033] In the embodiments of the present application, after loading and rendering the content of the anchor page so that the anchor page is preferentially displayed to the user, the page before the anchor page in the first web page can be further loaded and rendered, so that the entire first web page can be normally displayed, thereby improving the user's web page access experience.
[0034] In combination with the second aspect, in a possible implementation, the loading module is specifically configured to: load the content corresponding to the tree of the first area and the content corresponding to the parent node tree into the shared memory, and the shared memory is the shared memory of the loading module and the rendering module; the rendering module is further configured to: obtain the content corresponding to the tree of the first area and the content corresponding to the parent node tree from the shared memory.
[0035] In the embodiments of the present application, the loading process of the web page and the rendering process of the web page interact through the shared memory. By preferentially loading the content of the anchor page into the shared memory, the content of the anchor page is further preferentially rendered and displayed.
[0036] In combination with the second aspect, in a possible implementation, the loading module is further configured to: when loading the content corresponding to the tree of the first area and the content corresponding to the parent node tree into the shared memory, notify the rendering module to obtain the content corresponding to the tree of the first area and the content corresponding to the parent node tree from the shared memory.
[0037] In the embodiments of the present application, after preferentially loading the content of the anchor page into the shared memory, the rendering process is notified to obtain the content of the anchor page from the shared memory and render it, so that the content of the anchor page is preferentially rendered and displayed.
[0038] In combination with the second aspect, in a possible implementation, the loading module is specifically configured to: load the content corresponding to the tree of the second area into the shared memory, and the shared memory is the shared memory of the loading module and the rendering module; the rendering module is further configured to: obtain the content corresponding to the tree of the second area from the shared memory.
[0039] In the embodiments of the present application, the loading process of the web page and the rendering process of the web page interact through the shared memory. After rendering the anchor page, by loading the page content after the anchor page into the shared memory, the page content after the anchor page is further rendered and displayed, so that the user can further browse the remaining web page content after browsing the anchor page.
[0040] In combination with the second aspect, in a possible implementation, the loading module is further configured to: when loading the content corresponding to the tree of the second area into the shared memory, notify the rendering module to obtain the content corresponding to the tree of the second area from the shared memory.
[0041] In combination with the second aspect, in a possible implementation, the loading module is specifically configured to: load the content corresponding to the tree in the third region into the shared memory, where the shared memory is the shared memory of the loading module and the rendering module; the rendering module is further configured to: obtain the content corresponding to the tree in the third region from the shared memory.
[0042] In the embodiments of the present application, the loading process of the web page and the rendering process of the web page interact through the shared memory. After rendering the anchor page and the pages after the anchor page, by loading the content of the pages before the anchor page into the shared memory, the content of the pages before the anchor page is further rendered and displayed, so that the web page accessed by the user can be fully and normally displayed.
[0043] In combination with the second aspect, in a possible implementation, the loading module is further configured to: when loading the content corresponding to the tree in the third region into the shared memory, notify the rendering module to obtain the content corresponding to the tree in the third region from the shared memory.
[0044] In combination with the second aspect, in a possible implementation, the device further includes: a marking module, configured to add lazy loading tags to at least some of the nodes constituting the parent node tree during the process of rendering the content corresponding to the tree in the first region and the content corresponding to the parent node tree.
[0045] In some embodiments, the above at least some nodes may be high-load nodes in the parent node tree. For example, they may be nodes with a load ratio in the top a% among all nodes in the parent node tree, where the value of a may be any value between 1 and 90.
[0046] In the embodiments of the present application, while rendering the web page content corresponding to the parent node tree and the anchor region tree, the load of rendering the web page content corresponding to the parent node tree is reduced, so that there is more sufficient load for rendering the web page content corresponding to the anchor region tree, which can further improve the display rate of the anchor page.
[0047] In combination with the second aspect, in a possible implementation, the height of the first region is greater than or equal to the height of the first display window, and the anchor point is located at the top of the first region.
[0048] In the embodiments of the present application, the height of the anchor page preferentially loaded and rendered is greater than or equal to the height of the window for displaying the web page, which can make the content of the anchor page cover the entire display window, and the user can see as much web page content as possible within the display capabilities of the device.
[0049] In a third aspect, an electronic device is provided, which includes a memory and a processor. The memory is used to store computer program code, and the processor is used to execute the computer program code stored in the memory to implement the method in the first aspect or any one of the possible implementation manners of the first aspect.
[0050] In a fourth aspect, a computer-readable storage medium is provided, in which computer programs or instructions are stored. When the computer programs or instructions are executed, the method in the first aspect or any one of the possible implementation manners of the first aspect is implemented.
[0051] In a fifth aspect, a chip is provided, in which instructions are stored. When it runs on a device, the chip is caused to execute the method in the first aspect or any one of the possible implementation manners of the first aspect.
[0052] In a sixth aspect, a computer program product is provided, in which computer programs or instructions are stored. When the computer programs or instructions are executed, the method in the first aspect or any one of the possible implementation manners of the first aspect is implemented. Description of the Drawings
[0053] Figure 1 is a schematic structural diagram of the electronic device provided by an embodiment of the present application;
[0054] Figure 2 is a software structure block diagram of an electronic device provided by an embodiment of the present application;
[0055] Figure 3 is a schematic web page diagram for explaining an anchor point provided by an embodiment of the present application;
[0056] Figure 4 is a schematic flowchart of a method for loading a web page;
[0057] Figure 5 is a general tree structure diagram corresponding to a web page with an anchor point;
[0058] Figure 6 is a schematic flowchart of a method for loading a web page provided by an embodiment of the present application;
[0059] Figure 7 is a schematic interaction diagram of a method for loading a web page provided by an embodiment of the present application;
[0060] Figure 8 is a schematic interaction diagram of another method for loading a web page provided by an embodiment of the present application;
[0061] Figure 9 is a schematic functional module diagram of a device for loading a web page provided by an embodiment of the present application. Detailed implementation manners
[0062] The technical solutions in the present application will be described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments.
[0063] The technical solutions in the embodiments of the present application will be described below with reference to the accompanying drawings in the embodiments of the present application. Among them, in the description of the embodiments of the present application, unless otherwise specified, " / " means "or", for example, A / B may mean A or B; "and / or" herein is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B may mean: A exists alone, A and B exist simultaneously, and B exists alone. In addition, in the description of the embodiments of the present application, "a plurality of" or "multiple" means two or more than two. <~
[0064] Hereinafter, the terms "first" and "second" are only used for descriptive purposes and cannot be construed as indicating or implying relative importance or implicitly indicating the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include one or more of such features. In the description of this embodiment, unless otherwise specified, the meaning of "a plurality of" is two or more than two.
[0065] The terms used in the following embodiments are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in the specification and claims of the present application, the singular forms "a", "an", "the", "above", "said", "this" are also intended to include, for example, the expression form of "one or more", unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of the present application, "at least one" and "one or more" mean one, two or more than two. The term "and / or" is used to describe the association relationship of associated objects and indicates that there can be three relationships; for example, A and / or B may mean: A exists alone, A and B exist simultaneously, and B exists alone, where A and B may be singular or plural. The character " / " generally means that the associated objects before and after are in an "or" relationship.
[0066] References to "one embodiment" or "some embodiments" etc. described in this specification mean that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the present application. Thus, statements such as "one embodiment", "some embodiments", "another embodiment", "some other embodiments", etc. that appear in different places in this specification do not necessarily all refer to the same embodiment, but rather mean "one or more but not all embodiments", unless otherwise specifically emphasized. The terms "comprising", "including", "having" and their variants all mean "including but not limited to", unless otherwise specifically emphasized.
[0067] The method provided by the embodiments of the present application can be applied to electronic devices with a time display function or a time recognition function. For example, it can be applied to electronic devices such as mobile phones, tablet computers, wearable devices, in-vehicle devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), and smart home devices. The embodiments of the present application do not impose any restrictions on the specific types of electronic devices.
[0068] Exemplarily, Figure 1 The structural schematic diagram of the electronic device 100 is shown. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, 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, a headphone interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. Among them, the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric 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.
[0069] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In some other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figures, or combine certain components, or split certain components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.
[0070] 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 processing unit (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. Among them, different processing units may be independent devices or integrated in one or more processors.
[0071] Among them, the controller may be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching and executing instructions.
[0072] A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can save the instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to use the instruction or data again, it can be directly called from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.
[0073] In some embodiments, the processor 110 may include one or more interfaces. The interfaces may include an inter-integrated circuit (I2C) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, and / or a universal serial bus (USB) interface, etc.
[0074] The USB interface 130 is an interface that conforms to the USB standard specification. Specifically, it can be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio. This interface can also be used to connect other electronic devices, such as AR devices, etc.
[0075] It can be understood that the interface connection relationships shown in the embodiments of the present application are only illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.
[0076] The charging management module 140 is used to receive a charging input from a charger. Among them, the charger can be a wireless charger or a wired charger. In some embodiments of wired charging, the charging management module 140 can receive the charging input of the wired charger through the USB interface 130. In some embodiments of wireless charging, the charging management module 140 can receive the wireless charging input through the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device through the power management module 141.
[0077] 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 the input from the battery 142 and / or the charging management module 140 and supplies power to the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, the wireless communication module 160, etc. The power management module 141 can also be used to monitor parameters such as the battery capacity, the number of battery charge cycles, and the battery health status (leakage, impedance). In some other embodiments, the power management module 141 can also be provided in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be provided in the same device.
[0078] 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 modulation and demodulation processor, and the baseband processor, etc.
[0079] Antenna 1 and Antenna 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization rate of the antennas. For example, Antenna 1 can be multiplexed 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.
[0080] The mobile communication module 150 can provide solutions for wireless communications such as 2G / 3G / 4G / 5G applied to the electronic device 100. The mobile communication module 150 can include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves through Antenna 1, 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 through Antenna 1 for radiation. In some embodiments, at least some functional modules of the mobile communication module 150 can be disposed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 can be disposed in the same device.
[0081] The modulation and demodulation processor can include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. Subsequently, the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After being processed by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs a sound signal through an audio device (not limited to the speaker 170A, receiver 170B, etc.), or displays an image or video through the display screen 194. In some embodiments, the modulation and demodulation processor can be an independent device. In some other embodiments, the modulation and demodulation processor can be independent of the processor 110 and be disposed in the same device as the mobile communication module 150 or other functional modules.
[0082] The wireless communication module 160 may provide solutions for wireless communications applied to the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite systems (GNSSs), frequency modulation (FM), near field communication (NFC), infrared (IR), etc. The wireless communication module 160 may be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, performs frequency modulation and filtering processing on the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 may also receive signals to be sent from the processor 110, perform frequency modulation and amplification on them, and convert them into electromagnetic waves through the antenna 2 for radiation.
[0083] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, such that electronic device 100 can communicate with a network and other devices through wireless communication technologies. The wireless communication technologies 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-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. The GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), beidou navigation satellite system (BDS), quasi-zenith satellite system (QZSS), and / or satellite based augmentation systems (SBAS).
[0084] Electronic device 100 implements a display function through a GPU, display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, and is connected to display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or change display information.
[0085] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can adopt a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.
[0086] 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 the data storage function. For example, files such as music and videos are saved in the external memory card.
[0087] The internal memory 121 can be used to store computer-executable program code, and the executable program code includes 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 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, Apps 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.). In addition, the internal memory 121 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.
[0088] The keys 190 include a power-on key, volume keys, etc. The keys 190 can be mechanical keys or touch keys. The electronic device 100 can receive key inputs and generate key signal inputs related to the user settings and function controls of the electronic device 100.
[0089] The indicator 192 can be an indicator light, which can be used to indicate the charging state, the change in battery power, and can also be used to indicate messages, missed calls, notifications, etc.
[0090] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture. In the embodiments of this application, taking the Android system with a layered architecture as an example, the software structure of the electronic device 100 is illustratively described.
[0091] Figure 2 It is the software structure block diagram of the electronic device 100 in the embodiments of this application. The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom are the application layer, the application framework layer, the Android runtime and the system libraries, and the kernel layer. The application layer may include a series of application packages.
[0092] As Figure 2 shown, the application packages may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.
[0093] The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications in the application layer. The application framework layer includes some predefined functions.
[0094] As Figure 2 shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, etc.
[0095] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.
[0096] The content provider is used to store and obtain data, and make this data accessible to applications. The data may include video, image, audio, dialed and answered calls, browsing history and bookmarks, phone book, etc.
[0097] The view system includes visible controls, such as controls for displaying text, controls for displaying pictures, etc. The view system can be used to build applications. The display interface can be composed of one or more views. For example, a display interface including a short message notification icon may include a view for displaying text and a view for displaying pictures.
[0098] The phone manager is used to provide the communication function of the electronic device 100. For example, the management of call status (including answering, hanging up, etc.).
[0099] The resource manager provides various resources for applications, such as localized strings, icons, pictures, layout files, video files, and so on.
[0100] The notification manager enables applications to display notification information in the status bar. It can be used to convey informational messages, which can automatically disappear after a short stay without user interaction. For example, the notification manager is used to inform that a download is complete, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of background-running applications, and can also be a notification that appears on the screen in the form of a dialog window. For example, it can prompt text information in the status bar, emit a prompt sound, vibrate the electronic device, blink the indicator light, etc.
[0101] Android Runtime includes core libraries and a virtual machine. Android runtime is responsible for the scheduling and management of the Android system.
[0102] The core libraries consist of two parts: one part is the functional functions that need to be called by the Java language, and the other part is the core libraries of Android.
[0103] The application layer and the application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.
[0104] The system libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (such as: OpenGL ES), 2D graphics engine (such as: SGL), etc.
[0105] The surface manager is used to manage the display subsystem and provides the fusion of 2D and 3D layers for multiple applications.
[0106] The media libraries support the playback and recording of multiple common audio and video formats, as well as static image files, etc. The media libraries can support multiple audio and video coding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
[0107] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing, etc.
[0108] The 2D graphics engine is the drawing engine for 2D drawing.
[0109] The kernel layer is the layer between the hardware and the software. The kernel layer contains at least display drivers, camera drivers, audio drivers, and sensor drivers.
[0110] It should be understood that the technical solutions in the embodiments of the present application can be used in systems such as Android, IOS, and HarmonyOS.
[0111] The technical solutions of the embodiments of the present application can be applied to the web browsing scenario. Exemplarily, it can be applied to scenarios such as browsing a web page with an anchor by entering a website address.
[0112] Among them, the electronic device can be a television, a desktop computer, a laptop computer, or a portable electronic device such as a mobile phone, a folding screen, a tablet computer, a camera, a video camera, a video recorder. It can also be a smart home device such as a refrigerator, a washing machine, a floor sweeper, or any electronic device with a web page loading function. It can also be an electronic device in a 5G network or an electronic device in a future evolved public land mobile network (PLMN), etc.
[0113] Hereinafter, some terms involved in the embodiments of the present application will be introduced in detail.
[0114] 1. Anchor
[0115] An anchor is a type of hyperlink in web page production, also known as a named anchor. It can be used as a hyperlink within a page, and an anchor can be set at a specified position in the document and a hyperlink to that anchor can be created. In some long web pages, the anchor position in the long web page can be quickly accessed through the hyperlink.
[0116] Exemplarily, in combination with Figure 3 , the anchor described in the embodiments of the present application will be schematically described.
[0117] As Figure 3 shown, when entering the website address "×××××××××#Title 6" in the browser, in this website address, "Title 6" with "#" as the identifier is the anchor. When the user accesses the web page based on this website address, the web page displayed on the target page accessed is the anchor web page, that is, the web page corresponding to "Title 6". Among them, the anchor web page includes a directory structure, that is, the directory structure shown on the left side of the web page in Figure 3 , and this directory structure can be used as the parent node tree of the anchor area tree. Among them, the content from the first height (this first height is greater than or equal to the height of the browser window) starting from the anchor "Title 6" can be used as the anchor area tree, the tree before this anchor area is the tree before the anchor area, and the tree after this anchor area is the tree after the anchor area.
[0118] It should be understood that in the embodiments of the present application, the anchor point uses "#" as the identifier, but this is only an exemplary illustration and does not impose any limitation on the identifier of the anchor point. In this scenario or other scenarios, the identifier of the anchor point can also be other symbols, such as the symbol "*", etc.
[0119] Exemplarily, Figure 4 A schematic flowchart showing a method 400 for loading a web page is presented. As Figure 4 shown, the method 400 includes:
[0120] S401: Load the first web page based on the first URL corresponding to the first web page.
[0121] Specifically, first, based on the first URL, download the data related to the first web page. Among them, the data related to the first web page may include data such as web page structure and web page style; then, based on the data related to the first web page, load the first web page.
[0122] S402: Render the first web page and display the first web page.
[0123] Specifically, after the first web page is loaded, render the first web page and make the rendered first web page enter the state to be displayed.
[0124] S403: Determine whether the first web page contains an anchor point.
[0125] When the first web page contains an anchor point, execute S404; when the first web page does not contain an anchor point, execute S406.
[0126] In one embodiment, when the first URL includes the "#" identifier, it is determined that the first web page contains an anchor point, and the content identified by the "#" identifier is the anchor point information.
[0127] Similarly, when the first URL does not include the "#" identifier, it is determined that the first web page does not contain an anchor point.
[0128] S404: Obtain the anchor point information from the first URL, determine the anchor point position according to the anchor point information, and further execute S405.
[0129] Specifically, after the first web page is displayed, obtain the anchor point information from the first URL through the "#" identifier, and find the anchor point position by comparing the directory (classification identifier) in the first web page.
[0130] S405: Jump the currently displayed page to the page corresponding to the anchor point position.
[0131] Specifically, after determining the anchor point position, scroll the page to jump the page to the page corresponding to the anchor point position.
[0132] S406: Display the page corresponding to the initial position.
[0133] That is to say, when the first web page does not contain an anchor point, the content displayed based on the first web address is the content at the top of the first web page.
[0134] In this method, the processes of loading web page elements, rendering the web page, and sending the web page for display are carried out in the order of the web page content. However, during the presentation process of the web page, the content of the web page before the anchor point position is not the content that the user wants to view after entering the web address. Instead, since this part of the content participates in the processes of loading, rendering, and sending for display, the user needs to wait for the content of the web page before the anchor point position to be loaded, rendered, and sent for display to complete before being able to see the content of the web page corresponding to the anchor point position. Specifically, it can be reflected that the anchor point web page loads slowly, thus affecting the user experience.
[0135] Exemplarily, Figure 5 shows a general tree structure diagram corresponding to a web page with an anchor point.
[0136] As Figure 5 shown, in the general tree structure diagram corresponding to the web page with an anchor point, under the root node, there are a directory tree node and a web page header node. Among them, the directory tree can be understood as the directory corresponding to all the content in the web page, and the web page header can include information such as the window name corresponding to this web page; under the directory tree node, there are an anchor point area tree, one or more pre-anchor point area trees, and one or more post-anchor point area trees.
[0137] In some embodiments, the pre-anchor point area tree and the post-anchor point area tree can be collectively referred to as the sibling trees of the anchor point area tree. Specifically, the pre-anchor point area tree can be understood as the elder brother tree of the anchor point area tree, and the post-anchor point area tree can be understood as the younger brother tree of the anchor point area tree.
[0138] It can be understood that not all the tree nodes in the anchor point area tree must be at the same level and can be distributed at multiple levels under the directory tree node. The anchor point area tree includes all the levels of the tree within the width of the anchor point area under the directory tree node. In other words, the anchor point area tree includes multiple target nodes and the sub-nodes of these target nodes, and the sub-nodes of these sub-nodes, and so on... These multiple target nodes include the anchor point node, and these multiple target nodes are at the same level; similarly, the pre-anchor point area tree includes all the levels of the tree before the anchor point area under the directory tree node. In other words, the pre-anchor point area tree includes the elder brother nodes of the target nodes and the sub-nodes of these elder brother nodes, and the sub-nodes of these sub-nodes, and so on...; the post-anchor point area tree includes all the levels of the tree after the anchor point area under the directory tree node. In other words, the post-anchor point area tree includes the younger brother nodes of the target nodes and the sub-nodes of these younger brother nodes, and the sub-nodes of these sub-nodes, and so on...
[0139] It should be understood that the anchor node is located under the directory tree node. In Figure 5 In the illustrated embodiment, the anchor is located at the third layer in the tree structure of the web page, but this is only an illustrative example. When the directory tree node has multiple levels of parent nodes, the level at which the anchor is located in the tree structure of the web page will adapt and change. For example, when the directory tree node has 2 levels of parent nodes, the directory tree node is located at the 3rd level, and correspondingly, the anchor node is located at the 4th level. In some examples, the anchor node may be located at the third layer of the tree structure of the web page.
[0140] Taking Figure 3 the illustrated web page as an example, in this web page, the directory in the left area is the directory tree, which is also the parent node tree of the anchor area tree, and can also be the parent node tree of the pre-anchor area tree and the post-anchor area tree.
[0141] In some examples, in Figure 3 the web page content displayed on the illustrated page is the web page content corresponding to the anchor area tree, that is, the part starting from "Title 6" and ending at the third line in "Title 7"; the web page content before "Title 6" is the web page content corresponding to the pre-anchor area tree, and the web page content after the third line in "Title 7" is the web page content corresponding to the post-anchor area tree. The access box displaying the web address "×××××××××#Title 6" belongs to the web page header of this web page.
[0142] In still other examples, in Figure 3 the web page content displayed on the illustrated page can be only a part of the web page content corresponding to the anchor area tree.
[0143] From this, it can be seen that the general tree structure corresponding to the web page with an anchor has the characteristics of a shallow total level and many sibling trees of the anchor tree.
[0144] In summary, in the current web page display process, the user needs to wait for the web page content before the anchor position to be loaded, rendered, and sent for display to be completed before being able to see the web page content corresponding to the anchor position. It is easy for the user to perceive that the anchor web page loads slowly, thus affecting the user experience.
[0145] In view of this, the embodiments of the present application provide a method, device, and electronic device for loading a web page. This method can change the order of loading and rendering web page elements, preferentially load and render the anchor web page in the web page, and speed up the speed at which the anchor web page is displayed to the user, so that the user can see the target page faster, thereby improving the user experience.
[0146] Exemplarily, Figure 6 shows a schematic flowchart of two methods for loading a web page provided by the embodiments of the present application.
[0147] AsFigure 6 As shown in (a) of FIG. , a method for loading a web page includes:
[0148] S601: Downloading relevant data of a first webpage based on a first URL corresponding to the first webpage, where the first webpage includes an anchor point.
[0149] The data related to the first web page may include data such as web page content, web page structure, and web page style.
[0150] by Figure 3 Taking the web page shown as an example, when the user enters the first URL "×××××××××#标题6" in the web page access page of the browser and performs the operation of confirming the access, the data related to the first web page corresponding to the first URL begins to be downloaded.
[0151] S602: Divide the tree structure corresponding to the first web page into three groups, namely, an anchor region tree, an anchor region front tree, and an anchor region back tree.
[0152] Among them, the anchor area tree refers to the tree corresponding to the area from the anchor point position onwards, where the cumulative height of the web page content is the first window height (the first window height is greater than or equal to the browser window height, or described as the first window height is greater than or equal to the visible height of the current page); the front tree of the anchor area refers to the tree located before the anchor point in the tree structure corresponding to the first web page, and the back tree of the anchor area refers to the tree located after the anchor area in the tree structure corresponding to the first web page.
[0153] It can also be described as dividing the content of the first web page into three groups: the web page content corresponding to the anchor area tree, the web page content corresponding to the front tree of the anchor area, and the web page content corresponding to the back tree of the anchor area. The web page content corresponding to the anchor area tree is the web page content that can be displayed at the first window height (the first window height is greater than or equal to the height of the current window), the web page content corresponding to the front tree of the anchor area refers to the web page content before the web page content corresponding to the anchor area tree in the first web page, and the web page content corresponding to the back tree of the anchor area refers to the web page content after the web page content corresponding to the anchor area tree in the first web page.
[0154] It is understood that the distribution range of the anchor region tree (or the webpage content corresponding to the anchor region tree) can be determined by the height of the current window, wherein the height direction of the current window is parallel to the scrolling direction of the page displayed in the current window.
[0155] That is, for a window with a vertical scrolling page, the distribution range of the anchor region tree may be determined by the vertical height of the current window; for a window with a horizontal scrolling page, the distribution range of the anchor region tree may be determined by the horizontal width of the current window.
[0156] by Figure 3Taking the web page shown as an example, the anchor area tree may refer to the tree structure corresponding to the area starting from "Title 6" and ending at the third line in "Title 7". In this case, the pre-anchor area tree refers to the tree structure corresponding to the area before "Title 6"; the post-anchor area tree refers to the tree structure corresponding to the area after the third line in "Title 7".
[0157] This example can also be described as: The web page content corresponding to the anchor area tree may refer to the display content corresponding to the area starting from "Title 6" and ending at the third line in "Title 7". In this case, the web page content corresponding to the pre-anchor area tree refers to the display content corresponding to the area before "Title 6"; the web page content corresponding to the post-anchor area tree refers to the display content corresponding to the area after the third line in "Title 7".
[0158] S603: Load the web page content corresponding to the parent node tree and the anchor area tree.
[0159] Among them, the parent node tree can be understood as the parent node tree of the anchor area tree.
[0160] Among them, the parent node tree of the anchor area tree includes: in the tree structure corresponding to the web page, the parent nodes of one or more target nodes in the anchor area tree, the multiple target nodes include the anchor node, the multiple target nodes have the same level, and may also include the sibling nodes of the parent nodes of these one or more target nodes, and may also include the sibling nodes of the parent nodes of these one or more target nodes. The specific included range can be determined by the display height of the current display window.
[0161] In some embodiments, if the height of the current display window is sufficient to completely display the content of all nodes at the level where the parent node tree of the anchor area tree is located (i.e., the content corresponding to all directory tree nodes), then the parent node tree of the anchor area tree can also be understood as the parent node tree of the sibling tree of the anchor area tree.
[0162] In some embodiments, the web page content corresponding to the parent node tree and the anchor area tree is loaded into the shared memory with the rendering process through the loading process, so that the rendering process can obtain the web page content corresponding to the parent node tree and the anchor area tree.
[0163] S604: Render and display the web page content corresponding to the parent node tree and the anchor area tree.
[0164] In some embodiments, while rendering the web page content corresponding to the parent node tree and the anchor area tree, the load of rendering the web page content corresponding to the parent node tree is reduced, so that there is more sufficient load for rendering the web page content corresponding to the anchor area tree.
[0165] In one implementation, by adding lazy loading tags to the high-load nodes among the nodes that make up the parent node tree, the load for rendering the web page content corresponding to the parent node tree is reduced.
[0166] Take Figure 3 the shown web page as an example. The parent node tree refers to the directory displayed on the left side of this page.
[0167] S605: Load the web page content corresponding to the tree after the anchor area and the tree before the anchor area.
[0168] In some embodiments, the web page content corresponding to the tree after the anchor area can be loaded first, and then the web page content corresponding to the tree before the anchor area is loaded.
[0169] S606: Render and display in sequence the web page content corresponding to the tree after the anchor area and the web page content corresponding to the tree before the anchor area.
[0170] In some embodiments, after the rendering and display of the web page content corresponding to the anchor area tree are completed, the rendering and display of the web page content corresponding to the tree after the anchor area and the tree before the anchor area are started.
[0171] In some embodiments, the web page content corresponding to the tree after the anchor area is rendered first, and then the web page content corresponding to the tree before the anchor area is rendered. In this way, it is possible to display the web page content corresponding to the anchor area tree first, then the web page content corresponding to the tree after the anchor area, and finally the web page content corresponding to the tree after the anchor area, enabling the user to see the anchor web page in a shorter time and conforming to the user's browsing habit (browsing downwards).
[0172] Take Figure 3 the shown web page as an example. When loading the web page corresponding to the URL "×××××××××#Title 6", the web page content corresponding to the area starting from "Title 6" and ending at the third line of "Title 7" can be loaded and rendered first, and then the web page content corresponding to the area after the third line of "Title 7" and the web page content corresponding to the area before "Title 6" are loaded and rendered.
[0173] From Figure 6 in (b), as Figure 6 the method of loading a web page shown in (b) is compared with the method of loading a web page shown in Figure 6 in (a), as Figure 6 the method of loading a web page shown in (b) adds S607 between S601 and S602. S607 specifically includes:
[0174] S607: Determine whether the first web page contains an anchor.
[0175] When the first web page contains an anchor point, execute S602; when the first web page does not contain an anchor point, execute S608.
[0176] In one embodiment, when the first URL includes the "#" identifier, it is determined that the first web page contains an anchor point, and the content identified by the "#" identifier is the anchor point information.
[0177] Similarly, when the first URL does not include the "#" identifier, it is determined that the first web page does not contain an anchor point.
[0178] Take Figure 3 the shown web page as an example. In the first URL "×××××××××#Title 6", since it includes the "#" identifier, it can be confirmed that the first web page contains an anchor point, and the corresponding anchor point content is "Title 6".
[0179] S608: Sequentially load and render the first web page, and display the page corresponding to the initial position of the first web page.
[0180] That is to say, when the first URL does not contain an anchor point, the user does not need to jump the currently displayed page to the anchor point page. At this time, the first web page can be sequentially loaded, rendered, and displayed. In this way, the page corresponding to the initial position of the first web page is displayed in the target page obtained by accessing the web page based on the first URL.
[0181] Take Figure 3 the shown web page as an example. When the URL does not include "#Title 6", the page corresponding to "Title 1" can be displayed in the target page obtained by accessing the web page based on this URL.
[0182] In the embodiments of the present application, for some web pages with anchor points, their tree structure levels are not many. Generally, there are only 3 to 5 levels from the directory node to the leaf node. The anchor point node is located under the directory node, and the anchor point node can be located at the third level. The tree structure of the web page is split. Specifically, it can be splitting the anchor point area tree and its sibling tree. By modifying the loading order of the tree structures of the split parts during the web page loading process, the split anchor point area tree and its sibling tree are rendered segment by segment, and the anchor point area tree is preferentially rendered. That is, by changing the loading order, the rendering order of the tree structure corresponding to the web page with an anchor point is changed, and the anchor point area tree is preferentially rendered and displayed. After the anchor point area tree is rendered, the sibling tree is then loaded and rendered. In this way, the web page content before the anchor point that the user has no access requirement can be rendered later, avoiding the complex process of loading all the web page content and then scrolling to the specified position in the normal loading process. It not only speeds up the display rate of the anchor point web page but also enables all web pages to be normally displayed, improving the user experience.
[0183] Exemplarily, Figure 7Shows a schematic interaction diagram of a method 700 for loading a web page provided by an embodiment of the present application. As Figure 7 shown, the method 700 includes:
[0184] S701: The loading process of the web page receives a web page request message for requesting to load the first web page.
[0185] In some examples, the loading process of the web page can be, for example, the browser process of an application based on a web kernel.
[0186] In some embodiments, requesting to load the first web page may refer to requesting to access the first web page.
[0187] In some embodiments, the operation of triggering the sending of the web page request message to the loading process can be the operation of the user entering the first web address in the web page access page of the browser to access, where the web page corresponding to the first web address is the first web page.
[0188] In still some other embodiments, the operation of triggering the sending of the web page request message to the loading process can be, for example, the operation of the user accessing the map information corresponding to the first address in the web page access page related to the map, where the web page corresponding to the first address is the first web page.
[0189] S702: After receiving the web page request message, the loading process downloads the relevant data of the first web page.
[0190] Among them, the relevant data of the first web page may include the hyper text markup language (html) of the first web page, that is, the basic content corresponding to the first web page, and may also include the cascading style sheets (css) of the first web page, that is, elements such as fonts, colors, margins, heights, widths, background images, and advanced positioning corresponding to the first web page. In addition, the relevant data of the first web page may also include other data corresponding to the first web page, such as the first web address corresponding to the first web page. The present application does not make any limitations in this regard.
[0191] Among them, the first web page is synthesized according to the relevant data of the first web page.
[0192] S703: Based on the data related to the first web page, the loading process determines whether the first web page contains an anchor point.
[0193] When it is determined that the first web page contains an anchor point, S704 is further executed.
[0194] In some embodiments, when the first web page corresponds to the first web address, the method for determining whether the first web page contains an anchor may be: when the identifier "#" is included in the first web address, it is determined that the first web page includes an anchor, and the content marked by the identifier "#" is the anchor content.
[0195] In some embodiments, this step S703 is an optional step.
[0196] S704: When it is determined that the first web page contains an anchor, the loading process divides the tree structure corresponding to the first web page into three groups, and the three groups of tree structures are respectively the parent node tree and the anchor area tree, the tree after the anchor area and the tree before the anchor area.
[0197] It can be understood that this step divides the web page content of the first web page into three groups, namely the web page content corresponding to the parent node tree and the anchor area tree, the web page content corresponding to the tree after the anchor area, and the web page content corresponding to the tree before the anchor area.
[0198] Among them, the explanations of the parent node tree and the anchor area tree, the tree after the anchor area and the tree before the anchor area are Figure 6 explained in detail in the illustrated embodiments. For the sake of brevity, they will not be elaborated here.
[0199] Among them, the above grouping can be, for example, based on the ID of the anchor (i.e., the position of the anchor in the first web page) and the height of the web page display window.
[0200] S705: The loading process loads the web page content corresponding to the parent node tree and the anchor area tree into the rendering process of the web page.
[0201] In some embodiments, the loading process loads the web page content corresponding to the parent node tree and the anchor area tree into the rendering process through shared memory, where the shared memory is the shared memory of the loading process and the rendering process.
[0202] S706: The rendering process renders the web page content corresponding to the parent node tree and the anchor area tree.
[0203] In some embodiments, after the rendering process renders the web page content corresponding to the parent node tree and the anchor area tree, it sends it to the display module, and the display module displays the web page content corresponding to the parent node tree and the anchor area tree to the user.
[0204] S707: The loading process loads the web page content corresponding to the tree after the anchor area into the rendering process.
[0205] In some embodiments, the loading process loads the web page content corresponding to the tree after the anchor area into the rendering process through shared memory, where the shared memory is the shared memory of the loading process and the rendering process.
[0206] S708: After the rendering process renders the web page content corresponding to the tree after the anchor area,
[0207] In some embodiments, after the rendering process renders the web page content corresponding to the tree after the anchor area, it sends the content to the display module, and the display module displays the web page content corresponding to the tree after the anchor area to the user.
[0208] S709: The loading process loads the web page content corresponding to the tree before the anchor area into the rendering process.
[0209] In some embodiments, the loading process loads the web page content corresponding to the tree before the anchor area into the rendering process through shared memory, where the shared memory is the shared memory of the loading process and the rendering process.
[0210] S710: The rendering process renders the web page content corresponding to the tree before the anchor area.
[0211] In some embodiments, after the rendering process renders the web page content corresponding to the tree before the anchor area, it sends the content to the display module, and the display module displays the web page content corresponding to the tree before the anchor area to the user.
[0212] In still other embodiments, after the rendering process renders the web page content corresponding to the tree before the anchor area, it sends the rendered tree after the anchor area and the rendered tree before the anchor area to the display module, and the display module displays the web page content corresponding to the tree after the anchor area and the web page content corresponding to the tree before the anchor area to the user.
[0213] In the embodiments of the present application, by changing the original loading order of the tree structure corresponding to the first web page and preferentially loading and rendering the anchor web page content in the first web page, the display rate of the anchor web page can be accelerated; and after the anchor web page content is rendered, other web page content in the first web page is continuously loaded and rendered, so that all web pages are normally displayed.
[0214] That is to say, in the method provided by the embodiments of the present application, the web page content before the anchor that the user has no access requirement can be postponed for rendering, avoiding the complex process of scrolling to the anchor position after loading all web page content. This not only accelerates the display rate of the anchor web page but also enables all web pages to be normally displayed, improving the user experience.
[0215] Exemplarily, Figure 8 shows a schematic interaction diagram of another method 800 for loading a web page provided by the embodiments of the present application. This method 800 can be applied to an electronic device, which includes a loading module, shared memory, a rendering module, and a display module. As Figure 8 shown, this method 800 includes:
[0216] S801: The loading module receives a web page request message for requesting to load a first web page.
[0217] Among them, the explanation of this step is the same as that of S701 in the Figure 7 illustrated embodiment. For the sake of brevity, it will not be elaborated here.
[0218] Among them, the loading module can be understood as the loading process of the web page. For example, it can be the browser process of an application based on a web kernel.
[0219] S802: After receiving the web page request message, the loading module downloads the relevant data of the first web page.
[0220] Among them, the explanation of this step is the same as that of S702 in the Figure 7 illustrated embodiment. For the sake of brevity, it will not be elaborated here.
[0221] S803: Based on the data related to the first web page, the loading module determines whether the first web page contains an anchor point.
[0222] When it is determined that the first web page contains an anchor point, S704 is further executed.
[0223] Among them, the explanation of this step is the same as that of S703 in the Figure 7 illustrated embodiment. For the sake of brevity, it will not be elaborated here.
[0224] S804: When it is determined that the first web page contains an anchor point, the loading module divides the tree structure corresponding to the first web page into three groups, which are the parent node tree and the anchor point area tree, the tree after the anchor point area and the tree before the anchor point area.
[0225] Among them, the explanation of this step is the same as that of S704 in the Figure 7 illustrated embodiment. For the sake of brevity, it will not be elaborated here.
[0226] S805: The loading module loads the web page content corresponding to the parent node tree and the anchor point area tree into the shared memory, which is the shared memory between the loading module and the rendering module.
[0227] Among them, the rendering module can be understood as the rendering process of the web page. For example, it can be the render process of an application based on a web kernel.
[0228] S806: The loading module sends a first notification to the rendering module, and this first notification is used to notify the rendering module to obtain the web page content corresponding to the parent node tree and the anchor point area tree from the shared memory.
[0229] In some embodiments, while loading the web page content corresponding to the parent node tree and the anchor area tree into the shared memory, the loading module sends a first notification to the rendering module.
[0230] In still other embodiments, after loading the web page content corresponding to the parent node tree and the anchor area tree into the shared memory, the loading module sends a first notification to the rendering module.
[0231] In some embodiments, the loading module sends a first notification to the rendering module through the interprocess communication - DataReceived function.
[0232] S807: In response to receiving the first notification sent by the loading module, the rendering module obtains the web page content corresponding to the parent node tree and the anchor area tree from the shared memory.
[0233] S808: After obtaining the web page content corresponding to the parent node tree and the anchor area tree in the shared memory, the rendering module renders the web page content corresponding to the parent node tree and the anchor area tree.
[0234] In some embodiments, the rendering module renders the web page content corresponding to the parent node tree and the anchor area tree through the DomTree, where the DomTree is a tree structure used for rendering in the rendering process.
[0235] S809: The rendering module sends the rendered web page content corresponding to the parent node tree and the anchor area tree to the display module.
[0236] S810: The display module displays the web page content corresponding to the parent node tree and the anchor area tree to the user, that is, displays the anchor page.
[0237] S811: The loading module loads the web page content corresponding to the tree after the anchor area into the shared memory.
[0238] In some embodiments, after the rendering module obtains the web page content corresponding to the parent node tree and the anchor area tree from the shared memory, the loading module loads the web page content corresponding to the tree after the anchor area into the shared memory.
[0239] It should be understood that S811 is executed after S805 so that the web page content corresponding to the anchor area tree is preferentially loaded and rendered, and the execution order of S811 and S806 - S810 is not limited.
[0240] In one implementation, S811 is executed after S808, and the execution order of S811 and S809 - S810 is not limited.
[0241] S812: The loading module sends a second notification to the rendering module, and the second notification is used to notify the rendering module to obtain the web page content corresponding to the tree after the anchor area from the shared memory.
[0242] In some embodiments, while loading the web page content corresponding to the tree after the anchor area into the shared memory, the loading module sends a second notification to the rendering module.
[0243] In still other embodiments, after loading the web page content corresponding to the tree after the anchor area into the shared memory, the loading module sends a second notification to the rendering module.
[0244] In some embodiments, the loading module sends a second notification to the rendering module through the inter-process communication - data receiving function.
[0245] S813: In response to receiving the second notification sent by the loading module, the rendering module obtains the web page content corresponding to the tree after the anchor area from the shared memory.
[0246] S814: After obtaining the web page content corresponding to the tree after the anchor area in the shared memory, the rendering module renders the web page content corresponding to the tree after the anchor area.
[0247] In some embodiments, the rendering module renders the web page content corresponding to the tree after the anchor area through the DomTree.
[0248] S815: The loading module loads the web page content corresponding to the tree before the anchor area into the shared memory.
[0249] In some embodiments, after the rendering module obtains the web page content corresponding to the tree after the anchor area from the shared memory, the loading module loads the web page content corresponding to the tree before the anchor area into the shared memory.
[0250] S816: The loading module sends a third notification to the rendering module, and the third notification is used to notify the rendering module to obtain the web page content corresponding to the tree before the anchor area from the shared memory.
[0251] In some embodiments, while loading the web page content corresponding to the tree before the anchor area into the shared memory, the loading module sends a third notification to the rendering module.
[0252] In still other embodiments, after loading the web page content corresponding to the tree before the anchor area into the shared memory, the loading module sends a third notification to the rendering module.
[0253] In some embodiments, the loading module sends a third notification to the rendering module through the inter-process communication - data receiving function.
[0254] S817: In response to receiving a third notification sent by the loading module, the rendering module obtains the web page content corresponding to the pre-anchor area tree from the shared memory.
[0255] S818: After obtaining the web page content corresponding to the pre-anchor area tree in the shared memory, the rendering module renders the web page content corresponding to the pre-anchor area tree.
[0256] In some embodiments, the rendering module renders the web page content corresponding to the pre-anchor area tree through the DomTree.
[0257] S819: The rendering module sends the web page content corresponding to the post-anchor area tree after rendering and the web page content corresponding to the pre-anchor area tree to the display module.
[0258] S820: The display module displays the web page content corresponding to the post-anchor area tree and the web page content corresponding to the pre-anchor area tree to the user, that is, displays the non-anchor page.
[0259] In some embodiments, after rendering the web page content corresponding to the post-anchor area tree, the rendering module places the rendered web page content corresponding to the post-anchor area tree after the anchor area tree, and after rendering the web page content corresponding to the pre-anchor area tree, places the rendered web page content corresponding to the post-anchor area tree before the anchor area tree, so that the display content order of the first web page displayed at the user level is correct.
[0260] In the embodiments of the present application, by changing the original loading order of the tree structure corresponding to the web page, the loading module first puts the web page content corresponding to the parent node tree and the anchor area tree into the shared memory of the loading module and the rendering module, and notifies the rendering module to obtain the web page content corresponding to the parent node tree and the anchor area tree from the shared memory, and further renders and sends it for display. In this way, the sending and display rate of the anchor page can be accelerated; and after rendering the web page content corresponding to the anchor area tree, continue to load, render and send for display the web page content corresponding to the post-anchor area tree and the web page content corresponding to the pre-anchor area tree, so that all web pages are normally displayed.
[0261] Exemplarily, Figure 9 shows a schematic diagram of functional modules of a device 900 for loading a web page provided by an embodiment of the present application. As Figure 9 shown, the device 900 includes:
[0262] A loading module 910, configured to download relevant data of a first web page after receiving a web page request message, where the web page request message is used to request to load the first web page.
[0263] In some embodiments, the device 900 further includes a receiving module, and the receiving module is configured to receive the web page request message.
[0264] In some embodiments, the operation of triggering the sending of a web page request message to the receiving module may be an operation in which a user enters a first web address on a web page access page of a browser to access a web page, where the web page corresponding to the first web address is the first web page.
[0265] In still other embodiments, the operation of triggering the sending of a web page request message to the receiving module may be an operation in which a user accesses map information corresponding to a first address on a web page access page related to a map, where the web page corresponding to the first address is the first web page.
[0266] Among them, the relevant data of the first web page may include the hypertext markup language of the first web page, that is, the basic content corresponding to the first web page, and may also include the cascading style sheet of the first web page, that is, elements such as fonts, colors, margins, heights, widths, background images, and advanced positioning corresponding to the first web page. In addition, the relevant data of the first web page may also include other data corresponding to the first web page, such as the first web address corresponding to the first web page, and the present application does not make any limitations in this regard.
[0267] The determination module 920 is configured to determine whether an anchor point is included in the first web page based on the data related to the first web page.
[0268] In some embodiments, when the first web page corresponds to the first web address, the method for determining whether an anchor point is included in the first web page may be: when the identifier "#" is included in the first web address, the determination module 920 determines that the first web page includes an anchor point, and the content marked by the identifier "#" is the anchor point content.
[0269] The loading module 910 is further configured to, when it is determined that the first web page includes an anchor point, divide the tree structure corresponding to the first web page into three groups, and the three groups of tree structures are respectively the parent node tree and the anchor point area tree, the tree after the anchor point area, and the tree before the anchor point area.
[0270] It can be understood that the loading module 910 essentially divides the web page content of the first web page into three groups, namely the web page content corresponding to the parent node tree and the anchor point area tree, the web page content corresponding to the tree after the anchor point area, and the web page content corresponding to the tree before the anchor point area.
[0271] Among them, the explanations of the parent node tree and the anchor point area tree, the tree after the anchor point area, and the tree before the anchor point area are Figure 6 explained in detail in the embodiments shown. For the sake of brevity, they will not be elaborated here.
[0272] The loading module 910 is further configured to load the web page content corresponding to the parent node tree and the anchor point area tree into the shared memory 940, and the shared memory is a shared memory between the loading module 910 and the rendering module 930.
[0273] The loading module 910 is further configured to send a first notification to the rendering module 930, where the first notification is used to notify the rendering module 930 to obtain the parent node tree and the anchor area tree from the shared memory 940.
[0274] In some embodiments, the loading module 910 sends the first notification to the rendering module 930 while loading the web page content corresponding to the parent node tree and the anchor area tree into the shared memory 940.
[0275] In still other embodiments, the loading module 910 sends the first notification to the rendering module 930 after loading the web page content corresponding to the parent node tree and the anchor area tree into the shared memory 940.
[0276] In some embodiments, the loading module 910 sends the first notification to the rendering module 930 through the inter-process communication - data receiving function.
[0277] The rendering module 930 is configured to, in response to receiving the first notification sent by the loading module 910, obtain the web page content corresponding to the parent node tree and the anchor area tree from the shared memory 940.
[0278] The rendering module 930 is further configured to, after obtaining the web page content corresponding to the parent node tree and the anchor area tree in the shared memory 940, render the web page content corresponding to the parent node tree and the anchor area tree.
[0279] In some embodiments, the rendering module 930 renders the web page content corresponding to the parent node tree and the anchor area tree through the DomTree.
[0280] The rendering module 930 is further configured to send the rendered web page content corresponding to the parent node tree and the anchor area tree to the display module 950.
[0281] The display module 950 is configured to display the web page content corresponding to the parent node tree and the anchor area tree to the user, that is, to display the anchor page.
[0282] The loading module 910 is further configured to load the web page content corresponding to the tree after the anchor area into the shared memory 940.
[0283] In some embodiments, after the rendering module 930 obtains the web page content corresponding to the parent node tree and the anchor area tree from the shared memory 940, the loading module 910 loads the web page content corresponding to the tree after the anchor area into the shared memory.
[0284] The loading module 910 is further configured to send a second notification to the rendering module 930, where the second notification is used to notify the rendering module 930 to obtain the web page content corresponding to the tree after the anchor area from the shared memory 940.
[0285] In some embodiments, while loading the web page content corresponding to the post-anchor-region tree into the shared memory 940, the loading module 910 sends a second notification to the rendering module 930.
[0286] In still other embodiments, after loading the web page content corresponding to the post-anchor-region tree into the shared memory 940, the loading module 910 sends a second notification to the rendering module 930.
[0287] In some embodiments, the loading module 910 sends a second notification to the rendering module 930 through the inter-process communication - data receiving function.
[0288] The rendering module 930 is further configured to, in response to receiving the second notification sent by the loading module 910, obtain the web page content corresponding to the post-anchor-region tree from the shared memory 940.
[0289] The rendering module 930 is further configured to, after obtaining the web page content corresponding to the post-anchor-region tree in the shared memory 940, render the web page content corresponding to the post-anchor-region tree.
[0290] In some embodiments, the rendering module 930 renders the web page content corresponding to the post-anchor-region tree through the DomTree.
[0291] The loading module 910 is further configured to load the web page content corresponding to the pre-anchor-region tree into the shared memory 940.
[0292] In some embodiments, after the rendering module 930 obtains the web page content corresponding to the post-anchor-region tree from the shared memory 940, the loading module 910 loads the web page content corresponding to the pre-anchor-region tree into the shared memory 940.
[0293] The loading module 910 is further configured to send a third notification to the rendering module 930, and this third notification is used to notify the rendering module 930 to obtain the web page content corresponding to the pre-anchor-region tree from the shared memory 940.
[0294] In some embodiments, while loading the web page content corresponding to the pre-anchor-region tree into the shared memory 940, the loading module 910 sends a third notification to the rendering module 930.
[0295] In still other embodiments, after loading the web page content corresponding to the pre-anchor-region tree into the shared memory 940, the loading module 910 sends a third notification to the rendering module 930.
[0296] In some embodiments, the loading module 910 sends a third notification to the rendering module 930 through the inter-process communication - data receiving function.
[0297] The rendering module 930 is further configured to obtain the webpage content corresponding to the front tree of the anchor area from the shared memory 940 in response to receiving the third notification sent by the loading module 910 .
[0298] After acquiring the webpage content corresponding to the tree before the anchor point region in the shared memory 940 , the rendering module 930 renders the webpage content corresponding to the tree before the anchor point region.
[0299] In some embodiments, the rendering module 930 renders the webpage content corresponding to the front tree of the anchor area through DomTree.
[0300] The rendering module 930 is further configured to send the rendered webpage content corresponding to the tree behind the anchor point area and the webpage content corresponding to the tree before the anchor point area to the display module 950 .
[0301] The display module 950 is used to display the webpage content corresponding to the tree behind the anchor area and the webpage content corresponding to the tree before the anchor area to the user, that is, to display the non-anchor page.
[0302] In an embodiment of the present application, by changing the original loading order of the tree structure corresponding to the web pages, the anchor web page content in the first web page is loaded and rendered first, so that the display rate of the anchor web page can be accelerated; and after the anchor web page content is rendered, other web page content in the first web page continues to be loaded and rendered, so that all web pages are displayed normally.
[0303] That is to say, in the method provided in the embodiment of the present application, the web page content before the anchor point that the user has no access needs can be delayed for rendering, avoiding the complicated process of loading all the web page content and then scrolling to the anchor point position. It not only speeds up the display rate of the anchor point web page, but also enables all web pages to be displayed normally, thereby improving the user experience.
[0304] It should be understood that the application scenarios of the embodiments provided in this application can be applied not only to browser scenarios, but also to map browsing scenarios, quick application scenarios such as mini-programs with anchors, and other scenarios containing anchors. This application does not limit this.
[0305] One or more of the modules or units described herein may be implemented in software, hardware, or a combination of both. When any of the above modules or units is implemented in software, the software exists in the form of computer program instructions and is stored in a memory. A processor may be used to execute the program instructions and implement the above method flow. The processor may include, but is not limited to, at least one of the following: a central processing unit (CPU), a microprocessor, a digital signal processor (DSP), a microcontroller unit (MCU), or an artificial intelligence processor and other types of computing devices that run software. Each computing device may include one or more cores for executing software instructions for arithmetic or processing. The processor may be built into a system on a chip (SoC) or an application-specific integrated circuit (ASIC), or it may be an independent semiconductor chip. In addition to the cores in the processor for executing software instructions for arithmetic or processing, it may further include necessary hardware accelerators, such as a field programmable gate array (FPGA), a programmable logic device (PLD), or a logic circuit for implementing dedicated logical operations.
[0306] When the modules or units described herein are implemented in hardware, the hardware may be any one or any combination of a CPU, a microprocessor, a DSP, an MCU, an artificial intelligence processor, an ASIC, an SoC, an FPGA, a PLD, a dedicated digital circuit, a hardware accelerator, or a non-integrated discrete device, which may run the necessary software or execute the above method flow without relying on software.
[0307] When the modules or units described in this application are implemented in software, they can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions described in the embodiments of this application are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from a website, computer, server, or data center to another website, computer, server, or data center by wire (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that includes one or more integrated available media. The available medium can be a magnetic medium (for example, a floppy disk, a hard disk, a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium (for example, a solid state disk (SSD)), etc.
[0308] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed in this application can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of this application.
[0309] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments and will not be elaborated here.
[0310] In several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are only illustrative. For example, the division of the units is only a logical function division, and there can be other division methods in actual implementation. For example, 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 displayed or discussed coupling or direct coupling or communication connection to each other can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be in an electrical, mechanical, or other form.
[0311] The unit described as a separation component may or may not be physically separated. The component displayed as a unit may or may not be a physical unit, that is, it may be located in one place or distributed across multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0312] In addition, in each embodiment of the present application, each functional unit can be integrated in a processing unit, can also exist separately as individual physical units, or two or more units can be integrated in one unit.
[0313] If the function 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 such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present application. The foregoing storage medium includes: USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs and other various media that can store program codes.
[0314] The above is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present application, and all should be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claimed rights.
Claims
1. A method for loading a web page, characterized in that, The method includes: Receiving a first request message for requesting to load a first web page, where the first web page contains an anchor point corresponding to the first request message; Loading the content corresponding to the tree of a first area and the content corresponding to the parent node tree in the first web page, where the parent node tree is the parent node tree of the tree of the first area, and the anchor point is located in the first area; Rendering the content corresponding to the tree of the first area and the content corresponding to the parent node tree; Displaying, in a first display window, the content corresponding to the tree of the first area and the content corresponding to the parent node tree.
2. The method according to claim 1, wherein The method further includes: Loading the content corresponding to the tree of a second area in the first web page, where the second area is an area in the first web page that is after the first area; Rendering the content corresponding to the tree of the second area.
3. The method according to claim 1 or 2, characterized in that, The method further includes: Loading the content corresponding to the tree of a third area in the first web page, where the third area is an area in the first web page that is before the first area; Rendering the content corresponding to the tree of the third area.
4. The method according to any one of claims 1 to 3, characterized in that, The method further includes: During the process of rendering the content corresponding to the tree of the first area and the content corresponding to the parent node tree, adding lazy loading tags to at least some of the nodes that make up the parent node tree.
5. The method according to any one of claims 1 to 4, characterized in that The height of the first area is greater than or equal to the height of the first display window, and the anchor point is located at the top position of the first area.
6. An electronic device, characterized in that, The electronic device includes: A receiving module, configured to receive a first request message for requesting to load a first web page, where the first web page contains an anchor point corresponding to the first request message; A loading module, configured to load the content corresponding to the tree of a first area and the content corresponding to the parent node tree in the first web page, where the parent node tree is the parent node tree of the tree of the first area, and the anchor point is located in the first area; A rendering module, configured to render the content corresponding to the tree of the first area and the content corresponding to the parent node tree; A display module, configured to display, in a first display window, the content corresponding to the tree of the first area and the content corresponding to the parent node tree.
7. The electronic device according to claim 6, wherein: The loading module is further configured to: Load the content corresponding to the tree of a second area in the first web page, where the second area is an area in the first web page that is after the first area; The rendering module is further configured to: Render the content corresponding to the tree of the second area.
8. The electronic device according to claim 6 or 7, wherein: The loading module is further configured to: Load the content corresponding to the tree of a third area in the first web page, where the third area is an area in the first web page that is before the first area; The rendering module is further configured to: Render the content corresponding to the tree of the third area.
9. The electronic device according to any one of claims 6 to 8, wherein: The loading module is specifically configured to: Load the content corresponding to the tree of the first area and the content corresponding to the parent node tree into a shared memory, where the shared memory is a shared memory of the loading module and the rendering module; The rendering module is further configured to: obtain the content corresponding to the tree of the first region and the content corresponding to the parent node tree from the shared memory.
10. The electronic device according to claim 9, wherein The loading module is further configured to: When the content corresponding to the tree of the first region and the content corresponding to the parent node tree are loaded into the shared memory, notify the rendering module to obtain the content corresponding to the tree of the first region and the content corresponding to the parent node tree from the shared memory.
11. The electronic device according to claim 7, wherein The loading module is specifically configured to: Load the content corresponding to the tree of the second region into the shared memory, where the shared memory is the shared memory of the loading module and the rendering module; The rendering module is further configured to: obtain the content corresponding to the tree of the second region from the shared memory.
12. The electronic device according to claim 11, wherein The loading module is further configured to: When the content corresponding to the tree of the second region is loaded into the shared memory, notify the rendering module to obtain the content corresponding to the tree of the second region from the shared memory.
13. The electronic device according to claim 8, wherein The loading module is specifically configured to: Load the content corresponding to the tree of the third region into the shared memory, where the shared memory is the shared memory of the loading module and the rendering module; The rendering module is further configured to: obtain the content corresponding to the tree of the third region from the shared memory.
14. The electronic device according to claim 13, wherein The loading module is further configured to: When the content corresponding to the tree of the third region is loaded into the shared memory, notify the rendering module to obtain the content corresponding to the tree of the third region from the shared memory.
15. The electronic device according to any one of claims 6 to 14, characterized in that, The device further includes: A marking module, configured to add lazy loading tags to at least some of the nodes constituting the parent node tree during the process of rendering the content corresponding to the tree of the first region and the content corresponding to the parent node tree.
16. The electronic device according to any one of claims 6 to 15, characterized in that, The height of the first region is greater than or equal to the height of the first display window, and the anchor point is located at the top of the first region.
17. An electronic device, characterized in that, Comprising: One or more processors; One or more memories; And one or more computer programs, wherein the one or more computer programs are stored in the one or more memories, and the one or more computer programs include instructions, when the instructions are executed by the one or more processors, enabling the electronic device to execute the method according to any one of claims 1 to 5.
18. A computer-readable storage medium, characterized in that, The program or instruction is stored in the storage medium, and when the program or instruction is run, the method according to any one of claims 1 to 5 is implemented.
19. A computer program product, characterized in that, The program or instruction is stored in the computer program product, and when the program or instruction is run, the method according to any one of claims 1 to 5 is implemented.