An applet performance detection method and device, an electronic device, and a medium

Abstract

This disclosure provides a method, apparatus, electronic device, and medium for testing the performance of mini-programs, relating to the field of computer technology, and particularly to the field of mini-program technology. The specific implementation scheme is as follows: During the rendering of a mini-program page using a browser, a first listening request is sent to the browser. This first listening request is used to request that a first listening response be sent to the mini-program when the state of the mini-program page meets preset conditions. Upon receiving the first listening response, the current page information of the mini-program page is obtained, and the first rendering duration of the mini-program is determined based on this information. The first rendering duration is the duration during which the main content of the mini-program page is first rendered. This enables the evaluation of the performance and stability of mini-programs in an open-source scenario.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to the field of mini-program technology. Background Technology

[0002] Mini-programs can be used in various host environments, such as mobile applications (APPs), in-vehicle systems, and Internet of Things (IoT) devices. Compared with traditional applications, mini-programs allow for seamless installation and instant use, making them more convenient to use. Summary of the Invention

[0003] This disclosure provides a method, apparatus, electronic device, and medium for testing the performance of a mini-program.

[0004] A first aspect of this disclosure provides a method for detecting the performance of a mini-program, applied to a mini-program, comprising:

[0005] During the process of rendering the mini-program page using the browser, a first listening request is sent to the browser. The first listening request is used to request that when the state of the mini-program page meets the preset conditions, the mini-program sends a first listening response.

[0006] Upon receiving the first listening response, obtain the current page information of the mini-program page;

[0007] The first rendering duration of the mini-program is determined based on the current page information. The first rendering duration is the duration during which the main content of the mini-program page is first rendered.

[0008] A second aspect of this disclosure provides a mini-program performance testing device, applied to a mini-program, comprising:

[0009] The sending module is used to send a first listening request to the browser during the process of rendering the mini-program page using the browser. The first listening request is used to request that the mini-program send a first listening response when the state of the mini-program page meets the preset conditions.

[0010] The acquisition module is used to acquire the current page information of the mini-program page when the first listening response is received;

[0011] The determining module determines the first rendering duration of the mini-program based on the current page information obtained by the obtaining module. The first rendering duration is the duration during which the main content of the mini-program page is first rendered.

[0012] A third aspect of this disclosure provides an electronic device, including:

[0013] At least one processor; and

[0014] A memory communicatively connected to the at least one processor; wherein,

[0015] The memory stores instructions that can be executed by the at least one processor, which, when executed by the at least one processor, enables the at least one processor to perform the applet performance detection method described in any one of the first aspects.

[0016] A fourth aspect of this disclosure provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause the computer to execute the applet performance detection method described in any one of the first aspects.

[0017] A fifth aspect of this disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the applet performance detection method described in any one aspect of the first aspect.

[0018] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0019] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0020] Figure 1 This is a flowchart of the first method for detecting the performance of a mini-program provided in this embodiment;

[0021] Figure 2 This is a second flowchart of the applet performance testing method provided in this embodiment of the disclosure;

[0022] Figure 3 This is a third flowchart of the applet performance testing method provided in this embodiment of the disclosure;

[0023] Figure 4 This is a schematic diagram of the structure of a mini-program performance testing device provided in an embodiment of this disclosure;

[0024] Figure 5 This is a block diagram of an electronic device used to implement the applet performance testing method of the present disclosure embodiments. Detailed Implementation

[0025] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0026] Mini-programs adopt a development model based on the skills and ecosystem of World Wide Web (WWW) front-end development, which improves development efficiency compared to traditional client-side technologies. Currently, the performance and stability of mini-programs are generally measured using metrics such as first-paint duration and second-paint duration. The first-paint duration is the time it takes for the main content to be rendered for the first time on the mini-program page; it can also be called the first meaningful paint (FMP). The second-paint duration is the time it takes for the visible content to be rendered for the first time on the mini-program page; it can also be called the first contentful paint (FCP).

