CN104750471A - WEB page performance detection and analysis plug-in and method based on browser - Google Patents

Abstract

The invention discloses a browser-based WEB page performance detection, collection and analysis plug-in and method. This plug-in is the perfection and supplement of the prior art. After the user installs the plug-in in the browser, the HTTP Request information and related WEB page performance testing data are collected, analyzed regularly, processed according to various categories, and corresponding statistical reports are generated to provide WEB page performance testing data as a reference for different website developers, so that relevant website developers It can be adjusted and optimized for its own WEB page performance problems. The invention can provide corresponding reference basis for website developers who need to improve user experience of WEB browsing.

Description

A browser-based WEB page performance detection and collection analysis plug-in and method

technical field

The invention relates to a browser-based plug-in, in particular to a browser-based WEB page performance detection, collection and analysis plug-in and method.

Background technique

China Internet Network Information Center (CNNIC) released the "30th Statistical Report on Internet Development in China". The report shows that by the end of June 2012, the total number of domain names in China was 8.73 million, the number of websites was 2.5 million, and the number of Chinese netizens reached 5.38. billion, and the Internet penetration rate reached 39.9%. With the rapid development of the Internet, users have higher and higher requirements for the experience of browsing websites; how a website can achieve a reasonable coordination of front-end performance and visual effects has become an important issue that cannot be ignored.

Although there are many detection tools for performance optimization, and some tools can be used to find points that can be optimized in the website and make targeted improvements, if a website is still undergoing rapid iterative upgrades, how to ensure its performance is always at a certain level? The level of stability is a problem that must be faced. The performance optimization of WEB pages is a very important technical activity, which has a great impact on user experience. There is always a contradiction between performance and visual effects in WEB page development. Different versions and different types of browsers show great differences in effects and performance. This requires us to find a balance point and try our best to meet most situations.

At present, most companies related to website development are relatively slow in the development of WEB pages. Although some new technologies or solutions continue to appear in this area, it is more important to mix various solutions in Together, more people help each other and learn from each other.

To sum up, in view of the existing technical problems, a tool or system that can display the performance detection data of the site WEB pages in a real-time, comprehensive and intuitive manner is particularly needed, so that the bottleneck of the performance problem can be analyzed in time, and some solutions can be provided to solve the problem. the problems mentioned above.

Contents of the invention

For the existing problems of the prior art, the purpose of the present invention is to provide a browser-based WEB page performance detection and collection and analysis plug-in, to address various different versions of browsers and environments with different network bandwidths. Website developers who experience WEB browsing user experience provide corresponding references.

At the same time, the present invention also provides a WEB page performance detection and collection analysis method based on the plug-in.

In order to achieve the above object, the present invention adopts following technical scheme:

A browser-based WEB page performance detection and collection analysis plug-in, the plug-in is placed in the user's browser, by calling the corresponding interface of the browser, the HTTP request information of the relevant website browsed by the user through the browser and the related WEB Page performance detection data is collected and analyzed.

In a preferred example of the present invention, the plug-in includes three modules: performance detection, report, and remote transmission, wherein the performance detection module is responsible for various function detection of the WEB page and the network request generated by the page, response information and post-detection information. The report module is responsible for analyzing and processing the collected data to generate report files; the remote transmission module is responsible for sending the collected data directly to the specified target address; the priority of the remote transmission module is higher than that of the report module, if remote transmission is enabled function, the report module will be disabled, and the plug-in will not generate report files locally from the collected data.

Further, the plug-in detection collects the following data:

(1) Detect the network request and response information of the page;

(2) First rendering time and first screen time;

(3) Page size, the number and size of script files, style files, pictures loaded on the page, loading time, and the number of DOM elements on the page.

Still further, the network request information of the detection page includes: the request URL, the requested target host, the request method, and the time it takes to establish a TCP connection; the network response information includes: the status code in the response HTTP header information, whether to enable compression, Whether to enable caching, cache time, server type and version information.

Furthermore, the first rendering time detected by the plug-in is the time that the user feels from clicking a page link to staying on the original page before jumping to a new page; time required.

Further, the plug-in regularly analyzes the collected data, processes them according to various categories, and generates corresponding statistical reports.

