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


Posted in Javascript onMay 13, 2010

注册ga后,ga就会生成一段js脚本,很多人直接把这段js复制到<body>的最后面就完事(包括 博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗?

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

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

<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>

看这段代码,使用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无法加载:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<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> 
</head> 
<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> 
</html>

监控图:
该如何加载google-analytics(或其他第三方)的JS
上图可以看出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后,里面的函数也不能调用(这种方法一般用于预加载)。

完善后的代码:

<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; // 防止onload,onreadystatechange同时执行 
// 加载完毕后执行,适应所有浏览器 
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(); 
} catch(err) {} 
script.onload = script.onreadystatechange = null; 
} 
}; 
head.insertBefore(script,head.firstChild); 
</script>

上面代码修改自jquery的ajax代码。上面代码很容易理解,动态创建script来加载js,通过onload,或 onreadystatechange 事件来加载完毕后执行代码。
 
 代码修改完毕后再监控测试如下;
 该如何加载google-analytics(或其他第三方)的JS
 
 图中看出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/。 禁止商用!

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
vue实现微信分享功能
Nov 28 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
Javascript 面向对象 继承
May 13 #Javascript
Javascript 面向对象 重载
May 13 #Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 #Javascript
限制文本框输入N个字符的js代码
May 13 #Javascript
javascript preload&amp;lazy load
May 13 #Javascript
javascript 当前日期转化为中文的实现代码
May 13 #Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 #Javascript
You might like
初学CAKEPHP 基础教程
2009/11/02 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php计算整个目录大小的方法
2015/06/19 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python中字符串的操作方法大全
2018/06/03 Python
Python单元测试简单示例
2018/07/03 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
python mock测试的示例
2020/10/19 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
大学旷课检讨书
2014/01/28 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书