This article introduces Javascript monitoring front-end related data. After the project development is completed, there is no monitoring system. It is difficult for us to understand whether the published code is executed correctly on the user machine, so we need to establish a monitoring system related to the front-end code performance.
So we need to do some of the following modules:
1. Collect script execution errors
function error(msg,url,line){
var REPORT_URL = "xxxx/cgi"; // Collect information about reported data var m =[msg, url, line, , +new Date];// Collect error information, script file network address, user agent information, time var url = REPORT_URL + ('||');// Assemble error reporting information content URL var img = new Image;
= = function(){
img = null;
};
= url;// Send data to the background cgi}
// Listen errors = function(msg,url,line){
error(msg,url,line);
}
By managing the backend system, we can see the information about every error on the page, through which we can quickly locate and solve the problem.
2. Collect html5 performance information
performance Contains the execution time for different execution steps during the entire life cycle of the page loading into execution. Click the following for performance related articles: Use the performance API to monitor page performance
Calculating the time difference between the time of different steps relative to navigationStart can be collected through the corresponding background CGI.
function _performance(){
var REPORT_URL = "xxxx/cgi?perf=";
var perf = ( ? : ),
points = ['navigationStart','unloadEventStart','unloadEventEnd','redirectStart','redirectEnd','fetchStart','domainLookupStart','connectStart','requestStart','responseStart','responseEnd','domLoading','domInteractive','domContentLoadedEventEnd','domComplete','loadEventStart','loadEventEnd'];
var timing = ;
perf = perf ? perf : ;
if( perf && timing ) {
var arr = [];
var navigationStart = timing[points[0]];
for(var i=0,l=;i<l;i++){
arr[i] = timing[points[i]] - navigationStart;
}
var url = REPORT_URL + ("-");
var img = new Image;
= = function(){
img=null;
}
= url;
}
Through the background interface collection and statistics, we can have a detailed understanding of the page execution performance.
3. Statistics the JS and CSS loading time of each page
Timestamp before JS or CSS is loaded, timestamped after loading, and report the data to the background. The loading time reflects the white screen of the page and the operable waiting time.
<script>var cssLoadStart = +new Date</script>
<link rel="stylesheet" href="" type="text/css" media="all">
<link rel="stylesheet" href="" type="text/css" media="all">
<link rel="stylesheet" href="" type="text/css" media="all">
<sript>
var cssLoadTime = (+new Date) - cssLoadStart;
var jsLoadStart = +new Date;
</script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script>
var jsLoadTime = (+new Date) - jsLoadStart;
var REPORT_URL = 'xxx/cgi?data='
var img = new Image;
= = function(){
img = null;
};
= REPORT_URL + cssLoadTime + '-' + jsLoadTime;
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study, and I hope you can add more