该如何加载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高亮效果的二种实现方法
Sep 14 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 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生成html分页列表的代码
2007/03/18 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
链表面试题-一个链表的结点结构
2015/05/04 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
会计毕业生自荐书
2014/06/12 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
个人授权委托书
2014/09/15 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
MySQL的join buffer原理
2021/04/29 MySQL
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Pygame Draw绘图函数的具体使用
2021/11/17 Python