Further, the plug-in regularly sends the collected data to the target address in JSON format via the HTTP protocol, and if it cannot connect to the directory address within a certain period of time, the plug-in automatically disables remote transmission.

As the second object of the present invention, a kind of WEB page performance detection and acquisition analysis method, described method comprises the following steps:

(1) Capture browser window opening and reloading events through plug-ins;

(2) Save the resource or event data and time-consuming data of the browser from sending the HTTP request to the complete loading of the page in the memory;

(3) Analyze and process the acquired data.

Further, in the step (1), after the browser HTTP connection request is triggered, the plug-in starts to detect a series of HTTP request and response information of the browser and browser page rendering information.

Further, before the step (1), a plug-in configuration step is included, and the configuration step performs the following configuration operations on the plug-in: report setting, detection website setting and remote transmission setting.

Still further, the report settings include: whether to generate a report, the time interval of report generation, the target location of report generation, whether to generate a website performance ranking report, the format of the generated report, and the storage time of the report, and the default configuration is to enable report generation ;At the same time, the report is divided into two formats: HTML and PDF, and the default is HTML format.

Still further, the setting of the detection website includes: detection of webpage range setting, detection of file type; wherein the detection of webpage range is in the form of a list, and multiple webpages with full or partial matching names can be set; detection of file type includes only detection of webpage information, Check other file information.

Still further, the remote transmission setting includes: whether to enable remote transmission, the IP address of the remote transmission, the port, the time interval of the remote transmission, and the remote transmission is not enabled by default.

The scheme provided by the present invention collects the HTTP request information of related websites browsed by the user and the performance detection data of the relevant WEB pages through the user installing the plug-in in the browser, analyzes them regularly, processes them according to various categories, and generates corresponding Statistical reports provide different website developers with WEB page performance detection data as a reference, so that relevant website developers can adjust and optimize their own WEB page performance problems. The invention can provide corresponding reference basis for website developers who need to improve user experience of WEB browsing.

Furthermore, the solution provided by the present invention is applicable to different browsers, and it can support mainstream browsers such as IE, Chrome, Opera, Firefox, Safari, etc., and has very wide practicability.

Description of drawings

The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments.

Fig. 1 is a schematic flow chart of processing in the present invention.

Detailed ways

In order to make the technical means, creative features, goals and effects achieved by the present invention easy to understand, the present invention will be further described below in conjunction with specific illustrations.

This plug-in is a perfection and supplement to the existing technology. After the user installs this plug-in in the browser, the plug-in calls the corresponding interface of the browser to detect the HTTP request information of the relevant website that the user has browsed through the browser and the performance of the related WEB page. Data is collected, analyzed regularly, processed according to various categories, and corresponding statistical reports are generated to provide different website developers with WEB page performance testing data as a reference, so that relevant website developers can target their own WEB page performance problems Adjust and optimize.

Based on the above principles, this plug-in is designed with two specifications and standards, IE's proprietary ActiveX and other browser-used NPAPI (Netscape plug-in application programming interface) standards; the plug-in is divided into three modules: report, performance detection, and remote transmission. Among them, the performance detection module is responsible for various function detection of WEB pages and the collection of network requests, response information and detected data generated by the pages (temporarily stored in the system memory); the report module is responsible for analyzing and processing the collected data Generate a report file (clear the collected data from the memory); the remote transmission module is responsible for sending the collected data directly to the specified target address (clear the collected data from the memory); the priority of the remote transmission module is greater than that of the report module, if If the remote transmission function is enabled, the report module will be invalid, and the plug-in will not generate report files locally from the collected data.

The plug-in formed according to the above scheme can realize the collection of the following information:

(1) Detect the network request and response information of the page;

The network request information of the detection page here includes: the request URL, the target host of the request, the request method, and the time it takes to establish a TCP connection;

The network response information includes: the status code in the response HTTP header information, whether to enable compression, whether to enable caching, caching time, server type and version information. Enabling compression and using cache on web pages can greatly reduce the bandwidth of network data transmission.

(2) First rendering time and first screen time;

The first rendering time is the period from when the user clicks on a page link to jumping to a new page and before the content of the new page appears. Loading, the content starts to display the results calculated during this period.

The first screen time refers to the time required for the upper area of the browser window to be filled, that is, the time for the visible area to be displayed when the browser page is opened (not all the content of the page is loaded).

