CN115480856A - Method for monitoring front-end page element display, electronic equipment and storage medium - Google Patents
Method for monitoring front-end page element display, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN115480856A CN115480856A CN202211115500.0A CN202211115500A CN115480856A CN 115480856 A CN115480856 A CN 115480856A CN 202211115500 A CN202211115500 A CN 202211115500A CN 115480856 A CN115480856 A CN 115480856A
- Authority
- CN
- China
- Prior art keywords
- page
- page element
- view
- sending
- information request
- 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
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
- G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- 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/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/546—Message passing systems or structures, e.g. queues
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2209/00—Indexing scheme relating to G06F9/00
- G06F2209/54—Indexing scheme relating to G06F9/54
- G06F2209/548—Queue
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Mathematical Physics (AREA)
- Quality & Reliability (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides a method and a device for monitoring front-end page element display, an electronic device and a readable storage medium, and is characterized by comprising the following steps: s1, judging whether a front-end page view is in a rolling state; s2, if the front-end page view is not in a rolling state, sending an information request to a page element, wherein the information request comprises an instruction of calculating the position of the page element; s3, the page element acquires an information request, and whether the page element is in a page view range is judged according to a position calculation instruction of the page element; s4, if the page element is in the page view range, sending a message queue of the page element to a first page event, and processing the page element by the first page event according to the message queue; and S5, the first page event sends the page element processing information to the server. By adopting the method and the device, the performance of the front-end page can be improved, and the accuracy of page display can be improved.
Description
Technical Field
The present invention relates to the technical field of front-end page processing, and in particular, to a method for monitoring a display of a front-end page element, an electronic device, and a storage medium.
Background
For the designed page elements, the size is often much larger than that of the front-end page view, especially in the case of the page view of the mobile phone APP, the view of the mobile phone page is much smaller than that of the designed page elements, the backend personnel need to process the page elements according to the actions of clicking, browsing statistics and the like of the user on the front-end page, the display of the page elements needs to depend on the scrolling operation of the user, and the elements to be displayed appear in the case of the mobile phone page view, the mobile phone sends a request to the server to notify the displayed elements, whereas in the prior art, even if the page view is in the inertial scrolling state, all the page elements need to be kept in a monitoring state, and the monitoring state can cause the page scrolling to be stuck and experience to be poor, and on the other hand, all the elements are in a state that positions need to be calculated due to the elements not being distinguished from all the page elements, which further affects the fluency of the front-end page.
The invention mainly aims to solve the technical problem of front-end page element monitoring and displaying, and the method comprises the steps of firstly judging whether a page view is in a rolling state, not monitoring page elements in the rolling state, calculating the position of a page when the page view is not in the rolling state, ensuring the page elements in a page view range to be displayed, and then sending the processing condition of page elements by page events to a server for recording the processing condition of the page elements. According to the invention, the page elements are processed in a componentization mode, and the page is firstly monitored not to be in a rolling state, and then the information request is sent to process the page elements within the page view range, so that the page display performance can be improved.
Disclosure of Invention
In order to overcome the defects of the prior art, the invention provides a method and a device for monitoring the display of front-end page elements, an electronic device and a computer-readable storage medium.
A first aspect of the present application provides a method for monitoring front-end page element display, including:
s1, judging whether a front-end page view is in a rolling state;
s2, if the front-end page view is not in a rolling state, sending an information request to a page element, wherein the information request comprises an instruction of calculating the position of the page element;
s3, a page element acquires an information request, and whether the page element is in a page view range is judged according to a position calculation instruction of the page element;
s4, if the page element is in the page view range, sending a message queue of the page element to the first page event, and processing the page element by the server according to the message queue;
and S5, the first page event sends the page element processing information to the server.
Further, the method for judging whether the front end page view is in the rolling state comprises the following steps:
s11, acquiring a rolling distance of the page view within first preset time or a distance difference value from the top of the page view to a top element of the page within second preset time;
s12, judging whether the rolling distance or the distance difference value is larger than 0;
and S13, if the rolling distance or the distance difference is larger than 0, the page view is still in a rolling state, otherwise, the page view is not in the rolling state.
Further, the step S1 is followed by not sending the information request to the page element if the front end page view is in the scrolling state.
Further, the method for determining that the page element is in the page view range in S3 includes:
s31, acquiring a distance L1 from the top of a page view to a page top element, a height S of the page view, a height H of the view page element and a distance L2 from the top of the view page element to the page top element;
and S32, if the L2 is greater than or equal to the L1 and the L1+ S is greater than the L2+ H, the page element of the view is positioned below the topmost end of the page view and above the bottommost end of the page view, namely the page element is positioned in the page view range.
Further, the S4 further includes performing message queue sorting on the page elements according to a first preset rule.
Further, the first preset rule includes a distance between a page element and the top of the page view, a priority of the page element, and a time sequence of the page element for obtaining the information request.
Further, the processing, by the first page event in S4, the page element according to the message queue includes: and displaying, counting and analyzing the page elements.
A second aspect of the present application provides an apparatus for monitoring front-end page element display, including:
the first judgment module is used for judging whether the front end page view is in a rolling state or not;
the first sending module is used for sending an information request to the page element if the front-end page view is not in a rolling state, wherein the information request comprises an instruction of calculating the position of the page element;
the second judgment module is used for the page element to acquire the information request and judge whether the page element is in the page view range according to the instruction of calculating the position of the page element;
the page element processing module is used for sending a message queue of the page element to the first page event if the page element is in the page view range, and the server processes the page element according to the message queue;
and the second sending module is used for sending the page element processing information to the server by the first page event.
A third aspect of the present application provides an electronic device, comprising: a processor, and a memory communicatively coupled to the processor;
the memory stores computer-executable instructions;
the processor executes computer execution instructions stored in the memory to implement the above-described method for displaying page elements of the listening front end.
A fourth aspect of the present application provides a computer-readable storage medium, where a computer-executable instruction is stored in the computer-readable storage medium, and when the computer-executable instruction is executed by a processor, the computer-readable storage medium is configured to implement the above method for displaying page elements in a listening front end.
The invention has the beneficial effects that: the problem that the page is jammed due to frequent monitoring of page rolling is solved, the display event is automatically processed through the attribute field of the html element, the front-end research and development cost is greatly reduced in a plug-in mode, and the performance of the front-end page can be greatly improved.
Drawings
Fig. 1 is a flowchart illustrating a method for monitoring front-end page element display according to the present invention.
FIG. 2 is a block diagram of a device for displaying page elements in front of snoops according to the present invention.
Detailed Description
For a clearer understanding of the contents of the present invention, reference will be made to the accompanying drawings and examples.
It is to be understood that such description is merely illustrative and not intended to limit the scope of the present invention. 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 invention. The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. The terms "a", "an" and "the", and the like, as used herein, are also intended to include the meaning of "a plurality" and "the" unless the context clearly indicates otherwise. Furthermore, the terms "comprises," "comprising," and the like, as used herein, specify the presence of stated features, steps, operations, and/or components, but do not preclude the presence or addition of one or more other features, steps, operations, or components.
All terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art unless otherwise defined. It is noted that the terms used herein should be interpreted as having a meaning that is consistent with the context of this specification and should not be interpreted in an idealized or overly formal sense. The present invention is an improvement over the prior art, and therefore, the parts not described in the present application are implemented in the prior art.
A first aspect of the present application provides a method for monitoring front-end page element display, including:
s1, judging whether a front end page view is in a rolling state;
further, the method for judging whether the front page view is in the rolling state comprises the following steps:
s11, acquiring a rolling distance of the page view within first preset time or a distance difference value from the top of the page view to a page top element within second preset time;
s12, judging whether the rolling distance or the distance difference value is larger than 0;
and S13, if the rolling distance or the distance difference is larger than 0, the page view is still in a rolling state, otherwise, the page view is not in the rolling state.
Further, the step S1 is followed by not sending the information request to the page element if the front end page view is in the scrolling state.
The method includes the steps that modular packaging is conducted on the basis of a vue framework, a global listener is registered in a page, when the page is not in a rolling state, the rolling state includes that a user operates page rolling and page views roll due to inertia, however, in any case, a page element does not stop rolling and does not send broadcast notification to the page element, and the page element can monitor whether the page rolls or not.
Specifically, the page element determining whether the page view is in the rolling state may determine whether the page element is in the rolling state according to whether the page view is rolling within a first preset time or whether a distance difference between a top of the page view and a top element of the page within a second preset time is greater than 0, where the determining method of the distance difference between the top of the page view and the top element of the page within the second preset time includes: acquiring the distance between the top of the page view and the top element of the page at a first time point as a parameter p1, acquiring the distance between the top of the page view and the top element of the page again as a parameter p2 after a second preset time interval, judging whether the difference value between the parameter p1 and the parameter p2 is greater than 0 by using a delayer, if the rolling distance or the difference value between the parameters is greater than 0, the page view is still in a rolling state, otherwise, the page view is not in the rolling state. The first preset time and the second preset time can be preset according to requirements, such as 1 second time and the like, so that the basic user experience of the user is not different.
S2, if the front-end page view is not in a rolling state, sending an information request to a page element, wherein the information request comprises an instruction of calculating the position of the page element;
the method is based on a vue frame, HTML page element attributes can monitor a page rolling state, calculate page elements and send requests to page events, if a page view is not in the rolling state, information requests are sent to the page elements in the form of broadcasting and the like, and the method for sending the information requests is not limited.
S3, the page element acquires an information request, and whether the page element is in a page view range is judged according to a position calculation instruction of the page element;
further, the method for determining that the page element is in the page view range in S3 includes:
s31, acquiring a distance L1 from the top of a page view to a page top element, a height S of the page view, a height H of the view page element and a distance L2 from the top of the view page element to the page top element;
and S32, if the L2 is greater than or equal to the L1 and the L1+ S is greater than the L2+ H, the page element of the view is positioned below the topmost end of the page view and above the bottommost end of the page view, namely the page element is positioned in the page view range.
When the page element monitors the page scrolling condition, the page element does not need to calculate the position of the page element in the page view, and when the page is determined not to be in the scrolling state, the page element starts to calculate the position of the page view.
S4, if the page element is in the page view range, sending a message queue of the page element to the first page event, and processing the page element by the server according to the message queue;
further, the step S4 further includes performing message queue sorting on the page elements according to a first preset rule.
Further, the first preset rule includes a distance between a page element and the top of the page view, a priority of the page element, and a time sequence of the page element for obtaining the information request.
Further, the processing, by the first page event in S4, the page element according to the message queue includes: and displaying, counting and analyzing the page elements.
And S5, the first page event sends the page element processing information to the server.
If the page element is within the page view range, the page element needs to be displayed, the page element informs a first page event to process the page element through a callback function, and the first page event processes the page element according to the setting of the page element. In the process of page element display, the messages processed by the page elements can be arranged according to the time of firstly calculating the positions of the page elements or the priority of the page elements, the page elements are processed according to the sequence of received element message queues in the first page, and the page element message queues have a certain sequence, so that the pressure of message concurrency can be reduced, the page display can be better performed, and the page performance can be improved in the optimal mode of the application. The first page event corresponds to an operation request of a user for the page elements, the page elements are displayed according to the operation request of the user, the display, statistics and analysis conditions of the page elements are sent to a server to record the processing conditions of the page elements, and therefore a back-end operator can perform layout design on the page elements again according to the operation request of the user.
A second aspect of the present application provides an apparatus for monitoring front-end page element display, including:
the first judgment module is used for judging whether the front end page view is in a rolling state or not;
the first sending module is used for sending an information request to the page element if the front-end page view is not in a rolling state, wherein the information request comprises a command of calculating the position of the page element;
the second judgment module is used for the page element to acquire the information request and judge whether the page element is in the page view range according to the instruction of calculating the position of the page element;
the page element processing module is used for sending a message queue of the page element to the first page event if the page element is in the page view range, and the server processes the page element according to the message queue;
and the second sending module is used for sending the page element processing information to the server by the first page event.
A third aspect of the present application provides an electronic device, comprising: a processor, and a memory communicatively coupled to the processor;
the memory stores computer-executable instructions;
the processor executes computer execution instructions stored in the memory to implement the above-described method for displaying page elements of the listening front end.
A fourth aspect of the present application provides a computer-readable storage medium, where a computer-executable instruction is stored in the computer-readable storage medium, and when the computer-executable instruction is executed by a processor, the computer-readable storage medium is configured to implement the above method for displaying page elements in a listening front end.
The invention has the beneficial effects that: the problem that the page is jammed due to frequent monitoring of page rolling is solved, the display event is automatically processed through the attribute field of the html element, the front-end research and development cost is greatly reduced in a plug-in mode, and the performance of the front-end page can be greatly improved.
Those skilled in the art will further appreciate that the algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that such functions may be performed in either hardware or software, depending upon the particular application and design constraints imposed on the technology, and that such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including the preferred embodiment and all changes and modifications that fall within the scope of the invention.
The above description is only for the preferred embodiment of the present invention, but the scope of the present invention 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 invention are also within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (10)
1. A method for monitoring front-end page element presentation, comprising:
s1, judging whether a front-end page view is in a rolling state;
s2, if the front-end page view is not in a rolling state, sending an information request to a page element, wherein the information request comprises an instruction of calculating the position of the page element;
s3, the page element acquires an information request, and whether the page element is in a page view range is judged according to a position calculation instruction of the page element;
s4, if the page element is in the page view range, sending a message queue of the page element to the first page event, and processing the page element by the server according to the message queue;
and S5, the first page event sends the page element processing information to the server.
2. The method of claim 1, wherein determining whether the front end page view is in a scrolling state comprises:
s11, acquiring a rolling distance of the page view within first preset time or a distance difference value from the top of the page view to a top element of the page within second preset time;
s12, judging whether the rolling distance or the distance difference value is larger than 0;
and S13, if the rolling distance or the distance difference is larger than 0, the page view is still in a rolling state, otherwise, the page view is not in the rolling state.
3. The method of claim 1, wherein S1 is followed by not sending a request for information to a page element if the front end page view is in a scrolling state.
4. The method according to claim 1, wherein the step of determining in S3 that the page element is in the page view range comprises:
s31, acquiring a distance L1 from the top of a page view to a page top element, a height S of the page view, a height H of the view page element and a distance L2 from the top of the view page element to the page top element;
and S32, if the L2 is greater than or equal to the L1 and the L1+ S is greater than the L2+ H, the page element of the view is positioned below the topmost end of the page view and above the bottommost end of the page view, namely the page element is positioned in the page view range.
5. The method according to claim 1, wherein S4 further comprises sorting page elements in a message queue according to a first preset rule.
6. The method according to claim 5, wherein the first preset rule comprises a distance size of a page element from the top of a page view, a priority of a page element, and a time sequence of a page element to obtain information request.
7. The method according to claim 1, wherein the processing of the page element by the first page event according to the message queue in S4 comprises: and displaying, counting and analyzing the page elements.
8. An apparatus for listening for front-end page element presentations, comprising:
the first judgment module is used for judging whether the front end page view is in a rolling state or not;
the first sending module is used for sending an information request to the page element if the front-end page view is not in a rolling state, wherein the information request comprises an instruction of calculating the position of the page element;
the second judgment module is used for the page element to acquire the information request and judge whether the page element is in the page view range according to the instruction of calculating the position of the page element;
the page element processing module is used for sending a message queue of the page element to the first page event if the page element is in the page view range, and the server processes the page element according to the message queue;
and the second sending module is used for sending the page element processing information to the server by the first page event.
9. An electronic device, comprising: a processor, and a memory communicatively coupled to the processor;
the memory stores computer execution instructions;
the processor executes computer-executable instructions stored by the memory to implement the method of any of claims 1-7.
10. A computer-readable storage medium having computer-executable instructions stored therein, which when executed by a processor, are configured to implement the method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211115500.0A CN115480856A (en) | 2022-09-14 | 2022-09-14 | Method for monitoring front-end page element display, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211115500.0A CN115480856A (en) | 2022-09-14 | 2022-09-14 | Method for monitoring front-end page element display, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115480856A true CN115480856A (en) | 2022-12-16 |
Family
ID=84392488
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211115500.0A Pending CN115480856A (en) | 2022-09-14 | 2022-09-14 | Method for monitoring front-end page element display, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115480856A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116088997A (en) * | 2023-04-07 | 2023-05-09 | 深圳市微克科技有限公司 | Page scrolling display method and device, storage medium and electronic equipment |
-
2022
- 2022-09-14 CN CN202211115500.0A patent/CN115480856A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116088997A (en) * | 2023-04-07 | 2023-05-09 | 深圳市微克科技有限公司 | Page scrolling display method and device, storage medium and electronic equipment |
| CN116088997B (en) * | 2023-04-07 | 2023-07-21 | 深圳市微克科技有限公司 | Page scrolling display method and device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105389258B (en) | Program detection method and device | |
| US8296427B2 (en) | System and method for processing user interface events | |
| JP5646359B2 (en) | Calculation apparatus and method | |
| CN115480856A (en) | Method for monitoring front-end page element display, electronic equipment and storage medium | |
| WO2015067207A1 (en) | Method and device for sharing live desktop information | |
| CN102436339A (en) | Display control method and device for modal dialog boxes | |
| CN106973319B (en) | Virtual gift display method and system | |
| US10521176B2 (en) | Integrated learning using multiple devices | |
| CN111078567B (en) | Report generation method, terminal and storage medium of automatic test platform | |
| CN107145269B (en) | Data rotation method and device | |
| CN103793436A (en) | Page browsing method and browser | |
| US20090100440A1 (en) | Display of data used for system performance analysis | |
| CN102662659A (en) | Method and system for processing image display | |
| US8429556B2 (en) | Chunking data records | |
| CN111949511A (en) | Application program pause processing method and device, terminal and storage medium | |
| JP2019125053A (en) | Information terminal device, information processing system, and display control program | |
| US20060195800A1 (en) | Apparatus for displaying screen and recording medium recording a program thereof | |
| US10432490B2 (en) | Monitoring single content page application transitions | |
| CN107360389B (en) | Video communication method, device and terminal | |
| CN110275785B (en) | Data processing method and device, client and server | |
| CN107038053B (en) | Statistical method and device for loading webpage pictures and mobile terminal | |
| CN108132716A (en) | Method of adjustment, equipment and the computer readable storage medium of browse page | |
| CN105278934B (en) | Method and system for processing appearance of windows update popup window | |
| CN114168130A (en) | Buried point data reporting method and device, electronic equipment and storage medium | |
| CN113220379A (en) | Task processing method and device, electronic equipment and readable storage medium |
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 |