首页 > web前端 > js教程 > 正文

该如何加载google-analytics(或其他第三方)的JS_javascript技巧

WBOY
发布: 2016-05-16 18:27:34
原创
1291 人浏览过

注册ga后,ga就会生成一段js脚本,很多人直接把这段js复制到

的最后面就完事(包括 博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗?

哪怎么样才算是合理,怎样才是不合理了?因ga只是1个分析工具,它的使用绝对不能影响到我们的程序,如果影响了,则是不合理的。不影响则是合理的。

目前ga的使用:
先看看ga自动生成的js脚本,如下: 
复制代码 代码如下:




看这段代码,使用document.write来加载JS,注意了,这样加载js是阻塞加载的,就是这个js没加载完,后面的所有资源和JS都不能下载和执行。可能你会觉的这段代码在body的最后面,后没已经没内容,没什么会阻塞的了。
还有一些你忽略了,相信很多人在写JS的时候需要在页面加载完毕后执行一些JS或AJAX,一般写在window.onload 事件,或者写入jquery的$(document).ready()方法中。这些JS就会被阻塞。如果我们的页面上很多数据在window.onload中使用AJAX加载,而偏偏这个时候ga因为某些原因(和谐和谐)不能访问,或者访问很慢的时候。问题就来,我们自己的JS一直在等待ga的JS加载完,只有等ga的js加载超时后才会执行我们的JS。

实例:
下面的代码使用jquery在document.ready发送1个ajax请求(请求126.com)。测试前修改host文件,让ga的js无法加载:

复制代码 代码如下:













监控图:
该如何加载google-analytics(或其他第三方)的JS_javascript技巧
上图可以看出ga加载不了,在20秒超时后,才执行我们的ajax请求,我们的ajax请求才花0.173s,但却等了20s。
合理使用ga:

要合理使用ga,需要解决2个问题:
1. 如何非加载ga的js,
2. 如何在ga的ja加载完毕后立刻执行 var pageTracker = _gat._getTracker("UA-123456-1");pageTracker._trackPageview(); 代码。

非阻塞加载js的方法,主要有2种:
1. 动态创建<script>2.使用new Image().src="", 这种方法只会下载JS,而不会解析JS。所以用这个加载js后,里面的函数也不能调用(这种方法一般用于预加载)。 <br><br>完善后的代码: <BR><div class="codetitle"><span><a style="max-width:90%" data="35294" class="copybut" id="copybut35294" onclick="doCopy('code35294')"><U>复制代码 代码如下:<div class="codebody" id="code35294"> <BR><script type="text/javascript"> <BR>var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); <BR>var head = document.getElementsByTagName("head")[0] || document.documentElement; <BR>var script = document.createElement("script"); <BR>script.src = gaJsHost + "google-analytics.com/ga.js"; <br><br>var done = false; // 防止onload,onreadystatechange同时执行 <BR>// 加载完毕后执行,适应所有浏览器 <BR>script.onload = script.onreadystatechange = function() { <BR>if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ <BR>done = true; <BR>try { <BR>var pageTracker = _gat._getTracker("UA-123456-16"); <BR>pageTracker._trackPageview(); <BR>} catch(err) {} <BR>script.onload = script.onreadystatechange = null; <BR>} <BR>}; <BR>head.insertBefore(script,head.firstChild); <BR></script>

上面代码修改自jquery的ajax代码。上面代码很容易理解,动态创建script来加载js,通过onload,或 onreadystatechange 事件来加载完毕后执行代码。
 
 代码修改完毕后再监控测试如下;
 该如何加载google-analytics(或其他第三方)的JS_javascript技巧
 
 图中看出ga照样加载了20s,但我们的ajax请求并没有等20s后才执行,而是立刻执行了。
jquery 加载ga:
    可能你觉的上面的代码写的比较多,比较繁琐,如果你用jquery的话,可以简化成下面这样:
复制代码 代码如下:

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
$.getScript(gaJsHost + "google-analytics.com/ga.js",function(){
try {
var pageTracker = _gat._getTracker("UA-123456-16");
pageTracker._trackPageview();
} catch(err) {}
});

有需要请查看:高性能WEB开发系列

[声明] 转载请注明出处:http://www.cnblogs.com/BearsTaR/。 禁止商用!
相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板