Efficient webpage dynamic rendering method, system, equipment and medium

Abstract

The invention discloses an efficient webpage dynamic rendering method, system and device and a medium. The method comprises the following steps that interactive behaviors such as rolling and clicking when a user browses a webpage are monitored; determining a current user visible area according to the interaction behavior of the user; dynamically rendering the webpage elements in the user visible area; in the dynamic rendering process, the change of the user interaction behavior is detected in real time, and a rendering area is adjusted according to the change; the rendering efficiency and performance can be improved by dynamically rendering the elements of the user visible area part in the webpage, meanwhile, the page loading fluency and the user operation response speed are guaranteed, the rendering efficiency and performance are effectively improved, excessive occupation of performance resources is avoided, and the user experience is improved. The event operation of the user can be immediately responded in the page rendering process, and the use experience of the user and the smoothness of page loading are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of web page front-end, and in particular to a method, system, device and medium for efficiently dynamically rendering a web page. Background Art

[0002] With the rapid development of the Internet, web page content is becoming increasingly rich, and large-scale web page rendering has become a major challenge facing front-end technology. The traditional way of rendering the entire page at one time is prone to slow page loading and poor user experience when facing large-scale rendering needs. In addition, one-time rendering will also occupy a large amount of performance resources, affecting the response speed and fluency of the page. Summary of the invention

[0003] The object of the present invention is to provide a method, system, device and medium for efficiently dynamically rendering a web page, thereby solving all or one of the above-mentioned problems existing in the prior art.

[0004] In order to solve the above technical problems, the specific technical solutions of the present invention are as follows: In one aspect, the present invention provides a method for efficiently dynamically rendering a web page, comprising the following steps: Monitor user interaction behaviors such as scrolling and clicking when browsing web pages; Determine the current user visible area based on the user's interactive behavior; Dynamically render web page elements within the user's visible area; During the dynamic rendering process, changes in user interaction behavior are detected in real time, and the rendering area is adjusted according to the changes.

[0005] In one implementation manner, when measuring the interactive behaviors of the user such as scrolling and clicking when browsing a web page, event monitoring technology is used, including scrolling events and click events.

[0006] In one implementation manner, determining the current user visible area includes: Get the browser's viewport size and scroll position, and calculate the range of the current user's visible area.

[0007] In one embodiment, the dynamically rendering the web page elements in the user visible area includes: Elements within the visible area are loaded and rendered on demand.

[0008] In one embodiment, the dynamic rendering further includes: performing lazy loading processing on elements outside the visible area, and loading and rendering them when the user scrolls to the area where these elements are located.

[0009] In one implementation manner, during the dynamic rendering process, rendering performance is monitored and optimized in real time.

[0010] On the other hand, the present invention also provides an efficient web page dynamic rendering system, comprising: User behavior monitoring module, used to monitor the interactive behavior of users when browsing web pages; A visible area determination module is used to determine the current user visible area according to the user interaction behavior; A dynamic rendering module is used to dynamically render web page elements within the user's visible area; The rendering optimization module is used to monitor and optimize rendering performance in real time during dynamic rendering.

[0011] In one embodiment, it further includes: an event response module; The event response module is used to immediately respond to user event operations during the dynamic rendering process.

[0012] On the other hand, the present invention further provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the efficient web page dynamic rendering method are implemented.

[0013] On the other hand, the present invention further provides a computer device, comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus; wherein: The memory is used to store computer programs; The processor is used to execute the steps of the efficient web page dynamic rendering method by running the program stored in the memory.

[0014] The beneficial effects of the technical solution of the present invention are: The efficient web page dynamic rendering method described in the present invention can improve rendering efficiency and performance by dynamically rendering elements in the user-visible area of ​​the web page, while ensuring the smoothness of page loading and the response speed of user operations, effectively improving rendering efficiency and performance, while avoiding excessive occupation of performance resources, and being able to immediately respond to user event operations during the page rendering process, thereby improving the user experience and the smoothness of page loading. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0016] Figure 1 It is a flowchart of the efficient web page dynamic rendering method described in Example 1 of the present invention; Figure 2 Schematic diagram of the architecture of the efficient web page dynamic rendering system according to Embodiment 2 of the present invention; Figure 3 is a schematic diagram of the structure of the computer device described in Example 4 of the present invention; The symbols in the accompanying drawings are explained as follows: 1501, processor; 1502, communication interface; 1503, memory; 1504, communication bus. DETAILED DESCRIPTION

[0017] The preferred embodiments of the present invention are described in detail below in conjunction with the accompanying drawings so that the advantages and features of the present invention can be more easily understood by those skilled in the art, thereby making a clearer and more definite definition of the protection scope of the present invention.

[0018] In the description of the present invention, it should be noted that the embodiments described in the present invention are only part of the embodiments of the present invention, rather than all of the embodiments; based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present invention.

[0019] The terms "first", "second", etc. in the specification and claims of this article and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of this article described here can be implemented in an order other than those illustrated or described here. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, device, product or equipment that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or equipment. Example 1

[0020] This embodiment provides an efficient web page dynamic rendering method, such as Figure 1 As shown, the following steps are included: On a product list page of an e-commerce website, the user's interactive behaviors such as scrolling and clicking are first monitored through the user behavior monitoring module.

[0021] When the user scrolls down the page, the visible area determination module calculates the range of the current user visible area according to the browser's viewport size and scrolling position.

