Disclosure of Invention
Aiming at the problems in the prior art, the invention aims to provide a browser-based WEB page performance detection and acquisition analysis plug-in to provide a corresponding reference for website developers who need to improve WEB browsing user experience aiming at various browsers with different versions and different network bandwidth environments.
Meanwhile, the invention also provides a WEB page performance detection and acquisition analysis method based on the plug-in.
In order to achieve the purpose, the invention adopts the following technical scheme:
a WEB page performance detection, acquisition and analysis plug-in based on a browser is arranged in a user browser, and collects and analyzes HTTP request information of related websites browsed by the user through the browser and related WEB page performance detection data by calling a corresponding interface of the browser.
In the preferred embodiment of the invention, the plug-in comprises three modules of performance detection, report form and remote transmission, wherein the performance detection module is responsible for detecting various functions of the WEB page and collecting the network request, response information and detected data generated by the page; the report module is responsible for generating a report file after analyzing and processing the collected data; the remote transmission module is responsible for directly sending the collected data to a specified target address; the remote transmission module has priority higher than that of the report module, if the remote transmission function is started, the report module fails, and the plug-in cannot generate a report file locally from the collected data.
Further, the plug-in test collects the following data:
(1) detecting network request and response information of a page;
(2) first rendering time and first screen time;
(3) page size, number, size, time of loading of script files, style files, pictures, and number of page DOM elements loaded by the page.
Still further, the detecting the network request information of the page includes: request web site, requested target host, request method, time spent in establishing TCP connection; the network response information includes: responding to the state code in the HTTP header information, whether compression is enabled, whether caching is enabled, caching time, server type and version information.
Furthermore, the first rendering time detected by the plug-in is the time that the user stays in the original page before jumping to the new page after clicking a page link; the first screen time refers to the time required for the upper area of the browser window to be filled.
Furthermore, the plug-in carries out timing analysis on the acquired data, processes the data according to various different categories and generates a corresponding statistical report.
Further, the plug-in periodically sends the collected data to the target address through the HTTP protocol in the JSON format text, and if the plug-in cannot be connected to the directory address within a certain time, the plug-in automatically disables remote transmission.
As a second object of the present invention, a method for detecting, collecting and analyzing WEB page performance, the method includes the following steps:
(1) capturing browser window opening and reloading events through a plug-in;
(2) storing resource or event data and consumed time data which are completely loaded from the moment when the browser sends the HTTP request to the page in a memory;
(3) and analyzing and processing 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 requests and response information of the browser and browser page rendering information.
Further, before the step (1), a plug-in configuration step is further included, and the configuration step performs the following configuration operations for the plug-in: report setting, detection website setting and remote transmission setting.
Still further, the report setting includes: whether to generate a report, a report generation time interval, a report generation target position, whether to generate a website performance ranking report, a report generation format and report storage time, wherein the default configuration is to enable the generation of the report; meanwhile, the report forms are divided into HTML and PDF formats, and the default format is the HTML format.
Still further, the detecting the website setting includes: detecting the setting of a webpage range and detecting the type of a file; the detection webpage range is in a list form, and a plurality of webpages with fully matched or partially matched names can be set; detecting the file type comprises detecting only the webpage information and detecting other file information.
Still further, the remote transmission setup comprises: whether remote transmission is enabled, IP address of remote transmission, port, time interval of remote transmission, and default to not enable remote transmission.
According to the scheme provided by the invention, the plug-in is installed on the browser by a user, HTTP request information of related websites browsed by the user and related WEB page performance detection data are collected, are analyzed at regular time and are processed according to various different categories to generate corresponding statistical reports, and WEB page performance detection data are provided for different website developers as references, so that the related website developers can adjust and optimize the WEB page performance problems. The invention can provide corresponding reference for website developers who need to improve WEB browsing user experience.
Moreover, the scheme provided by the invention can be applied to different browsers, can support mainstream browsers such as IE, Chrome, Opera, Firefox, Safari and the like, and has very wide practicability.
Detailed Description
In order to make the technical means, the creation characteristics, the achievement purposes and the effects of the invention easy to understand, the invention is further explained below by combining the specific drawings.
The plug-in is perfect and supplementary to the prior art, the plug-in is installed on a browser by a user, the plug-in collects HTTP request information of related websites browsed by the user through the browser and related WEB page performance detection data by calling a corresponding interface of the browser, analyzes at regular time, processes according to various different categories, generates a corresponding statistical report, provides WEB page performance detection data for different website developers as references, and facilitates the related website developers to adjust and optimize the WEB page performance problems.
Based on the principle, the plug-in adopts two standard designs, namely an IE private ActiveX standard and an NPAPI (Netscape plug-in application programming interface) standard used for other browsing; the plug-in is divided into three modules of a report form, a performance detection module and a remote transmission module, wherein the performance detection module is responsible for detecting various functions of a WEB page and collecting network requests, response information and detected data generated by the page (temporarily stored in a system memory); the report module is responsible for generating a report file (clearing the collected data from the memory) after analyzing and processing the collected data; the remote transmission module is responsible for directly sending the collected data to a specified target address (clearing the collected data from the memory); the remote transmission module has priority higher than that of the report module, if the remote transmission function is started, the report module fails, and the plug-in cannot generate a report file locally from the collected data.
The plug-in formed according to the scheme can realize the acquisition of the following information:
(1) detecting network request and response information of a page;
the network request information of the detection page comprises: request web site, requested target host, request method, time spent in establishing TCP connection;
the network response information includes: responding to the state code in the HTTP header information, whether compression is enabled, whether caching is enabled, caching time, server type and version information. The compression is enabled by the webpage, and the bandwidth of network data transmission can be greatly reduced by using the cache.
(2) First rendering time and first screen time;
the first rendering time is a period of time before a user jumps to a new page from clicking a page link and the content of the web page appears in the new page; that is, the user clicks a link on the web page, then a new page appears, the page is loaded after a certain time, and the content starts to display the result calculated during the time.
The first screen time refers to the time required for the upper area of the browser window to be filled, i.e., the time when the display of the visible area is completed when the browser page is opened (not all the content of the page is loaded).
(3) Page size, number, size, time of loading of script files, style files, pictures, and number of page DOM elements loaded by the page.
Many people browse web pages every day, see news, and buy online, and actually contact HTTP (hypertext transfer protocol), and the HTTP protocol is essentially a TCP/IP (internet protocol, which can be used for google and hundred degree search) connection, and transmits data such as texts and pictures of related website server terminals to client terminals, and then analyzes and displays the data through a client browser.
The plug-in unit comprises the following acquisition and analysis processes:
the plug-in unit of the invention calculates the time of a plurality of requests and response intervals (pictures, style files, script files and the like contained on the page are all independent requests) by intercepting the requests sent by a user for browsing the webpage and the network data packet returned from the server, and processes and analyzes the requests and the response data to obtain data such as request websites, request target hosts, request methods, state codes in HTTP header information in the response data, cache time, data length (namely the size of related files), compression algorithms and the like; the sizes and loading time of all files related to the page can be obtained by analyzing the data packet, and the number of the loaded files such as pictures, styles, scripts and the like is counted; after the page is loaded, the plug-in counts page Dom elements by calling the JS script to obtain the number of DOM elements; the first rendering time is obtained by calculating the rendering engine starting time of the browser, the plug-in can add a section of script before the browser loads a webpage, monitor a webpage onload event, and obtain the first screen time according to the difference between the webpage starting request time and the onload event.
In order to further improve the service performance of the plug-in, the plug-in is also provided with a corresponding plug-in configuration module, and the plug-in configuration module comprises the following configuration units:
(1) a report setting unit;
the report function of the plug-in can be set through the report setting unit, and the report setting method specifically comprises the following function settings: whether to generate a report, the time interval of report generation, the target position of report generation, whether to generate a website performance ranking report, the format of the generated report and the report storage time, wherein the default is to start the generated report; meanwhile, the report forms are divided into HTML and PDF formats, and the default format is the HTML format.
The report setting unit can lead the plug-in to automatically generate corresponding report information to a specified directory such as a C:' Documents and Settings \ Administrator directory at regular time. Of course the user 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 website performance ranking report by default, if the report setting unit is set to generate, the plug-in analyzes and summarizes a plurality of website performance data browsed by a user within a certain time, a plurality of different website performance ranking reports are generated according to a plurality of performance indexes, the report storage time is divided into 1 day, 1 week, 1 month and permanent storage, the report storage time is set to be one week by default, and if the report storage time is not set to be permanent storage, the plug-in deletes the report file according to the report file creation time so as to save precious disk space.
(2) Detecting a website setting unit;
the range and the content of data detection of the performance detection module of the plug-in can be set through the detection website setting unit, and the method specifically comprises the following function settings: detecting the setting of a webpage range and detecting the type of a file;
the detection webpage range is in a list form, a user can set a plurality of webpages with fully matched or partially matched names, such as pages ending with index.
The file type detection comprises only detecting webpage information and detecting other file information, wherein the other file types are detected to be picture files, CSS style files, script files and the like, and a user can select to detect all types of files and defaults to all files.
(3) A remote transmission setting unit;
the remote data transmission function of the remote transmission module in the plug-in can be set through the remote transmission setting unit, and the remote data transmission function setting method specifically comprises the following function settings: whether or not remote transmission is enabled, IP address of remote transmission, port, time interval of remote transmission (30 seconds, 1 minute, 5 minutes, 15 minutes, and custom time in minutes), default to not enable remote transmission.
After the remote transmission setting unit completes the remote data transmission function setting of the plug-in, the plug-in sends the data detected by the network station performance in the interval time to the target address in a text of JSON format through HTTP protocol, if the data can not be connected to the directory address in a certain time, the plug-in automatically disables the remote transmission.
When the plug-in is actually used, related website developers can set up a server system to receive data remotely transmitted by the plug-in, and the server system integrates the data sent by the plurality of client browser plug-ins, counts and summarizes the data and generates a report. Therefore, website developers can more comprehensively know website performance data expressed by different websites accessed by different browsers and different network bandwidths in different areas, and more detailed reference basis is provided for improving the user experience of the websites.
When the WEB page performance detection and acquisition analysis plug-in formed according to the scheme is used, the plug-in can be downloaded and installed on a WEB page performance detection and acquisition analysis plug-in site. The plug-in is suitable for different browsers, supports mainstream browsers such as IE, Chrome, Opera, Firefox and Safari, is called as an ActiveX plug-in an IE kernel browser, is called as a Chrome extension program in the Chrome browser, and is called as an add-on component in the Firefox browser.
After the installation and use of the plug-in are completed, the related functions of the plug-in are required to be configured:
1. setting a report, namely setting the performance detection data generation report as enabled, and setting the performance detection data generation report as enabled by default; and automatically generating corresponding report information to a specified directory at regular time, such as a C: \ Documents and Settings \ Adminstrator directory and the like.
2. And detecting website settings, and setting a detection webpage range and a detection file type of the plug-in.
3. Remote transmission setting, starting remote transmission function, and setting some parameters in transmission such as IP address, port, time interval of transmission and the like.
After the function of the plug-in is set, the performance of the WEB page can be detected, collected and analyzed through the plug-in.
Referring to fig. 1, the whole WEB page performance detection and collection analysis process includes the following steps:
1. after the user opens the browser, the user inputs a website or clicks a website link, and an HTTP connection request of the browser is triggered.
2. The plug-in installed in the browser starts to detect a series of HTTP request and response information of the browser and browser page rendering information.
3. A plug-in installed in the browser will loop through the capture browser window open and reload events.
4. And the plug-in installed in the browser respectively matches the captured webpage and the captured file with the webpage range and the file type according to the previously configured detected webpage range and detected file type: if the matching is matched, the step 5 is carried out, and if the matching is not matched, the step 3 is carried out.
5. And the plug-in stores the resource or event data and the consumed time data which are completely loaded by the browser from the HTTP request sending to the page in the memory.
The step realizes the acquisition of WEB page performance detection data, and the specific data comprises the following steps:
1) a requesting web site, a requesting target host, a requesting method, and time spent establishing a TCP connection.
2) Responding to a state code in HTTP header information, whether compression is enabled, whether caching is enabled, caching time, server type and version information.
3) First screen time and first rendering time.
If the time for completing the display of all the areas of the IE browser 800 × 600 is the first screen time, the total loading time of the actual page may be longer.
4) Request page size, load time.
5) The number, size and loading time of script files, style files and pictures related to the requested page;
the more files, the more requests sent by the page, and the more time for one CPU use and one TCP connection is occupied by each request. The size and the number of the request page and the related files have great influence on the performance of the WEB page, the loading time of the page and the related files is also an important performance index, and the number of DOM elements of the page is also greatly related to the loading speed of the page, so that useless DOM elements are reduced, and the page loading speed can be greatly increased.
6) Number of page DOM elements.
In addition, local IP addresses, the names and the version information of browsers are collected.
6. After data acquisition is finished, judging whether the acquired data is remotely transmitted or not by the plug-in according to a remote transmission setting requirement, if the plug-in is set to start remote transmission, directly sending the website performance detection data stored in the memory to a specified target address by the plug-in a JSON format text; if the plug-in does not start remote transmission, the plug-in carries out the subsequent steps of data analysis and report generation.
7. The plug-in judges whether the report generation interval time is met or not according to the previous related settings about the report, namely whether the report generation interval time is more than or equal to the previous report generation interval time or not; if yes, turning to the step 3; if yes, the procedure goes to step 8.
8. And the plug-in analyzes the collected WEB page performance detection data according to the related settings of the report, generates a report file and completes the WEB page performance detection, collection and analysis at this time.
9. Monitoring a browser event by the plug-in, judging whether the browser is closed, and if not, continuing to perform WEB page performance detection and acquisition analysis in the step 3; and if the WEB page is closed, the WEB page performance detection, acquisition and analysis are finished.
Therefore, when the plug-in provided by the invention is implemented, the performance data of the related website can be analyzed and summarized periodically to generate a corresponding report file, and the detection data stored in the memory is emptied; if remote transmission is started, the plug-in will not generate report files locally, but only convert the acquired browser performance detection data into a text in JSON format and directly send the text to a specified target address.
The foregoing shows and describes the general principles, essential features, and advantages of the invention. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, which are described in the specification and illustrated only to illustrate the principle of the present invention, but that various changes and modifications may be made therein without departing from the spirit and scope of the present invention, which fall within the scope of the invention as claimed. The scope of the invention is defined by the appended claims and equivalents thereof.