如何让文字出现？答案

【问题标题】：How to make the text appear?如何让文字出现？
【发布时间】：2016-11-07 11:38:23
【问题描述】：

document.write('Test.');
while (true) 1;

我希望浏览器先显示文本，然后跳转到无限循环。但我没有看到任何文字。如何强制浏览器逐行运行？我正在寻找一个简单的函数来告诉浏览器等待第一行完成。有这样的事吗？喜欢waitForEverythingToFinish()。就像使用window.getComputedStyle(div).getPropertyValue('height') 强制重绘一样。

【问题讨论】：

甚至在浏览器尝试“显示”之前，浏览器就会进入无限循环并停止。请不要使用document.write()。
如何更改？这只是对问题的极其简化的说明。真正的代码不包含任何document.write()。
@TamásBolvári 不这样做吗？为什么要停止浏览器？标签会崩溃。
你想发生什么@TamásBolvári。对我来说，这似乎是一个 XY 问题。
@TamásBolvári 你将不得不重组你的代码。如果调用堆栈永远不会完成，那么浏览器将不会更新。您需要构建代码以使浏览器出现。你也可以考虑让网络工作者把它放在另一个线程上。

标签： javascript

【解决方案1】：

我相信这个问题的本质，基于你的 cmets，是你想确保浏览器有时间更新屏幕之前它开始一个长时间运行的同步任务。浏览器会尽可能更新屏幕，因此如果您阻塞主线程，您将无法获得刷新的 UI。这应该可以通过一个简单的超时来实现，或者正如 cmets 所建议的那样，requestAnimationFrame。

简单超时：

// For example, document.write(...)
funcThatChangesScreen();

setTimeout(function () {
  // For example, lots of heavy calculations
  synchronousFuncThatTakesALongTime();
}, 100);

JSFiddle对比：

或者，请参阅requestAnimationFrame。

编辑：正如 cmets 中的其他人所指出的，这并不是真正获得您想要的东西的最佳方式，即使它确实有效。如果您有一个长时间运行的同步任务，最好将其委托给 WebWorker 或使其异步。这种超时解决方案将允许用户在屏幕上看到文本，但它仍然会阻止 UI，就像上面的 JSFiddles 中一样。

【讨论】：

为什么浏览器不能在我想要的时候更新屏幕，它还在等什么？无论它在等待什么，都应该有办法阻止它。当我向document.write('Test.'); 询问时，它甚至都不忙。无论如何，你已经完美地回答了我的问题，但是你能补充一下吗：with requestAnimationFrame？
@TamásBolvári - 浏览器一次只能做一件事，包括绘制屏幕供用户查看。浏览器试图通过等待直到他们无事可做来刷新屏幕 UI 来变得聪明——否则，在几乎每一行代码之后不断地重新绘制会使一切变得更慢。有关详细信息，请参阅this answer on JS multithreading。 requestAnimationFrame 的讨论是here。

【解决方案2】：

看看这是否适合你的目的？

if(!document.write('Test.')){
    while (true) 1;
}

【讨论】：

不幸的是它没有。