Page processing method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a page processing method and device, electronic equipment and a storage medium. The page processing method comprises the steps of determining at least one target element of a first page; under the condition that the first page is loaded, first time when the target element is monitored to appear is determined; based on a difference value between the first time and a second time, determining performance data corresponding to the performance index of the target element, the second time being the time for starting to load the first page; and reporting the performance data.

Description

Technical Field

[0001] The present disclosure relates to but is not limited to the field of data processing technology, and in particular to a page processing method and device, an electronic device, and a storage medium. Background Art

[0002] At present, the user experience of using a page can be reflected by evaluating a series of performance indicators of the page, for example, the user experience of using a page can be reflected by performance indicators such as First Paint (FP), First Contentful Paint (FCP) and / or Largest Contentful Paint (LCP). However, in actual application scenarios, these current performance indicators cannot truly reflect the user experience and cannot really provide users with a good experience. Summary of the invention

[0003] The embodiments of the present disclosure provide a page processing method and device, an electronic device, and a storage medium.

[0004] A first aspect of an embodiment of the present disclosure provides a page processing method, including:

[0005] determining at least one target element of the first page;

[0006] When the first page is loaded, determine the first time the target element appears;

[0007] Determining performance data corresponding to the performance indicator of the target element based on a difference between the first time and the second time, wherein the second time is the time when the first page starts to be loaded;

[0008] Report performance data.

[0009] In some embodiments, determining the first time when the target element appears is monitored includes:

[0010] In response to monitoring the target element, determining the first time the target element appears; or,

[0011] In response to monitoring a predetermined event change, determining the first time that the target element appears.

[0012] In some embodiments, the method further comprises: determining a predetermined condition for the target element to appear;

[0013] Monitoring the target element includes: determining that the target element is monitored when a predetermined condition is met.

[0014] In some embodiments, the method further includes: setting a first identifier for the target element in the first page, wherein the first identifier is used to indicate the target element or to indicate a target element of a predetermined type;

[0015] The target element is monitored, comprising: in a case where an element with a first flag set is monitored, determining that the target element is monitored.

[0016] In some embodiments, monitoring the target element includes one of the following:

[0017] In the case where a Cascading Style Sheets (CSS) selector in a Software Development Kit (SDK) monitors a first identifier, determining that a target element is monitored;

[0018] Based on the SDK monitoring that the element appearing on the first page is an element in a list, it is determined that a target element is monitored, wherein the list is a list set in the SDK and used to indicate at least one target element.

[0019] In some embodiments, the method further comprises one of the following:

[0020] Monitoring the first identifier based on a first CSS selector in the SDK, wherein the first CSS selector is a default CSS selector set by the SDK;

[0021] During the process of initializing the SDK, a second CSS selector is set in the SDK; and the first identifier is monitored based on the second CSS selector;

[0022] After initializing the SDK, the first CSS selector in the SDK is modified to the second CSS selector; and monitoring of the first identifier based on the first CSS selector and / or monitoring of the first identifier based on the second CSS selector are stopped.

[0023] In some embodiments, the method further comprises one of the following:

[0024] During the SDK initialization process, listen for the elements that appear on the first page based on the list;

[0025] After initializing the SDK, listen for elements that appear on the first page based on the list.

[0026] In some embodiments, in response to monitoring a predetermined event change, determining the first time when the target element appears includes:

[0027] In response to monitoring a change of a first type of predetermined event, determining a monitoring target element, wherein the first type of predetermined event is a DOM event; determining the time when the target element is monitored as a first time; or,

[0028] In response to monitoring a change in a second type of predetermined event related to the target element, determining a first time when the target element appears, wherein the second type of predetermined event is a storage type event and / or a communication type event.

[0029] In some embodiments, reporting performance data includes one of the following:

[0030] When the target element appears, report the performance data;

[0031] When the target element has appeared but has not changed within a first predetermined time, reporting performance data;

[0032] Acquiring the performance data before the end time of the second scheduled time, and reporting the performance data when the end time of the second scheduled time is reached;

[0033] The performance data is obtained before the end time of the second scheduled time is reached, and when the performance data is obtained, the performance data is reported.

[0034] In some embodiments, the method further comprises:

[0035] When the end time of the second predetermined time is reached and the performance data is not obtained, abnormal data is reported and / or the monitoring of the target element is stopped, wherein the abnormal data is used to indicate that an abnormality occurs in the monitored target element; or

[0036] After reporting the performance data, stop monitoring the target element.

[0037] A second aspect of an embodiment of the present disclosure provides a page processing device, including:

[0038] A first processing module, configured to determine at least one target element of a first page;

[0039] The second processing module is configured to determine the first time when the target element appears when the first page is loaded;

[0040] A first processing module is configured to determine performance data corresponding to the performance indicator of the target element based on a difference between a first time and a second time, wherein the second time is a time when the first page starts to be loaded;

[0041] The reporting module is configured to report performance data.

[0042] A fifth aspect of the present disclosure provides an electronic device, including:

[0043] processor;

[0044] a memory for storing processor-executable instructions;

[0045] The processor is configured to implement any page processing method of the embodiment of the present disclosure when running executable instructions.

[0046] A sixth aspect of an embodiment of the present disclosure provides a computer-readable storage medium, wherein the readable storage medium stores an executable program, wherein the executable program, when executed by a processor, implements any page processing method of an embodiment of the present disclosure.

[0047] A seventh aspect of the embodiments of the present disclosure provides a computer program product, which includes a computer program or instructions. When the computer program product or instructions are executed by a processor, the processing method of any page of the embodiments of the present disclosure is implemented.

[0048] In an embodiment of the present disclosure, at least one target element of the first page can be determined, and when the first page is loaded, the first time when the target element is monitored to appear can be determined; based on the difference between the first time and the second time, the performance data corresponding to the performance indicator of the target element can be determined, wherein the second time is the time when the first page starts to be loaded; and the performance data can be reported. In this way, a performance indicator can be determined for the time taken for the target element to appear (i.e., the rendering time), and the performance data of the performance indicator of the target element can be reported, so that the performance of the target element can be subsequently analyzed and / or optimized in a targeted manner. In addition, if the target element is an element that the user is concerned about, and if the performance of the target element is subsequently optimized, the page performance can be significantly improved, thereby improving the user experience.

[0049] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0051] Figure 1 It is a schematic diagram showing the appearance of an LCP element in a page according to an exemplary embodiment.

[0052] Figure 2 The figure is a schematic diagram showing the appearance of a target element in a page according to an exemplary embodiment.

[0053] Figure 3 The figure is a flowchart of a first page processing method according to an exemplary embodiment.

[0054] Figure 4 The invention is an entity relationship diagram of a performance indicator according to an exemplary embodiment.

[0055] Figure 5 It is a flowchart of a second page processing method according to an exemplary embodiment.

[0056] Figure 6 It is a flowchart of a third page processing method according to an exemplary embodiment.

[0057] Figure 7 The figure is a schematic diagram of a code for reporting performance data according to an exemplary embodiment.

[0058] Figure 8 The figure is a schematic diagram showing performance data displayed on an APM according to an exemplary embodiment.

[0059] Fig. 9 The figure is a schematic diagram showing a newly added performance indicator on an APM according to an exemplary embodiment.

[0060] Fig.10 The diagram is a schematic diagram showing an icon displaying performance data according to an exemplary embodiment.

[0061] Fig.11 It is a flowchart of a fourth page processing method according to an exemplary embodiment.

[0062] Fig.12 It is a flowchart of a fifth page processing method according to an exemplary embodiment.

[0063] Fig.13 It is a flowchart of a sixth page processing method according to an exemplary embodiment.

[0064] Fig.14 The figure is a schematic diagram of the structure of a device for processing a page according to an exemplary embodiment.

[0065] Fig.15 The diagram is a schematic structural diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0066] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the embodiments of the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the embodiments of the present disclosure as detailed in the appended claims.

