该如何加载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中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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
文章推荐系统(三)
2006/10/09 PHP
PHP中对数据库操作的封装
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Vue仿百度搜索功能
2020/12/28 Vue.js
学习python类方法与对象方法
2016/03/15 Python
简单学习Python time模块
2016/04/29 Python
Python部署web开发程序的几种方法
2017/05/05 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Python流程控制常用工具详解
2020/02/24 Python
django form和field具体方法和属性说明
2020/07/09 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
简单说说tomcat的配置
2013/05/28 面试题
学生会副主席竞聘书
2014/03/31 职场文书
保姆聘用合同
2015/09/21 职场文书