如何加载谷歌分析(或其他第三方)的JS

ga注册后，ga会生成一个js脚本，很多人会直接把这个js复制到身体后面(包括博主park、CSDN、BlogJava)。但是这个ga自动生成的JS真的是最合理的吗？什么是合理的，什么是不合理的？因为ga只是一个分析工具，它的使用一定不能影响我们的程序。如果是，那就不合理了。没有影响是合理的。目前使用ga :的时候，看看ga自动生成的js脚本，如下：复制代码如下： script type=' text/JavaScript ' var gajsshost=(' https 3360 '==document . location . protocol)？https://ssl。 'http://www . ');document . write(une scape(' ')；/script script type=' text/JavaScript ' try { var page tracker=_ gat。_ getTracker(' UA-123456-1 ')；页面跟踪器。_ TrackPageView()；} catch(err) {}/script看看这段代码，使用document.write来加载js。注意以这种方式加载js是阻塞加载，也就是说这个JS没有完全加载，后面所有的资源和JS都无法下载和执行。你可能会认为这段代码在正文后面，后面没有内容，所以没有什么会屏蔽它。还有一些你忽略了的。我相信很多人在页面加载后都需要执行JS或者AJAX，这通常是写在window.onload事件或者$(文档)中。jquery的ready()方法。这些js将被阻止。如果我们页面上的很多数据都是由window.onload中的AJAX加载的，此时由于某些原因(harmony)无法访问ga或者访问速度较慢。问题是我们自己的js一直在等待ga的JS被加载，在ga的JS超时之前我们不会执行我们的JS。示例：以下代码使用jquery在document.ready中发送一个ajax请求(请求126.com).测试前修改宿主文件，使ga的js无法加载：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-transition . DTD '复制代码如下： htmlxmns=' 3358www.w3.org/1999/XHTML'头塔http-equiv=' content-type ' content=' text/html；charset=UTF-8' /脚本类型=' text/JavaScript ' src=' http :http://Ajax . googleapis.com/Ajax/libs/jquery/1.4/jquery . min . js '/脚本脚本类型='text/javascript' $(文档)。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(une scape(' ')；/script script type=' text/JavaScript ' try { var page tracker=_ gat。_ getTracker(' UA-123456-1 ')；页面跟踪器。_ TrackPageView()；} catch(err) {}/script /body /html监控图：。

从上图可以看出ga无法加载，我们的ajax请求将在20秒的超时后执行。我们的ajax请求只花了0.173秒，但却花了20秒。ga:的合理使用需要解决两个问题：1。如何卸载ga的js；2.如何执行var pagetracker=_ gat？加载ga的ja后立即_ gettracker(' ua-123456-1 ')；页面跟踪器。_ TrackPageView()；代码。在不阻塞的情况下加载js主要有两种方法：1。动态创建脚本标签；2.使用新图像()。src='http: '。这个方法只会下载JS，不会解析JS。所以用这个加载js后，就不能调用JS中的函数了(这个方法一般用于预加载)。改进代码：复制的代码如下： script type=' text/JavaScript ' var gaji shost=(' https 3360 '==document . location . protocol)？https://ssl。 'http://www . ');var head=document . getelementsbytagname(' head ')[0]| | document . document element；var script=document . createelement(' script ')；script . src=Gajshost ' Google-analytics.com/ga . js '；var done=false//防止onload和onreadystatechange同时执行。//加载后执行，并适配所有浏览器script . onload=script . onreadystatechange=function(){ if(！完成(！this . readystate | | this . readystate===' loaded ' | | this . readystate==' complete '){ done=true；请尝试{ var pageTracker=_gat。_ getTracker(' UA-123456-16 ')；页面跟踪器。_ TrackPageView()；} catch(err){ } script . onload=script . onreadystatechange=null；} };head.insertBefore(脚本，head . first child)；/script上面的代码是根据jquery的ajax代码修改的。上面的代码很容易理解。动态创建脚本来加载js，并在通过onload或onreadystatechange事件加载后执行代码。代码修改后，监控测试如下：

从图中可以看出，ga仍然加载了20s，但是我们的ajax请求在20s之后没有执行，而是立即执行。Jquery加载ga:你可能会觉得上面的代码写得越来越繁琐。如果使用jquery，可以简化如下：复制的代码如下： var gajsost=(' https 3360 '==document . location . protocol)？https://ssl。 'http://www . ');$.getScript(gaJsHost ' Google-analytics.com/ga . js '，function(){ try { var page tracker=_ gat。_ getTracker(' UA-123456-16 ')；页面跟踪器。_ TrackPageView()；} catch(err){ } })；如有需要，请查看：高性能WEB开发系列[声明]，请注明来源于：http://www.cnblogs.com/BearsTaR/.禁止商业使用！