[0067] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0068] Office Application Performance Management (APM): Used to monitor and manage enterprise application performance to ensure that applications remain efficient, reliable, and meet user needs. Application performance management involves collecting and / or analyzing performance data to identify potential bottlenecks and problems, and then taking appropriate measures to optimize.

[0069] Document Object Model (DOM): A programming interface for representing and manipulating web documents.

[0070] Custom DOM Paint (CDP): indicates the time it takes for user-defined DOM elements to appear on the page.

[0071] Among them, CDP is a performance indicator involved in a page processing method provided in an embodiment of the present disclosure.

[0072] Software Development Kit (SDK): An integrated software development tool that helps developers create applications for a specific platform (such as an operating system, hardware device, and / or software framework). The SDK typically includes a set of precompiled libraries, application programming interfaces (APIs), documentation, sample code, and / or debugging tools that can help developers build and deploy applications more quickly.

[0073] The following is an explanation of some performance indicators of the front-end web page:

[0074] First Paint (FP): The time when users begin to see the page content.

[0075] First Contentful Paint (FCP): refers to the time from when the page starts loading to when the first content (such as text, pictures, etc.) is rendered and appears on the screen.

[0076] First Meaningful Paint (FMP): The time point from when the page starts loading to when it presents meaningful content to the user. This meaningful content is usually the moment when the main layout structure or key information of the page begins to be displayed, such as the page title, navigation bar, main text content or important images begin to appear.

[0077] Time to Interactive (TTI): refers to the time from when the page starts loading to when the user can effectively interact with the page (such as clicking a button, entering text, etc.).

[0078] HTML loading completion time (DOMContentLoaded): refers to the time from when the page starts loading to when the browser parses the DOM tree and triggers the DOMContentLoaded event.

[0079] Page Load Time: refers to the time from when the page starts loading to when all resources (including images, CSS, JS, etc.) are fully loaded.

[0080] Page response time (Time to First Byte, TTFB): refers to the time it takes from the browser sending a request to receiving the first byte of the server's response data.

[0081] First Input Delay (FID): The delay from the time a user first interacts with a page (e.g., clicking a button, link, or using a custom JavaScript-driven control) to the time the browser can actually start processing the response to these events. Exemplarily, the first input delay is also known as the first interaction time; the first interaction time refers to the delay time of the user's first interactive operation during the page loading phase.

[0082] Cumulative Layout Shift (CLS): Measures the unstable movement of elements on the page. Lower values ​​indicate more stable pages.

[0083] Largest Contentful Paint (LCP): Indicates the time it takes for the largest content element on the page to be rendered. LCP focuses on which element is the largest and most meaningful to the user during the web page loading process, and then measures the time from the start of the page loading to the time when this largest content element is fully displayed in the viewport. This largest content element is usually a large picture, a video, or a large block of text.

[0084] In some embodiments, when optimizing performance of a project, LCP is used as the main performance indicator for evaluating user experience in the project, but it is found that it may not truly reflect the user's actual experience. Figure 1 As shown, the LCP element has appeared in the page, but a large area of ​​blank content appears.

[0085] In some embodiments, the rendering time of the target element may be more suitable as a performance indicator. Figure 2 As shown, the largest content element indicated by LCP is rendered, but not much content appears on the page. In practice, the appearance of the target element can better reflect the performance of the page. Therefore, the time consumption of the target element may be more appropriate as a performance indicator of the page.

[0086] like Figure 3 As shown, the embodiment of the present disclosure provides a method for processing a page, comprising the following steps:

[0087] Step 11: Determine at least one target element of the first page;

[0088] Step 12: When the first page is loaded, determine the first time the target element appears;

[0089] Step 13: Determine the performance data corresponding to the performance indicator of the target element based on the difference between the first time and the second time; wherein the second time is the time when the first page starts to be loaded;

[0090] Step 14: Report performance data.

[0091] The page processing method provided in the embodiment of the present disclosure may be executed by an electronic device, which may include various terminals or servers. For example, the electronic device may include but is not limited to at least one of the following: a mobile phone, a computer, a tablet computer, a smart wearable device, a vehicle-mounted device, a smart home device, and a smart office device.

[0092] In some embodiments, the page can be any web page. For example, the web page can be a web page of any website or any browser page, such as but not limited to a web browser (Internet Explorer, IE) page, a 360 browser page, a Google page or a Firefox page.

[0093] In other embodiments, the page may be a document page. For example, the document page may be a page in a text document, a page in an electronic form, or a page of a slide in a presentation document.

[0094] This is just an example, and the present disclosure does not need to limit web pages and document pages.

[0095] In some embodiments, the first page can be any page or a specified page. For example, the first page is a page of a preset website opened by a browser, wherein the first page of the website opened can be specified as the first page, or the Nth page of the preset website opened can be specified as the first page, where N is an integer greater than 0.

[0096] It should be noted that a page is usually composed of objects, which are organized in a tree structure; in addition, objects in a page are usually represented in the form of a model, and the standard model used to represent the tree structure in which the above objects are located is called the Document Object Model (DOM). In the embodiments of the present disclosure, the target element can be an object in the page; alternatively, the target element can be a custom DOM element, etc.

[0097] In some embodiments, the target element may be any element or a specified element in the first page, and may be an element of a type such as text, a picture, a table, an audio or video, and / or a hyperlink.

[0098] Optionally, the target element may be an element at a predetermined position in the first page; the predetermined position may be the middle position, upper left position, upper right position, lower left position, lower right position or any position of the first page.

[0099] Optionally, the target element may be an element of a predetermined type in the first page; the predetermined type may be text, picture, table, audio or video and / or hyperlink in the first page.

[0100] Optionally, the target element may be an element that the user is concerned about. Exemplarily, if the first page is a product-related page, the elements that the user is concerned about may include, but are not limited to, at least one of the following: the price of the product, the sales volume of the product, the ratio of the product, the origin of the product, and other products associated with the product. Exemplarily, if the first page is a film and television related page, the elements that the user is concerned about may include, but are not limited to, at least one of the following: the name of the film and television, the broadcast time of the film and television, and the performers of the film and television. Exemplarily, if the first page is a page related to a company, enterprise, or unit, the elements that the user is concerned about may include, but are not limited to, at least one of the following: company structure, company history, company achievements, and other elements. Here, only examples of elements that users are concerned about are given, and the present disclosure does not need to limit the elements that users are concerned about.

[0101] Optionally, the target element may be an element with a score exceeding a predetermined score. That is, the target element may be an important element. Exemplarily, multiple elements on the first page may be scored by at least one of the operation personnel, product personnel, test personnel, R&D personnel, and customers corresponding to the first page, and the element with the highest score or exceeding the predetermined score is obtained as the target element.

[0102] In some embodiments, the performance indicator may include: Custom DOM Paint (CDP) time. Optionally, the custom DOM element may include the element in the first page that is reviewed and confirmed by product personnel, R&D personnel, test personnel and / or operation personnel to best express the user experience.

[0103] In other embodiments, the performance indicator may also be one of the above-mentioned performance indicators, for example, it may be but not limited to at least one of the following: first screen time, first content drawing, first effective time, interaction time, HTML loading completion time, page full load time, page response time, first input delay, cumulative layout offset and maximum content drawing, etc.

[0104] In some embodiments, the first time may be the time when the target element appears. The time when the target element appears may be: the time when the target element is loaded, or the time when the target element is rendered, etc. Loading the target element means acquiring the data of the target element.

[0105] In some embodiments, the time when the first page starts to be loaded may be one of the following: the time when the client starts to access the first page, and the time when the first byte of the server response data is received.

[0106] In some embodiments, the difference between the first time and the second time is the performance data.

[0107] In some embodiments, the difference between the first time and the second time may be an indicator value; the indicator value is the performance data corresponding to the performance indicator (eg, CDP).

[0108] In other embodiments, the performance data may include one of the following: an indicator value of a performance indicator, a name or identifier of a performance indicator, a category or project to which the performance indicator belongs, etc.

