Front-end page loading performance test method and device, storage medium and program product

Abstract

The invention provides a front-end page loading performance test method and device, a storage medium and a program product. The method comprises the following steps: acquiring a first video file, wherein the first video file comprises video content for loading a target front-end page; obtaining at least part of frame images and a preset image meeting a preset index requirement, wherein the at least part of frame images are taken from the first video file; determining the frame image of which the similarity with the preset image is greater than a preset threshold in the at least part of frame images as a key frame; acquiring loading time corresponding to the key frame; and obtaining a loading performance test result of the target front-end page according to the loading time corresponding to the key frame. According to the method, the loading performance of the front-end page can be tested by processing the loading video of the front-end page, the loading video of the front-end page is input in the test, the applicability is high, the method can be suitable for various user sides, the tested system is not limited, the tested application is not limited, and the test is flexible.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, device, storage medium, and program product for testing front-end page loading performance. Background Technology

[0002] Analyzing page load speed performance is one of the testers' tasks. Compared to functional testing, page load speed testing often requires a significant investment of manpower to obtain relatively accurate results. Page performance is particularly important for internet products, directly impacting user experience, and therefore page load speed needs to be closely monitored.

[0003] Most existing front-end loading performance testing solutions utilize online tools, which can meet the front-end performance testing needs of mainstream devices, but are not suitable for devices using uncommon system architectures. Furthermore, existing front-end loading performance testing solutions are geared towards desktop web pages or mobile H5 pages, but are inadequate for testing the front-end performance of native apps, hybrid apps, desktop software, lightweight mini-programs, and Internet of Things (IoT) applications. These applications do not fully or completely adopt web technology standards for information transmission and interaction, making existing solutions insufficient for front-end performance testing of these applications.

[0004] In summary, existing front-end loading performance testing solutions are limited by the system or application, resulting in poor testing flexibility. Summary of the Invention

[0005] The purpose of this invention is to provide a front-end page loading performance testing method, device, storage medium, and program product to solve the problem that existing front-end loading performance testing solutions are limited by the system or application and have poor testing flexibility.

[0006] To achieve the above objectives, in a first aspect, the present invention provides a front-end page loading performance testing method, comprising:

[0007] Obtain a first video file, wherein the first video file includes the video content of the target front-end page;

[0008] Acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file;

[0009] Frames in the at least some of the frame images that have a similarity greater than a preset threshold to the preset image are identified as keyframes;

[0010] Obtain the loading time corresponding to the keyframe;

[0011] Based on the loading time corresponding to the keyframes, the loading performance test results of the target front-end page are obtained.

[0012] In some embodiments, acquiring at least a portion of the frame images includes:

[0013] Based on the first screen refresh rate, the first video file is split into multiple images, where the first screen refresh rate is the screen refresh rate corresponding to the device that recorded the first video file;

[0014] Based on the pre-set test accuracy requirements, at least a portion of the frame images are extracted from the multiple images.

[0015] In some embodiments, the preset image includes the image corresponding to the first drawing, the image corresponding to the first content drawing, the image corresponding to the first effective drawing, and the image corresponding to the interactive time.

[0016] In some embodiments, the method further includes:

[0017] The similarity between each frame of the at least some frame images and the preset image is calculated using a preset image matching algorithm.

[0018] In some embodiments, calculating the similarity between each frame of the at least some frame images and the preset image using a preset image matching algorithm includes:

[0019] After determining an end frame image from at least a portion of the frame images using the preset image matching algorithm, the similarity between each frame image from the end frame image to the next start frame image after the end frame image and the image corresponding to the first drawing is calculated using the preset image matching algorithm.

[0020] Wherein, the similarity between the end frame image and the image corresponding to the interactive time is greater than the preset threshold, the similarity between the start frame image and the image corresponding to the first drawing is greater than the preset threshold, and the image corresponding to the interactive time and the image corresponding to the first drawing belong to the preset image.

[0021] In some embodiments, obtaining the loading time corresponding to the keyframe includes:

[0022] If multiple identical first keyframes exist during a loading process, the loading time corresponding to the first keyframe that appears earliest will be used as the loading time corresponding to the first keyframe.

[0023] In some embodiments, obtaining the loading time corresponding to the keyframe includes:

[0024] If a target keyframe is missing between two adjacent keyframes, the loading time of the keyframe that appears later in the two keyframes is determined as the loading time of the target keyframe.

[0025] Secondly, the present invention also provides a front-end page loading performance testing device, comprising:

[0026] The first acquisition module is used to acquire a first video file, wherein the first video file includes video content of the target front-end page;

[0027] The second acquisition module is used to acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file;

