DOM 마킹 객체를 저장하는 가장 좋은 방법

Question

나는 노키아/구글 맵을 구현 중이며 500 개의 마커를 저장해야한다. php 배열을 반복하고 데이터 속성을 사용하여 정렬되지 않은 목록에 넣음으로써 정보 (이름, 위도, 경도, markergroup 및 이미지)를받습니다. 그런 다음 jQuery를 사용하여 해당 li 요소를 반복하고 마커 정보로지도를 채 웁니다.

이것은 잘 작동하지만 DOM 내부에 500 개의 숨겨진 요소가있는 목록은 성능 문제와 관련하여 저의 오버 헤드로 보입니다.

인라인 자바 스크립트를 사용하여지도에 직접 삽입되기 전에 다른 상황에서지도를 사용해야하므로 PHP 코드 요소와 결합하여 나에게 나쁜 습관이었으며 중복 된 코드가 많았습니다.

필요한 마커 정보가 포함 된 500 개의 dom 요소를 갖는 것보다 더 좋은 방법이 있습니까?

일부의 생각 :

1) 나는 모든 500 마커 정보를 포함하는 JSON 배열을 생성하고 하나의 데이터 속성 내부에 저장할 수 있습니다. 브라우저 제한 사항이있을 경우 단일 데이터 속성에 대해 엄청난 양의 데이터가 발생하는지 확실하지 않습니다. 또한 json 인 코드/디코드로 인해 성능이 더욱 악화 될 수 있습니다.

2) 마커 정보가 포함 된 JSON/XML/KML 파일을 만들고 AJAX를 통해 액세스 할 수 있습니다. 필자의 경우 이것은 더 큰 노력이며 Ajax 요청은 dom 구문 분석보다 오래 걸릴 수 있습니다.

3) 다시 인라인 JS를 사용하여 (정말 인해 재사용 가능한 코드의 부족 ..)

어떤 생각 내 경우에는 나쁜 연습? 다른 사람이 비슷한 케이스를 테스트하여 성능을 확인 했습니까? 직접 스크립트 태그에

Answer 1

출력 JSON은 가장 쉬운 방법입니다 :

<script> 
    var data = <?php echo json_encode($data);?>; 
</script> 

그러나 아약스는 jQuery로 간단 :

var data; 
$.get('somefile.php', function(data){ 
    data=data; 
}); 

somefile.php :

header('Content-Type: application/json'); 
echo json_encode($data); 

Answer 2

여기에 몇 가지 옵션이 있다고 생각합니다. 이미 마음 속에 몇 가지 옵션이 있습니다. 나의 겸허 한 의견에서, AJAX는 가장 의미 론적 인 옵션이며 미래에는 문제를 덜 줄 것입니다.

성능 향상을 위해 repaint 이벤트를 줄일 수 있습니다. 500 개의 마커를 추가하고 마커가 끝나면 전체 마커를 추가하기 전에 전체지도를 숨 깁니다.

사용자 편의를 위해 예를 들어로드 용 gif를 표시 할 수 있습니다.

이미 저를 많이 저장했습니다.

@DoXicK에 따르면 마커가 정적 콘텐츠 인 경우 몸에 스크립트 태그를 가져 오는 JSONP 전략을 사용할 수 있습니다.