[0109] For example, Figure 4 As shown, the reported performance indicator data definition may include at least one of the following: modification time, category, project, field name, indicator name, description, identification, and remarks. If the performance indicator definition selects classification, the performance indicator classification information may include at least one of the following: classification identification (ID), classification name, and remarks. If the performance indicator definition includes an indicator name, the corresponding performance data may include at least one of the following: identification, project, indicator name, indicator value, modification time, and remarks, etc. Optionally, the performance indicator may be CDP.

[0110] Exemplarily, as shown in Table 1, a table structure for defining a CDP performance indicator is provided.

[0111]

[0112] Table 1

[0113] Exemplarily, as shown in Table 2, a table structure for classifying CDP performance indicators is provided.

[0114]

[0115] Table 2

[0116] Exemplarily, as shown in Table 3, a table structure of performance data is provided.

[0117]

[0118] Table 3

[0119] It should be noted that each element in Table 1, Table 2 or Table 3 exists independently. These elements are exemplarily listed in the same table, but it does not mean that all elements in the table must exist at the same time as shown in the table. The value of each element is independent of the value of any other element in Table 1, Table 2 or Table 3. Therefore, those skilled in the art can understand that the value of each element in Table 1 is an independent embodiment.

[0120] In some embodiments, the first time of monitoring the appearance of the target element in step 12 can be determined by: monitoring the first time of the appearance of the target element in each client of at least one client respectively; in addition, each client has a second time corresponding to the start of loading the first page. In step 13, based on the difference between the first time and the second time, the performance data corresponding to the performance indicator of the target element is determined, including: calculating the difference between the first time and the second time of each client of at least one client respectively; calculating the average of each difference to determine the first average; based on the first average, determining the performance data corresponding to the performance indicator of the target element. The second time of different clients can be the same or different. For example, for the same target element, clients 1 to N start loading the first page at the 1st second time to the Nth second time respectively, and monitor the target element. Then, it can be monitored that the time when the target element appears for clients 1 to N is the 1st first time to the Nth first time respectively; the difference between the 1st first time and the 1st second time of client 1 is determined to be the first difference, and so on, the difference between the Nth first time and the Nth second time of client N is determined to be the Nth difference; based on the average of the first difference to the Nth difference, a first average value is determined; based on the first average value, performance data corresponding to the performance indicator of the target element is determined; wherein N is an integer greater than 0.

[0121] In some embodiments, the first time of monitoring the appearance of the target element in step 12 can be: monitoring the first time of the appearance of the target element at least once within the third predetermined time; in step 13, determining the performance data corresponding to the performance indicator of the target element based on the difference between the first time and the second time, including: determining the second average value based on the average value of the difference between the first time of the appearance of the target element and the corresponding second time at least once within the third predetermined time; determining the performance data corresponding to the performance indicator of the target element based on the second average value. For example, for the same target element, M monitorings are performed within the third predetermined time, and the times of monitoring the appearance of the target element from the first to the Mth time are respectively the first first time to the Mth first time; determining the difference between the first first time of monitoring the appearance of the target element for the first time and the first second time is the first difference, and by analogy, determining the difference between the first time of monitoring the appearance of the target element for the Mth time and the Mth second time is the Mth difference; determining the second average value based on the average value of the first difference to the Mth difference; determining the performance data corresponding to the performance indicator of the target element based on the second average value; wherein M is an integer greater than 0. Here, the third predetermined time is an arbitrary duration.

[0122] In some embodiments, determining the first time of monitoring the appearance of the target element in step 12 may be: monitoring the first time of one or more target elements appearing.

[0123] In other embodiments, when the target element is one type or multiple types of elements, determining the first time of monitoring the appearance of the target element in step 12 may be: monitoring the first time of appearance of one type or multiple types of target elements; determining the performance data corresponding to the performance indicator of the target element based on the difference between the first time and the second time in step 13, including: determining a third average value based on the average value of the difference between the first time and the second time of each target element in the one type or multiple types of target elements; determining the performance data corresponding to the performance indicator of the target element based on the third average value.

[0124] In an embodiment of the present disclosure, at least one target element of the first page can be determined, and when the first page is loaded, the first time when the target element is monitored to appear can be determined; based on the difference between the first time and the second time, the performance data corresponding to the performance indicator of the target element can be determined, wherein the second time is the time when the first page starts to be loaded; and the performance data can be reported. In this way, a performance indicator can be determined for the time taken for the target element to appear (i.e., the rendering time), and the performance data of the performance indicator of the target element can be reported, so that the performance of the target element can be subsequently analyzed and / or optimized in a targeted manner. In addition, if the target element is an element that the user is concerned about, and if the performance of the target element is subsequently optimized, the page performance can be significantly improved, thereby improving the user experience.

[0125] For example, in some technical solutions, there is a large background image and a picture of product price information on the page. Usually, the LCP performance index focuses on the large background image, while the picture of the product price information that most users are concerned about is rendered very late due to some reasons (network environment or slow request interface data, etc.), resulting in the user seeing the background image online, but not being able to see the picture of the price information that the user is concerned about in time, which gives the user a very bad experience. In the disclosed embodiment, the picture of the product price information on the page will be determined as the target element, and the rendering time of the picture of the product price information will be paid attention to (such as the CDP performance index) and reported to the relevant users, and the relevant users will optimize the design, loading and rendering methods of the page; if the page is subsequently optimized so that the picture of the product price information is loaded into the page as soon as possible, the performance of the page and the user's experience can be improved.

[0126] like Figure 5 As shown, in some embodiments, determining the first time when the target element appears in step 12 includes:

[0127] Step 121: In response to monitoring a target element, determining the first time when the target element appears.

[0128] In some embodiments, the method further includes: determining a predetermined condition for the target element to appear; monitoring the target element in step 121 includes: determining that the target element is monitored when the predetermined condition is met.

[0129] Optionally, the predetermined condition includes at least one of the following: the first target element appears in the first page; the last target element appears in the first page; any target element appears in the first page; a predetermined proportion of target elements appear in the first page; a target element of a specified type appears in the first page; a target element with a specified identity appears in the first page; a target element with a specified name appears in the first page.

[0130] Exemplarily, when the electronic device loads the first page, it determines the monitored target element; if the first target element is monitored to appear, it determines the time when the first target element is monitored to appear as the first time; or, if the last target element is monitored to appear, it determines the time when the last target element is monitored to appear as the first time; or, if the last target element is monitored to appear, it determines the average time when all target elements are monitored to appear as the first time; or, if any target element is monitored to appear, it determines the time when any target element appears as the first time; or, if the Lth target element among multiple target elements in the first page is monitored to appear, it determines the time when the Lth target element appears as the first time, where L is an integer greater than 0.

[0131] Exemplarily, when the electronic device loads the first page, it determines the monitoring target element; if the target element with the specified identification is monitored to appear, it determines the time when the target element with the specified identification appears to be the first time; or, if the target element with the specified name is monitored to appear, it determines the time when the target element with the specified name appears to be the first time; or, if the target element of the specified type is monitored to appear, it determines the time when the target element of the specified type appears to be the first time.

[0132] Exemplarily, when the electronic device loads the first page, it determines to monitor the target element; if a predetermined proportion of the target elements in the first page are monitored, the time when the predetermined proportion of the target elements appear is determined to be the first time. For example, if there are 10 target elements on the first page, it is determined that 50% of the target elements or 5 target elements appear, then the time when 50% of the target elements or 5 target elements appear is determined to be the first time.

[0133] In the embodiments of the present disclosure, not only can the target element for monitoring be customized, but the target element can also be monitored in a variety of ways, so that the formulation of CDP indicators is more flexible, thereby adapting to more scenarios of monitoring target elements.

[0134] In an embodiment of the present disclosure, if the appearance of any target element or the first target element or a predetermined proportion of target elements is monitored, the current time at which any target element or the first target element or a predetermined proportion of target elements appears is determined to be the first time. This can facilitate subsequent optimization of the rendering time of the target element or the first target element or the predetermined proportion of target elements, thereby improving the performance of the first page and improving the user experience to a certain extent.