(3) Page size, the number and size of script files, style files, pictures loaded on the page, loading time, and the number of DOM elements on the page.

Many people browse the web every day, read news, and shop online. In fact, they have been in contact with HTTP (Hypertext Transfer Protocol) all the time. The HTTP protocol is essentially using TCP/IP (a network communication protocol, which can be searched through Google and Baidu) to connect. Transmit data such as text and pictures on the server side of the relevant website to the client, and then parse and display it through the client browser.

The collection and analysis process of this plug-in is as follows:

In the present invention, the plug-in intercepts the request sent by the user to browse the webpage and the network data packet sent back from the server, thereby calculating the time interval between multiple requests and responses (pictures, style files, script files, etc. included on the page are all Individual requests), and process and analyze the request and response data to obtain information such as the request URL, request target host, request method, status code in the HTTP header information in the response data, cache time, data length (that is, the relevant file Size), compression algorithm and other data; by analyzing the data package, you can get the size and loading time of all page-related files, and count the number of loaded pictures, styles, scripts and other files; the plug-in is called after the page is loaded. The JS script counts the Dom elements of the page to obtain the number of DOM elements; the first rendering time is obtained by calculating the start time of the browser rendering engine. This plug-in can add a script before the browser loads the webpage, listen to the page onload event, and The difference between the start request time and the onload event, so as to get the first screen time.

In order to further improve the performance of this plug-in, this plug-in is also equipped with a corresponding plug-in configuration module, which includes the following configuration units:

(1) Report setting unit;

The report function of the plug-in can be set through the report setting unit, specifically including the following function settings: whether to generate reports, the time interval for report generation, the target location of report generation, whether to generate website performance ranking reports, the format of generated reports, and the storage time of reports , the default is to enable report generation; at the same time, the report is divided into two formats: HTML and PDF, and the default is HTML format.

Through the report setting unit, the plug-in can automatically generate corresponding report information to the specified directory, such as the C:\Documents and Settings\Administrator directory. Of course, users can set the target directory in the configuration options of the plug-in.

For the website performance ranking report, the plug-in does not generate the site performance ranking report by default. If the report setting unit is set to generate, the plug-in will analyze and summarize the performance data of multiple websites browsed by the user within a certain period of time, and generate multiple copies according to multiple performance indicators Different website performance ranking reports, the report storage time is divided into 1 day, 1 week, 1 month, and permanent storage. The default is one week. If it is not set to permanent storage, the plug-in will delete the report file according to the creation time of the report file to save precious of disk space.

(2) Detect website setting unit;

Through the detection website setting unit, the scope and content of data detection performed by the performance detection module of the plug-in can be set, specifically including the following function settings: detection web page range setting, detection file type;

The range of web pages to be detected is in the form of a list. Users can set multiple web pages with full or partial matching names, such as pages ending with index.html, or they can choose to detect only the homepage of the website, or they can also choose to detect all pages;

Detecting file types includes only detecting webpage information and detecting other file information. Among them, detecting other file types includes image files, CSS style files, script files, etc. Users can choose to detect all types of files, and the default is all files.

(3) Remote transmission setting unit;

Through the remote transmission setting unit, the remote data transmission function of the remote transmission module in the plug-in can be set, specifically including the following function settings: whether to enable remote transmission, the IP address of the remote transmission, the port, the time interval of the remote transmission (30 seconds, 1 minute, 5 minutes, 15 minutes and custom time, the custom time is in minutes), remote transmission is not enabled by default.

After the remote transmission setting unit completes the setting of the remote data transmission function of the plug-in, the plug-in regularly sends the data of the website performance detection within the interval to the target address in JSON format via the HTTP protocol. If it cannot be connected to the directory address within a certain period of time, then the plugin automatically disables remoting.

When this plug-in is actually used, the relevant website developers can build a server system to receive the data remotely transmitted by this plug-in, and the server system will integrate the data sent by multiple client browser plug-ins, perform statistical summary, and generate report. In this way, website developers can more comprehensively understand the website performance data displayed by different regions, different browsers, and different network bandwidths when accessing different websites, which provides a more detailed reference for improving the user experience of the website.