[0028] The first processing module is used to identify keyframes as frames in the at least part of the frame images that have a similarity greater than a preset threshold to the preset image.

[0029] The third acquisition module is used to acquire the loading time corresponding to the key frame;

[0030] The second processing module is used to obtain the loading performance test results of the target front-end page based on the loading time corresponding to the key frame.

[0031] Thirdly, the present invention also provides a front-end page loading performance testing device, including a processor and a transceiver, wherein the transceiver receives and sends data under the control of the processor, and the processor is used to perform the following operations:

[0032] Obtain a first video file, wherein the first video file includes the video content of the target front-end page;

[0033] Acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file;

[0034] Frames in the at least some of the frame images that have a similarity greater than a preset threshold to the preset image are identified as keyframes;

[0035] Obtain the loading time corresponding to the keyframe;

[0036] Based on the loading time corresponding to the keyframes, the loading performance test results of the target front-end page are obtained.

[0037] Fourthly, the present invention also provides a front-end page loading performance testing device, including a memory, a processor, and a program stored in the memory and executable on the processor; when the processor executes the program, it implements the front-end page loading performance testing method as described in the first aspect above.

[0038] Fifthly, the present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps in the front-end page loading performance testing method described in the first aspect above.

[0039] In a sixth aspect, the present invention also provides a computer program product, including computer instructions, which, when executed by a processor, implement the steps in the front-end page loading performance testing method described in the first aspect above.

[0040] The above-described technical solution of the present invention has at least the following beneficial effects:

[0041] In this embodiment of the invention, a first video file is obtained, which includes video content of loading a target front-end page; at least some frame images and preset images that meet preset index requirements are obtained, wherein the at least some frame images are taken from the first video file; frame images in the at least some frame images whose similarity to the preset images is greater than a preset threshold are determined as key frames; and the loading time corresponding to the key frames is obtained; finally, the loading performance test result of the target front-end page is obtained based on the loading time corresponding to the key frames. In this way, by processing the loading video of the front-end page, the loading performance test of the front-end page can be realized, and the test input is the loading video of the front-end page, which has strong applicability and can be applied to various user terminals without limiting the tested system or the tested application, thus making the test flexible. Attached Figure Description

[0042] Figure 1 A flowchart illustrating the front-end page loading performance testing method according to an embodiment of the present invention;

[0043] Figure 2 This is a schematic diagram illustrating the corresponding states of each frame during the page loading process according to an embodiment of the present invention.

[0044] Figure 3 A schematic diagram illustrating the overall workflow of the method according to an embodiment of the present invention;

[0045] Figure 4 A schematic diagram of the modules of the front-end page loading performance testing device according to an embodiment of the present invention;

[0046] Figure 5 This is a schematic diagram of the hardware structure of a front-end page loading performance testing device according to an embodiment of the present invention. Detailed Implementation

[0047] To make the technical problems, technical solutions and advantages of the present invention clearer, a detailed description will be given below in conjunction with the accompanying drawings and specific embodiments.

[0048] The following section will first introduce the content related to the solutions provided in the embodiments of this application.

[0049] 1. Background and Metrics of Front-end Loading Performance Testing

[0050] Product performance directly impacts user experience. Analyzing front-end page loading speed is one of the tasks of testers. Compared to functional testing, page loading speed testing often requires a significant investment of manpower to obtain relatively accurate test results.

[0051] Example of a scenario for front-end page loading speed performance testing:

[0052] (1) Page upgrade and performance comparison of new and old pages: New pages often add new features, which may cause the page loading speed to slow down. The performance comparison of new and old pages can provide a basis for control of this launch. For example, the loading speed of the new page should not be 10% slower than that of the old page.

[0053] (2) There are similar competing products in the market. Competitive product comparison analysis: Analyze the performance gap between our product and the competitor's product, and put forward performance improvement requirements for our page. For example, if our product's loading time is more than 1.5 times that of the competitor's product, then it is necessary to optimize the page performance.

[0054] (3) Product research: If there is a lack of testing experience for the new page to be launched, you can refer to similar product pages and test the average loading speed performance of similar pages to provide a reference for the launch of new products. For example, the loading speed of the new page should not exceed 20% of the average level of similar pages before the new product can be launched for the first time.

[0055] 2. The main reference indicators for front-end loading performance are as follows:

[0056] (1) First Paint (FP)

[0057] After the rendering process confirms that the current response resource needs to be rendered, the rendering process will first create a blank page. This point in time when the blank page is created is usually called First Paint, or FP for short.

[0058] (2) First Contentful Paint (FCP)

[0059] The point in time when a user sees some "content" elements being drawn on the page, unlike a blank screen, when the first pixel is drawn on the page, is called First Content Paint, or FCP for short.

