Web API HTMLElement

Creator

Creator

Seonglae Cho

Created

Created

2021 Jun 7 8:18

Editor

Editor

Seonglae Cho

Edited

Edited

2022 May 12 14:7

Refs

Refs

inert되면 overlay 생긴것처럼

testContest

innerText

innterHTML

textContent의 성능이 가장 좋은 편

notion image

당신이 innerHTML을 쓰면 안되는 이유

textContent 중심으로 본 innerHTML, innerText 와의 장단점 비교 textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과입니다. 즉, 해당 요소 내부의 원시 텍스트(raw text) 입니다. 그래서 다른 프로퍼티들에 비해 파싱이 빠릅니다. 참고 : Node.textContent | MDN innerText 프로퍼티의 값 또한 text/plain 으로 파싱한 결과입니다. 그래서 innerText는 textContent와 혼동하기 쉬우나, 중요한 차이점이 있습니다.

https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

당신이 innerHTML을 쓰면 안되는 이유

[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리

이 파트의 핵심은 파싱의 병렬성과 렌더링에 미치는 영향이다. 크게 배치순서를 바꾸는 것과 제한, 기타 효율적 활용하는 방안으로 나눌 수 있다. 2.1.1 CSS를 상단에 배치 개요 분류: CSS HEAD에 스타일 시트를 넣으면 페이지가 점진적으로 렌더링 될 수 있어 좋다. CSSOM 트리는 CSS를 모두 해석해야 구성되고, 구성되지 않으면 렌더링이 차단되기 때문이다.

https://black7375.tistory.com/74

[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리

Recommendations

/////////////