When the WEB page performance detection and collection analysis plug-in formed according to the above scheme is in use, the plug-in can be downloaded and installed at the WEB page performance detection and collection analysis plug-in site. This plug-in is suitable for different browsers. It supports mainstream browsers such as IE, Chrome, Opera, Firefox, Safari, etc. It is called an ActiveX plug-in in the IE core browser, a Chrome extension in the Chrome browser, and a Chrome extension in Firefox. Browsers are called add-ons.

After completing the installation and use of the plug-in, you need to configure the related functions of the plug-in:

1. Report settings, such as setting the performance detection data generation report to enable, the default is enabled; the corresponding report information is automatically generated to the specified directory, such as the C:\Documents and Settings\Administrator directory, etc.

2. Check website settings, set the plug-in detection web page range and detection file type.

3. Remote transmission setting, open the remote transmission function, and set some parameters during transmission such as IP address, port, transmission time interval and so on.

After completing the setting of the plug-in function, you can use the plug-in to perform WEB page performance detection and collection analysis.

Referring to Figure 1, the entire WEB page performance detection and collection and analysis process includes the following steps:

1. After the user opens the browser, enters the URL or clicks the URL link, it will trigger the browser HTTP connection request.

2. The plug-in installed in the browser starts to detect a series of HTTP request and response information and browser page rendering information of the browser.

3. The plug-in installed in the browser will capture browser window opening and reloading events in a loop.

4. The plug-in installed in the browser matches the captured web pages and files according to the previously configured detection web page range and detection file type: if it matches, go to step 5, if not, go to step 3.

5. The plug-in saves the resource or event data and time-consuming data from sending the HTTP request to the page is fully loaded in the memory.

This step realizes the collection of WEB page performance detection data, and the specific data includes:

1), the request URL, the target host of the request, the request method, and the time it takes to establish a TCP connection.

2), the status code in the response HTTP header information, whether to enable compression, whether to enable caching, caching time, server type and version information.

3), first screen time, first rendering time.

For example, the time to complete all display in the 800*600 area of IE browser is the first screen time, and the actual total page loading time may be longer.

4), request page size, loading time.

5), script files, style files, number, size, and loading time of pictures related to the requested page;

A page request is equal to one or more URL requests. The scripts, pictures, styles and other files on the page are all separate requests. The more these files, the more requests the page sends, and each request is It takes one more CPU usage and one more TCP connection time. The size and number of requested pages and related files have a great impact on the performance of web pages. At the same time, the loading time of pages and related files is also an important performance indicator. At the same time, the number of DOM elements on the page and the speed of page loading also have a great impact Relational, reducing useless DOM elements can greatly speed up page loading.

6) The number of page DOM elements.

In addition, the local IP address, browser name and version information are collected.

6. After the data collection is completed, the plug-in judges whether to transmit the collected data remotely according to the remote transmission setting requirements. If the plug-in is set to enable remote transmission, the plug-in will store the website performance detection data stored in the memory in JSON format. Send directly to the specified destination address; if the plug-in is not enabled for remote transmission, the plug-in will perform subsequent data analysis and report generation steps.

7. The plug-in judges whether the report generation interval is satisfied according to the previous relevant settings of the report, that is, whether it is ≥ the last report generation interval; if it is satisfied, it will go to step 3; if it is satisfied, it will go to step 8.

8. The plug-in analyzes the collected WEB page performance detection data according to the relevant settings of the report before, and generates a report file to complete the WEB page performance detection and collection analysis.

9. The plug-in monitors browser events to determine whether the browser is closed. If not, proceed to step 3 to continue the WEB page performance detection and collection analysis; if it is closed, complete the WEB page performance detection and collection analysis.

It can be seen from this that the plug-in provided by the present invention can regularly analyze and summarize relevant website performance data during implementation, generate corresponding report files, and clear the detection data stored in the memory; if remote transmission is enabled, this plug-in will not be locally Generate a report file, but just convert the obtained browser performance detection data into JSON format text and send it directly to the specified target address.

The basic principles, main features and advantages of the present invention have been shown and described above. Those skilled in the industry should understand that the present invention is not limited by the above-mentioned embodiments. What are described in the above-mentioned embodiments and the description only illustrate the principle of the present invention. Without departing from the spirit and scope of the present invention, the present invention will also have Variations and improvements are possible, which fall within the scope of the claimed invention. The protection scope of the present invention is defined by the appended claims and their equivalents.

