在window.onload之后发出的GET请求非常慢,阻止了页面滚动 - 性能分析

时间:2010-01-22 00:13:19

标签: javascript performance browser profiling dom-events

我有一个插在许多网页上的小部件。它由一些JavaScript组成,它从我的服务器加载HTML文档(作为JSONP),然后将其插入到动态创建的< iframe>中。在部署小部件的页面上。

我使用Clicky进行分析/跟踪,以衡量我的窗口小部件主页收到的综合浏览量。最近,我需要更进一步,跟踪小部件本身的实际视图数量。此数据的目的是更准确地解释窗口小部件在生成点击时的性能 - 也就是说,如果访问者没有向下滚动主机页面以至于无法首先看到我的窗口小部件,那么我无法做到激发了点击率。

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

当函数确定发生这种情况时(窗口小部件需要在视口中保留2秒或更长时间才能计算),它会向Clicky记录“操作”,即通知分析软件发生了这种情况。这是通过调用从Clicky服务器加载“图像”的预定义函数来完成的 - 基本上是一种使用跨域GET请求来传达某些跟踪数据的方法。

问题是此请求需要花费时间 - 平均而言,稍微超过一秒 - 才能完成,并且在此期间,浏览器窗口无法滚动。这对我来说是一个很好的表现。稍微延迟 - 理想情况下远低于半秒 - 是可以接受的,但接近一秒的任何事情都不会起作用。

我已尽力分析各种性能工具生成的数据(Firebug的Net Panel,Google Page Speed),但我无法解释发生了什么。

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

作为我的代码的概念验证,我创建了一个原型,可以在这里查看:

http://troy.onespot.com/static/3128/prototype.html

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

(我只是测试了这个代码在Firefox 3.0或更新版本中运行 - 事实上,除了Safari之外,它不太可能在别处工作,因为它不支持维度属性中的跨浏览器差异。)

此外,这是此日志记录期间Google页面速​​度工具输出的屏幕截图:

http://img.skitch.com/20100121-t6bt1wauaar2drg1xdmwk9g4sb.png

为了生成这个,我不断滚动/摇晃页面,因为我将灰色框放入视口。可以看到“onscroll”事件触发的函数重复工作,作为输出顶部的黑色虚线。正如您所看到的,只要Clicky日志记录发生(黑色虚线中的大间隙),大约需要1.2秒才能滚动。我不知道在那个时期的后半段空盘中发生了什么,我也不明白为什么整个时期都会阻止滚动。

Firebug的Net Panel显示较短的经过时间(虽然它仍然感觉像是第二次或更多,主观上):

http://img.skitch.com/20100121-pwf1ifngffsnqm8qekmm8wp9mt.png

在这种情况下,绝大部分时间(544ms)都花在了“阻塞”阶段,这对我来说毫无意义;我的理解是,只有当请求在队列中时才会遇到此阶段,因为每个主机名的最大请求数已经在进行。

非常感谢任何想法,建议或其他见解。谢谢!

1 个答案:

答案 0 :(得分:1)

在clicky_custom配置对象中将计时器设置为1而不是0。他们的代码中有一个错误,如果计时器为0则等待500ms。

我发现这是使用Firebug的配置文件,他们的init功能花了一些时间。代码类似timer = config.timer|500。 config.timer将评估为false,因此返回500。