[0027] When obtaining the first rendering duration, the Android client relies on a customized T7 browsing kernel. The T7 browsing kernel's processing of the mini-program page includes parsing, layout, and rendering stages. During the rendering stage, the T7 browsing kernel tracks the height of the laid-out page content to check if it reaches the screen height. Rendering can be paused until the laid-out content reaches the screen height, allowing iterative parsing and layout to continue. Once the height of the laid-out content is detected to have reached the screen height, the T7 browsing kernel subtracts the timestamp of the user opening the mini-program from the current timestamp to obtain the first rendering duration. Because some clients explicitly use their own kernel or the system's native kernel and do not accept customized browsing kernels for mini-programs, and because these kernels do not provide interfaces for calculating the first rendering duration, these Android clients cannot obtain the mini-program's first rendering duration using this method.

[0028] Furthermore, in Apple's iOS client, the client monitors the visible area content size height of the scrolling web view (WKWebView.scrollView) and the frame height of the web view (WebView). When the content height shows an upward trend and the content height exceeds the maximum change in the WebView's frame height, the first rendering duration is determined based on the current timestamp. However, WKWebView is a proprietary tool of the iOS client and is not available to other clients. Therefore, other clients cannot determine the first rendering duration of a mini-program in this way.

[0029] Because in open-source scenarios, mini-programs can be applied to various clients, but the first rendering time of mini-programs running on some clients cannot be obtained, making it difficult to evaluate the performance and stability of mini-programs in open-source scenarios.

[0030] To evaluate the performance and stability of mini-programs in an open-source environment, this disclosure provides a method for mini-program performance testing. This method is applied to mini-programs, which run on a client-side application installed on a terminal, such as a mobile phone, tablet, television, or in-vehicle terminal. Figure 1 As shown, the method includes the following steps:

[0031] S101. During the process of rendering the mini-program page using the browser, send the first listening request to the browser.

[0032] The first listening request is used to send a first listening response to the mini program when the state of the mini program page meets the preset conditions.

[0033] In this embodiment of the disclosure, during the process of rendering the mini-program page using a browser, the mini-program can call the browser's first programming interface and send a first callback function to the browser through the first programming interface, thereby sending a first listening request to the browser. The first listening request includes the first callback function. This allows the browser to call the first callback function when it determines that the state of the mini-program page meets preset conditions, thereby sending a first listening response to the mini-program. The first programming interface is an Application Programming Interface (API) of the browser.

[0034] The browser runs on the aforementioned client, and the mini-program can use the client's browser to render the mini-program page.

[0035] Optionally, since the first rendering time of a mini-program can only be calculated after the mini-program page starts rendering, the mini-program can first call the browser to render the mini-program page, and then send the first listening request to the browser.

[0036] Alternatively, to improve the accuracy of determining the first rendering duration, the mini-program can send the first listening request to the browser at the same time it starts calling the browser to render the mini-program page.

[0037] S102. Upon receiving the first listening response, obtain the current page information of the mini-program page.

[0038] S103. Determine the first rendering duration of the mini-program based on the current page information.

[0039] The first rendering duration refers to the duration during which the main content is first rendered on a mini-program page. The first rendering duration can also be called the First Meaningful Paint (FMP).

[0040] In this embodiment, during the rendering of the mini-program page, the mini-program sends a first listening request to the browser, requesting the browser to send a first listening response when the state of the mini-program page meets preset conditions. Upon receiving the first listening response, the mini-program can obtain the current page information and determine the first rendering duration based on that information. Therefore, this embodiment enables the mini-program to calculate the first rendering duration without relying on client-side calculation. This allows the first rendering duration to be statistically analyzed across various clients, enabling the evaluation of mini-program performance and stability in open-source scenarios.

[0041] Moreover, since the embodiments of this disclosure do not rely on the client to determine the first rendering time of the mini-program, the relationship between the calculation of mini-program performance indicators and the browser kernel is decoupled, so that the mini-program performance detection method provided by the embodiments of this disclosure can be applied to various scenarios such as in-vehicle systems, iOS and Android systems.

[0042] The following are Figure 1 The following is a detailed explanation of the performance testing methods for mini-programs:

[0043] In this embodiment of the disclosure, the first listening request can be a refresh listening request, a change listening request, or a cross-listening request. Correspondingly, the first programming interface corresponding to the first listening request can be: requestAnimationFrame, MutationObserver, or IntersectionObserver.