[0060] (3) First Meaningful Paint (FMP)

[0061] The time when meaningful content is first rendered is the point in time from when the page loads until most or all of the content has been rendered on the first screen.

[0062] (4) Time to Interactive (TTI)

[0063] The point in time when the page content has finished loading.

[0064] Most existing front-end loading performance testing solutions involve using online tools or modifying the source code to insert performance monitoring code. Examples include Google Page Speed ​​Insight (a tool designed to optimize web pages across all devices and improve page loading speed), Pingdom (a website performance monitoring service that monitors website availability and performance, providing real-time alerts and analysis), WebPageTest (a powerful online tool that tests web page performance by simulating real-world user scenarios with different geographical locations and browser settings), and custom tracking points. These tools can be used to test page loading speed. Browser developer tools (such as Chrome DevTools) can also be used for performance analysis. The Network tab in browser developer tools (such as Chrome DevTools) allows developers to view request times, helping them analyze loading performance. The Audits panel can also be used to test resource loading efficiency, analyzing resource requests and responses during page loading.

[0065] As can be seen from the above, most existing front-end loading performance testing solutions use online tools to test front-end loading speed. These solutions have certain requirements on the device system, application type, and the relevant knowledge of the testers.

[0066] For the system under test, existing front-end loading performance testing solutions can meet the front-end performance testing needs of mainstream devices such as Windows, Mac, iOS, Android, or Linux. However, for smart wearable devices, IoT home appliances, electronic office equipment, digital cameras, e-readers, etc., which may use uncommon system architectures, these devices are often equipped with screens that can interact with users, and existing solutions cannot be used for testing.

[0067] For application formats, existing front-end loading performance testing solutions are geared towards desktop web pages or mobile H5 pages. However, for native applications, hybrid applications, desktop software, lightweight mini-programs, Internet of Things (IoT) applications, etc., which do not or do not fully adopt web technology standards for information transmission and interaction, existing solutions are difficult to solve the front-end performance testing of these applications.

[0068] The testing process involves several factors, including the need for testers to have a certain level of industry-related knowledge, a learning curve to become proficient in using existing testing methods, and the requirement for testers to develop or modify the source code of the tested object and manually process test records. These issues lead to longer testing cycles and inaccurate test results.

[0069] To address the aforementioned technical problems, this invention provides a method, apparatus, storage medium, and program product for testing front-end page loading performance. The method and apparatus are based on the same concept, and since the principles underlying the problems solved are similar, their implementations can be mutually referenced; repeated details will not be elaborated further.

[0070] like Figure 1 The diagram shown is a flowchart illustrating a front-end page loading performance testing method provided in an embodiment of the present invention. The method may include:

[0071] Step 101: Obtain the first video file, which includes the video content of loading the target front-end page.

[0072] The first video file can be obtained through user input. The video content for loading the target front-end page can be obtained through screen recording or other devices.

[0073] Compared to filming the screen (the device screen loading the target front-end page), screen recording can ignore environmental influences outside the screen, such as the user's hands during operation or slight screen shake. Therefore, if the device corresponding to the front-end page being tested supports screen recording, screen recording should be used to obtain the first video file as the test input. If screen recording is not supported, the stability of both the filming and testing devices must be ensured to minimize shaking. During the loading phase of the target front-end page, any objects outside the screen should also be minimized from entering the frame.

[0074] For accuracy, the video often needs to repeatedly load the front-end page multiple times, even dozens of times, ensuring that each loading process is complete. This process can be achieved by using front-end automation tools to repeatedly open and close the front-end page under test (the target front-end page), or by the user manually performing the operation. In other words, the first video file includes video content from one or more loads of the target front-end page.

[0075] With the intelligent transformation and development of various electronic devices, more and more devices are incorporating screen hardware. The technical solution of this invention has no requirements for the system under test or the application format. The system under test can obtain a complete video of the front-end page loading process through its own screen recording or other devices, that is, the video content of loading the target front-end page. Based on this, further analysis and processing of front-end loading performance can be performed. This also ensures that the test results are completely realistic and consistent with the user's intuitive experience.

[0076] Step 102: Obtain at least some frame images and preset images that meet preset index requirements, wherein the at least some frame images are taken from the first video file;

[0077] Here, the preset image may be at least partially taken from the first video file; that is, the preset image may be entirely or partially taken from the first video file. The preset image may also be an image obtained beforehand, acquired by the user through screenshots taken during the loading process of the target front-end page, and then obtained by the device executing the method of the present invention through user input.

[0078] When the preset image is taken from the first video file, the other part of the preset image can be an image added by the user, such as a screenshot taken when the user is using the device normally and the device is loading a page. In other words, users can customize it according to their specific needs. For example, the matching image (referring to the newly added image) can be input by the user. The user can input multiple images, corresponding to different page states during the loading process.

