该如何加载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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
JS严格模式知识点总结
Feb 27 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JavaScript数组reduce()方法的语法与实例解析
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 XML备份Mysql数据库
2009/05/27 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
如何写好自荐信
2014/04/07 职场文书
大一新生期末自我评价
2014/09/12 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python