[0044] Because the first listening request is different, the preset conditions that the mini-program page state requested to be monitored by the first listening request also differ.

[0045] When the first listening request is a refresh listening request, the corresponding first programming interface is the request animation frame interface, i.e., requestAnimationFrame. At this time, the preset conditions include that the refresh state of the mini program page is in the moment before the next page refresh.

[0046] In this scenario, once the browser receives the first listening request—that is, after determining that requestAnimationFrame has been invoked and the first callback function has been received—it calls the first callback function just before each refresh of the mini-program page to send the first listening response to the mini-program.

[0047] Upon receiving the first listener request, the browser can redraw or reflow the mini-program page according to the browser's preset refresh frequency to refresh the mini-program page. Furthermore, it sends the first listener response to the mini-program just before each redraw or reflow.

[0048] Optionally, if the first listener request is a refresh listener request, the preset condition may also include that the mini-program page is in a rendering idle state just before the next refresh. In this case, the browser can send the first listener response to the mini-program just before each refresh of the mini-program page, while it is in a rendering idle state.

[0049] Generally, when a browser needs to implement animation effects, it can call the browser's requestAnimationFrame and send a callback function to the browser through requestAnimationFrame. This allows the browser to concentrate the operations of each Document Object Model (DOM) in each frame for repainting or reflow, thereby refreshing the webpage at a preset refresh frequency. The callback function is executed before each refresh to refresh the webpage, thus achieving the animation effect of the webpage.

[0050] This embodiment utilizes the mechanism that after requestAnimationFrame is invoked, the browser calls the first callback function before each page refresh, ensuring that the frequency at which the mini-program calculates the first rendering duration matches the browser's refresh frequency. Since the page content may change with each mini-program page refresh, this embodiment calculates the first rendering duration more accurately by following the browser's refresh frequency.

[0051] Moreover, this method avoids blocking the drawing and rendering of the mini program, does not affect the normal operation of the mini program, and makes the determined first drawing time more reflective of the true performance of the mini program.

[0052] When the first listener request is a change listener request, the first programming interface corresponding to the first listener request is the change listener interface, namely MutationObserver. In this case, the preset conditions include changes in document element nodes on the mini-program page. Document element nodes can also be referred to as DOM nodes.

[0053] In this scenario, once the browser receives the first listening request—that is, after confirming that MutationObserver has been invoked and the first callback function has been received—it calls the first callback function to send the first listening response to the mini-program when it detects a change in the document element node on the mini-program page.

[0054] After receiving the first listening request, the browser can listen for changes in the document element nodes within the mini-program page, and then send the first listening response to the mini-program whenever a change is detected in the document element nodes within the mini-program page.

[0055] In this embodiment of the disclosure, the mini-program sends a change listening request to the browser, enabling the mini-program to detect changes in the document element nodes on the mini-program page. Since the page content may change every time a document element node on the mini-program page changes, this embodiment of the disclosure calculates the first rendering duration more accurately by following the changes in the document element nodes on the mini-program page.

[0056] If the first listening request is a refresh listening request or a change listening request, the current page information in S102 above may include the current page content height.

[0057] At this point, the method described in S102 for determining the first rendering duration of the mini-program based on the current page information can be implemented as follows: compare the height of the current page content with the height of the terminal's display area. If the comparison shows that the height of the current page content reaches the height of the terminal's display area, then the time interval between the current moment and the mini-program's startup moment is taken as the first rendering duration of the mini-program. The height of the mini-program's display area can be the height of the terminal's screen.

[0058] Conversely, if the comparison shows that the height of the current page content does not reach the height of the terminal's display area, then we can wait for the next first listener response to be received, and continue to compare the height of the current page content with the height of the terminal's display area until the first rendering time of the mini-program is calculated.

[0059] In this embodiment of the disclosure, the user triggers the launch of the mini-program in the client, for example, when the user clicks the mini-program icon, the client launches the mini-program, and the mini-program records its own launch time.

[0060] In this way, the mini-program can follow the browser refresh rate or the changes in document element nodes on the mini-program page to calculate the first rendering time in real time, making the calculated first rendering time more accurate.