[0135] Alternatively, if the current time is determined to be the first time when the last target element is monitored, it is convenient to subsequently optimize the rendering time of all target elements in the first page, thereby greatly improving the performance of the first page and improving the user experience.

[0136] Alternatively, if the current time is determined to be the first time when a target element with a specified name or identifier (i.e., the specified target element) is monitored, it can improve the performance of the first page and further improve the user experience. The reason why the user experience can be further improved is that the target element with a specified name or identifier may be the element that the user is most concerned about.

[0137] In some embodiments, the method further includes: setting a first identifier for the target element in the first page, wherein the first identifier is used to indicate the target element or to indicate a target element of a predetermined type;

[0138] The target element is monitored, comprising: in a case where an element with a first flag set is monitored, determining that the target element is monitored.

[0139] Optionally, the predetermined type may be any type, for example, a picture type, a text type, or a video type; or, for example, a type having the same attribute, which may be, but is not limited to, a name, a logo, a product or project category, etc.

[0140] Optionally, the first identifier may be any string, as long as the first identifier can be used to indicate one or some target elements, or can be used to indicate a target element of a certain type. Exemplarily, the string may be composed of any one or more numbers, letters and / or symbols.

[0141] Optionally, the first identifier may be a tag. Exemplarily, the tag may be, but is not limited to, a name, an identifier, or a tag of an attribute, etc. For example, the tag may be a picture of a Graphics Interchange Format (GIF) attribute.

[0142] Optionally, setting the first identifier for the target element in the first page may be as follows: adding the first identifier to each target element in the first page. For example, a label with the identifier "0001" is pre-added to the target element; when the electronic device loads the first page, if it detects that an element with the identifier "0001" appears in the first page, it determines that the target element has been detected. For another example, a label with the name "chanpinjiage" is pre-added to the target element; when the electronic device loads the first page, if it detects that "chanpinjiage" appears in the first page, it determines that the target element has been detected. For another example, a picture with GIF attributes (i.e., the target element) is pre-tagged with the attribute "GIF"; when the electronic device records the first page, if it detects that a picture with the attribute "GIF" appears in the first page, it determines that the detected "GIF" is the target element.

[0143] In the embodiment of the present disclosure, a first identifier may be set in an element in the first page so that the element becomes a target element, thereby facilitating the subsequent collection of performance data of the performance indicators of the target element.

[0144] In some embodiments, monitoring the target element in step 121 includes: determining that the target element is monitored when a first identifier is monitored based on a CSS selector in the SDK.

[0145] In some embodiments, the method further includes: in the case of monitoring the first identifier based on the CSS selector in the SDK, pre-setting a CSS selector corresponding to the first identifier in the SDK. In this way, the CSS selector can be used to select at least one target element or a target element of a predetermined type, and the embodiments of the present disclosure can select the corresponding target element based on the CSS selector.

[0146] It should be noted that CSS is a computer language used to represent the style of files such as Hyper Text Markup Language (HTML) or Extensible Markup Language (XML); for example, CSS is a description language for the client page display style in front-end editing, and the client can set CSS for different display styles.

[0147] The CSS selector may include but is not limited to at least one of the following: a tag selector, an ID selector, and a class selector. The first ID or content corresponding to the first ID is pre-set in the CSS selector, so that the first ID set in the target element of the first page can be selected through the CSS selector.

[0148] Optionally, the method further includes: monitoring the first identifier based on a first CSS selector in the SDK, wherein the first CSS selector is a default CSS selector set by the SDK.

[0149] Exemplarily, the electronic device does not set the second CSS selector in the SDK, but uses the default first CSS selector in the SDK; when the electronic device loads the first page, it can monitor the first identifier based on the first CSS selector in the SDK, and if the first identifier is monitored, it is determined that the target element is monitored. Here, the first identifier or the content corresponding to the first identifier is set in the first CSS selector. In this way, the embodiment of the present disclosure can monitor the first identifier through the default CSS selector (i.e., the first CSS selector), so that the target element can be accurately monitored.

[0150] Optionally, the method further includes: during the process of initializing the SDK, setting a second CSS selector in the SDK; and monitoring the first identifier based on the second CSS selector.

[0151] Exemplarily, the electronic device sets a second CSS selector during the SDK initialization process; when the electronic device loads the first page, it can monitor the first identifier based on the second CSS selector in the SDK, and if the first identifier is monitored, it is determined that the target element is monitored. Here, the first identifier or the content corresponding to the first identifier is set in the second CSS selector. In this way, the embodiment of the present disclosure can also achieve accurate monitoring of the target element by setting the second CSS selector in the SDK initialization. In this example, the second CSS selector can be customized by the user.

[0152] Optionally, the method further includes: after initializing the SDK, modifying the first CSS selector in the SDK to the second CSS selector; stopping monitoring the first identifier based on the first CSS selector and / or stopping monitoring the first identifier based on the second CSS selector.

[0153] Exemplarily, the electronic device does not pass in the second CSS selector during the SDK initialization process, and changes the default first CSS selector in the SDK to the second CSS selector after the SDK process is completed; the electronic device monitors the first identifier based on the second CSS selector during the loading of the first page, and if the first identifier is detected, it determines that the target element is detected. Here, the first CSS selector is set with a second identifier other than the first identifier or content corresponding to the second identifier; the second CSS selector is set with the first identifier or content corresponding to the first identifier, etc. In this way, the target element can also be accurately detected in the embodiment of the present disclosure after the SDK initialization is completed.

[0154] In the embodiments of the present disclosure, it is possible to accurately monitor the target element based on the CSS selector in the SDK.

[0155] In other embodiments, monitoring the target element in step 121 includes: determining that the target element is monitored based on the SDK monitoring that the element appearing in the first page is an element in a list, wherein the list is a list set in the SDK and used to indicate at least one target element.

[0156] In some embodiments, the method further includes: in a case where the first identifier is monitored based on a list in the SDK, pre-setting a list in the SDK; the list is used to indicate at least one target element or at least one type of target element.

[0157] Optionally, the list may include at least one first identifier and the like.

[0158] Optionally, when the CCS selector cannot be used in the SDK to monitor the first identifier, the list in the SDK is used to monitor the first identifier. Of course, in other embodiments, as long as the list is set in the SDK, the first identifier can be directly monitored based on the list in the SDK without paying attention to whether the CSS selector is used in the SDK.

[0159] Optionally, the method further includes: during the process of initializing the SDK, monitoring elements appearing in the first page based on the list.

[0160] Optionally, the method further includes: after initializing the SDK, monitoring elements appearing in the first page based on the list.

[0161] Exemplarily, the electronic device may monitor the first identifier based on a default list or a newly modified list in the SDK during or after initializing the SDK, and if it is determined that the first identifier is the same as any identifier in the list, it is determined that the target element is monitored.

[0162] In the embodiments of the present disclosure, it is possible to accurately monitor the target element based on a list indicating at least one target element set in the SDK.

[0163] like Figure 5 As shown, in some other embodiments, determining the first time when the target element appears in step 12 includes:

[0164] Step 122: In response to monitoring a predetermined event change, determining the first time when the target element appears.

[0165] In some embodiments, step 122 may include: in response to monitoring a change in a first type of predetermined event, determining a monitoring target element, i.e. starting monitoring the target element, wherein the first type of predetermined event is a DOM event; and determining the time when the target element is monitored as the first time.

[0166] Optionally, the first type of predetermined event change refers to a DOM event change, which may include a change in a DOM node or a change in a node attribute in the first page, for example, a new node appears in the DOM tree corresponding to the first page, a node in the DOM tree corresponding to the first page is set to a visible state, layout information is adjusted, etc.

[0167] In HTML, tags are specific character sequences used to mark and describe the structure and appearance of document content. Tags are usually composed of keywords surrounded by angle brackets, such as, When tags are added, deleted, or modified in the DOM tree, or attributes in tags are added, deleted, or modified, it can be determined that a DOM event has occurred.

