该如何加载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对象的动态选择及遍历对象
Mar 10 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
浅谈js中的闭包
Mar 16 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
最基础的vue.js双向绑定操作
Aug 23 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
js命名空间写法示例
2015/12/18 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python变量作用范围实例分析
2015/07/07 Python
Python程序中设置HTTP代理
2016/11/06 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
2015年端午节活动方案
2015/05/05 职场文书
初婚未育证明样本
2015/06/18 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Python中字符串对象语法分享
2022/02/24 Python