[JQuery]셀렉터 이용 시 주의할 점

회사에서 개발을 하다보면 JQuery를 이용하여 화면 쪽을 제어하는 경우가 많다.아직 내공이 부족해서 그런지 한번은 이런 일이 있었다.

분명히 같은 스크립트 코드인데 크롬에서는 클릭과 동시에 반응하고 IE에서는 2~3초 뒤에 반응을 하는 것이다. 평소에 개발 테스트를 주로 크롬에서 하다보니 IE에서 충분히 테스트 해보지 않고 넘어가는 경우가 많았는데 우연히 IE에서 생긴 다른 버그를 고치다가 발견한 부분이다.

부모창 소스이다. 별 건 없고 그냥 버튼을 누르면 해당 버튼의 data-value를 자식 팝업창의 파라미터로 보내어 새로운 팝업창을 여는 부분이다.

팝업창 쪽 소스이다. 부모창에서 보낸 pkid로 리스트를 조회한 후, 해당 리스트를 클릭하면 부모창에서 해당 리스트의 data-value 값으로 객체를 찾은 후 클릭 이벤트를 발생시킨다.

JS 쪽 소스에서 볼 수 있듯이 $(opener.docuemnt)를 이용하여 부모창에서 탐색을 시작하고 부모창의 수많은 객체 중에서 data-value 값이 내가 자식창에서 클릭한 리스트의 data-value 값과 같은 것을 찾아내고 있다. 문제는 이 방식이 크롬에서는 속도 문제가 전-혀 없지만 IE에서는 심각하게 느려진다는 것이다.

그래서 몇 가지 방법을 이용하여 수정을 해봤는데,

data-value로 찾는 방식이 문제인가 싶어서 아래와 같이 각 btn마다 id값(btn+pkid)을 주어 find로 찾는 방식을 바꿔보았다. 하지만 이 방식 또한 여전히 느렸다.
```
$(opener.document).find("#btn"+id).trigeer("click");
```
조금 더 세부적으로 find 할 객체를 명시해줘봤다. 그래도 역시나 느렸다.
```
$(opener.document).find(".list #btn"+id).trigeer("click");
```
어떻게 해도 느려서 IE를 없애는 게 더 빠를까… 생각하던 참에 아예 작동방식을 바꿔보기로 했다.
```
opener.parent.clickPlayBtn(id);
```
기존처럼 opner.document를 통해 부모창의 객체를 find하여 click하는 것이 아닌, 아예 부모창에 있는 click 함수를 id값만 파라미터로 넘겨주어 실행하는 것이다. 부모창의 clickPlayBtn 함수는 아래와 같다.
```
function clickPlayBtn(id){
 $("#btn"+id).trigger("click");
}
```
대략 이런식으로 부모창에서 click 이벤트가 일어나도록 바꿨다. 그랬더니! 크롬과 IE의 속도 차이 없이 둘 다 정상적으로 작동하는 것이다.

자식창에서 부모창을 셀렉터를 이용하여 탐색하면 경우에 따라, 브라우져에 따라 속도 차이가 날 수 있다는 것을 알게 되었다. 부모창에서 일어나는 행위는 최대한 부모창에 포함된 함수로 제어할 수 있게 만들어야 성능상의 이슈가 생기지 않을 듯 하다.