JS30-Whack A Mole

JS30 30강을 진행하면서 배운 내용을 정리해두려 합니다. 

---

1.textContent와 innerText의 차이.

나는 지금까지 이 두개가 그냥 같고 별다른 차이가 없다고 생각했는데 큰차이가 있었다. 결론적으로는 textContent가 성능상 훨씬더 유리하다. 

이유는 아래와같다. 

브라우저는 자동적으로 페이지의 레이아웃을 계산하여 각 element와 CSS를 화면에 렌더링 한다. 이하의 코드를 보자.

elementA.className = "a-style";
var heightA = elementA.offsetHeight;  // layout is needed
elementB.className = "b-style";       // invalidates the layout
var heightB = elementB.offsetHeight;  // layout is needed again

element A 의 스타일을 지정하고 해당 엘리먼트의 offsetHeight를 가져오려고 하면 브라우저는 element A의 스타일이 적용된 레이아웃을 가져와서 높이를 계산해줄것이다.
=> 그런데 그이후 B라는 요소에 또다른 스타일을 지정하면 전체 화면의 레이아웃이 바뀜
=> B의 offsetHeight를 가져오기 위해서는 a의 스타일이 바뀐시점의 레이아웃이 아니라 b 가 바뀐시점의 레이아웃을 이용해서 현재 B의 offsetHeightfmf 가져와야한다. 

결과적으로 위의 코드는 레이아웃을 2번 계산하기 때문에 성능이 저하된다. 

그렇다면 어떻게 위의 코드를 수정해야할까?

elementA.className = "a-style";
elementB.className = "b-style";
var heightA = elementA.offsetHeight;   // layout is needed and calculated
var heightB = elementB.offsetHeight;   // layout is up-to-date (no work)

 A 와 B 요소의 스타일을 전부 지정을 마친후 offsetHeight를 구하면 동일 레이이아웃(레이아웃1개)으로 A, B의 offsetHeight를 구할수 있어서 성능이 개선된다. 

textContent와 innerText차이점도 레이아웃을 사용하는지에서 기인한다. 

아래의 코드를 실행하면

<div id="t"><div>lions,
tigers</div><div style="visibility:hidden">and bears</div></div>

결과가 위처럼 나온다. innerText는 레이아웃을 이용해 사용자의 화면에 어떻게 텍스트가 표시되는지를 계산을 거치고 값을 반환한다. 즉 해당 element에서 보여지는 렌더링된 text값이다. 

반면 textContent의 경우 sub-tree에 있는 모든 TextNodes의 단순 concatanation이다. 

따라서 계산을 거치지 않는 textContent가 성능상 더 빠르다.

근데 그렇다면 왜 innerText를 아직도 여기저기서 볼수 있는걸까? 

internet explorer 시절의 잔재인 경우가 많다고 한다. 사실 익스플로러8 까지만해도 textContent는 사용이 불가능했고 innerText를 사용해야했다한다.

출처

https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext

Difference between textContent vs innerText

https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/

kelly norton: innerText vs. textContent

---

2. event.isTrusted

해당 이벤트가 실제로 유저의 액션에 의해서 일어났는지 확인하는데 쓰는 속성은 event.isTrusted이다.

https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

Event.isTrusted - Web APIs | MDN