CN116661939A - Page rendering method and device, storage medium and electronic equipment - Google Patents
Page rendering method and device, storage medium and electronic equipment Download PDFInfo
- Publication number
- CN116661939A CN116661939A CN202310956705.XA CN202310956705A CN116661939A CN 116661939 A CN116661939 A CN 116661939A CN 202310956705 A CN202310956705 A CN 202310956705A CN 116661939 A CN116661939 A CN 116661939A
- Authority
- CN
- China
- Prior art keywords
- page
- rendering
- rendered
- page element
- main thread
- 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.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 133
- 238000000034 method Methods 0.000 title claims abstract description 40
- 230000004044 response Effects 0.000 claims abstract description 19
- 230000008859 change Effects 0.000 claims abstract description 18
- 238000012544 monitoring process Methods 0.000 claims description 11
- 238000004590 computer program Methods 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 8
- 230000000007 visual effect Effects 0.000 description 6
- 230000008569 process Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 3
- 230000000903 blocking effect Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- KLDZYURQCUYZBL-UHFFFAOYSA-N 2-[3-[(2-hydroxyphenyl)methylideneamino]propyliminomethyl]phenol Chemical compound OC1=CC=CC=C1C=NCCCN=CC1=CC=CC=C1O KLDZYURQCUYZBL-UHFFFAOYSA-N 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000003111 delayed effect Effects 0.000 description 1
- 201000001098 delayed sleep phase syndrome Diseases 0.000 description 1
- 208000033921 delayed sleep phase type circadian rhythm sleep disease Diseases 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- 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)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The disclosure relates to the technical field of computers, and relates to a page rendering method, a device, a storage medium and electronic equipment, so as to reduce page clamping. The page rendering method comprises the following steps: determining page elements to be rendered in response to a page change displayed by the browser; controlling the main thread to load page elements, and determining target page elements which are loaded completely within a preset time period; switching the currently executed main thread to a rendering thread to render the target page element; after the target page element is rendered, switching the currently executed rendering thread back to the main thread, and executing the step of controlling the main thread to load the page element to the rendering target page element aiming at the residual page elements to be rendered until the rendering of the page element to be rendered is completed.
Description
Technical Field
The disclosure relates to the technical field of computers, and in particular relates to a page rendering method, a page rendering device, a storage medium and electronic equipment.
Background
At present, more and more companies monitor various business indexes in terms of operation and maintenance by means of visual charts, so that risks are perceived in advance and business stability is kept. Related art visual charts are typically rendered using Canvas (Canvas) technology, which involves invoking a GPU (graphics processor, graphics Processing Unit) to perform a corresponding drawing task during rendering to display the visual chart in a page of a browser. For three-dimensional charts, it also involves the use of WebGL (Web Graphics Library) -based three-dimensional mapping techniques. With the increasing of indexes to be monitored, more and more visual charts are carried in the page, and larger performance cost is caused. When there are too many charts to be rendered in a period of time, a page jam phenomenon occurs.
Disclosure of Invention
The disclosure aims to provide a page rendering method, a page rendering device, a storage medium and electronic equipment, so as to reduce page jamming.
To achieve the above object, a first aspect of embodiments of the present disclosure provides a page rendering method, including:
determining page elements to be rendered in response to a page change displayed by the browser;
controlling a main thread to load the page element, and determining a target page element which is loaded completely within a preset time period;
switching the main thread currently executed to a rendering thread to render the target page element;
after the target page element is rendered, the rendering thread which is currently executed is switched back to the main thread, and the step of controlling the main thread to load the page element to render the target page element is executed aiming at the rest page elements to be rendered until all the page elements to be rendered are rendered.
Optionally, the switching the currently executed main thread to a rendering thread to render the target page element includes:
and under the condition that the actual time length of loading the target page element by the main thread is smaller than the preset time length, switching the currently executed main thread to a rendering thread to render the target page element.
Optionally, the switching the currently executed main thread to a rendering thread to render the target page element includes:
and calling a request idle callback interface to switch the currently executed main thread to a rendering thread to render the target page element under the condition that the actual time length of loading the target page element by the main thread is smaller than the preset time length.
Optionally, the determining, in response to the page change displayed by the browser, a page element to be rendered includes:
determining that a page displayed by the browser changes under the condition that at least one monitoring page element in the page intersects a viewport of the page;
based on the at least one monitored page element, a page element to be rendered is determined.
Optionally, the monitoring page element is a scroll bar of the page, or is a page element registered in advance to the intersecting monitor, or is all page elements in the page.
Optionally, the monitoring page element is a page element pre-registered to the intersecting monitor, and the method further includes:
an intersection monitor is invoked to determine whether the monitor page element intersects a viewport of the page.
Optionally, the page element includes at least a chart element.
A second aspect of an embodiment of the present disclosure provides a page rendering apparatus including:
a response module configured to determine page elements to be rendered in response to a page change displayed by the browser;
the control module is configured to control the main thread to load the page element and determine the target page element which is loaded completely within a preset duration;
a switching module configured to switch the main thread currently executing to a rendering thread to render the target page element;
and the execution module is configured to switch the currently executed rendering thread back to the main thread after the target page element is rendered, and execute the step of controlling the main thread to load the page element to render the target page element for the rest page elements to be rendered until all the page elements to be rendered are rendered.
A third aspect of embodiments of the present disclosure provides a computer readable storage medium having stored thereon computer program instructions which, when executed by a processor, implement the steps of the page rendering method provided in any of the first aspects of the present disclosure.
According to a fourth aspect of embodiments of the present disclosure, there is provided an electronic device, comprising:
a memory having a computer program stored thereon;
a processor for executing the computer program in the memory to implement the steps of the page rendering method provided in any one of the first aspects.
By the technical scheme, the page element to be rendered is determined in response to the page change displayed by the browser. On the basis, the loading of the target page element completed in the preset time period can be determined by controlling the time period of the main thread for loading the page element to be rendered at one time, namely controlling the main thread to carry out the loading task in the preset time period, so that the currently executed main thread can be switched to the rendering thread to render the target page element. After the target page element is rendered, the currently executed rendering thread can be switched back to the main thread, and the step of controlling the main thread to load the page element to render the target page element is executed for the rest page elements to be rendered until all the page elements to be rendered are rendered. In this way, the process of loading all page elements to be rendered by the main thread is divided into a plurality of times, and after part of page elements to be rendered are loaded each time, the part of page elements to be rendered are rendered, and the next loading and the step of rendering the page elements are continued after the rendering is completed, so that the situation that rendering tasks are blocked and the page is blocked due to excessive loading of the page elements at one time is reduced.
Additional features and advantages of the present disclosure will be set forth in the detailed description which follows.
Drawings
The accompanying drawings are included to provide a further understanding of the disclosure, and are incorporated in and constitute a part of this specification, illustrate the disclosure and together with the description serve to explain, but do not limit the disclosure. In the drawings:
fig. 1 is a schematic diagram showing a page rendering according to the related art.
FIG. 2 is a flowchart illustrating a method of page rendering, according to an example embodiment.
FIG. 3 is a schematic diagram illustrating a page rendering according to an example embodiment.
FIG. 4 is a schematic diagram illustrating one determination of page elements to render, according to an example embodiment.
Fig. 5 is a block diagram illustrating a page rendering apparatus according to an exemplary embodiment.
Fig. 6 is a block diagram of an electronic device, according to an example embodiment.
Detailed Description
Specific embodiments of the present disclosure are described in detail below with reference to the accompanying drawings. It should be understood that the detailed description and specific examples, while indicating and illustrating the disclosure, are not intended to limit the disclosure.
As described in the background, the related art generally monitors various business indexes by means of a visual chart, and when a chart element such as the visual chart or other page elements are displayed in a page of a browser, the following steps are generally involved:
step 1: by listening or timing polling for elements in a DOM (document object model ) tree corresponding to a page displayed by a browser, it is determined whether or not there are page elements conforming to rendering conditions by some calculation method.
Step 2: after determining the page element meeting the rendering conditions, requesting service data corresponding to the page element through a network.
Step 3: and loading the page elements meeting the rendering conditions into a DOM tree, and performing page rendering by utilizing the drawing capability of the browser after loading is completed.
Among them, the page element conforming to the rendering condition may refer to a page element presented to a page Viewport (Viewport) in response to a page change of a browser display. Step 3 has good performance when a small number of page elements are loaded at a time, but when a large screen scene or a large number of page elements meeting rendering conditions are too many, the large number of page elements are often loaded at a time, which results in a large performance burden. At this time, the main thread (JS thread) for loading the page element preempts the execution time of the rendering thread, so that the rendering thread cannot redraw the layer and update the view in time, and the page cannot respond to any interaction and cannot display the updated content in a period of time, that is, a page jam phenomenon occurs.
Referring to fig. 1, fig. 1 is a schematic diagram illustrating a page rendering according to the related art. As shown in FIG. 1, the main thread has too many chart elements loaded at a time, and the execution time of the rendering thread is preempted, so that the multi-frame page is blocked.
In view of this, embodiments of the present disclosure provide a method, an apparatus, a storage medium, and an electronic device for page rendering, which determine page elements to be rendered in response to a page change displayed by a browser. On the basis, the loading of the target page element completed in the preset time period can be determined by controlling the time period of the main thread for loading the page element to be rendered at one time, namely controlling the main thread to carry out the loading task in the preset time period, so that the currently executed main thread can be switched to the rendering thread to render the target page element. After the target page element is rendered, the currently executed rendering thread can be switched back to the main thread, and the step of controlling the main thread to load the page element to render the target page element is executed for the rest page elements to be rendered until all the page elements to be rendered are rendered. In this way, the process of loading all page elements to be rendered by the main thread is divided into a plurality of times, after part of page elements to be rendered are loaded each time, the part of page elements to be rendered are rendered, and the next loading and the step of rendering the page elements are continued after the rendering is completed, so that the situation that rendering tasks are blocked and the page is blocked due to excessive loading of the page elements for one time is reduced, and user experience is improved.
Referring to fig. 2, fig. 2 is a flowchart illustrating a page rendering method according to an exemplary embodiment. The page rendering method can be applied to the electronic equipment to reduce the jam condition of the page displayed by the browser in the electronic equipment. The page rendering method may include:
in step S201, a page element to be rendered is determined in response to a page change displayed by the browser.
Wherein, the page element to be rendered may refer to a page element that is presented to a page viewport in response to a page change displayed by a browser. The page elements may include at least chart elements.
In step S202, the main thread is controlled to load the page element, and it is determined that the loading of the target page element is completed within the preset duration.
The main thread may refer to a JS thread written under the JavaScript framework, and may be used to load page elements. The preset duration may be determined according to practical situations, for example, the duration of updating a page view for a browser, which is not specifically limited in this disclosure. According to the performance of the electronic device actually running the browser, the number of page elements to be rendered and other related reasons, the target page elements loaded in the preset time period can be part of the page elements to be rendered or all the page elements to be rendered, and the disclosure is not limited in detail.
In one possible implementation, since the conventional mechanism of loading page elements is generally based on the main thread loading all page elements satisfying the rendering condition into the DOM tree at one time, when there are too many page elements to be loaded, execution of the rendering thread tends to be delayed. In the embodiment of the disclosure, in order to ensure smooth updating of the page view, the view update may be performed based on the frequency that the user cannot feel that the page is stuck, for example, at least 30 frames of views are updated in 1 second. On this basis, the preset duration may be set to 1000 milliseconds/30≡33.3 milliseconds (ms). Thus, the target page element for which the main thread load is complete within 33.3ms can be determined.
In step S203, the currently executed main thread is switched to the rendering thread to render the target page element.
It can be understood that on the basis of determining the target page element which is loaded completely within the preset time, the currently executed main thread can be switched to the rendering thread to render the target page element, so that the view is updated in time, and the page clamping condition is reduced.
In step S204, after the rendering of the target page element is completed, the currently executed rendering thread is switched back to the main thread, and the step of controlling the main thread to load the page element to the rendering of the target page element is executed for the remaining page elements to be rendered until the rendering of all the page elements to be rendered is completed.
In the embodiment of the present disclosure, if there are still remaining page elements to be rendered after the rendering of the target page element is completed, the currently executed rendering thread may be switched back to the main thread, and the step of controlling the main thread to load the page elements to the rendering of the target page element is executed for the remaining page elements to be rendered until the rendering of all the page elements to be rendered is completed. In this way, the process of loading all page elements to be rendered by the main thread is divided into a plurality of times, and after part of page elements to be rendered are loaded each time, the part of page elements to be rendered are rendered, and the next loading and the step of rendering the page elements are continued after the rendering is completed, so that the situation that rendering tasks are blocked and the page is blocked due to excessive loading of the page elements at one time is reduced.
Referring to fig. 3, fig. 3 is a schematic diagram illustrating a page rendering according to an example embodiment. As shown in fig. 3, on the basis of setting the preset duration to 33.3ms, it may be determined that the main thread loads the completed target page element within 33.3ms, and the currently executed main thread is switched to the rendering thread to render the target page element. And then, executing the step of controlling the main thread to load the page elements to the rendering target page elements aiming at the rest page elements to be rendered until all the page elements to be rendered are rendered. Therefore, in view updating of each frame, rendering of the target page element by a rendering thread is guaranteed, page blocking can be reduced, and smoothness of page view updating is improved.
Alternatively, the step S203 may be performed when the actual duration of loading the target page element by the main thread is less than the preset duration.
It should be appreciated that the actual duration of the main thread loading the target page element is typically less than the preset duration, so that if the actual duration of the main thread loading the target page element is less than the preset duration, the currently executing main thread may be switched to the rendering thread to render the target page element.
Therefore, the rendering thread is guaranteed to render the target page element in each frame of view update, so that page blocking can be reduced, and the smoothness of page view update is improved.
Optionally, the step S203 may include:
and calling a request idle callback interface to switch the currently executed main thread to a rendering thread to render the target page element under the condition that the actual time length of loading the target page element by the main thread is less than the preset time length.
The request idle callback interface may refer to a requestIdleCallback interface in the related art, and specific use of the interface may refer to the related art. By invoking the request idle callback interface, the remaining idle duration of the current frame may be determined and utilized to perform the designated task, such as performing the task of rendering the target page element. The browser can be configured to continue to execute the designated task after the current frame is executed by setting related parameters in the request idle callback interface, so that the browser can be configured to complete the rendering of the target page element when the residual idle time of the current frame is insufficient to complete the rendering of the target page element.
It should be appreciated that, by calling the request idle callback interface, it may be determined whether the actual duration of loading the target page element by the main thread is less than a preset duration, and if the actual duration of loading the target page element by the main thread is less than the preset duration, the currently executed main thread is switched to the rendering thread to render the target page element.
In one possible implementation, the request free callback interface may be encapsulated as a scheduler that may be used to intervene in the timing of the master thread and rendering threads to optimize page rendering logic. For example, in the preset time period, the main thread loaded with part of page elements to be rendered is switched to the rendering thread through the scheduler, so that the loaded part of page elements are rendered, how many page elements are loaded in the DOM tree in the preset time period, how many page elements are rendered are achieved, the page clamping condition is further reduced, and user experience is improved.
Alternatively, the step S201 may include:
determining that the page displayed by the browser changes under the condition that at least one monitoring page element in the page intersects with a viewport of the page;
based on the at least one monitored page element, a page element to be rendered is determined.
The monitoring page element may be a scroll bar of the page, and/or be a page element registered in advance to the intersecting monitor, and/or be all page elements in the page. The intersection monitor may refer to a constructor (intersectant server) provided by a browser, and may be used to monitor whether a page element enters a page viewport on the basis of determining whether the page element meets a rendering condition without frequent computation.
In one embodiment, the monitor page element is a scroll bar of the page. In this case, a scroll bar event may be monitored, a determination may be made as to whether the scroll bar scrolls to the bottom of the viewport, and in the event that the scroll bar scrolls to the bottom of the viewport, the intersection of the scroll bar with the viewport of the page is determined, thereby determining a change in the page displayed by the browser. In one possible implementation, the page elements to be rendered that are located at the same horizontal position may be determined based on the relative position of the scroll bar. In complex scenarios, the rendering order of the page elements may also be determined based on the calculation of the relative positions of the page elements to be rendered.
In another embodiment, the monitor page elements are all page elements in the page. In this case, the relative position of the page element and the viewport can be monitored regularly through a timer, and the size of the page element and the position of the page element relative to the viewport can be obtained by calling the method of the page element on the object level. And if and only if the distance between the page element and the upper part of the viewport is smaller than or equal to the viewport height, determining that the page element intersects with the viewport of the page, thereby determining that the page displayed by the browser changes. On this basis, the page element intersecting the viewport may be determined as the page element to be rendered.
In yet another embodiment, the monitor page element is a page element pre-registered to the intersecting monitor. In this case, it may be determined whether the monitor page element intersects the viewport of the page by invoking the intersection monitor, and in the case where at least one monitor page element in the page intersects the viewport of the page, a page change of the browser display is determined. On this basis, the monitor page element intersecting the viewport may be determined as the page element to be rendered.
It should be noted that, the above-mentioned judging logic for monitoring the event of the scroll bar, timing polling and intersecting monitor may be stored in the asynchronous task queue, so as to avoid that the main thread is occupied for too long when the tracked elements are too many or trigger too frequently, so that other services are blocked, and the page is blocked, thereby further optimizing the smoothness of the performance guarantee page update.
In one possible implementation, each page element in a page may be registered in an intersection monitor based on creating the intersection monitor. On this basis, an asynchronous task based on the intersection monitor detecting page elements can be created, so that in the case that at least one monitored page element in the page is monitored to intersect with the viewport of the page, the page change displayed by the browser is determined, and the monitored page element intersected with the viewport is determined as the page element to be rendered.
Referring to fig. 4, fig. 4 is a schematic diagram illustrating one determination of page elements to be rendered according to an example embodiment. As shown in FIG. 4, charts 1-8 are all monitoring page elements pre-registered to the intersection monitor, wherein charts 1-4 are displayed in a visible area, namely a view port, and charts 5-8 are located in a temporary invisible area. On this basis, the intersection monitor monitors that the charts 5 and 6 in the page intersect with the viewport of the page under the condition that the page width is changed, thereby determining the charts 5 and 6 as page elements to be rendered, and adding corresponding rendering tasks into a task queue. Then, if the charts 5 and 6 are loaded into the DOM tree within the preset duration, the currently executed main thread may be switched to the rendering thread, and the charts 5 and 6 may be rendered.
It should be noted that, the intersection monitor encapsulates the judgment logic related to calculating the relative position of the page elements, so that invoking the intersection monitor can further reduce the calculation overhead of the program, so that the resources of the main thread are more concentrated on the service processing. By combining the rendering mechanism provided by the embodiment of the disclosure, the page can feed back the latest view in real time on the basis of improving the page rendering efficiency, so that the page jam condition is reduced, and the user experience is improved.
By the technical scheme, the page element to be rendered is determined in response to the page change displayed by the browser. On the basis, the loading of the target page element completed in the preset time period can be determined by controlling the time period of the main thread for loading the page element to be rendered at one time, namely controlling the main thread to carry out the loading task in the preset time period, so that the currently executed main thread can be switched to the rendering thread to render the target page element. After the target page element is rendered, the currently executed rendering thread can be switched back to the main thread, and the step of controlling the main thread to load the page element to render the target page element is executed for the rest page elements to be rendered until all the page elements to be rendered are rendered. In this way, the process of loading all page elements to be rendered by the main thread is divided into a plurality of times, after part of page elements to be rendered are loaded each time, the part of page elements to be rendered are rendered, and the next loading and the step of rendering the page elements are continued after the rendering is completed, so that the situation that rendering tasks are blocked and the page is blocked due to excessive loading of the page elements for one time is reduced, and user experience is improved.
Based on the same conception, the present disclosure also provides a page rendering device 500, referring to fig. 5, fig. 5 is a block diagram of a page rendering device 500 according to an exemplary embodiment. The page rendering apparatus 500 includes:
a response module 501 configured to determine page elements to be rendered in response to a page change displayed by the browser;
the control module 502 is configured to control the main thread to load the page element, and determine that the loading of the target page element is completed within a preset duration;
a switching module 503 configured to switch the main thread currently executed to a rendering thread to render the target page element;
and the execution module 504 is configured to switch the currently executed rendering thread back to the main thread after the target page element is rendered, and execute the step of controlling the main thread to load the page element to render the target page element for the remaining page elements to be rendered until all the page elements to be rendered are rendered.
By the technical scheme, the page element to be rendered is determined in response to the page change displayed by the browser. On the basis, the loading of the target page element completed in the preset time period can be determined by controlling the time period of the main thread for loading the page element to be rendered at one time, namely controlling the main thread to carry out the loading task in the preset time period, so that the currently executed main thread can be switched to the rendering thread to render the target page element. After the target page element is rendered, the currently executed rendering thread can be switched back to the main thread, and the step of controlling the main thread to load the page element to render the target page element is executed for the rest page elements to be rendered until all the page elements to be rendered are rendered. In this way, the process of loading all page elements to be rendered by the main thread is divided into a plurality of times, after part of page elements to be rendered are loaded each time, the part of page elements to be rendered are rendered, and the next loading and the step of rendering the page elements are continued after the rendering is completed, so that the situation that rendering tasks are blocked and the page is blocked due to excessive loading of the page elements for one time is reduced, and user experience is improved.
Optionally, the switching module 503 is further configured to:
and under the condition that the actual time length of loading the target page element by the main thread is smaller than the preset time length, switching the currently executed main thread to a rendering thread to render the target page element.
Optionally, the switching module 503 is further configured to:
and calling a request idle callback interface to switch the currently executed main thread to a rendering thread to render the target page element under the condition that the actual time length of loading the target page element by the main thread is smaller than the preset time length.
Optionally, the response module 501 is further configured to:
determining that a page displayed by the browser changes under the condition that at least one monitoring page element in the page intersects a viewport of the page;
based on the at least one monitored page element, a page element to be rendered is determined.
Optionally, the monitoring page element is a scroll bar of the page, or is a page element registered in advance to the intersecting monitor, or is all page elements in the page.
Optionally, the monitoring page element is a page element pre-registered to the intersecting monitor, and the page rendering device 500 further includes a calling module configured to:
an intersection monitor is invoked to determine whether the monitor page element intersects a viewport of the page.
Optionally, the page element includes at least a chart element.
With respect to the page rendering apparatus 500 in the above-described embodiment, a specific manner in which each module performs an operation has been described in detail in the embodiment regarding the method, and will not be described in detail herein.
Fig. 6 is a block diagram of an electronic device 600, according to an example embodiment. As shown in fig. 6, the electronic device 600 may include: a processor 601, a memory 602. The electronic device 600 may also include one or more of a multimedia component 603, an input/output (I/O) interface 604, and a communication component 605.
The processor 601 is configured to control the overall operation of the electronic device 600 to perform all or part of the steps in the page rendering method described above. The memory 602 is used to store various types of data to support operations at the electronic device 600, which may include, for example, instructions for any application or method operating on the electronic device 600, as well as application-related data, such as contact data, transceived messages, pictures, audio, video, and the like. The Memory 602 may be implemented by any type or combination of volatile or nonvolatile Memory devices, such as static random access Memory (Static Random Access Memory, SRAM for short), electrically erasable programmable Read-Only Memory (Electrically Erasable Programmable Read-Only Memory, EEPROM for short), erasable programmable Read-Only Memory (Erasable Programmable Read-Only Memory, EPROM for short), programmable Read-Only Memory (Programmable Read-Only Memory, PROM for short), read-Only Memory (ROM for short), magnetic Memory, flash Memory, magnetic disk, or optical disk. The multimedia component 603 may include a screen and an audio component. Wherein the screen may be, for example, a touch screen, the audio component being for outputting and/or inputting audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signals may be further stored in the memory 602 or transmitted through the communication component 605. The audio assembly further comprises at least one speaker for outputting audio signals. The input/output interface 604 provides an interface between the processor 601 and other interface modules, which may be a keyboard, mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 605 is used for wired or wireless communication between the electronic device 600 and other devices. Wireless communication, such as Wi-Fi, bluetooth, near field communication (Near Field Communication, NFC for short), 2G, 3G, 4G, NB-IOT, eMTC, or other 5G, etc., or one or a combination of more of them, is not limited herein. The corresponding communication component 605 may thus comprise: wi-Fi module, bluetooth module, NFC module, etc.
In an exemplary embodiment, the electronic device 600 may be implemented by one or more application specific integrated circuits (Application Specific Integrated Circuit, abbreviated as ASIC), digital signal processors (Digital Signal Processor, abbreviated as DSP), digital signal processing devices (Digital Signal Processing Device, abbreviated as DSPD), programmable logic devices (Programmable Logic Device, abbreviated as PLD), field programmable gate arrays (Field Programmable Gate Array, abbreviated as FPGA), controllers, microcontrollers, microprocessors, or other electronic components for performing the page rendering methods described above.
In another exemplary embodiment, a computer readable storage medium is also provided, comprising program instructions which, when executed by a processor, implement the steps of the page rendering method described above. For example, the computer readable storage medium may be the memory 602 described above including program instructions executable by the processor 601 of the electronic device 600 to perform the page rendering method described above.
In another exemplary embodiment, a computer program product is also provided, comprising a computer program executable by a programmable apparatus, the computer program having code portions for performing the above-described page rendering method when executed by the programmable apparatus.
The preferred embodiments of the present disclosure have been described in detail above with reference to the accompanying drawings, but the present disclosure is not limited to the specific details of the above embodiments, and various simple modifications may be made to the technical solutions of the present disclosure within the scope of the technical concept of the present disclosure, and all the simple modifications belong to the protection scope of the present disclosure.
In addition, the specific features described in the foregoing embodiments may be combined in any suitable manner, and in order to avoid unnecessary repetition, the present disclosure does not further describe various possible combinations.
Moreover, any combination between the various embodiments of the present disclosure is possible as long as it does not depart from the spirit of the present disclosure, which should also be construed as the disclosure of the present disclosure.
Claims (10)
1. A page rendering method, characterized in that the page rendering method comprises:
determining page elements to be rendered in response to a page change displayed by the browser;
controlling a main thread to load the page element, and determining a target page element which is loaded completely within a preset time period;
switching the main thread currently executed to a rendering thread to render the target page element;
after the target page element is rendered, the rendering thread which is currently executed is switched back to the main thread, and the step of controlling the main thread to load the page element to render the target page element is executed aiming at the rest page elements to be rendered until all the page elements to be rendered are rendered.
2. The page rendering method of claim 1, wherein the switching the currently executing main thread to a rendering thread to render the target page element comprises:
and under the condition that the actual time length of loading the target page element by the main thread is smaller than the preset time length, switching the currently executed main thread to a rendering thread to render the target page element.
3. The page rendering method of claim 2, wherein the switching the currently executing main thread to a rendering thread to render the target page element comprises:
and calling a request idle callback interface to switch the currently executed main thread to a rendering thread to render the target page element under the condition that the actual time length of loading the target page element by the main thread is smaller than the preset time length.
4. The page rendering method of claim 1, wherein the determining the page element to be rendered in response to the page change displayed by the browser comprises:
determining that a page displayed by the browser changes under the condition that at least one monitoring page element in the page intersects a viewport of the page;
based on the at least one monitored page element, a page element to be rendered is determined.
5. The page rendering method according to claim 4, wherein the monitor page element is a scroll bar of the page, or is a page element registered in advance to an intersection monitor, or is all page elements in the page.
6. The page rendering method of claim 5, wherein the monitor page element is a page element pre-registered to an intersection monitor, the method further comprising:
an intersection monitor is invoked to determine whether the monitor page element intersects a viewport of the page.
7. The page rendering method of any one of claims 1-6, wherein the page elements include at least chart elements.
8. A page rendering device, characterized in that the page rendering device comprises:
a response module configured to determine page elements to be rendered in response to a page change displayed by the browser;
the control module is configured to control the main thread to load the page element and determine the target page element which is loaded completely within a preset duration;
a switching module configured to switch the main thread currently executing to a rendering thread to render the target page element;
and the execution module is configured to switch the currently executed rendering thread back to the main thread after the target page element is rendered, and execute the step of controlling the main thread to load the page element to render the target page element for the rest page elements to be rendered until all the page elements to be rendered are rendered.
9. A non-transitory computer readable storage medium having stored thereon a computer program, characterized in that the program when executed by a processor implements the steps of the page rendering method of any of claims 1-7.
10. An electronic device, comprising:
a memory having a computer program stored thereon;
a processor for executing the computer program in the memory to implement the steps of the page rendering method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310956705.XA CN116661939A (en) | 2023-07-31 | 2023-07-31 | Page rendering method and device, storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310956705.XA CN116661939A (en) | 2023-07-31 | 2023-07-31 | Page rendering method and device, storage medium and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116661939A true CN116661939A (en) | 2023-08-29 |
Family
ID=87721107
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310956705.XA Pending CN116661939A (en) | 2023-07-31 | 2023-07-31 | Page rendering method and device, storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116661939A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018119602A1 (en) * | 2016-12-26 | 2018-07-05 | 深圳前海达闼云端智能科技有限公司 | Rendering method and device |
| CN110083417A (en) * | 2019-04-04 | 2019-08-02 | 天津字节跳动科技有限公司 | User interface response method and device |
| CN110347427A (en) * | 2019-07-08 | 2019-10-18 | 北京明略软件系统有限公司 | The optimization method and device of web page code |
| CN110909279A (en) * | 2019-11-19 | 2020-03-24 | 广州至真信息科技有限公司 | Webpage rendering method and device, computer equipment and storage medium |
| CN112347408A (en) * | 2021-01-07 | 2021-02-09 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
-
2023
- 2023-07-31 CN CN202310956705.XA patent/CN116661939A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018119602A1 (en) * | 2016-12-26 | 2018-07-05 | 深圳前海达闼云端智能科技有限公司 | Rendering method and device |
| CN110083417A (en) * | 2019-04-04 | 2019-08-02 | 天津字节跳动科技有限公司 | User interface response method and device |
| CN110347427A (en) * | 2019-07-08 | 2019-10-18 | 北京明略软件系统有限公司 | The optimization method and device of web page code |
| CN110909279A (en) * | 2019-11-19 | 2020-03-24 | 广州至真信息科技有限公司 | Webpage rendering method and device, computer equipment and storage medium |
| CN112347408A (en) * | 2021-01-07 | 2021-02-09 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108376094B (en) | Notification message display method and device, computer equipment and storage medium | |
| CN110020323B (en) | Page switching method and system for hybrid application, computer equipment and storage medium | |
| CN106201409B (en) | Processing method and system for application program operation interface | |
| CN105955802B (en) | Application running method of mobile terminal and mobile terminal | |
| CN110704136A (en) | Rendering method of small program assembly, client, electronic device and storage medium | |
| US10768947B2 (en) | Method for interface refresh synchronization,terminal device, and non-transitory computer-readable storage medium | |
| CN114748873B (en) | Interface rendering method, device, equipment and storage medium | |
| CN115309516A (en) | Application life cycle detection method and device and computer equipment | |
| CN108933947B (en) | Bullet screen display method and device | |
| CN114490126A (en) | Page processing method and device, electronic equipment and storage medium | |
| CN112947916B (en) | Method, apparatus, device and storage medium for implementing online canvas | |
| CN104102367A (en) | Information processing method and device | |
| CN112799768A (en) | Method and device for realizing horse race lamp and electronic equipment | |
| CN116661939A (en) | Page rendering method and device, storage medium and electronic equipment | |
| CN109309874B (en) | Focus updating method and device | |
| CN116661964A (en) | Task processing method and device and electronic equipment | |
| CN113114731B (en) | Task processing method, device, server and storage medium | |
| CN105653143B (en) | Processing method of application program operation interface and mobile terminal for realizing method | |
| CN110737320B (en) | Power consumption detection method and device, electronic equipment and storage medium | |
| CN111782381A (en) | Task management method and device, mobile terminal and storage medium | |
| CN113610699A (en) | Hardware layer rendering scheduling method, device, equipment and storage medium | |
| CN113721820A (en) | Man-machine interaction method and device and electronic equipment | |
| CN112948730A (en) | Webpage data display method and device, storage medium and electronic equipment | |
| CN110908736A (en) | 3D scene loading method, device, equipment and storage medium | |
| US20190163762A1 (en) | Reflow of user interface elements |
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 |