ajax 로 무한 스크롤 경우 뒤로가기시 위치 유지 관련문의입니다.
본문
우선 데이터를 ajax 로 무한 스크롤 및 뒤로가기시 위치 유지 까지 작업했습니다.
그런데,
데이터가 작을 경우는 문제가 되지 않는되요
많을 경우 로딩이 많이 걸립니다.
// 불러온 데이터 건수 체크
var total = $("#ajax_data > li.eventList").length;
console.log('total', total);
//스토리지 세션에 저장된 데이터 건수 가져오기
var get_total = parseInt(get_scroll_content());
console.log('get_total', get_total);
if (total != get_total) {
// 데이터 비동기 호출
/* get_total : 불러올 갯수
* 0 : 시작 건수
* ca_id : 카테고리 아이디
* sch : 검색
*/
get_event_list(get_total, 0, _ca_id, _sch);
}
여기에서 180건 또는 그이상일 경우
모바일에서 부담이 될듯한되요
스크롤 위치에 맞는 데이터를 가져오다 보니 이렇에 작업했는되요
방법이 없을 까요 ?
고수님 조언 부탁드립니다.
답변 3
무한스크롤이 등장한 초기에
여기저기에서 많이 사용되었죠
쿠팡/티몬등에서도 신나게 적용하고
그런데, 이 무한스크롤이라는게
결국은 비동기로 화면전환 없이 데이타를 불러와야 하는 형태라서
자원(네트웍, cpu점유, I/O)소모가 많은 구조입니다.
그런데, 그것을 위치까지 기억을 한다면
당연히 느려집니다.
데이타가적은 3페이지 이내의 데이타를 로딩할때는 큰 무리가 없겠지만
그래도, 3페이지의 내용을 가져오는 순환작업이 진행되어야하고
데이타가 많은 15페이지의 4번째 데이타 라고 할경우
다시 접근할경우
15페이지만큼의 사용하지 않는 데이타를 불러오고 로딩하고
서버측면에서도
사용자의 데이타 측면에서도 모두 손해입니다.
굳이 기억을 해서 찾아가는 내용이라면
기억하는 페이지를 우선불러오던지
무한스크롤이 아닌 페이지 방식으로 전환하던지 하는 형태로 구성하는게
비용/자원 측면에서 효율적일겁니다.
결국은 다 비용을 소모하는 일이되기때문에
로딩이 느려지는건 단지 사용자 1인의 데이타가 아니라.
그 사용자로 인한 다른 사용자의 대기시간까지도 소모한다는점을 체크해서
구성을 하셔야 할겁니다.
무한스크롤을 기억해서 찾아가는것이라면 방식 자체는 구현하신게 맞는것 같아보이네요
웹브라우저는 일정한 양의 데이터만 유지 되도록 하고
뒤로 가던지 앞으로 가던지 방향 여부와 상관없이
데이터 동적 로드/삭제 를 반복하는 방법이 있습니다.
스크롤 시 데이터가 로드될 때 그 첫 라인에 a 앵커를 넣고 # 주소로 이동하면 될 거 같음.