[0061] When the first listening request is a cross-listening request, the first programming interface corresponding to the first listening request is the cross-listening interface, i.e., IntersectionObserver. The preset conditions include the intersection of a preset placeholder element within the mini-program page and the terminal's display area. The preset placeholder element can be a separator (DIVision, div) element.

[0062] In this scenario, once the browser receives the first listening request—that is, after determining that IntersectionObserver has been invoked and the first callback function has been received—it calls the first callback function to send the first listening response to the mini-program when it detects an intersection between the preset placeholder element on the mini-program page and the terminal's display area.

[0063] Developers can insert a preset placeholder element into the root element of the rendering code on the mini-program page. The preset placeholder element can be a visible element or an invisible element.

[0064] Optionally, the first listening request may also include a threshold array. That is, the mini-program can also send a threshold array to the browser through the first programming interface. This array includes at least one ratio value, for example, [0, 0.25, 0.5, 0.75, 1], where each value represents the target ratio of the intersection area between the preset placeholder element and the terminal display area. Correspondingly, the preset condition may also include: the ratio of the intersection area between the preset placeholder element and the terminal display area is the target ratio. In this case, whenever the browser detects that the ratio of the intersection area between the preset placeholder element and the terminal display area is the target ratio, it sends a first listening response to the mini-program.

[0065] IntersectionObserver is generally used for lazy loading of images on web pages. It listens to whether the image being monitored is within the monitored area. When the image is within the monitored area, a callback function is called to lazy load the image, thus achieving preloading of the image before it enters the visible area.

[0066] Using the above method, the mini-program can send cross-listening requests to the browser to detect whether the preset placeholder element appears in the terminal display area, so as to determine the first rendering time of the mini-program based on the height of the preset placeholder element in the display area.

[0067] When the first listening request is a cross-listening request, i.e., the first programming interface is IntersectionObserver, the current page information includes the height of the current intersection area between the preset placeholder element and the terminal's display area.

[0068] At this point, the method described in S102 for determining the first rendering duration of the mini-program based on the current page information can be implemented as follows: Based on the current intersection region height and the preset placeholder element height, determine the current intersection ratio of the intersection region within the preset placeholder element, and compare the current intersection ratio with the preset ratio. If the comparison shows that the current intersection ratio reaches the preset ratio, then the time interval between the current moment and the mini-program's startup moment is taken as the first rendering duration of the mini-program.

[0069] Conversely, if the current crossover ratio is found to be below the preset ratio through comparison, we can continue to wait for the next time the first callback function is received, and then compare the current crossover ratio with the preset ratio again, until the first rendering time of the mini program is calculated.

[0070] Specifically, the ratio of the current intersection region height to the preset placeholder element height can be used as the current intersection ratio of the intersection region within the preset placeholder element. The preset ratio can be determined based on the size of the preset placeholder element. For example, if the preset placeholder element is the same size as the mini-program page, the preset ratio can be set to 50%.

[0071] In this embodiment of the disclosure, the user triggers the launch of the mini-program in the client, for example, when the user clicks the mini-program icon, the client launches the mini-program, and the mini-program records its own launch time.

[0072] Using the above method, the mini-program can send a cross-listening request to the browser to detect whether the proportion of the intersection area between the preset placeholder element and the terminal display area reaches the preset proportion, thereby knowing the current rendering status of the mini-program page and calculating the first rendering time of the mini-program.

[0073] In this embodiment of the disclosure, after determining the first rendering duration, the mini-program can report the determined first rendering duration. The reporting methods include the following three:

[0074] The mini-program can send the first drawing duration to the client.

[0075] Alternatively, the mini-program can record the first drawing duration in a specified storage location on the terminal; and the client can listen to and retrieve the first drawing duration from the specified storage location.

[0076] After obtaining the first drawing duration, the client can also send the first drawing duration to the server.

[0077] Alternatively, the mini-program can send the first drawing duration to the server.

[0078] Using the above method, the server can obtain the first rendering time of the mini-program, which makes it convenient to analyze the performance and stability of the mini-program based on the first rendering time.

