CN113672320A - Method, equipment and storage medium for rendering webpage based on DOM element - Google Patents
Method, equipment and storage medium for rendering webpage based on DOM element Download PDFInfo
- Publication number
- CN113672320A CN113672320A CN202110814502.8A CN202110814502A CN113672320A CN 113672320 A CN113672320 A CN 113672320A CN 202110814502 A CN202110814502 A CN 202110814502A CN 113672320 A CN113672320 A CN 113672320A
- Authority
- CN
- China
- Prior art keywords
- height
- rendering
- elements
- rendered
- scroll bar
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 61
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000003860 storage Methods 0.000 title claims abstract description 12
- 230000000007 visual effect Effects 0.000 claims abstract description 38
- 230000008859 change Effects 0.000 claims abstract description 19
- 238000004364 calculation method Methods 0.000 claims description 8
- 230000008569 process Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 6
- 238000004590 computer program Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 230000008447 perception Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Image Generation (AREA)
Abstract
The application relates to a method, equipment and storage medium for rendering a webpage based on a DOM element. The method comprises the following steps: specifying a first rendering element position; specifying a default height for all unrendered elements; initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in a visual area; rendering the elements needing to be rendered in the visual area; judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of the elements in the visible area, and if not, keeping the current rendering result; judging whether the scroll bar rolls or not, if so, executing the fifth step, and if not, judging whether the element height has dynamic change or not; the fifth step is performed again when there is a change in element height. According to the method, even when the browser renders large data volume, rendering can be easily achieved, page jamming is reduced, and webpage rendering efficiency is improved.
Description
Technical Field
The present application relates to the field of web page rendering technologies, and in particular, to a method, an apparatus, and a storage medium for rendering a web page based on a DOM element.
Background
When a user accesses a webpage through a browser to browse colorful content, the browser renders the webpage content through DOM elements, the situation that the amount of data in a list in the webpage content is large is often met, the browser does not perform specific optimization aiming at the corresponding situation, and all elements are rendered at the same time. Rendering of too many DOM elements can result in a browser being stuck and also occupying a large amount of memory. Since the performance overhead of accessing DOM elements is high, DOM events are frequently triggered periodically when the list scrolls, further resulting in the occurrence of jams and even no responses.
The current mainstream solution for solving the large data volume list is to virtually page, divide the content into multiple pages according to a certain condition, and then page and load according to the scrolled position. This approach relies on back-end support, providing a paging interface; meanwhile, a new element is requested and loaded after the scroll bar needs to be rolled to a certain threshold value, the scroll bar is refilled after the new element is loaded, the change of the scroll bar is large, and the experience interaction is not good; in addition, after virtual page turning is carried out for multiple times, if the old elements are not unloaded, the problem of overlarge DOM rendering amount still exists.
Disclosure of Invention
In order to achieve the technical purpose, the application provides a method for rendering a webpage based on a DOM element, which comprises the following steps:
s1, specifying the position of a first rendering element;
s2, specifying default heights of all unrendered elements;
s3, initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in a visual area;
s4, rendering the elements needing to be rendered in the visual area;
s5, judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of elements in the visible area, and if not, keeping the current rendering result;
s6, judging whether the scroll bar rolls, if so, executing S5, and if not, judging whether the element height dynamically changes;
and S7, executing S5 when the element height has dynamic change, and ending when the element height has no dynamic change.
Specifically, the element positions are relative positions, and the position of the kth element relative to the ith element is:
Pk＝Pi+(k-i)*h
where h represents the default height of all elements, i is the first element to begin rendering, and i > 0.
Specifically, the number of elements to be rendered in the visual area is:
wherein h represents the default height of all elements, vh represents the height of the visual area, j is the number of elements to be rendered in the visual area, and j is greater than 0.
Further, the updating the rendered element position within the visible region includes updating Pi+1To PjThe position of (a).
Preferably, the updating further comprises stopping the calculation and destroying the DOM element information of the original jth element when the accumulated height from the ith element to the jth element exceeds the height of the visible area; and when the accumulated height of the ith element to the jth element is less than the height of the visual area, additionally rendering the (j + 1) th element until the accumulated value is more than or equal to the height of the visual area.
Preferably, the offset value is set when simulating the scroll bar and converting the style when a negative number occurs in the relative position during the update.
Preferably, in S6, the first element index in the visible area can be determined according to the scrolling distance of the scroll bar, where the first element index is:
wherein scroll represents the distance the scroll bar has been scrolled; in S6, the last element subscript in the visible region can be determined according to the scrolling distance of the scroll bar, where the last element subscript is:
where vh represents the visible area height.
A second aspect of the invention provides a computer device comprising a memory and a processor, the memory having stored therein computer-readable instructions which, when executed by the processor, cause the processor to perform the steps of:
a first step of specifying a first rendering element position;
secondly, specifying default heights of all unrendered elements;
thirdly, initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in a visual area;
fourthly, rendering the elements needing to be rendered in the visual area;
fifthly, judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of elements in the visible area, and if not, keeping the current rendering result;
sixthly, judging whether the scroll bar rolls or not, if so, executing the fifth step, and if not, judging whether the element height has dynamic change or not;
and seventhly, executing the fifth step when the element height has dynamic change, and finishing when the element height has no dynamic change.
A third aspect of the invention provides a computer storage medium having stored thereon a plurality of instructions adapted to be loaded by a processor and to carry out the steps of:
a first step of specifying a first rendering element position;
secondly, specifying default heights of all unrendered elements;
thirdly, initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in a visual area;
fourthly, rendering the elements needing to be rendered in the visual area;
fifthly, judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of elements in the visible area, and if not, keeping the current rendering result;
sixthly, judging whether the scroll bar rolls or not, if so, executing the fifth step, and if not, judging whether the element height has dynamic change or not;
and seventhly, executing the fifth step when the element height has dynamic change, and finishing when the element height has no dynamic change.
The beneficial effect of this application does: the webpage rendering method based on the DOM element can easily achieve rendering even when a browser renders a large amount of data, reduces page jamming, and improves webpage rendering efficiency.
Drawings
FIG. 1 illustrates a method flow diagram of an exemplary embodiment of the present application;
FIG. 2 illustrates another method flow diagram of an exemplary embodiment of the present application;
FIG. 3 illustrates a schematic view of a viewable area in an exemplary embodiment of the present application;
FIG. 4 illustrates a process diagram from the occurrence of scrolling to updating in an exemplary embodiment of the present application;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present application;
fig. 6 shows a schematic diagram of a storage medium provided in an embodiment of the present application.
Detailed Description
Hereinafter, embodiments of the present application will be described with reference to the accompanying drawings. It should be understood that the description is intended to be exemplary only, and is not intended to limit the scope of the present application. Moreover, in the following description, descriptions of well-known structures and techniques are omitted so as to not unnecessarily obscure the concepts of the present application. It will be apparent to one skilled in the art that the present application may be practiced without one or more of these details. In other instances, well-known features of the art have not been described in order to avoid obscuring the present application.
It should be noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of example embodiments in accordance with the application. As used herein, the singular is intended to include the plural unless the context clearly dictates otherwise. It will be further understood that the terms "comprises" and/or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
Exemplary embodiments according to the present application will now be described in more detail with reference to the accompanying drawings. These exemplary embodiments may, however, be embodied in many different forms and should not be construed as limited to only the embodiments set forth herein. The figures are not drawn to scale, wherein certain details may be exaggerated and omitted for clarity. The shapes of various regions, layers, and relative sizes and positional relationships therebetween shown in the drawings are merely exemplary, and deviations may occur in practice due to manufacturing tolerances or technical limitations, and a person skilled in the art may additionally design regions/layers having different shapes, sizes, relative positions, as actually required.
Example 1:
the embodiment implements a method for rendering a webpage based on a DOM element, as shown in fig. 1, including the following steps:
s1, specifying the position of a first rendering element;
s2, specifying default heights of all unrendered elements;
s3, initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in a visual area;
s4, rendering the elements needing to be rendered in the visual area;
s5, judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of elements in the visible area, and if not, keeping the current rendering result;
s6, judging whether the scroll bar rolls, if so, executing S5, and if not, judging whether the element height dynamically changes;
and S7, executing S5 when the element height has dynamic change, and ending when the element height has no dynamic change.
Specifically, the element positions are relative positions, and the position of the kth element relative to the ith element is:
Pk＝Pi+(k-i)*h
where h represents the default height of all elements, i is the first element to begin rendering, and i > 0.
Specifically, the number of elements to be rendered in the visual area is:
wherein h represents the default height of all elements, vh represents the height of the visual area, j is the number of elements to be rendered in the visual area, and j is greater than 0.
Further, the updating the rendered element position within the visible region includes updating Pi+1To PjThe position of (a).
Preferably, the updating further comprises stopping the calculation and destroying the DOM element which exceeds the original jth element when the accumulated height from the ith element to the jth element exceeds the height of the visible area; and when the accumulated height of the ith element to the jth element is less than the height of the visual area, additionally rendering the (j + 1) th element until the accumulated value is more than or equal to the height of the visual area.
Preferably, the offset value is set when simulating the scroll bar and converting the style when a negative number occurs in the relative position during the update.
Preferably, in S6, the first subscript of the element in the visible area is determined according to the scrolling distance of the scroll bar, and the first subscript is
Where scrll represents the distance the scrollbar has been scrolled; in S6, the last element subscript in the visible area can be judged according to the rolling distance of the scroll bar, and the last subscript is
Where vh represents the visible area height.
Example 2:
the embodiment implements a method for rendering a web page based on DOM elements, as shown in the flowchart of fig. 2, comprising the following steps between the beginning and the end:
first, a first render element position is specified.
The DOM is a short for Document Object Model, meaning of Document Object Model, and the rendering element here refers to a rendering DOM element. By default, the list is rendered from the first element, or from some element in the middle of the list, the first element being the i element, and the first element being when i is equal to 1.
Second, specify all unrendered elements default height.
Take the first rendered element P1The actual height of the element is the default height of the unrendered element, the element default height is denoted as h, the height h already contains the distance due to the fact that the distance exists between the elements in the actual scene, and the height of the visual area is recorded as vh as the visual area is known.
And thirdly, initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in the visual area.
In particular, the element positions are in particular relative positionsFrom a relative position P1At the beginning, the following elements are denoted P2、P3… …, if there is a case where rendering is started from an element in the middle of the list in a specific scene, the relative position P isiThe preceding elements are denoted Pi-1、Pi-2… … relative position PiThe latter elements are denoted Pi+1、Pi+2… … are provided. Since the default height of all elements is h, the position of the kth element relative to the ith element is:
Pk＝Pi+(k-i)*h
where h represents the default height of all elements, i is the first element to begin rendering, and i > 0. Initializing the scroll bar, as shown in FIG. 3, the scroll bar is stretched by the height of the inner container, which determines the length of the scroll bar. The height of the inner container, i.e. the sum of the heights of all elements, since the default height of all elements is h, when there are k elements, the inner height is ih ═ h × k, the distance that the scroll bar has scrolled is denoted srcol, the default value of scroll is (i-1) × h, where i is the first element to start rendering, and i > 0.
And fourthly, rendering the elements needing to be rendered in the visual area.
And fifthly, judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of elements in the visible area, and if not, keeping the current rendering result.
The real rendering result is taken, the DOM information of the elements in the visible area can be obtained, and the default height h of each element is asynchronously updated according to the DOM informationiWhen all the elements are equal in height, no processing is done. When the actual height of an element is not equal to the default height, the default height h needs to be updatediAt this time with respect to the element PiThe recorded position information is updated, i.e. the calculation P is updatedi+1……Pj(j>i +1 and j represents the last rendered visual field element index), the height of the inner container is updated according to the difference value of the real height value and the default height value, and the situation is further improvedThe scroll bar of the view container is new. In the calculation process, when the accumulated height from the ith element to the jth element exceeds the visible area height vh, the calculation is stopped, and DOM information exceeding the original jth element is destroyed; and when the accumulated height from the ith element to the jth element is less than the height vh of the visual area, additionally rendering the (j + 1) th element until the accumulated value is more than or equal to the height vh of the visual area. This process ensures that the user's perception of changes in the viewable area is minimized during scrolling, and even updates occur without perception.
And sixthly, judging whether the scroll bar rolls or not, if so, executing the fifth step, and if not, judging whether the element height has dynamic change or not.
When scrolling occurs, it is shown in fig. 4 that the update operation is performed. The distance srcoll by which the scroll bar is scrolled, in combination with the height vh of the visual area, can yield the first element currently in the visual area:
the last element:
when the elements with updated height are scrolled into the visible area again, the updating calculation is not repeated.
Due to the relative position of the element record, P, during the update processkIn the case of a negative value, as an alternative embodiment, the offset value offset is subsequently taken into account when simulating the scroll bar and converting the pattern, when k is 1 and P iskIs negative, then offset is | P1I is P1The absolute value of (a) is the true layout position of the pattern that needs to be added with the offset value in the specific layout. In addition, to optimize the user experience during conventional scrolling up and down, a preset value x may be defined, preloading the elements outside the visual area to be rendered, and the first and last elements to be rendered are _ start-x and _ start + x (_ start-x)>0). Since native snoop scrollbar srcole event triggers more frequently, this step can add a throttling function (throttle) to the snoop event for optimization.
And seventhly, executing the fifth step when the element height has dynamic change, and finishing when the element height has no dynamic change.
In a real usage scenario, a situation may occur where element k in the visible region changes highly, such as: the user clicks to see more expanded display details, then element P is compared tokUpdating of recorded position information, i.e. asynchronous updating calculation Pk+1……Pj(j>i +1 and j represents the last rendered visual field element index), the height of the inner container is updated accordingly, and the scroll bar of the view container is updated accordingly. And executing the fifth step when the element height is dynamically changed, and finishing when the element height is not dynamically changed.
Referring next to fig. 5, a schematic diagram of an electronic device provided in some embodiments of the present application is shown. As shown in fig. 5, the electronic device 2 includes: the system comprises a processor 200, a memory 201, a bus 202 and a communication interface 203, wherein the processor 200, the communication interface 203 and the memory 201 are connected through the bus 202; the memory 201 stores a computer program that can be executed on the processor 200, and the processor 200 executes the computer program to execute the method for rendering a web page based on a DOM element provided in any one of the previous embodiments of the present application.
The Memory 201 may include a high-speed Random Access Memory (RAM) and may further include a non-volatile Memory (non-volatile Memory), such as at least one disk Memory. The communication connection between the network element of the system and at least one other network element is realized through at least one communication interface 203 (which may be wired or wireless), and the internet, a wide area network, a local network, a metropolitan area network, and the like can be used.
The processor 200 may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware or instructions in the form of software in the processor 200. The Processor 200 may be a general-purpose Processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present application may be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software module may be located in ram, flash memory, rom, prom, or eprom, registers, etc. storage media as is well known in the art. The storage medium is located in the memory 201, and the processor 200 reads the information in the memory 201 and completes the steps of the method in combination with the hardware thereof.
The electronic device provided by the embodiment of the application and the method for rendering the webpage based on the DOM element provided by the embodiment of the application have the same inventive concept and have the same beneficial effects as the method adopted, operated or realized by the electronic device.
Referring to fig. 6, the computer-readable storage medium is an optical disc 30, on which a computer program (i.e., a program product) is stored, and when the computer program is executed by a processor, the computer program may execute the method for rendering a web page based on a DOM element according to any of the embodiments.
Examples of the computer-readable storage medium may also include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory, or other optical and magnetic storage media, which are not described in detail herein.
It should be noted that: the algorithms and displays presented herein are not inherently related to any particular computer, virtual machine, or other apparatus. Various general purpose devices may be used with the teachings herein. The required structure for constructing such a device will be apparent from the description above. In addition, this application is not directed to any particular programming language. It will be appreciated that a variety of programming languages may be used to implement the teachings of the present application as described herein, and any descriptions of specific languages are provided above to disclose the best modes of the present application. In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description. Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the application, various features of the application are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the application and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: this application is intended to cover such departures from the present disclosure as come within known or customary practice in the art to which this invention pertains.
The above description is only for the preferred embodiment of the present application, but the scope of the present application is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present application should be covered within the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A method for rendering a webpage based on DOM elements, comprising the steps of:
s1, specifying the position of a first rendering element;
s2, specifying default heights of all unrendered elements;
s3, initializing positions of all elements which are not rendered, the length of a scroll bar and the number of the elements which need to be rendered in a visual area;
s4, rendering the elements needing to be rendered in the visual area;
s5, judging whether the real height of the rendered element in the visible area is equal to the default height, if not, updating the position of the rendered element in the visible area, the length of the scroll bar and the number of elements in the visible area, and if not, keeping the current rendering result;
s6, judging whether the scroll bar rolls, if so, executing S5, and if not, judging whether the element height dynamically changes;
and S7, executing S5 when the element height has dynamic change, and ending when the element height has no dynamic change.
2. A method for rendering a web page based on a DOM element as claimed in claim 1, wherein the element positions are in particular relative positions, and the position of the kth element relative to the ith element is:
Pk＝Pi+(k-i)*h
where h represents the default height of all elements, i is the first element to begin rendering, and i > 0.
3. The method for rendering a webpage based on a DOM element according to claim 2, wherein the number of elements to be rendered in the visible region is:
wherein h represents the default height of all elements, vh represents the height of the visual area, j is the number of elements to be rendered in the visual area, and j is greater than 0.
4. The method for rendering a webpage based on a DOM element of claim 1, wherein the updating the rendered element position in the visible region comprises updating Pi+1To PjThe position of (a).
5. A method for rendering a webpage based on a DOM element as claimed in claim 4, wherein said updating comprises: when the accumulated height from the ith element to the jth element exceeds the height of the visual area, stopping calculation, and destroying rendering exceeding the jth element; and when the accumulated height of the ith element to the jth element is less than the height of the visual area, additionally rendering the (j + 1) th element until the accumulated value is more than or equal to the height of the visual area.
6. A method for rendering a web page based on a DOM element as recited in claim 1, wherein an offset value is set when simulating a scroll bar and converting a style when a negative number occurs in the relative position during the updating process.
7. The method for rendering a webpage based on a DOM element as claimed in claim 1, wherein a first element index in the visible region can be determined according to a scrolling distance of the scroll bar in S6, wherein the first element index is:
8. The method for rendering a webpage based on a DOM element as claimed in claim 7, wherein the last element index in the visible region can be determined according to the scrolling distance of the scroll bar in S6, and the last element index is:
9. A computer device comprising a memory and a processor, wherein computer readable instructions are stored in the memory, which computer readable instructions, when executed by the processor, cause the processor to perform the steps of the method according to any one of claims 1 to 8.
10. A computer storage medium, characterized in that it stores a plurality of instructions adapted to be loaded by a processor and to carry out the steps of the method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110814502.8A CN113672320B (en) | 2021-07-19 | 2021-07-19 | Method, equipment and storage medium for rendering webpage based on DOM element |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110814502.8A CN113672320B (en) | 2021-07-19 | 2021-07-19 | Method, equipment and storage medium for rendering webpage based on DOM element |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113672320A true CN113672320A (en) | 2021-11-19 |
| CN113672320B CN113672320B (en) | 2023-11-17 |
Family
ID=78539504
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110814502.8A Active CN113672320B (en) | 2021-07-19 | 2021-07-19 | Method, equipment and storage medium for rendering webpage based on DOM element |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113672320B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114356327A (en) * | 2021-12-29 | 2022-04-15 | 上海万物新生环保科技集团有限公司 | React visual area rendering method and device |
| CN114491364A (en) * | 2022-01-17 | 2022-05-13 | 广州市玄武无线科技股份有限公司 | Method and system for realizing high-performance form based on state management |
| CN115098006A (en) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | Performance optimization method and device for saving memory by aiming at rolling large-quantity elements based on Vue |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6959425B1 (en) * | 1999-12-15 | 2005-10-25 | Sun Microsystems, Inc. | System and method for managing a scalable list of items for display |
| US8205168B1 (en) * | 2008-12-01 | 2012-06-19 | Adobe Systems Incorporated | Methods and systems for page navigation of dynamically laid-out systems |
| CN105205845A (en) * | 2015-09-14 | 2015-12-30 | 广州视睿电子科技有限公司 | Webpage animation rendering method and device |
| WO2016082586A1 (en) * | 2014-11-27 | 2016-06-02 | 广州市动景计算机科技有限公司 | Webpage update method and apparatus |
| US20180101295A1 (en) * | 2016-10-11 | 2018-04-12 | Salesforce.Com, Inc. | System for displaying elements of a scrollable list |
| CN111222302A (en) * | 2018-11-26 | 2020-06-02 | 北京京东尚科信息技术有限公司 | Webpage rendering control method, control device and computer readable medium |
| CN111381823A (en) * | 2020-03-11 | 2020-07-07 | 四川长虹电器股份有限公司 | Web end long list rendering method |
| CN112000906A (en) * | 2020-08-27 | 2020-11-27 | 中国平安财产保险股份有限公司 | Data rendering method, device, equipment and storage medium |
| US20210096887A1 (en) * | 2019-10-01 | 2021-04-01 | Microsoft Technology Licensing, Llc | Positioning user interface components based on application layout and user workflows |
| CN113010824A (en) * | 2021-03-05 | 2021-06-22 | 北京明略软件系统有限公司 | Method and system for realizing unlimited scrolling of long list of web pages |
-
2021
- 2021-07-19 CN CN202110814502.8A patent/CN113672320B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6959425B1 (en) * | 1999-12-15 | 2005-10-25 | Sun Microsystems, Inc. | System and method for managing a scalable list of items for display |
| US8205168B1 (en) * | 2008-12-01 | 2012-06-19 | Adobe Systems Incorporated | Methods and systems for page navigation of dynamically laid-out systems |
| WO2016082586A1 (en) * | 2014-11-27 | 2016-06-02 | 广州市动景计算机科技有限公司 | Webpage update method and apparatus |
| CN105205845A (en) * | 2015-09-14 | 2015-12-30 | 广州视睿电子科技有限公司 | Webpage animation rendering method and device |
| US20180101295A1 (en) * | 2016-10-11 | 2018-04-12 | Salesforce.Com, Inc. | System for displaying elements of a scrollable list |
| CN111222302A (en) * | 2018-11-26 | 2020-06-02 | 北京京东尚科信息技术有限公司 | Webpage rendering control method, control device and computer readable medium |
| US20210096887A1 (en) * | 2019-10-01 | 2021-04-01 | Microsoft Technology Licensing, Llc | Positioning user interface components based on application layout and user workflows |
| CN111381823A (en) * | 2020-03-11 | 2020-07-07 | 四川长虹电器股份有限公司 | Web end long list rendering method |
| CN112000906A (en) * | 2020-08-27 | 2020-11-27 | 中国平安财产保险股份有限公司 | Data rendering method, device, equipment and storage medium |
| CN113010824A (en) * | 2021-03-05 | 2021-06-22 | 北京明略软件系统有限公司 | Method and system for realizing unlimited scrolling of long list of web pages |
Non-Patent Citations (1)
| Title |
|---|
| 云中桥, pages 1 - 14, Retrieved from the Internet <URL:《https://juejin.cn/post/6844903982742110216》> * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114356327A (en) * | 2021-12-29 | 2022-04-15 | 上海万物新生环保科技集团有限公司 | React visual area rendering method and device |
| CN114356327B (en) * | 2021-12-29 | 2024-05-17 | 上海万物新生环保科技集团有限公司 | Method and equipment for rendering real visible area |
| CN114491364A (en) * | 2022-01-17 | 2022-05-13 | 广州市玄武无线科技股份有限公司 | Method and system for realizing high-performance form based on state management |
| CN115098006A (en) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | Performance optimization method and device for saving memory by aiming at rolling large-quantity elements based on Vue |
| CN115098006B (en) * | 2022-06-28 | 2024-07-30 | 徐工汉云技术股份有限公司 | Method and device for optimizing performance of saving memory for rolling macroelements based on Vue |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113672320B (en) | 2023-11-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113672320A (en) | Method, equipment and storage medium for rendering webpage based on DOM element | |
| US10366147B2 (en) | Techniques for programmatic magnification of visible content elements of markup language documents | |
| EP0394164A2 (en) | Display with enhanced scrolling capabilities | |
| CN107977150A (en) | A kind of view scrolling method, device and electronic equipment | |
| US20120311487A1 (en) | Automatically wrapping zoomed content | |
| CN111581570B (en) | Page layout method and computing device | |
| CN104484235A (en) | Memory optimization method and device based on waterfall stream technology | |
| CN109298905A (en) | Utilize the method and electronic equipment of the optimization picture lazyness load of front end programming language | |
| CN108196845A (en) | A kind of page layout method, device, electronic equipment and readable storage medium storing program for executing | |
| CN111104117A (en) | Page theme style switching method and device, electronic equipment and computer storage medium | |
| CN113742612A (en) | Data rendering method and device, electronic equipment and storage medium | |
| CN113779351A (en) | Page display method and device, electronic equipment and storage medium | |
| CN112541140B (en) | List loading method, terminal equipment, electronic equipment and storage medium | |
| CN115629695A (en) | Application page display method, device, equipment and storage medium | |
| CN110309449A (en) | Page rendering method and device | |
| CN111428167B (en) | Page display method and device | |
| CN112084443B (en) | Page caching method and device | |
| CN116193159A (en) | Image data adjustment method and device, electronic equipment and storage medium | |
| CN115390976A (en) | Layout method of interface design, display method of interface and related equipment | |
| CN114327223B (en) | Form display method and device | |
| CN115080175A (en) | Display method, display device, computing equipment and readable storage medium | |
| CN112987992A (en) | Navigation element display method and device and electronic equipment | |
| CN107357938B (en) | Webpage display method and device | |
| CN114205670B (en) | Image processing method and device, storage medium and electronic equipment | |
| CN111914512B (en) | Display method and reading equipment based on electronic book horizontal screen double-turning mode |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |