feat.DreamCoding!

window -> DOM, BOM, JS

DOM(Document Object Model) - document...
BOM(Browser Object Model) - navigator, storage, fetch...

EventTarget methods

EventTarget.addEventListener()
EventTarget.removeEventListener()
EventTarget.dispatchEvent()

Critical rendering path

DOM + CSSOM(CSS Object Model) -> Render Tree
CSSOM은 css cascading rule에 따라 계산한다.

사용자가 브라우저에서 특정 웹페이지 보고 싶다. -> requests/response -> loading -> scripting -> rendering -> layout -> painting -> 브라우저에 웹 페이지가 보여진다.

Construction(DOM-CSSOM-RenderTree) -> Operation(layout-paint-composition)

layout : 브라우저 상 위치
paint : 묶어서 layer
composition : layer들을 구성

성능 향상을 위해

• HTML tag들이 over wrapping되지 않고, 작게 만들어지면 좋다.
• animation이 일어날 때, composition > paint > layout(bad) 순으로 좋다.
  csstriggers.com

chrome 개발툴에서 layer, performance로 확인 가능.
performance 툴에서 녹화를 누르고 성능을 볼 수 있는데, ctrl+shift+p로 layout을 검색해서 layout이 변화되는 부분을 눈으로 볼 수도 있어서 좋다.

css will-change 속성은 예상되는 변화의 종류에 관한 힌트를 브라우저에게 줘서 따로 layer를 만들어서 성능을 최적화하는데 기여한다.
(주의! 최후의 수단으로 사용하기 위함으로 남용금지. 괜히 레이어를 복잡하게 만들어서 성능이 더 안 좋아질 수 있음.)
will change

innerHTML

innerHTML은 계속 변화하는 DOM을 조작할 때는 쓰지 않는 것이 좋고, 사용자에게 입력받은 데이터를 바로 innerHTML을 이용해서 설정하는 것은 XSS공격에 취약하다.

XSS(Cross-Site Scripting)이란 해커가 악성 스크립트를 삽입하는 공격 기법이다.