浏览器渲染成功有啥希望吗？

Posted 2023-03-24

【中文标题】浏览器渲染成功有啥希望吗？

【英文标题】：Is there some promise on browser rendering success?浏览器渲染成功有什么希望吗？

【发布时间】：2016-03-02 08:57:16

【问题描述】：

我想在页面中异步插入一些html，然后执行一些与插入的DOM相关的javascript代码。

这种尝试总是失败，因为在浏览器中渲染 DOM 比执行下一个 javascript 代码需要更多时间。

我以前遇到过这样的问题并提出了一个问题，但没有人回答。在这里：https://***.com/questions/31935005/whats-going-on-with-dom-after-orientationchange-event

那么，我可以得到一个承诺或附加一些回调函数吗？

代码在这里：

var bubble = function bubble(type,content)
    var myScroll, temp = document.createElement('div');
    temp.innerHTML=content;
    temp.className=type==='time'?'time':'bubble '+type;
    document.getElementsByClassName('dialogue')[0].appendChild(temp);
    if(type==='reply')myScroll = new IScroll('.dlg-wrapper',  mouseWheel: true );
;

【问题讨论】：

你是如何异步插入的，你是如何响应的。请出示您的代码。

@GolezTrol 代码已添加。事实上，无论代码是什么，它总是这样，只要它操纵 DOM 以导致重新渲染，然后立即在 javascript 中访问它们。您可以在我提到的链接问题中看到相同的内容。

那么这段代码的哪一部分被调用得太早了？我在这里没有看到任何异步发生。

当然是插入DOM后的代码。

不，不是。它只是推迟到您的脚本空闲为止。这也是of this question 的答案所建议的，顺便说一下，它还建议使用setTimeout 作为解决方案。

【参考方案1】：

据我所知，没有人可以听到这样的事件。但是你可以做一些通常用于动画的事情。为了让动画以高速率平稳运行，必须批处理所有 DOM 访问，因为 FastDom.js 试图抽象掉。

总而言之，选择的武器应该是 requestAnimationFrame() 来调度您的 DOM 访问 Frame，浏览器已经更新了 DOM。

在您的情况下，new IScroll(...) 需要被调度，直到 querySelector('.dlg-wrapper') 实际返回所需的元素。

【参考方案2】：

我不认为渲染是异步的，而是由仅在脚本结束后处理的消息触发的。

但是你说“然后执行一些与插入的DOM相关的javascript代码。”。我没有在您的代码中看到这种情况。

无论如何，如果您使用setTimeout(callback, 0)，您可以在回调中进行后处理。 setTimeout也是由那个消息队列控制的，所以修改DOM的代码完成后，浏览器会先处理重绘消息（因为它在消息队列中是第一个），然后才调用回调。

【讨论】：

setTimeout 不起作用。这个问题我在这里试过，这个问题我也试过：***.com/questions/31935005/…

至少，它不是同步的，是吗？我误解了这些概念吗？

它是基于消息的。更改 DOM 将使消息排队，该消息不会与您的脚本异步处理，而是在脚本结束后处理。所以是的，你误解了这些概念。