该如何加载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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
js精确的加减乘除实例
Nov 14 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
实例讲解React 组件
Jul 07 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
php数组的概述及分类与声明代码演示
2013/02/26 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Vue组件的使用教程详解
2018/01/05 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python中的闭包总结
2014/09/18 Python
python 循环while和for in简单实例
2016/08/16 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python OS模块实例详解
2019/04/15 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
自我鉴定范文
2013/11/10 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
工作睡觉检讨书
2014/02/25 职场文书
应届生求职信范文
2014/05/26 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Python实现仓库管理系统
2022/05/30 Python