[0168] Optionally, the DOM event change may include at least one of the following: a change in the document of the first page; a change in a tag element in the first page; a change in a sub-element of the tag element in the first page.

[0169] Exemplarily, the tag element may include a body element and / or a head element.

[0170] Exemplarily, the tag element may include a division (div) element and / or a script (script) element. For example, the body element may include a div element and / or a script element. For another example, the head element may include a div element and / or a script element.

[0171] Exemplarily, a div element may also be a section element.

[0172] Optionally, the DOM event change may be: a change in a parent element of a target element. The parent element of the target element may be, but is not limited to, a body element, etc.

[0173] In the embodiment of the present disclosure, if a DOM event change is monitored, the first page element has changed, and it is very likely that the first page has loaded the target element; in this way, when the DOM event change is monitored, the target element is monitored, which can improve the success rate of monitoring the target element, and there is no need to monitor the target element all the time, which can reduce power consumption, etc.

[0174] In the embodiments of the present disclosure, the target element may appear when a relatively large-scale change occurs to the first page (for example, a change occurs to the file, body element, or head element in the first page), or a relatively small-scale change occurs to the first page (for example, a change occurs to the div element or script element in the first page); therefore, the appearance of the target element can be monitored when a relatively large-scale change occurs to the first page or a relatively small-scale change occurs to the first page.

[0175] In some embodiments, the method may include: determining a first timing to monitor the target element; wherein the first timing is a timing when a DOM event changes; and monitoring the target element when the first timing occurs.

[0176] Optionally, the first timing includes at least one of the following: a DOM node in the first page changes or a node attribute changes.

[0177] In the disclosed embodiment, the first timing of the change of the DOM event of the target element may be caused first, and then the target element may be monitored when the first timing is satisfied, thereby increasing the probability of monitoring the target element.

[0178] In other embodiments, step 122 may include: in response to monitoring a change in a second type of scheduled event related to the target element, determining the current time to be the first time, wherein the second type of scheduled event is a storage event and / or a communication event.

[0179] Generally, when the first page is about to change, a storage event and / or a communication event will occur in advance. By monitoring the storage event and / or the communication event, it can be determined that the first page has changed or it can be predicted that the first page will change. For example, when the storage event and / or the communication event related to the target element changes, it can be predicted that the target element has appeared in the first page.

[0180] Optionally, the second type of predetermined event change may refer to a storage class event change. Storage class event changes may include at least one of the following: changes in global variables of the first page; changes in variables in a closure; changes in key values ​​(key values) on small blocks of data (cookies) of the first web page; changes in key values ​​on large blocks of data (storage) of the first web page; changes in key values ​​on the indexed database (indexedDB) of the first web page; changes in key values ​​on the structured relational database (web Structured Query Language, webSQL) of the first web page; changes in key values ​​on the service worker thread (serviceworker) of the first web page. Here, a key value change may refer to: the appearance of a key value related to a storage target element.

[0181] Exemplarily, a global variable can be a variable declared outside a function, and all scripts and functions in the first page can access it. Closure is a feature in a script; closure can be used to achieve the connection between inside and outside a function. A variable in a closure is a local variable of the parent function of an embedded function accessing the closure, and the variable will not be deleted after the parent function is run.

[0182] Exemplarily, cookies are small pieces of data stored in a short-term manner in a page; storage is a large amount of data stored in a long-term manner in a page or data retained across sessions. For example, storage may include long-term storage data (localStorage) and / or session storage data (sessionStorage).

[0183] For example, IndexedDB is a non-relational database, and webSQL is a relational database.

[0184] Exemplarily, a service worker is a script running in a page; the service worker may be a script running in the background independently of the first page, and may continue to run after a user closes the first web page.

[0185] In the disclosed embodiment, if the target element is loaded in the first page, the storage class events related to the target element in the first page will change, such as global variables, variables in closures, stored data (such as cookies or storage), databases (such as indexedDB or webSQL) and / or worker threads (such as serviceworker), etc.; if the storage class event changes, the time of change is determined to be the first time, and the time when the target element appears can be determined more accurately. And there is no need to monitor the target element, such as no need to monitor the first identifier according to the CCS selector, etc., so that it can also achieve a relatively simple determination of the first time when the target element appears.

[0186] Optionally, the second type of predetermined event change may refer to a communication event change. The communication event change may include at least one of the following: window mail message communication (window.postMessage) and the server notifying the appearance of a target element.

[0187] Exemplarily, window.postMessage may be used to transfer messages between windows of different origins (domains).

[0188] Exemplarily, the server notifies the appearance of the target element, including and may not be limited to at least one of the following: the server assists in parsing the front end so that the front end obtains the time when the target element appears through polling; the server parses HTML, etc. to determine the time when the target element appears, and notifies the front end of the time of the target element; the server notifies the front end to record the initiation time point of the target element.

[0189] In the implementation of the present disclosure, if the target element is recorded in the first page, the window containing the target element on the first page will notify other windows through a window mail message or the server will notify the front end; in this way, by determining the occurrence of these communication events, the appearance of the target element can also be determined relatively accurately.

[0190] In some embodiments, reporting the performance data in step 14 includes one of the following:

[0191] When the target element appears, report the performance data;

[0192] When the target element has appeared but has not changed within a first predetermined time, reporting performance data;

[0193] Acquiring the performance data before the end time of the second scheduled time is reached, and reporting the performance data when the end time of the second scheduled time is reached;

[0194] The performance data is obtained before the end time of the second scheduled time is reached, and when the performance data is obtained, the performance data is reported.

[0195] Optionally, both the first predetermined time and the second predetermined time may be of any duration.

[0196] Optionally, the second predetermined time is greater than or equal to the first predetermined time.

[0197] Exemplarily, when determining the first appearance of the target element, the electronic device determines the difference between the first time and the second time, and reports the difference between the first time and the second time as performance data. Optionally, the electronic device can collect the first time of the target element appearing M times, respectively determine the difference between the first time and the corresponding second time, and report the average value of the difference between the first time and the second time as performance data, where M is an integer greater than 0. In this way, the present embodiment can report performance data in a timely manner.

[0198] Exemplarily, the electronic device determines that the target element has not changed within the first predetermined time, and determines to report the difference between the first time and the second time as performance data. Optionally, the electronic device determines that the target element has not changed within the first predetermined time, and determines to report the difference between the first time and the second time as performance data. In this way, this embodiment can report performance data when the target element is stable, thereby further improving the reliability of the performance data.

[0199] For example, the electronic device may set a timeout timer, the timeout timer is set to the second predetermined time; then the electronic device may report the existing performance data when the second predetermined time ends. In this way, there is no need to monitor the target data all the time, and the performance data monitored within a certain period of time may be reported, so as to facilitate further analysis and processing of the performance data.

[0200] In the embodiments of the present disclosure, a variety of methods for reporting performance data are provided, which can be flexibly reported according to different application scenarios.

[0201] In some embodiments, reporting the performance data in step 14 includes: reporting the performance data to a management platform or a server. Here, the management platform or the server can be used to perform processing operations such as cleaning, extracting and / or querying the performance data. Optionally, the management platform can be the APM in the previous embodiment.

[0202] In some embodiments, the method further includes: after reporting the performance data, stopping monitoring the target element, so that the target element does not need to be monitored all the time, thereby reducing power consumption.

[0203] In some embodiments, the method further includes: when the end time of the second predetermined time is reached and the performance data is not obtained, reporting abnormal data and / or stopping monitoring of the target element, wherein the abnormal data is used to indicate that an abnormality has occurred in the monitored target element.

[0204] Optionally, the abnormal data may be preset, for example, a predetermined character string or a predetermined value.

[0205] In this way, if the performance data has not been monitored at the end of the second predetermined time, there is no need to monitor the target element all the time, and the first page may suffer from severe performance loss due to monitoring the target element all the time. And the abnormal data may be reported to inform the other end receiving the performance data of the abnormal situation.

