该如何加载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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
vue 检测用户上传图片宽高的方法
Feb 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
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python基础教程项目二之画幅好画
2018/04/02 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
小学生家长评语大全
2014/02/10 职场文书
单位在职证明书
2014/09/11 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers