$(document).ready()의 문제점

jQuery에서 $(document).ready()의 사용은 css파일과 javascript 파일을 많이 사용 할 때 아직 읽혀지지 않은 파일들로 인해 발생하는 문제를 해결하기 위한 방법입니다.

하지만, 화면은 표시되었지만 아직 모든 파일들이 읽혀지지 않았다면 $(document).ready() 속의 로직이 실행되지 않는다는 문제가 있습니다. 이 사이트와 같이 다양한 광고와 정보를 외부의 API로 이용하는 경우 해당 파일들까지 읽혀져야 실행되기 때문에 외부 파일들을 읽는 것이 느리거나 응답이 없어 상당시간 로딩중일경우 상당히 오랜시간동안 jQuery의 많은 플러그인들이 작동하지 않는 현상이 발생하게 됩니다. 실재로 이 사이트에서 사용하는 Light Box 2 플러그인의 경우 화면에 웹페이지의 내용이 출력되었는데도 실행되지 않는 현상이 발생하고 있습니다. 이유는 알라딘의 광고 채널중에서 일부 파일이 응답을 않할때가 있는데 그때마다 플러그인이 작동하지 않았던 것입니다.

해결방법:

1. 태그 앞에 스크립트를 추가하고 실행시켜라?

스크립트의 실행을 body 종료 태그 앞에 두어서 HTML 문서의 마지막에서 실행되도록 하는 방법입니다. Google의 Analytics도 이런 방법을 사용하고 있습니다. 이 방법의 전제조건은 HTML에 화면을 구성하는데 필요한 모든 내용이 들어 있어야 합니다. 그러면 스크립트가 실행 될 때 이미 들어 있는 요소들을 사용할 수 있기 때문에 문제가 없이 작동하게 됩니다. 이렇게 HTML 문서에 화면을 구성하는 내용을 모두 넣으면 좋은 점도 있습니다. 화면에 보이는 요소들이 HTML에 변함 없이 존재하기 때문에 검색 로봇이 내용을 빠짐없이 가져가게 됩니다. 다만 back end 에서 HTML을 생성하는 기존의 방식이 됩니다. (나쁘다는 것이 아니라 개인적인 생각으로 성능 좋은 방문자의 PC를 너무 놀리는 것 같아 뭔가 찜찜합니다. ^^)

그런데 어찌보면 jQuery의 $(document).ready() 함수 사용의 문제점과는 다른 이야기일 지도 모르겠습니다. 왜냐면 $(document).ready()를 사용하지 말라는 의미와도 같으니까요. $(document).ready()를 사용하지 말고 직접 실행하도록 만들어 HTML문서의 끝에서 실행하도록 하라는 것이니 음… 이렇게 되면 jQuery의 플러그인을 못 만들 수도 있습니다.

2. 외부 파일 로딩을 $(document).ready() 속으로 옮겨라.

이건 제 생각인데 화면에 출력되는 내용에서 크게 중요하지 않은 것들이나 외부 파일을 로딩해야 하는 것들을 HTML문서가 로딩 된 뒤에 JavaScript가 추가 하는 것입니다. 이렇게 하면 문서가 로딩되었을때 중요한 내용이 빨리 보이고 덜 중요한 내용들은 차후에 채워지는 방식이 될것입니다. 다만 화면이 고정되어 있지 않고 가변적이며 미리 보여진 요소들이 경우에 따라 밑으로 밀리게 되겠네요.

일단 이 방법을 사용하면 관리 할 수 없는 외부 파일들을 문서 로딩 완료 후 추가하기 때문에 $(document).ready()가 늦게 실행되는 일은 줄어 들것입니다. jQuery 플러그인도 기존 방식으로 만들어도 되고 기존의 플러그인들도 그대로 사용 할 수 있을 겁니다.

시간이 나면 이 사이트부터 2번 방법으로 광고들을 처리해 봐야겠습니다.

Advertisements

Published by: benant

WEB PROGRAMMER. PHP, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

Categories Web태그댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중