[0022] After that, the dynamic rendering module loads and renders the product list elements in the visible area on demand, and at the same time, lazy loads the product list elements outside the visible area, that is, they are loaded and rendered when the user scrolls to the area where these elements are located. During the dynamic rendering process, the rendering optimization module monitors and optimizes the rendering performance in real time to ensure rendering efficiency and page loading smoothness.

[0023] In addition, the event response module can immediately respond to user click events, such as clicking on a product to enter the details page, which improves the user experience.

[0024] Through the above technical solution, the present invention not only improves the rendering efficiency and performance of web pages, but also ensures the smoothness of page loading and the response speed of user operations, providing users with a better and more efficient web browsing experience.

[0025] It should be noted that the examples herein are only for explaining the present invention and are not intended to limit the protection scope of the present invention. Example 2

[0026] This embodiment is based on the same inventive concept as the efficient web page dynamic rendering method described in Embodiment 1, and provides an efficient web page dynamic rendering system, such as Figure 2 As shown, including: User behavior monitoring module, used to monitor the interactive behavior of users when browsing web pages; A visible area determination module is used to determine the current user visible area according to the user interaction behavior; A dynamic rendering module is used to dynamically render web page elements within the user's visible area; The rendering optimization module is used to monitor and optimize rendering performance in real time during dynamic rendering.

[0027] In one embodiment, it further includes: an event response module; The event response module is used to immediately respond to user event operations during the dynamic rendering process. Example 3

[0028] This embodiment provides a computer-readable storage medium, including: The storage medium is used to store computer software instructions used to implement the efficient web page dynamic rendering method described in the above-mentioned embodiment 1, which includes a program for executing the above-mentioned program set for the efficient web page dynamic rendering method; specifically, the executable program can be built into the efficient web page dynamic rendering system described in embodiment 2, so that the efficient web page dynamic rendering system can implement the efficient web page dynamic rendering method described in embodiment 1 by executing the built-in executable program.

[0029] In addition, the computer-readable storage medium of this embodiment may adopt any combination of one or more computer-readable storage media, wherein the computer-readable storage medium includes electrical, optical, electromagnetic, infrared or semiconductor systems, devices or components, or any combination thereof. Example 4

[0030] This embodiment provides an electronic device, such as Figure 3 As shown, the electronic device may include: a processor 1501 , a communication interface 1502 , a memory 1503 and a communication bus 1504 , wherein the processor 1501 , the communication interface 1502 , and the memory 1503 communicate with each other via the communication bus 1504 .

[0031] Memory 1503, used for storing computer programs; The processor 1501 is used to implement the steps of the efficient web page dynamic rendering method described in the above embodiment 1 when executing the computer program stored in the memory 1503.

[0032] As an embodiment of the present invention, the communication bus mentioned in the above terminal can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0033] As an implementation mode of the present invention, the communication interface is used for communication between the above-mentioned terminal and other devices.

[0034] As an embodiment of the present invention, the memory may include a random access memory (RAM) or a non-volatile memory, such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.

[0035] As an embodiment of the present invention, the above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components.

[0036] It should be understood that in the various embodiments of this document, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this document.

[0037] It should also be understood that in the embodiments of this article, the term "and / or" is only a description of the association relationship of the associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0038] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this article.

[0039] 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 aforementioned method embodiments and will not be repeated here.

[0040] In the several embodiments provided herein, 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 schematic, for example, the division of the units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, or can be electrical, mechanical or other forms of connection.

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

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

[0043] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this article is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of this article. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0044] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. An efficient web page dynamic rendering method, characterized in that: The following steps are involved: Monitor user interaction behaviors such as scrolling and clicking when browsing web pages; Determine the current user visible area based on the user's interactive behavior; Dynamically render web page elements within the user's visible area; During the dynamic rendering process, changes in user interaction behavior are detected in real time, and the rendering area is adjusted according to the changes.

2. The efficient web page dynamic rendering method according to claim 1, characterized in that: When measuring the interactive behaviors such as scrolling and clicking of the user when browsing the webpage, event monitoring technology is adopted, including scrolling events and clicking events.

3. The efficient web page dynamic rendering method according to claim 1, characterized in that: The determining of the current user visible area includes: Get the browser's viewport size and scroll position, and calculate the range of the current user's visible area.

4. The efficient web page dynamic rendering method according to claim 1, characterized in that: The dynamically rendering the web page elements in the user's visible area includes: Elements within the visible area are loaded and rendered on demand.

5. The efficient web page dynamic rendering method according to claim 1, characterized in that: The dynamic rendering also includes: performing lazy loading processing on elements outside the visible area, and loading and rendering them when the user scrolls to the area where these elements are located.

6. The efficient web page dynamic rendering method according to claim 1, characterized in that: During the dynamic rendering process, the rendering performance is monitored and optimized in real time.

7. An efficient web page dynamic rendering system, characterized in that: include: User behavior monitoring module, used to monitor the interactive behavior of users when browsing web pages; A visible area determination module is used to determine the current user visible area according to the user interaction behavior; A dynamic rendering module is used to dynamically render web page elements within the user's visible area; The rendering optimization module is used to monitor and optimize rendering performance in real time during dynamic rendering.

8. The efficient web page dynamic rendering system according to claim 7, characterized in that: Also includes: Incident response module; The event response module is used to immediately respond to user event operations during the dynamic rendering process.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by the processor, the steps of the efficient web page dynamic rendering method according to any one of claims 1 to 6 are implemented.

10. A computer device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; wherein: The memory is used to store computer programs; The processor is used to execute the steps of the efficient web page dynamic rendering method according to any one of claims 1 to 6 by running the program stored in the memory.

Images