Claims (13)

1. a browser-based WEB page performance detection and collection and analysis plug-in, the plug-in is placed in the user browser, it is characterized in that, the plug-in is by calling the corresponding interface of the browser, browsed by the user through the browser Collect and analyze the HTTP request information of related websites and related WEB page performance detection data. 2. a kind of browser-based WEB page performance detection and collection analysis plug-in according to claim 1, is characterized in that, described plug-in comprises report form, performance detection, these three modules of remote transmission, and wherein performance detection module is responsible for The WEB page performs various function detection and collects the network request, response information and detected data generated by the page; the report module is responsible for analyzing and processing the collected data to generate a report file; the remote transmission module is responsible for collecting the collected data Send directly to the specified destination address; the priority of the remote transmission module is higher than that of the report module. If the remote transmission function is enabled, the report module will be invalid, and the plug-in will not generate report files locally from the collected data. 3. a kind of browser-based WEB page performance detection and collection analysis plug-in according to claim 1, is characterized in that, described plug-in detection gathers following data: (1) Detect the network request and response information of the page; (2) First rendering time and first screen time; (3) Page size, the number and size of script files, style files, pictures loaded on the page, loading time, and the number of DOM elements on the page. 4. a kind of browser-based WEB page performance detection and collection analysis plug-in according to claim 3, is characterized in that, the network request information of described detection page comprises: request URL, requested target host, request method, establishment The time spent on the TCP connection; the network response information includes: the status code in the response HTTP header information, whether to enable compression, whether to enable caching, caching time, server type and version information. 5. a kind of browser-based WEB page performance detection and collection and analysis plug-in according to claim 3, is characterized in that, the first rendering time of described plug-in detection is from clicking on a page link to jump on the user's experience The time to stay on the original page before reaching the new page; the above-the-fold time refers to the time required for the upper area of the browser window to be filled. 6. a kind of browser-based WEB page performance detection and collection analysis plug-in according to claim 1 or 2, is characterized in that, described plug-in carries out timing analysis to collecting data, and processes by various different categories, Generate corresponding statistical reports. 7. a kind of browser-based WEB page performance detection and collection analysis plug-in according to claim 1 or 2, is characterized in that, the data collected by the plug-in is regularly sent to the target with the text of JSON format by HTTP protocol address, the plugin automatically disables remote transfers if the directory address cannot be connected within a certain amount of time. 8. a WEB page performance detection and collection analysis method, is characterized in that, described method comprises the steps: (1) Capture browser window opening and reloading events through plug-ins; (2) Save the resource or event data and time-consuming data of the browser from sending the HTTP request to the complete loading of the page in the memory; (3) Analyze and process the acquired data. 9. A WEB page performance detection and collection analysis method according to claim 8, characterized in that, in the step (1), after the browser HTTP connection request is triggered, the plug-in starts to detect a series of HTTP requests from the browser. Request and response information and browser page rendering information. 10. A WEB page performance detection and collection analysis method according to claim 8 or 9, characterized in that before step (1), a plug-in configuration step is also included, and the configuration step performs the following configuration operations on the plug-in: report setting , detect website settings, and remote transfer settings. 11. A kind of WEB page performance detection and acquisition analysis method according to claim 10, it is characterized in that, described report setting comprises: whether to generate report, the time interval of report generation, the target location of report generation, whether to generate website performance The ranking report, the format of the generated report, and the storage time of the report, and the configuration is to enable report generation by default; at the same time, the report is divided into two formats: HTML and PDF, and the default is HTML format. 12. a kind of WEB page performance detection and collection analysis method according to claim 10, it is characterized in that, described detection website setting comprises: detection webpage scope setting, detection file type; Wherein detection webpage scope is list form, can set Multiple full-matching or partial-matching web pages; detecting file types includes only detecting web page information and detecting other file information. 13. A kind of WEB page performance detection and acquisition analysis method according to claim 10, it is characterized in that, described remote transmission setting comprises: whether to enable remote transmission, the IP address of remote transmission, port, the time interval of remote transmission , remoting is not enabled by default.