[0079] In this embodiment of the disclosure, in addition to determining the first rendering duration of the mini-program, a second rendering duration can also be determined. The second rendering duration can be referred to as the First Contentful Paint (FCP). See also... Figure 2 The method for determining the second rendering duration of a mini-program includes the following steps:

[0080] S201. Before rendering the mini-program page using the browser, send a second listening request to the browser. This second listening request is used to request that a second listening response be sent to the mini-program when any visible content exists on the mini-program page.

[0081] In this embodiment of the disclosure, before the mini-program uses the browser to render the mini-program page, it can call the browser's second programming interface and send a second callback function to the browser through the second programming interface, thereby sending a second listening request to the browser. The second listening request includes the second callback function. This allows the browser to call the second callback function when it detects any visible content on the mini-program page, thereby sending a second listening response to the mini-program.

[0082] The second programming interface is a browser API. This interface can be a performance observer. Upon receiving the second observation request (i.e., confirming that the performance observer has been invoked and the second callback function has been received), the browser can monitor whether visible content exists on the mini-program page. When any visible content is detected, the browser invokes the second callback function to send a second observation response to the mini-program. Optionally, visible content can also be called meaningful content, which can be text, images, Scalable Vector Graphics (SVG), or non-white graphic elements (canvas), etc.

[0083] S202. Upon receiving the second listening response, determine the second rendering duration of the mini-program. The second rendering duration is the duration during which visible content is first rendered on the mini-program page.

[0084] In this embodiment of the disclosure, when the mini-program receives the second listening request, that is, when it is determined that the second callback function has been called, it can use the time interval between the current time and the startup time of the mini-program as the second rendering duration of the mini-program.

[0085] Using the above method, in this embodiment of the disclosure, the mini-program can sense the start rendering time of visible content on the mini-program page by sending a second listening request to the browser, thereby calculating the second rendering duration of the mini-program in real time. Compared with the method of calculating the second rendering duration of the mini-program using the client, this embodiment of the disclosure realizes that the second rendering duration is calculated by the mini-program itself without relying on client calculation. Therefore, the second rendering duration of the mini-program can be counted in various clients, enabling the performance and stability of the mini-program to be evaluated in open-source scenarios.

[0086] Moreover, since the embodiments of this disclosure do not rely on the client to determine the second rendering duration of the mini-program, the relationship between the calculation of mini-program performance indicators and the browser kernel is decoupled, enabling the mini-program performance detection method provided by the embodiments of this disclosure to be applied to various scenarios such as in-vehicle systems, iOS and Android systems.

[0087] In this embodiment of the disclosure, if the first drawing duration of the mini-program is not determined within a preset time after the mini-program starts after sending the first listening request to the browser in the above S101, then the first drawing duration of the mini-program can be determined to be equal to the second drawing duration.

[0088] For example, the preset duration can be 3 seconds.

[0089] It is understandable that if the first rendering time is not calculated after the mini program is launched and the preset time is not completed, there may be problems such as browser failure or network failure. Therefore, it can be determined that the first rendering time of the mini program is equal to the second rendering time, so as to avoid the situation where the first rendering time of the mini program is not obtained.

[0090] In this embodiment of the application, after determining the second drawing duration, the mini-program can report the determined second drawing duration. The reporting methods include the following three:

[0091] The mini-program sends the second drawing duration to the client.

[0092] Alternatively, the mini-program can record the second drawing duration in a specified storage location; and the client can listen to and retrieve the second drawing duration in the specified storage location.

[0093] After obtaining the second drawing duration, the client can also send the second drawing duration to the server.

[0094] Alternatively, the mini-program can send a second drawing duration to the server.

[0095] Using the above method, the server can obtain the second rendering time of the mini program, which makes it convenient to analyze the performance and stability of the mini program based on the second rendering time.

[0096] The technical solutions disclosed herein involve the collection, storage, use, processing, transmission, provision, and disclosure of mini-program performance information, all of which comply with relevant laws and regulations and do not violate public order and good morals.

[0097] In this embodiment of the disclosure, the above-described mini-program performance detection method can be specifically applied to the rendering layer thread of the mini-program. Based on this, see... Figure 3 The following describes the overall process of the mini-program performance detection method provided in this embodiment, in conjunction with practical application scenarios:

[0098] S301. When the client detects that the user clicks the mini-program icon, the mini-program is launched.

[0099] S302. The client downloads the mini-program package from the server.

[0100] When the client downloads the mini-program package, the mini-program framework synchronously initializes the logic layer and the rendering layer, which run on different threads.

[0101] S303, The logic layer of the mini-program loads the logic code of the dynamic libraries and plugins referenced by the developer.

[0102] In this embodiment of the disclosure, the developer refers to the developer of the mini-program that the user clicks.

[0103] S304, The mini-program logic layer loads the developer's logic code.

[0104] The developer logic code includes mini-program (application, APP) logic code, page logic code, developer-defined component logic code, and other programming language (JavaScript, JS) module logic code. Custom components are used to independently implement specific functions of the mini-program, while JS modules can be referenced to implement specific common capabilities.

[0105] S305, The mini-program logic layer executes the mini-program start (APP.onLaunch) callback.

[0106] `APP.onLaunch` is the operation that needs to be performed at the beginning of the mini-program's lifecycle. The specific operation can be defined by the developer. For example, permission verification can be added during the execution of the `onLaunch` callback.

[0107] S306. The mini-program logic layer collects initial data (initData) and sends the initial data (initData) to the mini-program rendering layer.

[0108] Initial data includes initial data for the app, pages, and custom components. The initData collection time can be used to measure the performance of the mini-program's logic layer.

[0109] S307. The mini-program rendering layer calls PerformanceObserver and sends a second callback function to the browser through PerformanceObserver, so that the browser calls the second callback function when it detects any visible content on the mini-program page.

[0110] S308, Mini Program rendering layer loads template files and style files.

[0111] The template files include the page template (page.swan) file, and the style files include the APP style (app.css) file and the page style (page.css) file.

[0112] S309, Mini Program rendering layer loads SJS file.

[0113] Among them, the WeChat Mini Program custom scripting language (safe / subset javascript, SJS) file is used to support loading JS modules in the page template.

[0114] S310: The mini-program rendering layer loads the rendering code of dynamic libraries and plugins referenced by the developer.

[0115] After the mini-program rendering layer completes the loading of template files, style files, SJS files, dynamic libraries, and plugins, the mini-program rendering layer initialization is complete.

[0116] S311, The mini-program rendering layer receives initData.

[0117] S312. The mini-program rendering layer renders the mini-program page according to initData and sends the first submission (firstRendered) to the mini-program logic layer. Here, firstRendered indicates that the rendering of the mini-program page has started.

[0118] S313, The mini-program logic layer executes the mini-program loading (APP.onLoad) and page loading (page.onLoad) callbacks.

[0119] APP.onLoad specifies the operations to be performed during the loading phase of a mini-program's lifecycle; the specific operations are defined by the developer. page.onLoad specifies the operations to be performed during the loading phase of a page's lifecycle; the specific operations are also defined by the developer.

[0120] S314. The mini-program logic layer requests master data from the specified server and sends the master data to the mini-program rendering layer.

[0121] The designated server and the specific content of the master data are both defined by the developer. The speed and volume of master data requests can be used to evaluate the performance of the mini-program.

[0122] S315. The mini-program rendering layer calls requestAnimationFrame and sends the first callback function to the browser through requestAnimationFrame, so that the browser calls the first callback function just before each redraw of the mini-program page.

[0123] S316. When the mini-program rendering layer determines that the second callback function has been called, it uses the time interval between the current time and the startup time of the mini-program as the FCP of the mini-program and sends the FCP to the client.

[0124] S317. The mini-program rendering layer continues to use the browser to render the mini-program page based on the master data.

[0125] S318. When the mini-program rendering layer determines that the first callback function has been called, it checks whether the height of the current page content exceeds the height of the terminal screen. If yes, it executes S319; otherwise, it waits for the next check.

[0126] S319. The mini-program rendering layer uses the time interval between the current time and the mini-program's startup time as the mini-program's FMP and sends the FMP to the client.

[0127] Based on the same inventive concept, corresponding to the above method embodiments, this disclosure also provides a mini-program performance testing device, applied to mini-programs, such as... Figure 4 As shown, the device includes: a sending module 401, an acquisition module 402, and a determining module 403;

