Registration GA, GA will generate a section of JS script, a lot of people directly to copy this JS to <body> the last side of the finished (including Blog Park, CSDN, Blogjava). But GA automatically generated this section of JS is really the most reasonable?
What kind of is reasonable, what is unreasonable? Because GA is only 1 analysis tools, its use must not affect our program, if the impact, it is unreasonable. It is reasonable to have no effect.
Current use of GA:
First look at the GA automatically generated JS script, as follows:
Copy Code code as follows:
<script type= "Text/javascript" >
var gaJsHost = (("https: = = document.location.protocol)?" Https://ssl. ":" http://www. ");
document.write (unescape ("%3cscript src= '" + gajshost + "Google-analytics.com/ga.js ' type= ' text/javascript ')%3E%3C/ script%3e "));
</script>
<script type= "Text/javascript" >
try {
var pagetracker = _gat._gettracker ("ua-123456-1");
Pagetracker._trackpageview ();
catch (Err) {}</script>
Look at this code, use document.write to load JS, attention, so loaded JS is blocked loading, that is, this JS is not loaded, all the resources behind and JS can not be downloaded and implemented. Perhaps you will feel that this code in the body of the last side, after nothing has no content, nothing will be blocked.
There are some you ignore, I believe many people need to write JS when the page is loaded after the completion of some JS or Ajax, generally written in the Window.onload event, or write jquery $ (document). Ready () method. These JS will be blocked. If a lot of the data on our page is loaded with Ajax in Window.onload, it happens that GA is unable to access it for some reason (harmony and harmony), or when it is slow to visit. The problem is, our own JS has been waiting for the GA JS loaded, only such as GA JS load timeout will not execute our JS.
Instance:
The following code uses jquery to send 1 Ajax requests in Document.ready (Request 126.com). Modify the host file before the test, so that the GA JS cannot load:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$.get ("http://www.126.com/");
});
</script>
<body>
<script type= "Text/javascript" >
var gaJsHost = (("https: = = document.location.protocol)?" Https://ssl. ":" http://www. ");
document.write (unescape ("%3cscript src= '" + gajshost + "Google-analytics.com/ga.js ' type= ' text/javascript ')%3E%3C/ script%3e "));
</script>
<script type= "Text/javascript" >
try {
var pagetracker = _gat._gettracker ("ua-123456-1");
Pagetracker._trackpageview ();
catch (Err) {}</script>
</body>
Monitor chart:
The above figure can see GA cannot load, after 20 seconds time out, only then executes our AJAX request, our AJAX request only then spends 0.173s, but waits for 20s.
rational Use of GA:
To use GA rationally, 2 problems need to be solved:
1. How to not load GA js,
2. How to execute var pagetracker = _gat._gettracker ("ua-123456-1");p Agetracker._trackpageview () immediately after the GA's JA loading; Code.
Non-blocking loading JS method, there are 2 main types:
1. Create <script labels dynamically
2. Use the new Image (). src= "", this method will only download JS, and will not parse JS. So with this load JS, the inside of the function can not be called (this method is generally used for preload).
Perfect code:
Copy Code code as follows:
<script type= "Text/javascript" >
var gaJsHost = (("https: = = document.location.protocol)?" Https://ssl. ":" http://www. ");
var head = document.getElementsByTagName ("head") [0] | | Document.documentelement;
var script = document.createelement ("script");
SCRIPT.SRC = gaJsHost + "Google-analytics.com/ga.js";
var done = false; Prevent Onload,onreadystatechange from executing simultaneously
Execute after loading, adapt to all browsers
Script.onload = Script.onreadystatechange = function () {
if (!done &&!this.readystate | | | this.readystate = = "Loaded" | | this.readystate = = "complete")) {
Done = true;
try {
var pagetracker = _gat._gettracker ("ua-123456-16");
Pagetracker._trackpageview ();
The catch (err) {}
Script.onload = Script.onreadystatechange = null;
}
};
Head.insertbefore (Script,head.firstchild);
</script>
The code above modifies the AJAX code from jquery. The above code is easy to understand, dynamically create script to load JS, through the onload, or onreadystatechange event to load after the execution of code.
After the code is modified, the monitoring test is as follows;
The diagram shows that GA also loads 20s, but our Ajax request did not wait for 20s to execute, but was executed immediately.
You may feel that the above code is more complicated, if you use jquery, you can simplify to the following:
Copy code The code is as follows:
var gaJsHost = (("https:" = = Document.location.prot Ocol)? "Https://ssl.": "http://www.");
$.getscript (gajshost + "Google-analytics.com/ga.js", function () {
try {
var pagetracker = _gat._gettracker ("ua-123456-16");
Pagetracker._trackpageview ();
} catch (Err) {}
});
need to see: High-performance Web Development Series
[disclaimer] Reprint please indicate the source: http://www.cnblogs.com/BearsTaR/. No commercial!
