dojo.require()阻止Firefox呈现页面

时间:2009-12-21 22:35:46

标签: javascript html firefox dojo

我遇到了Firefox和Dojo的奇怪行为。我在< head>中有一个带有这些行的html页面部分:

...
<script type="text/javascript" src="dojo.js" djconfig="parseOnLoad: true, locale: 'de'"></script>
<script type="text/javascript">
    dojo.require("dojo.number");
</script>
...

有时页面会正常加载。但有时它不会。 Firefox将获取整个html页面,但不会渲染它。我只看到一个灰色的窗户。

经过一些实验,我发现渲染问题与html的加载时间有关。 Firefox在加载时开始评估html页面。如果页面加载时间太长,则会在html完成加载之前执行javascript。

如果发生这种情况,我会得到灰色的窗口。建议Firefox向我展示页面的源代码将显示正确的完整html代码。但是:如果我将页面保存到磁盘(File-&gt; Save Page As ...),html代码将被截断,上面的部分将如下所示:

...
<script type="text/javascript" src="dojo.js" djconfig="parseOnLoad: true, locale: 'de'"></script>
<script type="text/javascript">
    dojo.require("dojo.number");
</script></head><body></body></html>

这解释了为什么我会看到灰色区域。但为什么这个代码出现在那里?我假设Dojo的require()方法做了“邪恶”的事情。但我无法弄清楚是什么。没有write.document(“&lt; / head&gt;&lt; body&gt;&lt; / body&gt;&lt; / html&gt;”);在Dojo代码中。我查了一下。

如果我放置dojo.require(“dojo.number”),问题就会解决; window.load事件中的语句:

<script type="text/javascript">
    window.load=function() {
       dojo.require("dojo.number");
    }
</script>

但我很好奇为什么会这样。是否有Javasctript函数迫使Firefox停止评估页面? Dojo是否做了一些“糟糕”的事情?任何人都可以向我解释这种行为吗?

编辑:Dojo 1.3.1,没有JS错误或警告。

2 个答案:

答案 0 :(得分:0)

页面的其余部分是什么样的?应该呈现哪些元素不是?您还有其他什么Javascript?

你看起来很好,但是在页面加载之后你将无法使用dojo.number中的方法或通过dojo.require加载的任何其他方法 - 你必须等待window.onload触发,或者使用dojo.addOnLoad()方法来触发回调。后者实际上比onload快一点。

dojo.require使用synch xhr加载会阻塞浏览器,因此如果加载异常缓慢,您会注意到页面呈现的延迟。

答案 1 :(得分:0)

我认为这是Firefox中的一个渲染错误,我在很多情况下都会看到,其中一个常见因素是浏览器加载页面中加载的所有资源所花费的时间。头脑中需要花费很长时间才能通过网络或eval请求的脚本越多,遇到这种情况的可能性就越高。使用热缓存来访问页面显着降低了运行到paint bug的可能性。缓解它的另一种方法是将javascript放在最后,这也是一种最佳实践,因为它不会阻止浏览器在获取标记时立即预览标记。

关于使用dojo的细节,常见用例包括运行onload,如创建和启动小部件。如果onload处理程序中的代码使用dojo模块(如窗口小部件),则将dojo.require语句粘贴在onload处理程序中,而不是在onload处理程序之前。如果直到稍后才需要它,那么在性能损失或阻止初始UI渲染方面没有任何意义。然后构建自定义dojo图层以包含最小内核(可能是自定义基础以使其更小)以及另外90%的单独图层中所需的内容。在头部加载最小的核心层(以获取dojo.addOnLoad等),然后在主体末端加载另一层。如果您居住在模块化应用程序框架中,应用程序在页面内容区域中进出,具体取决于您所在的页面,每个应用程序应在实际引用模块之前立即为其使用的相应dojo模块添加dojo.require语句

如果您需要在内联脚本中立即使用模块,这显然不会起作用,但如果是这种情况,那么自定义dojo构建也将有助于缓解这种情况。

我没有意识到Mozilla报告的问题,但我不久前在其他浏览器上也经常看到这种情况。