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

Question

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

这种努力总是失败的，因为在浏览器中呈现DOM比执行下一个javascript代码需要更多的时间。

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

那么，我能得到一个promise或附加一些回调函数吗？

代码如下：

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 });
};

Answer 1

据我所知，没有这样的事件可以听。但是你可以做一些通常用于动画的事情。为了保持动画以较高的速度流畅运行，有必要在FastDom.js试图抽象时批处理所有的DOM访问。

总而言之，选择的武器应该是requestAnimationFrame()，以便安排DOM访问框架，在框架中，浏览器已经更新了DOM。

在本例中，需要调度new IScroll(...)，直到querySelector('.dlg-wrapper')实际返回所需的元素。

Answer 2

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

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

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