[0206] In order to further explain any embodiment of the present disclosure, several specific embodiments are provided below.

[0207] Example 1

[0208] like Figure 6 As shown, the embodiment of the present disclosure provides a page processing method, which is executed by an electronic device and includes the following steps:

[0209] Step 200: Start;

[0210] Step 201: Obtain a custom performance indicator CDP.

[0211] Optionally, the electronic device may obtain a custom performance indicator CDP of the first page. Optionally, the electronic device may also obtain FCP and LCP of the first page. The CDP is a specified performance indicator.

[0212] Here, step 201 may include step 2011 , step 2012 , step 2013 and step 2014 .

[0213] Step 2011: Monitor changes in DOM events.

[0214] Optionally, changes in the body element and / or the head element in the first page are monitored.

[0215] Optionally, changes in div elements and / or script elements under the body element and / or div elements and / or script elements under the head element in the first page related to the target element are monitored.

[0216] Step 2012: Determine whether the target element appears; if so, execute step 2013.

[0217] Optionally, step 2011 and step 2012 may be replaced by: monitoring changes in storage events and / or communication events, determining that the target element appears, and continuing to execute step 2013.

[0218] Step 2013: Record the current time as the first time.

[0219] Step 2014: Determine the difference between the first time and the second time. Optionally, the second time is the time when the first page starts to be loaded.

[0220] Step 202: Report performance data through the interface.

[0221] Optionally, the performance data that can be reported by the electronic device may include an identifier of the CDP and an indicator value corresponding to the CDP, etc. The indicator value may be a difference between the first time and the second time. Figure 7 As shown, the performance data that can be reported include: "custom_dom": 1243, "custom_dom_ts": 1698718635839; of course, the performance data of FCP and / or LCP can also be reported.

[0222] Step 203: Perform page query.

[0223] Optionally, the electronic device may display the performance data of each performance indicator reported on the second page of the management platform (eg, APM) for the client to query, etc. For example, Figure 8 As shown, the second page in APM displays the field names, categories and descriptions of FCP, LCP, FID, TTI and CDP. Fig. 9 As shown, you can add a new performance indicator definition in the APM page. This allows clients to track, monitor, aggregate, extract and / or query performance data of performance indicators.

[0224] Step 204: Display the chart.

[0225] Optionally, the electronic device may analyze and process the performance data of each performance indicator, and display the results of the analysis and processing in a chart or other manner. Fig.10 As shown, the indicator values ​​corresponding to FCP, LCP and CDP are shown in charts and the like as "1497ms", "2450ms" and "2957ms" respectively.

[0226] Step 205: End.

[0227] In the embodiments of the present disclosure, DOM events corresponding to specified performance indicators (such as CDP) can be monitored to determine the appearance of the target element corresponding to the CDP, and determine the rendering time of the target element, so as to facilitate subsequent targeted optimization of the performance indicators of the target element and improve the user experience.

[0228] Example 2

[0229] like Fig.11 As shown, the embodiment of the present disclosure provides a page processing method, which is executed by an electronic device and includes the following steps:

[0230] Step 200: Start;

[0231] Step 201: Obtain a custom performance indicator CDP.

[0232] Optionally, the electronic device may obtain a custom performance indicator CDP of the first page. Optionally, the electronic device may also obtain FCP and LCP of the first page. The CDP is a specified performance indicator.

[0233] Here, step 201 may include step 2011 , step 2012 , step 2013 , step 2015 and step 2106 .

[0234] Step 2011: Monitor changes in DOM events.

[0235] Optionally, step 2011 in this embodiment may be step 2011 in the previous embodiment.

[0236] Step 2012: Determine whether the target element appears; if so, execute step 2013.

[0237] Optionally, step 2012 in this embodiment may be step 2012 in the previous embodiment.

[0238] Step 2013: Record the current time as the first time.

[0239] Optionally, step 2013 in this embodiment may be step 2013 in the previous embodiment.

[0240] Step 2015: monitor whether DOM events, storage events and / or communication events related to the target element change within the first predetermined time; if not, execute step 2016.

[0241] Here, if the DOM events, storage events and / or communication events related to the target element do not change within the first predetermined time, it is determined that the target element does not change within the first predetermined time.

[0242] Step 2016: Determine the difference between the first time and the second time.

[0243] Optionally, step 2017 in this embodiment may be step 2014 in the previous embodiment; the second time is the time when the first page starts to be loaded.

[0244] Step 202: Report performance data through an interface.

[0245] Optionally, step 202 in this embodiment may be step 202 in the previous embodiment.

[0246] Step 203: Perform page query.

[0247] Optionally, step 203 in this embodiment may be step 203 in the previous embodiment.

[0248] Step 204: Display the chart.

[0249] Optionally, step 204 in this embodiment may be step 204 in the previous embodiment.

[0250] Step 205: End.

[0251] In the embodiment of the present disclosure, when the target element does not change within a certain period of time, the time of the unchanged target element is recorded again, so that a more accurate rendering time of the target element can be obtained, thereby providing more accurate data for subsequent analysis of the performance indicators of the target element.

[0252] Example 3

[0253] like Fig.12 As shown, the embodiment of the present disclosure provides a method for processing a page, comprising the following steps:

[0254] Step 300: Start.

[0255] Step 301: The business side defines a hook callback. Here, a webhook is a method of adding or changing the performance of a web page through a custom callback function; for example, a hook can be used to monitor events, such as monitoring target elements.

[0256] Step 302: The APM SDK obtains performance data of the custom element.

[0257] Optionally, the APM SDK may also obtain the performance data of the FCP and LCP. The performance data of the custom element may be the performance data of the CDP.

[0258] Step 303: APM SDK reports performance data.

[0259] Step 304: The APM backend saves the performance data.

[0260] Step 305: The APM side report obtains performance indicators. Here, the performance indicators may include CDP.

[0261] Optionally, the performance indicator may further include FCP and / or LCP.

[0262] Step 306: The APM backend returns performance indicators.

[0263] Step 307: The APM side report pulls performance data.

[0264] Step 308: The APM backend returns performance data to the APM side report.

[0265] Step 309: The APM side report generates a report based on the performance data.

[0266] Step 310: End.

[0267] In the disclosed embodiments, the performance data of each performance indicator can be obtained in APM, and reports can be prepared based on the performance data to facilitate subsequent analysis and optimization of the performance data of each performance indicator, thereby improving the user experience.

[0268] Example 4

[0269] like Fig.13 As shown, the embodiment of the present disclosure provides a page processing method, which is executed by a server and includes the following steps:

[0270] Step 41: Set the target element.

[0271] Optionally, the server sets a first identifier on an element of the first page, and the element with the first identifier is the target element. Exemplarily, the server sets the target element with an attribute of "wps-perf-custom-dom", where "wps-perf-custom-dom" may refer to the first identifier.

[0272] Exemplarily, the server does not pass the second CSS selector into the SDK, and uses the default CSS selector (such as the first CSS selector in the previous embodiment) to monitor the target element. Here, the target element with the first identifier can be selected by the default CSS selector.

[0273] Exemplarily, the server passes in the second CSS selector during the SDK initialization process, and uses the second CSS selector to monitor the target element. Here, the target element with the first identifier can be selected by the second CSS selector.

[0274] Exemplarily, after the SDK is initialized, the server modifies the default CSS selector to the second CSS selector, and uses the second CSS selector to monitor the target element. Here, the target element with the first identifier can be selected by the second CSS selector.

[0275] Exemplarily, during SDK initialization, the server monitors the target element based on a list in the SDK; the list includes one or more first identifiers.

[0276] Exemplarily, after the SDK is initialized, the server monitors the target element based on the list in the SDK; the list includes one or more first identifiers.

[0277] Step 42: Monitor the appearance of the target element.

