javascript - Dom 迭代导致 webview 渲染一半

Question

我使用 android 打开本地 web 文件，然后迭代 dom 并应用一些更改，但在迭代 webview 时停止在某个随机部分呈现页面，看 gif:

我已经做了什么

var elements = document.querySelectorAll("P");
for(var i = 0; i < elements.length;i++) {
//just iterating at the gif im chaging 
//but i tried without changing, just iterating and the result still the same 
} 

现在为了避免在每次 dom 更改时出现渲染问题，我创建了一个 documentFragment 并更改其中的 dom(或只是迭代)，然后将其 html 返回到主文档

var x = document.getElementById('contentRoot'); //getting the element root from the DOCUMENT (not the fragment)
      var frag = document.createDocumentFragment(); //creating fragment
      var contentRoot = document.createElement("DIV"); // creating a new contentRoot html element
      contentRoot.id = 'contentRoot';
      contentRoot.innerHTML = x.innerHTML;
      frag.appendChild( contentRoot );
    var elements = frag.querySelectorAll("P");
    for(var i = 0; i < elements.length;i++) {
    //just iterating at the gif im chaging 
    //but i tried without changing, just iterating and the result still the same 
    } 

document.body.innerHTML = frag.getElementById('contentRoot').innerHTML; //returning the edited html from the fragment so the webview will render/reflow just once everything not for each change

有没有办法在不“剪切”的情况下保持渲染正常？

PS:我正在使用函数在 window.onload 上迭代，所以它只是在所有 dom 加载到浏览器后才开始，为什么它一直在削减它？并在迭代结束时再次渲染？

Answer 1

JavaScript 的问题在于，当 JavaScript 运行时，整个页面被卡住并且不会呈现任何内容。如果您有一个非常大的 for 循环运行，这就解释了您的问题。

大多数桌面计算机浏览器会在呈现页面的同时呈现滚动(我敢打赌，如果您在桌面浏览器上运行此页面，它甚至不会让您滚动)。

然而，大多数移动设备，为了看起来快速和流畅，会将滚动渲染与页面本身分开。这样做的问题是，如果 JavaScript 卡在一个很长的循环中，用户将能够滚动，但页面不会先于他们呈现，最终会到达这个空白区域，那里什么都没有呈现。

我敢打赌，如果您在函数运行时尝试放大页面，它看起来会非常模糊，因为没有进行渲染。

解决此问题的一种方法是使用计时器或 requestAnimationFrame API。

requestAnimationFrame 几乎所有现代浏览器都支持。它的作用是在渲染下一帧之前推迟代码，通常用于制作流畅的动画。

使用此 API，我创建了以下代码...

var elements = document.querySelectorAll("P");
var i = 0;
var j = elements.length;
function iterate(){
    // this acts as the body of your for loop
    // do stuff with the current selected DOM element here...
    // select dom element with elements[i]

    i++;
    if(i < j){
        requestAnimationFrame(iterate);
    }
}
iterate();

现在，上面的代码在每个动画帧运行一次 for 循环迭代。假设您的设备以 60fps 的速度运行，那么每秒最多可进行 60 次迭代。

为了解决这个问题并使其更快，我们可以将 requestAnimationFrame(iterate) 替换为替代代码 window.setTimeout(iterate, 0)，这实际上告诉浏览器每毫秒进行一次迭代，同时仍然能够呈现页面。但是，此方法会降低帧率。 (但是，对于像您这样处理分离滚动的移动浏览器，帧率应该不是问题)

编辑:

当我使用上述方法在我的桌面浏览器中运行一个相当简单但很长的循环时，我实现了 JavaScript 测量的 60fps，每秒大约 150 - 200 次迭代。如果您在移动设备上，您的结果可能会更慢。

备选建议:

如果您想为这类事情使用预构建的 API，那么有一个看起来很酷的 API。 OP 找到了一个叫做 Turboid 的，可以让你更容易地管理这种循环。 http://turboid.net/artikel/real-loops-in-javascript.php