Когда рендеринг обновляется в JavaScript? - PullRequest
Новая
       126

Когда рендеринг обновляется в JavaScript?

1 голос
/ 27 января 2020

Я читал html спецификации, относящиеся к веб-API, и в основном говорилось, что

После того, как событие l oop выполнило некоторую задачу из очереди задач, он должен обновить рендеринг (если это оконное событие l oop)

Также сказано, что пользовательский агент имеет какой-то способ сказать, что обновление рендеринга не требуется (см. пункт 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?

Я рассматриваю это так - в моем совмещении 3 задачи индекс. js. Первая задача - это задача console.log, она сначала добавляется в очередь задач в случае события l oop. Затем появляется задача add и, наконец, задача modifyBackground.

Теоретически, если пользовательский агент не может узнать, нужно ли нам на самом деле обновлять рендер, он должен обновлять рендер после каждой задачи.

Произойдет ли повторное рендеринг только при вызове метода modifyBackground() в последней строке? И, если да, то как пользовательский агент сообщает, что повторная визуализация не нужна?

PS Если вам нужны некоторые пояснения, я хочу знать, как Например, пользовательский агент Google chrome сообщает, что повторная визуализация не требуется.

1 Ответ

0 голосов
/ 27 января 2020

Произойдет ли повторный рендеринг только при вызове метода modifyBackground() в последней строке?

Это зависит от реализации браузера, иногда они не соответствуют спецификациям.

И, если это так, как пользовательский агент сообщает, что повторная визуализация не требуется?

Опять же, это зависит от реализации браузера. Вы должны понимать, как работает рендеринг в браузере. Вот отличное объяснение, которое вы можете проверить: Как браузер отображает веб-страницу . Ниже приведено резюме.

Существует 3 базовых c понятия:

  1. DOM
  2. CSSOM
  3. Render Tree.

объектная модель документа (DOM)

Когда браузер читает код HTML, когда он встречает элемент HTML, такой как html, body, div et c., Он создает JavaScript объект, называемый Node. В конечном итоге все HTML элементы будут преобразованы в JavaScript объекты. Поскольку каждый отдельный элемент HTML имеет разные свойства, объект Node будет создан из разных классов (функций конструктора).

CSS Модель объекта (CSSOM)

После создания DOM браузер читает CSS из всех источников (внешний, встроенный, встроенный, пользовательский агент и т. Д. c.) И создает CSSOM. CSSOM означает CSS Object Model, которая представляет собой древовидную структуру, как и DOM. Каждый узел в этом дереве содержит информацию стиля CSS для этого конкретного элемента DOM. CSSOM, однако, не содержит элементов DOM, которые не могут быть напечатаны на экране, например, et, c.

Render Tree

Вот ответ на ваш вопрос. Render-Tree - это древовидная структура, построенная путем объединения деревьев DOM и CSSOM. Браузер должен рассчитать расположение каждого видимого элемента и нарисовать их на экране, для этого браузер использует Render-Tree. Следовательно, если Render-Tree не будет создан, на экране ничего не будет напечатано.

...