该如何加载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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
详解react-redux插件入门
Apr 19 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
微信小程序合法域名配置方法
May 06 Javascript
Vuex新手的理解与使用详解
May 31 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
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python GUI模拟实现计算器
2020/06/22 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
降低python版本的操作方法
2020/09/11 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
班组长岗位职责范本
2014/01/05 职场文书
校园环保建议书
2014/05/14 职场文书
供应链金融服务方案
2014/05/25 职场文书
会计学专业求职信
2014/07/17 职场文书
初中家长评语大全
2014/12/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android