콜백함수 안의 코드 순서

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

위와 같은 코드가 있다고 가정하자.
버튼이 클릭됐을때 웹 APIs에서 이벤트가 발생하면 이 콜백을 Task Queue에 넣어준다.

콜백 안에서 작성한 코드는 어떤 순서로 작성하던 상관이 없다. 왜냐하면 이 콜백이 Call stack에 들어가는 순간 이벤트 루프는 이것이 다 실행될 때까지 기다렸다가 나중에 렌더링이 될 때 전체적으로 적용된 요소들이 레이아웃 페인트에 걸쳐서 브라우저에 표기되기 때문.

즉, 렌더링은 콜백의 코드블럭이 다 수행되고 난 이후에 발생한다.