何时在JavaScript中更新渲染?

我正在读html specs concerning web api's,基本上说的是

事件循环从任务队列执行了某些任务后,需要更新渲染(如果这是窗口事件循环)

还据说,用户代理可以通过某种方式告知不需要更新渲染(请参见上面链接中的第10.3节“不必要的渲染”)

所以我的问题是:如果我有一个简单的index.html文件,并且仅附加了一个脚本文件-index.js

index.html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body>
    Hello StackOverflow
    <script src="./index.js"></script>
  </body>
</html>

index.js

function add(a,b) {
    console.log(a+b);
}

function modifyBackground() {
    document.body.style = 'background : red';
}

console.log('Hello world'); // Task 1
add(4,5); // Task 2
modifyBackground(); // Task 3 Will the render be updated only here?

我这样看-index.js中有3个任务。第一个任务是console.log任务,它首先被添加到事件循环中的任务队列中。然后是add任务,最后是modifyBackground任务。

从理论上讲,如果用户代理无法知道我们是否确实需要更新渲染,则它应该在每个任务之后更新渲染。

仅当我在最后一行调用modifyBackground()方法时才会进行重新渲染吗?而且,如果是这样,用户代理如何告知不需要重新渲染?

建议。如果您需要澄清一下,我想知道,例如google chrome的用户代理如何告知不需要重新渲染。

yjyhp5211314 回答:何时在JavaScript中更新渲染?

仅当我致电modifyBackground()时才会进行重新渲染 最后一行的方法?

这取决于浏览器的实现,有时它们不遵循规范。

如果是这样,用户代理如何告知未重新渲染 有必要吗?

同样,这取决于浏览器的实现。您需要了解浏览器渲染的工作方式。您可以查看以下很棒的解释:How the browser renders a Web Page。以下是简历。

有3个基本概念:

  1. DOM
  2. CSSOM
  3. 渲染树。

文档对象模型(DOM)

当浏览器读取HTML代码时,只要遇到HTML元素(如html,body,div等),它就会创建一个称为Node的JavaScript对象。最终,所有HTML元素都将转换为JavaScript对象。由于每个不同的HTML元素都有不同的属性,因此将通过不同的类(构造函数)创建Node对象。

CSS对象模型(CSSOM)

构造DOM后,浏览器将从所有源(外部,嵌入式,内联,用户代理等)读取CSS并构造CSSOM。 CSSOM代表CSS对象模型,它是一个类似于DOM的树状结构。 该树中的每个节点都包含该特定DOM元素的CSS样式信息。但是,CSSOM不包含无法在屏幕上打印的DOM元素,例如,等。

渲染树

这是您问题的答案。渲染树是一种通过合并DOM和CSSOM树而构建的树状结构。浏览器必须计算每个可见元素的布局并将其绘制在屏幕上,因为该浏览器使用Render-Tree。因此,除非未构建Render-Tree,否则屏幕上将不会打印任何内容。

本文链接:https://www.f2er.com/2704960.html

大家都在问