[0128] The sending module 401 is used to send a first listening request to the browser during the process of rendering the mini-program page using the browser. The first listening request is used to request that the mini-program send a first listening response when the state of the mini-program page meets the preset conditions.

[0129] The acquisition module 402 is used to acquire the current page information of the mini-program page when the first listening response is received;

[0130] The determination module 403 determines the first rendering duration of the mini-program based on the current page information obtained by the acquisition module 402. The first rendering duration is the duration during which the main content of the mini-program page is first rendered.

[0131] In some embodiments of this disclosure, when the first listening request is a refresh listening request, the preset conditions include that the refresh status of the mini-program page is at the moment before the next page refresh.

[0132] Alternatively, if the first listening request is a change listening request, the preset conditions include changes to document element nodes in the mini-program page.

[0133] In some embodiments of this disclosure, the current page information includes the current page content height; the determining module 403 is specifically used for:

[0134] Compare the height of the current page content with the height of the display area on the terminal;

[0135] If the height of the current page content reaches the height of the terminal's display area through comparison, then the time interval between the current moment and the start time of the mini-program will be used as the first rendering duration.

[0136] In some embodiments of this disclosure, when the first listening request is a cross-listening request, the preset conditions include the intersection of a preset placeholder element in the mini-program page and the display area of ​​the terminal.

[0137] In some embodiments of this disclosure, the current page information includes the height of the current intersection area between the preset placeholder element and the display area of ​​the terminal; the determining module 403 is specifically used for:

[0138] Based on the current height of the intersection region and the height of the preset placeholder element, determine the current intersection ratio of the intersection region within the preset placeholder element;

[0139] Compare the current crossover ratio with the preset ratio;

[0140] If the current crossover ratio reaches the preset ratio through comparison, the time interval between the current moment and the start time of the mini-program will be used as the first drawing duration.

[0141] In some embodiments of this disclosure, the sending module 401 is further configured to send a second listening request to the browser before the browser renders the mini-program page. The second listening request is configured to request that a second listening response be sent to the mini-program when any visible content exists on the mini-program page.

[0142] The determination module 403 is also used to determine the second rendering duration of the mini program when the second listening response is received. The second rendering duration is the duration during which the visible content is first rendered on the mini program page.

[0143] In some embodiments of this disclosure, the determining module 403 is further configured to, after sending the first listening request to the browser, determine that the first drawing duration is equal to the second drawing duration if the first drawing duration is not determined within a preset time after the mini-program starts.

[0144] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0145] Figure 5 A schematic block diagram of an example electronic device 500 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0146] like Figure 5 As shown, the electronic device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. The RAM 503 may also store various programs and data required for the operation of the electronic device 500. The computing unit 501, ROM 502, and RAM 503 are interconnected via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0147] Multiple components in electronic device 500 are connected to I / O interface 505, including: input unit 506, such as keyboard, mouse, etc.; output unit 507, such as various types of monitors, speakers, etc.; storage unit 508, such as disk, optical disk, etc.; and communication unit 509, such as network card, modem, wireless transceiver, etc. Communication unit 509 allows electronic device 500 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0148] The computing unit 501 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 501 performs the various methods and processes described above, such as the applet performance detection method. For example, in some embodiments, the applet performance detection method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 500 via ROM 502 and / or communication unit 509. When the computer program is loaded into RAM 503 and executed by the computing unit 501, one or more steps of the applet performance detection method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the applet performance detection method by any other suitable means (e.g., by means of firmware).

[0149] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0150] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0151] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0152] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0153] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0154] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0155] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0156] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for testing the performance of a mini-program, applied to mini-programs, comprising: During the rendering of a mini-program page using a browser, a first listening request is sent to the browser. The first listening request is used to request that a first listening response be sent to the mini-program when the state of the mini-program page meets preset conditions. If the first listening request is a refresh listening request, the preset conditions include that the refresh state of the mini-program page is before the next page refresh; or, if the first listening request is a change listening request, the preset conditions include that the document element nodes in the mini-program page change; or, if the first listening request is a cross-listening request, the preset conditions include that a preset placeholder element in the mini-program page intersects with the display area of ​​the terminal. Upon receiving the first listening response, obtain the current page information of the mini-program page; The first rendering duration of the mini-program is determined based on the current page information. The first rendering duration is the duration during which the main content of the mini-program page is first rendered.

