コールバック関数のコード順序

const button = document.querySelector('button');
button.addEventListener('click', ()=> {
  const element = document.createElement('p');
  document.body.appendChild(element);
  element.style.color = 'white';
  element.innerText = 'lalala';
});

上記のコードがあると仮定します.
ボタンをクリックすると、Web APIにイベントが発生した場合、このコールバックはTask Queueに入れられます.
コールバックで記述されたコードは、順序の影響を受けません.なぜなら、このコールバックがCall stackに入ると、イベントループはブラウザですべての適用要素をマークし、これらの要素がすべて実行されるまで、その後のレンダリングでレイアウトの下塗りにわたって表示されるからです.
すなわち、レンダリングは、コールバックのコードブロックが完了した後に発生する.