- 浏览: 800166 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
很多网站为了获取用户访问网站的统计信息,使用了google-analytics或其他分析网站(下面的讨论中只提google-analytics, 简称ga)。注册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">
"-//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>
监控图:
上图可以看出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 事件来加载完毕后执行代码。
代码修改完毕后再监控测试如下;
图中看出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) {} });
发表评论
-
提供IT系统运维支持、系统优化方案
2012-10-26 14:46 6提供IT系统运维支持、系统优化方案,有多个运维实施经验。 ... -
Java指定编码读写文件(UTF-8)
2010-11-30 14:00 3102有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 1982[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 1964<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 959简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1370import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1198我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1617GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2059首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4635在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4778方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1633Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1628public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1453有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1319我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1334Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4242org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2158From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4571使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1205httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
第三方可视化JavaScript内容必须存储在Web服务器上。 一种托管方法是使用Node.js。 有关将Node.js用于数据驱动的内容的更多信息,请。 util / messagingUtil.js 它包含您需要向SAS Visual Analytics发送消息或从...
GATrack.gs-Google Apps脚本的Google Analytics(分析)帮助程序 GATrack是Google Apps脚本帮助程序类,可轻松将Google Analytics(分析)跟踪集成到脚本项目中... 在示例中,我们正在与第三方API交互以拉回随机的名称
Node-js-sdk-v2 基于LoginRadius V2 API的Node.js V2 SDK的客户身份... 轻松将LoginRadius与您的所有第三方应用程序集成,例如MailChimp,Google Analytics(分析),Livefyre等,从而可以轻松利用所捕获的数据。 Lo
它是用纯JavaScript编写的,没有来自第三方库的任何依赖。 您可以将接收到的数据用于: 手机换 网站内容变更 将表格内的数据导出到您的CRM或分析系统。 链接 ··· 安装 # from `npm` npm install --save ...
第三方集成很简单,内置对 Pinboard、Delicious、GitHub Repositories、Disqus Comments 和 Google Analytics 的支持。 它很容易使用。 一系列 rake 任务简化了开发并使部署变得轻而易举。 附带一些来自 Jekyll ...
接入第三方统计模块 4. ALog入门 4-1. 概念 4-2. 准备工作 页面加载的方式 [removed] void function(e,t,n,a,o,i,m){ e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e...
目录 为什么要做网站数据分析 网站数据分析流程 网站数据分析指标 网站数据分析工具 收集网站数据方法 第三方数据资源 案例分析 网站分析-如何做数据分析全文共11页,当前为第2页。 为什么要做网站数据分析—Why 你...
使用Google跟踪代码管理器的Google Analytics(分析)中HTML5性能事件利用HTML5和本机内置在浏览器中。 提供高分辨率的时间戳,并超过约2,000的精度。...例如jQuery 没有第三方及其相关费用作为GA事件值的页面
第三方集成很简单,内置对 Pinboard、Delicious、GitHub Repositories、Disqus Comments 和 Google Analytics 的支持。 它很容易使用。 一系列 rake 任务简化了开发并使部署变得轻而易举。 附带了一些来自 Jekyll...
特征语法高亮全面响应自动生成站点地图基于标签和集合的过滤分页与私人评论使用分析自动原子进纸没有JavaScript,第三方请求或Cookie(除非使用Fathom或ISSO)安装在使用jekyll new进行脚手架安装后,您可以在网站上...
第三方集成很简单,内置对 Pinboard、Delicious、GitHub Repositories、Disqus Comments 和 Google Analytics 的支持。 它很容易使用。 一系列 rake 任务简化了开发并使部署变得轻而易举。 附带了一些来自 Jekyll...
第三方集成非常简单,内置了对Pinboard,Delicious,GitHub Repositories,Disqus Comments和Google Analytics(分析)的支持。 易于使用。 一系列rake任务简化了开发并简化了部署过程。 附带了很棒的插件,其中...
第三方集成很简单,内置对 Pinboard、Delicious、GitHub Repositories、Disqus Comments 和 Google Analytics 的支持。 它很容易使用。 一系列 rake 任务简化了开发并使部署变得轻而易举。 附带了一些来自 Jekyll ...
第三方集成非常简单,内置了对Pinboard,Delicious,GitHub Repositories,Disqus Comments和Google Analytics(分析)的支持。 易于使用。 一系列rake任务简化了开发并简化了部署过程。 附带了很棒的插件,其中...
第三方集成很简单,内置对 Pinboard、Delicious、GitHub Repositories、Disqus Comments 和 Google Analytics 的支持。 它很容易使用。 一系列 rake 任务简化了开发并使部署变得轻而易举。 附带了一些来自 Jekyll...
第三方集成非常简单,内置了对Pinboard,Delicious,GitHub Repositories,Disqus Comments和Google Analytics(分析)的支持。 易于使用。 一系列rake任务简化了开发并简化了部署过程。 附带了很棒的插件,其中...
第三方集成非常简单,内置了对Pinboard,Delicious,GitHub Repositories,Disqus Comments和Google Analytics(分析)的支持。 易于使用。 一系列rake任务简化了开发并简化了部署过程。 附带了很棒的插件,其中...
该应用程序非常适合查看以下所有概念如何在单个 Web 应用程序中结合在一起: MVC软件架构Ruby on Rails 开发与 Foundation 5 前端框架集成与第三方 API 的集成(mailchimp、google drive、segmente.io、google ...