[0079] Optionally, the preset images include, but are not limited to, the image corresponding to the first drawing, the image corresponding to the first content drawing, the image corresponding to the first effective drawing, and the image corresponding to the interactive time.

[0080] Among them, the preset indicator requirements for the first drawing of an image refer to meeting the definition requirements for the first drawing; the preset indicator requirements for the first content drawing of an image refer to meeting the definition requirements for the first content drawing; the preset indicator requirements for the first effective drawing of an image refer to meeting the definition requirements for the first effective drawing; and the preset indicator requirements for the interactive time of an image refer to meeting the definition requirements for the interactive time.

[0081] Step 103: Determine the frames in the at least part of the frame images that have a similarity greater than a preset threshold with the preset image as key frames;

[0082] Before performing step 103, the similarity between each frame image in at least some of the frame images and the preset image is calculated.

[0083] Among them, at least some of the frame images have a similarity to the preset image greater than a preset threshold, indicating that the frame image matches the preset image, that is, the key frame matches the preset image.

[0084] Step 104: Obtain the loading time corresponding to the key frame;

[0085] As mentioned above, the first video file may include video content from multiple loading cycles of the target front-end page, that is, video content from multiple loading cycles of the target front-end page. Therefore, the loading time corresponding to the keyframe specifically refers to the loading time of the keyframe in its respective cycle (i.e., in its corresponding loading process).

[0086] Specifically, based on the time information of the frame images in the first video file, the loading time corresponding to the key frame is obtained. For example, during a page loading process, if the key frame matches the image corresponding to the first drawing, then the key frame is the start frame, and the time corresponding to the start frame is set to time 0 of this loading process. If the key frame matches the image corresponding to the interactive time, then the key frame is the end frame, and the loading time corresponding to the end frame is the time corresponding to the end frame minus the time corresponding to the start frame.

[0087] Step 105: Obtain the loading performance test results of the target front-end page based on the loading time corresponding to the key frame.

[0088] Here, if the first video file includes video content from multiple loading processes of the target front-end page, then the loading time for each keyframe will also have multiple values. In this case, the average and variance of the loading time for each keyframe are calculated. Finally, the loading performance test results of the target front-end page include the loading time, average, and variance for each keyframe. The loading performance test results of the target front-end page can be output in tabular form. See Table 1 for an example.

[0089] Table 1 Example of Test Report

[0090]

[0091] In Table 1, the serial number represents the i-th loading of the target front-end page.

[0092] The method of this invention can perform loading performance testing on front-end pages by processing the loading video of the front-end page. Moreover, the test input is the loading video of the front-end page, which has strong applicability and can be applied to various user terminals. It does not limit the tested system or the tested application, thus making the test flexible.

[0093] In an optional embodiment, obtaining at least a portion of the frame images in step 102 above includes:

[0094] Based on the first screen refresh rate, the first video file is split into multiple images, where the first screen refresh rate is the screen refresh rate corresponding to the device that recorded the first video file.

[0095] Here, splitting the first video file into multiple images can be achieved using MoviePy, i.e., directly calling MoviePy. MoviePy is a Python library for video editing that allows users to process, edit, and manipulate video files. MoviePy is based on libraries such as NumPy, ImageIO, and Decorator, making video processing more efficient. This library provides a range of functions, including but not limited to trimming and merging videos, adding text and graphics, modifying video effects, audio processing, format conversion, and creating custom effects. To use MoviePy to capture frames, you need to import the submodule VideoFileClip, use the VideoFileClip class to create a video clip object, and then use the save_frame method to perform the frame capture operation. The input to this method includes two parameters: one is the filename of the generated image, and the other is the time to be captured, which can be a decimal. Example code is as follows:

[0096] from moviepy.editor import VideoFileClip # Import the submodule VideoFileClip

[0097] clip = VideoFileClip("demo.mp4") # Load the video file demo.mp4

[0098] clip.save_frame("frame.png", t = 1.5) # Extracts the frame corresponding to the 1.5-second mark and saves it as frame.png

[0099] Based on the pre-set test accuracy requirements, at least a portion of the frame images are extracted from the multiple images.

[0100] It should be noted that image matching is time-consuming, and the image library after frame splitting (consisting of multiple images) is very large. To avoid adding useless images, testers need to pre-set the test precision requirements, such as seconds, 0.1 seconds, 0.01 seconds. For example, with a precision of seconds, one image needs to be extracted per second; with a precision of 0.1 seconds, 10 images need to be extracted per second, and so on. The extracted image library (i.e., at least a portion of the frame images) serves as the input for the similarity matching step.