[0278] Optionally, if the server monitors a DOM event change, it determines a monitoring target element; and determines the time when the monitored target element appears as the first time.

[0279] Optionally, if the server monitors changes in storage events and / or communication events, it determines that the current time is the first time. Here, changes in storage events and / or communication events indicate that the target element appears; the time when the storage events and / or communication events change is the first time.

[0280] Optionally, for DOM events, at least one of the following can be performed: monitor document changes; monitor body element changes; monitor head element changes; monitor div elements and / or script elements under the body element; monitor div elements and / or script elements under the head element, etc. After monitoring DOM event changes, the appearance of the target element can be monitored; for example, the target element can be monitored through a CSS selector, etc.

[0281] Optionally, for a storage class event, at least one of the following may be performed:

[0282] Monitor global variables; for example, monitor the appearance of a property on the window;

[0283] Monitor variables in closures; for example, if the definition in a function changes, you can also monitor the execution of statements defined or called in the function;

[0284] Monitor changes in cookies on the browser side and obtain the value of the specified key to determine the presence of the target element;

[0285] Monitor changes in storage on the browser side and obtain the value of the specified key to determine the appearance of the target element;

[0286] Monitor changes on the browser-side indexedDB and obtain the specified key value to determine the presence of the target element;

[0287] Monitor the changes on the webSQL on the browser side, obtain the data of the specified table of the specified library to determine the appearance of the target element; the specified table of the specified library can also be a specified key value or a specified identifier;

[0288] Monitor changes on the browser-side serviceworker and get the specified key value to determine the appearance of the target element.

[0289] After monitoring the change of the storage class event, it can be considered that the target element is monitored, and the current time can be recorded as the time when the target element appears (that is, the first time in the previous embodiment).

[0290] Optionally, for communication events, at least one of the following may be performed:

[0291] Get the target element rendering completion time (i.e. the first time in the previous embodiment) through window.postMessage communication;

[0292] The server parses HTML, analyzes the time when the target element appears and reports it;

[0293] The server assists in parsing, and the front end obtains the time when the target element appears and reports it through asynchronous JavaScript and XML (Ajax) polling or fetching.

[0294] The server assists in parsing, notifying the front-end of the completion of parsing and reporting the time when the target element appears through Comet technology ("server push" technology based on HTTP long connection), Web socket technology or Server-Sent Events (SEE) technology;

[0295] The server assists in parsing and uses Web Real-Time Communication (WebRTC) to notify the front-end to determine the initiation time point, which can be the time when the target element appears;

[0296] The server assists in parsing and notifies the front end to record the initiation time point; the front end uses polling techniques such as image (img) tags, floating frame (iframe) tags (i.e. HTML tags), script (script) tags, form (form) tags, and Uniform Resource Identifier (URL) requests in CSS to obtain the initiation time point, which can be the time when the target element appears.

[0297] After monitoring changes in communication events, it can be considered that the target element is monitored, and the current time can be recorded as the time when the target element appears (ie, the first time in the previous embodiment).

[0298] Optionally, the reporting method after monitoring the target element may include one of the following:

[0299] Report the target element immediately after it appears;

[0300] The target element has appeared, but it is reported only if it has not changed within the first scheduled time;

[0301] Acquiring the performance data before the end time of the second scheduled time is reached, and reporting the performance data when the end time of the second scheduled time is reached;

[0302] The performance data is obtained before the end time of the second scheduled time is reached, and when the performance data is obtained, the performance data is reported.

[0303] Here, it refers to the time taken to report the occurrence of the target element (for example, the difference between the first time and the second time in the previous embodiment).

[0304] Step 43: Exit monitoring processing upon timeout. This can reduce the possibility that the first page cannot report performance data.

[0305] Optionally, a timeout timer is set (for example, the timeout timer is set to a second predetermined time), and when the timeout timer times out, if the performance data is not collected, the specified abnormal data is reported and / or the monitoring is ended. The timeout timer can be set by passing parameters during initialization, by passing parameters based on an additional API interface, or by passing parameters based on an independent API interface. The reported abnormal data can be pre-defined data, such as a negative number or a fixed value, such as -1, 3000, etc.

[0306] Optionally, set a timeout timer; after the SDK is loaded on the first page, start the timeout timer; if the timeout timer has not timed out, even if there is performance data returned, continue to wait. If the timeout timer times out, if there is performance data, report the performance data; if there is no performance data, report abnormal data.

[0307] Optionally, if the monitored performance data is abnormal data (the abnormal data is greatly different from the reference data), this part of the abnormal data is not reported, or all the performance data is not reported.

[0308] Step 44: End monitoring. This can reduce the situation where long-term monitoring of the first page causes serious performance loss of the first page.

[0309] Optionally, if performance data is monitored or the ultrasonic timer times out, monitoring is stopped.

[0310] Step 45: Collect performance data of multiple performance indicators and report them together.

[0311] Optionally, the server may wait for performance data of multiple performance indicators, and report after collecting the performance data of the multiple performance indicators.

[0312] Optionally, if the service allows the loss of performance data of other performance indicators, it is also possible to report performance data of multiple performance indicators without waiting.

[0313] Step 46: Clean, extract and / or query the performance data, which can be used for performance optimization, etc.

[0314] Optionally, server-side cleaning, extraction and / or querying may also be performed by the client or front end.

[0315] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0316] like Fig.14 As shown, the embodiment of the present disclosure provides a page processing device, including:

[0317] A first processing module 51 is configured to determine at least one target element of the first page;

[0318] The second processing module 52 is configured to determine the first time when the target element appears when the first page is loaded;

[0319] The first processing module 51 is configured to determine the performance data corresponding to the performance indicator of the target element based on the difference between the first time and the second time, wherein the second time is the time when the first page starts to be loaded;

[0320] The reporting module 53 is configured to report performance data.

[0321] A page processing device provided by an embodiment of the present disclosure is applied in an electronic device.

[0322] In some embodiments, the second processing module 52 is configured to, in response to monitoring the target element, determine the first time when the target element appears; or,

[0323] The second processing module 52 is configured to determine the first time when the target element appears in response to monitoring a predetermined event change.

[0324] In some embodiments, the apparatus further comprises: a determination module configured to determine a predetermined condition for the target element to appear;

[0325] The second processing module 52 is configured to determine that a target element is monitored when a predetermined condition is met.

[0326] In some embodiments, the second processing module 52 is configured to set a first identifier for the target element in the first page, wherein the first identifier is used to indicate the target element or to indicate a target element of a predetermined type;

[0327] The second processing module 52 is further configured to determine that a target element is monitored when an element with a first flag is monitored.

[0328] In some embodiments, the second processing module 52 is configured to determine that a target element is detected based on the detection of the first identifier by the CSS selector in the SDK; or

[0329] The second processing module 52 is configured to determine that a target element is detected based on the SDK detecting that an element appearing on the first page is an element in a list, wherein the list is a list set in the SDK and used to indicate at least one target element.

[0330] In some embodiments, the second processing module 52 is configured to perform one of the following:

[0331] Monitoring the first identifier based on a first CSS selector in the SDK, wherein the first CSS selector is a default CSS selector set by the SDK;

[0332] During the process of initializing the SDK, a second CSS selector is set in the SDK; and the first identifier is monitored based on the second CSS selector;

[0333] After initializing the SDK, the first CSS selector in the SDK is modified to the second CSS selector; and monitoring of the first identifier based on the first CSS selector and / or monitoring of the first identifier based on the second CSS selector are stopped.

[0334] In some embodiments, the second processing module 52 is configured to perform one of the following:

[0335] During the SDK initialization process, listen for the elements that appear on the first page based on the list;

[0336] After initializing the SDK, listen for elements that appear on the first page based on the list.

[0337] In some embodiments, the second processing module 52 is configured to determine the monitoring target element in response to monitoring a change of a first type of predetermined event, wherein the first type of predetermined event is a DOM event; and determine the time when the target element is monitored as the first time.

[0338] In some embodiments, the second processing module 52 is configured to determine that the current time is the first time in response to monitoring a change in a second type of scheduled event related to the target element, wherein the second type of scheduled event is a storage event and / or a communication event.

[0339] In some embodiments, the reporting module 53 is configured to perform one of the following:

[0340] When the target element appears for the first time, performance data is reported;

[0341] When the target element has appeared but has not changed within a first predetermined time, reporting performance data;

[0342] Acquiring the performance data before the end time of the second scheduled time is reached, and reporting the performance data when the end time of the second scheduled time is reached;

[0343] The performance data is obtained before the end time of the second scheduled time is reached, and when the performance data is obtained, the performance data is reported.

[0344] In some embodiments, the reporting module 53 is configured to report abnormal data and / or stop monitoring the target element when the end time of the second predetermined time is reached and no performance data is obtained, wherein the abnormal data is used to indicate that an abnormality has occurred in the monitored target element.

[0345] In some embodiments, the reporting module 53 is configured to stop monitoring the target element after reporting the performance data.

[0346] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0347] An embodiment of the present disclosure further provides an electronic device, including:

[0348] processor;

[0349] a memory for storing processor-executable instructions;

[0350] The processor is configured to implement the page processing method of any embodiment of the present disclosure when running the executable instructions.

[0351] The electronic device may be the terminal in the above embodiment.

[0352] The memory may include various types of storage media, which are non-transitory computer storage media that can continue to remember information stored thereon after the communication device loses power.

[0353] The processor can be connected to the memory through a bus or the like to read the executable program stored in the memory, for example, to implement the following Figure 3 , Figure 5 , Figure 6 , Figures 11 to 13 The processing method of the page shown in any item.

[0354] like Fig.15 FIG. 6 is a diagram showing a structure of an electronic device 60 according to an exemplary embodiment. The electronic device 60 may be a terminal in the above embodiment. For example, the electronic device 60 may be provided as a network side device. Fig.15 The electronic device 60 includes a processing component 61, which further includes one or more processors, and a memory resource represented by a processor 62 for storing instructions executable by the processing component 61, such as an application. The application stored in the processor 62 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 61 is configured to execute instructions to perform any method of the aforementioned method applied in the base station.

[0355] The electronic device 60 may further include a power supply component 63 configured to perform power management of the electronic device 60, a wired or wireless network interface 64 configured to connect the electronic device 60 to a network, and an input / output (I / O) interface 65. The electronic device 60 may operate based on an operating system stored in the processor 62, such as Windows Server TM, MacOS XTM, UnixTM, LinuxTM, FreeBSDTM or the like.

[0356] The embodiments of the present disclosure further provide a computer-readable storage medium, wherein the computer-readable storage medium stores an executable program, wherein when the executable program is executed by a processor, the page processing method of any embodiment of the present disclosure is implemented. Figure 3 , Figure 5 , Figure 6 , Figures 11 to 13 The processing method of the page shown in any item.

[0357] An embodiment of the present disclosure provides a computer-readable storage medium, wherein the readable storage medium stores an executable program, wherein when the executable program is executed by a processor, the page processing method provided by any one of the aforementioned technical solutions is implemented.

[0358] The computer-readable storage medium may specifically be: a non-temporary computer-readable storage medium.

[0359] Exemplarily, such as a memory including an executable program, the above instructions can be executed by the processing component 61 of the electronic device to complete the above method.

[0360] The non-transitory computer-readable storage medium may be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.

[0361] An embodiment of the present disclosure provides a computer program product, which includes a computer program or instructions. When the computer program product or the instructions are processed and executed, the page processing method provided by any one of the aforementioned technologies is implemented.

[0362] Those skilled in the art will readily appreciate other implementations of the disclosed embodiments after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses, or adaptations of the disclosed embodiments, which follow the general principles of the disclosed embodiments and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure. The specification and examples are to be considered merely exemplary, and the true scope and spirit of the disclosed embodiments are indicated by the following claims.

[0363] It should be understood that the embodiments of the present disclosure are not limited to the precise structures described above and shown in the drawings, and various modifications and changes may be made without departing from the scope thereof. The scope of the embodiments of the present disclosure is limited only by the appended claims.

Claims

1. An information processing method, characterized in that: The method comprises: determining at least one target element of the first page; When the first page is loaded, determining a first time when the target element appears is monitored; Determining performance data corresponding to the performance indicator of the target element based on a difference between the first time and a second time, wherein the second time is a time when the first page starts to be loaded; Report the performance data.

2. The method according to claim 1, characterized in that The determining the first time when the target element appears is monitored includes: In response to monitoring the target element, determining the first time when the target element appears; or, In response to monitoring a predetermined event change, determining the first time at which the target element appears.

3. The method according to claim 1 or 2, characterized in that: The method further comprises: determining a predetermined condition for the target element to appear; The monitoring of the target element includes: determining that the target element is monitored when the predetermined condition is met.

4. The method according to claim 1, characterized in that: The method further includes: setting a first identifier for the target element in the first page, wherein the first identifier is used to indicate the target element or to indicate the target element of a predetermined type; The monitoring of the target element includes: determining that the target element is monitored when an element with the first flag set is monitored.

5. The method according to claim 1 or 4, characterized in that: The monitoring of the target element includes one of the following: In the case where the first identifier is monitored based on the cascading style sheet CSS selector in the software development kit SDK, determining that the target element is monitored; Based on the SDK monitoring that the element appearing in the first page is an element in a list, it is determined that the target element is monitored, wherein the list is a list set in the SDK and used to indicate at least one of the target elements.

6. The method according to claim 5, characterized in that The method further comprises one of the following: Monitoring the first identifier based on a first CSS selector in the SDK, wherein the first CSS selector is a default CSS selector set by the SDK; During the process of initializing the SDK, a second CSS selector is set in the SDK; and the first identifier is monitored based on the second CSS selector; After initializing the SDK, modify the first CSS selector in the SDK to the second CSS selector; stop monitoring the first identifier based on the first CSS selector and / or stop monitoring the first identifier based on the second CSS selector.

7. The method according to claim 5, characterized in that The method further comprises one of the following: During the process of initializing the SDK, monitoring elements appearing in the first page based on the list; After initializing the SDK, elements appearing in the first page are monitored based on the list.

8. The method according to claim 2, characterized in that: The step of determining the first time when the target element appears in response to monitoring a predetermined event change includes: In response to monitoring a change of a first type of predetermined event, determining to monitor the target element, wherein the first type of predetermined event is a DOM event; and determining the time when the target element is monitored as the first time; or, In response to monitoring a change in a second type of scheduled event related to the target element, determining the current time as the first time, wherein the second type of scheduled event is a storage type event and / or a communication type event.

9. The method according to claim 1, characterized in that: The reporting of the performance data includes one of the following: When the target element appears, reporting the performance data; When the target element has appeared but has not changed within a first predetermined time, reporting the performance data; Acquiring the performance data before the end time of the second scheduled time is reached, and reporting the performance data when the end time of the second scheduled time is reached; The performance data is obtained before the end time of the second scheduled time is reached, and when the performance data is obtained, the performance data is reported.

10. The method according to claim 9, characterized in that The method further comprises: When the end time of the second predetermined time is reached and the performance data is not obtained, reporting abnormal data and / or stopping monitoring of the target element, wherein the abnormal data is used to indicate that an abnormality occurs in monitoring of the target element; or, After reporting the performance data, stop monitoring the target element.

11. A page processing device, characterized in that: The device comprises: A first processing module, configured to determine at least one target element of a first page; A second processing module is configured to determine a first time when the target element appears when the first page is loaded; The first processing module is configured to determine the performance data corresponding to the performance indicator of the target element based on the difference between the first time and a second time, wherein the second time is the time when the first page starts to be loaded; The reporting module is configured to report the performance data.

12. A computer program product, comprising a computer program or instructions, characterized in that: When the computer program or instruction is executed by a processor, the page processing method described in any one of claims 1 to 10 is implemented.

Images