从阻止其他脚本执行停止Analytics（分析）code [英] Stop Analytics Code from Blocking other Script Execution
问题描述
我使用的跟踪code的推荐实施。
I am using the recommended implementation of the tracking code.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
我经常对我的网页加载这个等待的等待www.google-analytics.com 。起初我还以为是我的办公室的防火墙，但我想这是常见的问题。 搜索
I often get this wait on load of my web pages as "waiting for www.google-analytics.com". Initially I thought it was my office firewall, but I guess it is common issue. search
我更大的担忧是所有关于我的网页停止执行在此稍候...这永远不会消失的脚本。如何解决这一问题？
My bigger concern is all the scripts on my page stop execution during this wait... which never goes away. How to fix this ?
我觉得异步意味着它不会与页面上的其他脚本冲突。
I thought async means it will not interfere with other scripts on page.
推荐答案
由于您使用jQuery包裹谷歌分析code在jQuery的窗口负载处理程序：
The solution
Since you are using Jquery, wrap the google analytics code in a jQuery's window load handler:
$(window).load(function(){
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
});
的解释
在一个评论，你指出，你使用 http://supersimpleslider.com/ 并表示不会只要谷歌分析被挂工作。一看该库的源显示了这个在第86行：
The explanation
In a comment, you pointed out that you use http://supersimpleslider.com/ and that it would not work as long as google analytics was hanging. A look at the source of that library shows this at line 86:
$(window).load(function() {
我决定通过模拟吊资源来测试事件触发。
I decided to test event firing by simulating a hanging resource.
ga.php
<?php
sleep(5);
exit('content.log("ga.php available")');
?>
index.html的
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
console.log('window-load');
}, false);
window.addEventListener('DOMContentLoaded', function(){
console.log('window-DOMContentLoaded');
}, false);
</script>
<script type="text/javascript">
$(window).load(function() {
console.log('window-jquery-load');
});
$(window).ready(function() {
console.log('window-jquery-ready');
});
</script>
<script type="text/javascript">
document.addEventListener('load', function(){
console.log('document-load');
}, false);
document.addEventListener('DOMContentLoaded', function(){
console.log('document-DOMContentLoaded');
}, false);
</script>
<script type="text/javascript">
$(document).load(function() {
console.log('document-jquery-load');
});
$(document).ready(function() {
console.log('document-jquery-ready');
});
</script>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'ga.php';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
控制台输出
16:21:19.123 window-jquery-ready
16:21:19.124 document-jquery-ready
16:21:19.125 document-DOMContentLoaded
16:21:19.126 window-DOMContentLoaded
16:21:24.092 ga.php available
16:21:24.095 window-load
16:21:24.096 window-jquery-load
结论
- 本地
DOMContentLoaded不受挂资源。 - jQuery的
就绪不受挂资源。 -
窗口负荷将等待所有资源来完成。 -
文件负荷将永远不会火（可能是依赖于浏览器虽然） - native
DOMContentLoadedis not affected by hanging resources. - jQuery's
readyis not affected by hanging resources. windowloadwill wait for all resources to complete.documentloadwill never fire (could be browser dependent though)
Conclusion
由于 supersimpleslider 的正在等待负荷事件的窗口，悬挂的ga.js 的将影响其执行。这也可能是其他的脚本的情况。
Since supersimpleslider is waiting for a load event on window, a hanging ga.js will impact its execution. This might also be the case for other scripts.
通过只在窗口加载插入谷歌分析，我们把所有的脚本在同一水平上。
By inserting google analytics only at window load, we put all the scripts on the same level.
窗口加载后换的控制台输出：
Console output after window load wrapping:
16:47:27.035 window-jquery-ready
16:47:27.036 document-jquery-ready
16:47:27.036 document-DOMContentLoaded
16:47:27.037 window-DOMContentLoaded
16:47:27.043 window-load
16:47:27.044 window-jquery-load
16:47:32.052 ga.php available
这篇关于从阻止其他脚本执行停止Analytics（分析）code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
