火狐浏览器的渲染顺序

Rendering order in Firefox

本文关键字：顺序 火狐浏览器      更新时间：2023-09-26

我正在用JavaScript构建图组件。它有两个单独渲染的图层：前景和背景。

要确定所需的背景大小：

  1. 渲染前景
  2. 测量结果的高度
  3. 渲染前景和背景一起

在代码中，它看起来像这样：

var foreground = renderForegroundIntoString();
parentDiv.innerHTML = foreground;
var height = parentDiv.children[0].clientHeight;
var background = renderBackgroundIntoString(height);
parentDiv.innerHTML = foreground + background;

使用IE7，这是小菜一碟。但是，Firefox2 并不愿意立即渲染parentDiv.innerHTML，因此我无法读出前景高度。

Firefox 何时执行渲染，我怎样才能延迟背景生成直到前景渲染完成，或者是否有其他方法来确定前景元素的高度？

[在测试丹的答案后附加（感谢丹）]

在回调

方法的主体中（由我可以看到的setTimeout(...))回调），innerHTML的呈现仍然不完整。

你永远不应该依赖你刚刚插入到 DOM 中的东西被下一行代码渲染。所有浏览器都会在某种程度上将这些更改组合在一起，并且很难确定何时以及为什么。

处理它的最佳方法是执行第二部分以响应某种事件。虽然在这种情况下看起来没有一个好的可以使用，所以如果做不到这一点，你可以通过以下方式触发第二部分：

setTimeout(renderBackground, 0)

这将确保当前线程在执行代码的第二部分之前完成。

我不认为你想要parentDiv.children[0]（无论如何，孩子在FF3中不是一个有效的属性），而是你想要parentDiv.childNodes[0]，但请注意，这包括可能没有高度的文本节点。您可以尝试循环等待 parentDiv 的后代呈现如下：

function getRenderedHeight（parentDiv） {if （parentDiv.childNodes） {  变量 i = 0;  while （parentDiv.childNodes[i].nodeType == 3） { i++; }  现在 parentDiv.childNodes[i] 是你的第一个非文本子节点  返回 parentDiv.childNodes[i].clientHeight;  您的其他代码在这里...} else {  setTimeout（"isRendered（"+parentDiv+"）"，200）;}}

然后在设置 innerHTML 后调用：getRenderedHeight（parentDiv）。

无论如何，希望能给出一些想法。

相关文章：