2. The method according to claim 1, wherein, When the first listening request is a refresh listening request or a change listening request, the current page information includes the current page content height; Determining the first rendering duration of the mini-program based on the current page information includes: Compare the height of the current page content with the height of the terminal's display area; If the height of the current page content reaches the display area height of the terminal through comparison, then the time interval between the current moment and the start time of the mini-program is taken as the first rendering duration.

3. The method according to claim 1, wherein, When the first listening request is a cross-listening request, the current page information includes the height of the current intersection area between the preset placeholder element and the display area of ​​the terminal; determining the first rendering duration of the mini-program based on the current page information includes: Based on the current intersection region height and the preset placeholder element height, determine the current intersection ratio of the intersection region within the preset placeholder element; Compare the current crossover ratio with the preset ratio; If the current crossover ratio reaches the preset ratio through comparison, then the time interval between the current moment and the startup moment of the mini-program is taken as the first drawing duration.

4. The method according to any one of claims 1-3, further comprising: Before the browser renders the mini-program page, a second listening request is sent to the browser. The second listening request is used to request that when any visible content exists on the mini-program page, the mini-program should send a second listening response. Upon receiving the second listening response, the second rendering duration of the mini-program is determined, which is the duration for which visible content is first rendered on the mini-program page.

5. The method according to claim 4, further comprising, after sending the first listening request to the browser: If the first drawing duration is not determined within the preset time after the mini-program is launched, then the first drawing duration is determined to be equal to the second drawing duration.

6. A performance testing device for a mini-program, applied to a mini-program, comprising: The sending module is used to send a first listening request to the browser during the rendering of the mini-program page. The first listening request is used to request that a first listening response be sent to the mini-program when the state of the mini-program page meets preset conditions. When the first listening request is a refresh listening request, the preset conditions include that the refresh state of the mini-program page is before the next page refresh; or, when the first listening request is a change listening request, the preset conditions include that the document element nodes in the mini-program page have changed; or, when the first listening request is a cross-listening request, the preset conditions include that a preset placeholder element in the mini-program page intersects with the display area of ​​the terminal. The acquisition module is used to acquire the current page information of the mini-program page when the first listening response is received; The determining module determines the first rendering duration of the mini-program based on the current page information obtained by the obtaining module. The first rendering duration is the duration during which the main content of the mini-program page is first rendered.

7. The apparatus according to claim 6, wherein, When the first listening request is a refresh listening request or a change listening request, the current page information includes the current page content height; the determining module is specifically used for: Compare the height of the current page content with the height of the terminal's display area; If the height of the current page content reaches the display area height of the terminal through comparison, then the time interval between the current moment and the start time of the mini-program is taken as the first rendering duration.

8. The apparatus according to claim 6, wherein, When the first listening request is a cross-listening request, the current page information includes the height of the current intersection area between the preset placeholder element and the display area of ​​the terminal; the determining module is specifically used for: Based on the current intersection region height and the preset placeholder element height, determine the current intersection ratio of the intersection region within the preset placeholder element; Compare the current crossover ratio with the preset ratio; If the current crossover ratio reaches the preset ratio through comparison, then the time interval between the current moment and the startup moment of the mini-program is taken as the first drawing duration.

9. The apparatus according to any one of claims 6-8, The sending module is further configured to send a second listening request to the browser before rendering the mini-program page using the browser. The second listening request is configured to request that a second listening response be sent to the mini-program when any visible content exists on the mini-program page. The determining module is further configured to determine the second rendering duration of the mini-program when receiving the second listening response, wherein the second rendering duration is the duration during which visible content is first rendered on the mini-program page.

10. The apparatus according to claim 9, The determining module is further configured to, after sending the first listening request to the browser, determine that the first drawing duration is equal to the second drawing duration if the first drawing duration is not determined within a preset time after the mini-program starts.

11. An electronic device, comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-5.

12. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-5.

13. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-5.

Images