[0101] Optionally, at least some of the frame images are arranged at equal intervals in time.

[0102] Here, the preset images can be selected by the testers from multiple images according to preset index requirements (i.e., according to the definitions of FP, FCP, FMP, and TTI). The images are the first image drawn, the first image drawn for content, the first image drawn for effective content, and the image drawn for interactive time. Preset images can also be added according to actual needs as input for the similarity matching process.

[0103] In the similarity matching stage, each frame in at least a subset of the images needs to be matched with a preset image to obtain the state corresponding to each frame. See the attached diagram for a detailed illustration. Figure 2 .

[0104] To simplify the process, the FP (First Render) time is very short. Therefore, the frame image matched by the image corresponding to the FP (First Render) (matching means that the similarity between the frame image and the image corresponding to the FP is greater than a preset threshold) is used as the start frame, and the frame image matched by the image corresponding to the TTI (Time-Initial Render) is used as the end frame. During the test, the process from the start frame to the end frame is one loading process. Other frames outside the process are useless frames, and the frames between the start frame and the end frame are process frames.

[0105] In an optional embodiment, prior to step 103, the method of the present invention further includes:

[0106] The similarity between each frame of the at least some frame images and the preset image is calculated using a preset image matching algorithm.

[0107] Optionally, the preset image matching algorithm is an image matching algorithm with peak signal-to-noise ratio (PSNR) as the indicator or an image matching algorithm with structural similarity index (SSIM) as the indicator.

[0108] Among these methods, SSIM can be prioritized for image matching because it effectively measures the structural similarity between two images (e.g., at least one frame from a subset of frames and a preset image). SSIM comprehensively evaluates the structural similarity of two images by comparing their brightness, contrast, and structure. The input to SSIM is two images, assuming they are x and y, and the calculation formula for SSIM is shown in Equation 3-1:

[0109] SSIM(x,y)=[l(x,y)] α [c(x,y)] β [s(x,y)] γ (3-1)

[0110] in:

[0111]

[0112] Here, l(x,y) represents brightness comparison, c(x,y) represents contrast comparison, and s(x,y) represents structure comparison. x μ represents the average value of x. y σ represents the average value of y. x σ represents the standard deviation of x. y σ represents the standard deviation of y. xy This represents the covariance of x and y. c is a constant to avoid systematic errors caused by a denominator of 0. In practical engineering, α = β = γ = 1, and c3 = c22 are generally set.

[0113] This invention can directly use functions provided by OpenCV to calculate the SSIM value of two grayscale images. This value, between 0 and 1, represents the structural similarity between the two images. The closer the value is to 1, the higher the similarity between the two images; the closer the value is to 0, the lower the similarity between the two images. In practical use, the threshold can be adjusted. For example, a threshold of 0.9 can be set (i.e., the preset threshold is 0.9). When the structural similarity between the image obtained by splitting the first video file and the start frame, end frame, or a specific frame is >0.9, then the time corresponding to this image is determined as the start time, end time, or the time when the corresponding specific frame is loaded.

[0114] In an optional embodiment, the above-mentioned calculation of the similarity between each frame image in at least a portion of the frame images and the preset image using a preset image matching algorithm includes:

[0115] After determining an end frame image from at least a portion of the frame images using the preset image matching algorithm, the similarity between each frame image from the end frame image to the next start frame image after the end frame image and the image corresponding to the first drawing is calculated using the preset image matching algorithm.

[0116] Wherein, the similarity between the end frame image and the image corresponding to the interactive time is greater than the preset threshold, the similarity between the start frame image and the image corresponding to the first drawing is greater than the preset threshold, and the image corresponding to the interactive time and the image corresponding to the first drawing belong to the preset image.

[0117] In this embodiment, after the end frame of a stage, only the start frame is matched until the start frame image of the next stage is matched. This ensures that each frame from the end frame to the next start frame (including the next start frame) is matched only with the start frame, without having to match with the process frame, reducing the number of image matching times and thus improving testing efficiency.

[0118] When high testing accuracy is required, multiple identical keyframes may be identified through image similarity matching. In order to determine the loading time corresponding to the keyframe, the present invention provides the following optional solutions.

[0119] In an optional embodiment, step 104 above, obtaining the loading time corresponding to the keyframe, includes:

[0120] If multiple identical first keyframes exist during a loading process, the loading time corresponding to the first keyframe that appears earliest will be used as the loading time corresponding to the first keyframe.

[0121] In other words, each keyframe may appear multiple times during a single loading process, so only the time of the first appearance of that keyframe is recorded, that is, the loading time corresponding to the first keyframe with the earliest appearance time.

[0122] Based on testing experience and experiments, among the frame images matching the image corresponding to FP, FCP, FMP, and TTI, the frame images matching the image corresponding to FP and TTI consistently appear with each target front-end page load. However, the frame images matching the image corresponding to FCP and FMP may sometimes fail to appear. To prevent the loading time corresponding to each keyframe from being lost, in an optional embodiment, step 104 above, obtaining the loading time corresponding to the keyframe, includes:

[0123] If a target keyframe is missing between two adjacent keyframes, the loading time of the keyframe that appears later in the two keyframes is determined as the loading time of the target keyframe.

[0124] For example, if an FPC state (which should be understood as the frame image matching the image corresponding to the FCP) does not occur, the loading time of the current FMP state (which should be understood as the frame image matching the image corresponding to the FMP) is set as the loading time of the current FCP state. Similarly, if an FMP state does not occur, the loading time of the current TTI state (which should be understood as the frame image matching the image corresponding to the TTI) is set as the loading time of the current FMP state. If other added keyframes (frame images matching the preset image added by the tester) do not occur, the loading time of the next keyframe after that keyframe is taken as the loading time of that keyframe.

[0125] See Figure 3 The overall workflow of the method of the present invention is described below. Specifically, it includes:

[0126] Step 301: Obtain video materials;

[0127] Step 302: Split the video material into multiple images;

[0128] Step 303: Extract at least some frame images from multiple images according to the set test accuracy requirements;

[0129] Step 304: Select a preset image from multiple images (or multiple images and newly added images input by the user);

[0130] Step 305: At least some frame images are matched with preset images for similarity, and the loading time of the key frames that are successfully matched is recorded.

[0131] Step 306: Output the test result report for each indicator and the average value and variance of each indicator.

[0132] Here, each metric corresponds to an average value, which refers to the average loading time of the corresponding keyframe. Each metric also corresponds to a variance, which refers to the variance of the loading time of the corresponding keyframe.

[0133] The method of this invention can be implemented using an automated test script. The tester needs to input video material, test accuracy requirements, and selected preset image frames. The script outputs a test result report for each index loaded each time, as well as the average value and variance of each index.

[0134] The method of this invention has three advantages: First, by processing the loading video of the front-end page, it enables performance testing of the front-end page's loading. The test input is the loading video of the front-end page, making it highly applicable to various user terminals, without limiting the tested system or application, thus enhancing testing flexibility. Second, the input is the front-end loading video, which, after undergoing a series of algorithms such as image matching, directly outputs performance test results. The entire process is automated, highly efficient, and yields accurate results. The testing phase requires no code development and does not require intrusion into the source code of the tested object, completing a time-consuming and difficult test that would otherwise be manual, saving testing manpower. Third, because it is machine-executed, the loading process of each front-end page is relatively fixed, and the accuracy of image similarity matching is high, thus making the test results more reliable and improving their accuracy.

[0135] like Figure 4 As shown, this embodiment of the invention also provides a front-end page loading performance testing device, which includes:

[0136] The first acquisition module 401 is used to acquire a first video file, the first video file including the video content of the target front-end page;

[0137] The second acquisition module 402 is used to acquire at least some frame images and preset images that meet preset index requirements, wherein the at least some frame images are taken from the first video file;

[0138] The first processing module 403 is used to identify keyframes as frames in the at least part of the frame images that have a similarity greater than a preset threshold to the preset image.

[0139] The third acquisition module 404 is used to acquire the loading time corresponding to the key frame;

[0140] The second processing module 405 is used to obtain the loading performance test results of the target front-end page based on the loading time corresponding to the key frame.

[0141] Optionally, the second acquisition module 402 includes:

[0142] The first processing unit is configured to split the first video file into multiple images based on a first screen refresh rate, wherein the first screen refresh rate is the screen refresh rate corresponding to the device that recorded the first video file.

[0143] The first acquisition unit is used to extract at least a portion of the frame images from the plurality of images according to a pre-set test accuracy requirement.

[0144] Optionally, the preset image includes the image corresponding to the first drawing, the image corresponding to the first content drawing, the image corresponding to the first effective drawing, and the image corresponding to the interactive time.

[0145] Optionally, the apparatus in this embodiment of the invention further includes:

[0146] The image matching module is used to calculate the similarity between each frame image in at least some of the frame images and the preset image using a preset image matching algorithm.

[0147] Optionally, the image matching module includes:

[0148] An image matching unit is used to determine, through the preset image matching algorithm, each end frame image from the at least some frame images, and then, through the preset image matching algorithm, calculate the similarity between each frame image from the end frame image to the next start frame image after the end frame image and the image corresponding to the first drawing.

[0149] Wherein, the similarity between the end frame image and the image corresponding to the interactive time is greater than the preset threshold, the similarity between the start frame image and the image corresponding to the first drawing is greater than the preset threshold, and the image corresponding to the interactive time and the image corresponding to the first drawing belong to the preset image.

[0150] Optionally, the third acquisition module 404 includes:

[0151] The second acquisition unit is used to, in a single loading process, if there are multiple identical first keyframes, take the loading time corresponding to the first keyframe that appears earliest as the loading time corresponding to the first keyframe.

[0152] Optionally, the third acquisition module 404 includes:

[0153] The third acquisition unit is used to determine the loading time of the target key frame as the loading time of the key frame that appears later in the two key frames when there is no target key frame between two adjacent key frames.

[0154] The front-end page loading performance testing device of this invention acquires a first video file, which includes video content of loading a target front-end page; acquires at least a portion of frame images and a preset image that meets preset index requirements, wherein the at least a portion of frame images are taken from the first video file; identifies frame images in the at least a portion of frame images whose similarity to the preset image is greater than a preset threshold as key frames; acquires the loading time corresponding to the key frames; and finally obtains the loading performance test result of the target front-end page based on the loading time corresponding to the key frames. In this way, by processing the loading video of the front-end page, the loading performance of the front-end page can be tested, and the test input is the loading video of the front-end page, which has strong applicability and can be applied to various user terminals without limiting the tested system or application, thus making the test flexible.

[0155] To better achieve the above objectives, such as Figure 5 As shown, this embodiment of the invention also provides a front-end page loading performance testing device, including a processor 500 and a transceiver 510. The transceiver 510 receives and sends data under the control of the processor 500, and the processor 500 is used to execute the following process:

[0156] Obtain a first video file, wherein the first video file includes the video content of the target front-end page;

[0157] Acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file;

[0158] Frames in the at least some of the frame images that have a similarity greater than a preset threshold to the preset image are identified as keyframes;

[0159] Obtain the loading time corresponding to the keyframe;

[0160] Based on the loading time corresponding to the keyframes, the loading performance test results of the target front-end page are obtained.

[0161] In some embodiments, the processor 500 is further configured to:

[0162] Based on the first screen refresh rate, the first video file is split into multiple images, where the first screen refresh rate is the screen refresh rate corresponding to the device that recorded the first video file;

[0163] Based on the pre-set test accuracy requirements, at least a portion of the frame images are extracted from the multiple images.

[0164] In some embodiments, the preset image includes the image corresponding to the first drawing, the image corresponding to the first content drawing, the image corresponding to the first effective drawing, and the image corresponding to the interactive time.

[0165] In some embodiments, the processor 500 is further configured to:

[0166] The similarity between each frame of the at least some frame images and the preset image is calculated using a preset image matching algorithm.

[0167] In some embodiments, the processor 500 is further configured to:

[0168] After determining an end frame image from at least a portion of the frame images using the preset image matching algorithm, the similarity between each frame image from the end frame image to the next start frame image after the end frame image and the image corresponding to the first drawing is calculated using the preset image matching algorithm.

[0169] Wherein, the similarity between the end frame image and the image corresponding to the interactive time is greater than the preset threshold, the similarity between the start frame image and the image corresponding to the first drawing is greater than the preset threshold, and the image corresponding to the interactive time and the image corresponding to the first drawing belong to the preset image.

[0170] In some embodiments, the processor 500 is further configured to:

[0171] If multiple identical first keyframes exist during a loading process, the loading time corresponding to the first keyframe that appears earliest will be used as the loading time corresponding to the first keyframe.

[0172] In some embodiments, the processor 500 is further configured to:

[0173] If a target keyframe is missing between two adjacent keyframes, the loading time of the keyframe that appears later in the two keyframes is determined as the loading time of the target keyframe.

[0174] The front-end page loading performance testing device of this invention acquires a first video file, which includes video content of loading a target front-end page; acquires at least a portion of frame images and a preset image that meets preset index requirements, wherein the at least a portion of frame images are taken from the first video file; identifies frame images in the at least a portion of frame images whose similarity to the preset image is greater than a preset threshold as key frames; acquires the loading time corresponding to the key frames; and finally obtains the loading performance test result of the target front-end page based on the loading time corresponding to the key frames. In this way, by processing the loading video of the front-end page, the loading performance of the front-end page can be tested, and the test input is the loading video of the front-end page, which has strong applicability and can be applied to various user terminals without limiting the tested system or application, thus making the test flexible.

[0175] This invention also provides a front-end page loading performance testing device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements the various processes in the front-end page loading performance testing method embodiments described above and achieves the same technical effect. To avoid repetition, it will not be described again here.

[0176] This invention also provides a computer-readable storage medium storing a computer program. When executed by a processor, this program implements the processes described above in the front-end page loading performance testing method embodiment, achieving the same technical effect. To avoid repetition, it will not be described again here. The computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0177] This invention also provides a computer program product, including computer instructions. When the computer instructions are executed by a processor, they implement the various processes described in the aforementioned front-end page loading performance testing method embodiment, and achieve the same technical effect. To avoid repetition, they will not be described again here.

[0178] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-readable storage media (including, but not limited to, disk storage and optical storage) containing computer-usable program code.

[0179] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 A device for one or more processes and / or the functions specified in one or more boxes.

[0180] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce a paper article including an instruction means, the instruction means being implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0181] These computer program instructions can also be loaded onto a computer or other programmable data processing equipment, causing the computer or other programmable equipment to perform a series of operational steps to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0182] The above description represents the preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A method for testing front-end page loading performance, characterized in that, include: Obtain a first video file, wherein the first video file includes the video content of the target front-end page; Acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file; Frames in the at least some of the frame images that have a similarity greater than a preset threshold to the preset image are identified as keyframes; Obtain the loading time corresponding to the keyframe; Based on the loading time corresponding to the keyframes, the loading performance test results of the target front-end page are obtained.

2. The method according to claim 1, characterized in that, The acquisition of at least a portion of the frame images includes: Based on the first screen refresh rate, the first video file is split into multiple images, where the first screen refresh rate is the screen refresh rate corresponding to the device that recorded the first video file; Based on the pre-set test accuracy requirements, at least a portion of the frame images are extracted from the multiple images.

3. The method according to claim 1, characterized in that, The preset images include the image corresponding to the first drawing, the image corresponding to the first content drawing, the image corresponding to the first effective drawing, and the image corresponding to the interactive time.

4. The method according to claim 1, characterized in that, The method further includes: The similarity between each frame of the at least some frame images and the preset image is calculated using a preset image matching algorithm.

5. The method according to claim 4, characterized in that, The step of calculating the similarity between each frame of the at least some frame images and the preset image using a preset image matching algorithm includes: After determining an end frame image from at least a portion of the frame images using the preset image matching algorithm, the similarity between each frame image from the end frame image to the next start frame image after the end frame image and the image corresponding to the first drawing is calculated using the preset image matching algorithm. Wherein, the similarity between the end frame image and the image corresponding to the interactive time is greater than the preset threshold, the similarity between the start frame image and the image corresponding to the first drawing is greater than the preset threshold, and the image corresponding to the interactive time and the image corresponding to the first drawing belong to the preset image.

6. The method according to claim 1, characterized in that, The step of obtaining the loading time corresponding to the keyframe includes: If multiple identical first keyframes exist during a loading process, the loading time corresponding to the first keyframe that appears earliest will be used as the loading time corresponding to the first keyframe.

7. The method according to claim 1, characterized in that, The step of obtaining the loading time corresponding to the keyframe includes: If a target keyframe is missing between two adjacent keyframes, the loading time of the keyframe that appears later in the two keyframes is determined as the loading time of the target keyframe.

8. A front-end page loading performance testing device, characterized in that, include: The first acquisition module is used to acquire a first video file, wherein the first video file includes video content of the target front-end page; The second acquisition module is used to acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file; The first processing module is used to identify keyframes as frames in the at least part of the frame images that have a similarity greater than a preset threshold to the preset image. The third acquisition module is used to acquire the loading time corresponding to the key frame; The second processing module is used to obtain the loading performance test results of the target front-end page based on the loading time corresponding to the key frame.

9. A front-end page loading performance testing device, comprising a processor and a transceiver, wherein the transceiver receives and sends data under the control of the processor, characterized in that, The processor is used to perform the following operations: Obtain a first video file, wherein the first video file includes the video content of the target front-end page; Acquire at least a portion of the frame images and a preset image that meets preset index requirements, wherein the at least a portion of the frame images are taken from the first video file; Frames in the at least some of the frame images that have a similarity greater than a preset threshold to the preset image are identified as keyframes; Obtain the loading time corresponding to the keyframe; Based on the loading time corresponding to the keyframes, the loading performance test results of the target front-end page are obtained.

10. A front-end page loading performance testing device, comprising a memory, a processor, and a program stored in the memory and executable on the processor; characterized in that, When the processor executes the program, it implements the front-end page loading performance testing method as described in any one of claims 1 to 7.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps in the front-end page loading performance testing method as described in any one of claims 1 to 7.

12. A computer program product, characterized in that, It includes computer instructions that, when executed by a processor, implement the steps in the front-end page loading performance testing method as described in any one of claims 1 to 7.

Images