Javascript 获取window.onload后发出的请求非常慢，会阻止页面滚动-性能分析

我有一个小部件，可以插入许多网页。它由一些JavaScript组成，这些JavaScript从我的服务器加载一个HTML文档（作为JSONP），然后将其插入到部署小部件的页面上动态创建的页面中

我使用分析/跟踪来测量我的小部件的主机页面接收的页面浏览量。最近，我需要更进一步，跟踪小部件本身的实际视图数量。这些数据的目的是更准确地解释小部件在生成点击率时的性能——也就是说，如果访问者没有在主页上向下滚动足够远的距离以首先看到我的小部件，我就不可能激发点击率

为了实现这种跟踪，我编写了一个订阅浏览器“onscroll”事件的函数；基本上，每次调用它时，它都会将主页文档顶部和小部件顶部之间的距离与视口从主页顶部向下滚动的距离加上视口高度和小部件高度的一半进行比较。当后者超过前者时，可以假定小部件在浏览器视口中可见一半

当函数确定发生了这种情况（小部件需要在视口中停留2秒或更长时间才能计数）时，它会记录一个“动作”到Clicky，即通知分析软件发生了这种情况。这是通过调用一个预定义函数来完成的，该函数从Clicky的服务器加载一个“图像”——基本上是一种使用跨域GET请求来传递一些跟踪数据的方法

问题是这个请求需要时间——平均一秒多一点——才能完成，在这段时间内，浏览器窗口无法滚动。这对我来说是一个好机会。轻微的延迟（理想情况下不超过半秒）是可以接受的，但接近一秒的延迟是不起作用的

我已经尽了最大努力分析各种性能工具生成的数据（Firebug的网络面板、Google页面速度），但我无法解释发生了什么

我非常感谢任何能够提供一些关于正在发生的事情的见解，或者更好的是，分享一个可能的解决方案来减少或消除被阻止的浏览器滚动的人。完成请求的时间对我来说并不重要，但滚动条“卡住”的时间量是至关重要的。例如，有没有一种方法可以在不中断浏览器滚动条功能的情况下向Clicky发出此请求

作为我代码概念的证明，我创建了一个原型，可在此处查看：

当您向下滚动页面直到灰色框的中间进入视口2秒或更长时间时，屏幕右上角将显示一个指示“小部件视图”已被记录

（我只在Firefox 3.0或更高版本中测试了这段代码——事实上，除了Safari之外，它不太可能在其他地方工作，因为它不考虑维度属性的跨浏览器差异。）

此外，以下是谷歌页面速度工具在本次日志记录过程中输出的屏幕截图：

为了产生这种效果，我不断地滚动/抖动页面，将灰色框放进视口。“onscroll”事件触发的函数可以被视为在输出顶部的一条断开的黑线重复工作。如您所见，一旦发生Clicky日志记录（黑色虚线中的大间隙），大约需要1.2秒的时间，无法滚动。我不知道在这段时间的后半段的空白时间里发生了什么，也不知道为什么整个时间段都阻止滚动

Firebug的网络面板显示了较短的运行时间（尽管主观上它仍然感觉像一秒钟或更长时间）：

在这种情况下，绝大多数时间（544毫秒）都花在“阻塞”阶段，这对我来说毫无意义；我的理解是，只有当请求在队列中时才会遇到此阶段，因为每个主机名的请求数已经达到最大值

---

如果您有任何想法、建议或其他见解，我们将不胜感激。谢谢

在clicky_自定义配置对象中将计时器设置为1而不是0。他们的代码中有一个错误，即如果计时器为0，则等待500毫秒

---

我使用Firebug的配置文件发现了这一点，他们的init函数花费了大量时间。代码类似于

timer=config.timer | 500

。config.timer的计算结果将为false，因此返回了500。

David，如果我能投票给你100次，我会的。；-）那把它修好了。非常感谢你。