이러한 방법 중 가장 좋은 방법으로 생각되는 방법은 무엇입니까?

Question

JSON 응답으로 반환되는 데이터 배열이 있습니다. 데이터는 정기적으로 업데이트되며 매우 자주 액세스됩니다.

데이터에는 표시되는 각 노래에 대한 설명/응답 목록이 포함되어 있으며 사용자가 특정 요소를 가리키면 해당 메모/응답이 템플릿으로 렌더링됩니다.

노래 목록도 동적으로 필터링 할 수 있으므로 배열이 계속 업데이트됩니다.

모범 사례로 간주되는 다음의 데이터의 빈번한 액세스 및 업데이트를 감안할 때 : -

A.이/액세스에게 그것을 조작 지속적으로 전역 변수의 전체 배열을 저장합니다.

또는

B. 스토어

jQuery의 $ .DATA 방법 및 액세스 그런 식을 사용하여 DOM의 배열입니다.

가장 좋은 이유는 무엇입니까? 옵션 A가 변수가 사용자 세션 전체에서 메모리에 있어야 할 필요가 있다는 것을 명심하십시오. 또한 잠재적 인 메모리 누수 등의 관점에서주의해야 할 사항이 있습니까?

편집 : 좀 더 자세한 정보를 제공하기 위해 : 평균적으로 데이터는 주어진 시간에 2-5kb 사이가 될 것으로 예상됩니다.

Answer 1

나는 옵션 B을 여기에 말할 것입니다. 순수한 배열을 조작 할 경우 성능상의 이점은 실제로 매력적이지만, 데이터 유형을 사용하면 데이터를 해당 DOM 요소에 관련시켜야합니다.

$.data을 사용하면 관련 요소에 데이터를 첨부 할 수 있습니다.

// with option A 
$('.song').mouseover(function (e) { 
    // read the relevant index value of the data from this element 
    // (probably through some attribute?) 

    // get the data from the global array 

    // show that data on hover 
}); 

// with option B 
$('.song').mouseover(function (e) { 
    // show the $(this).data() on hover 
}); 

그것은 확실히 청소기, 난, 당신이 당신의 DOM 요소는 전역 배열에서 관련 데이터를 기억하고있는 상상 DOM 요소에 연결해에서 저장할 수 없습니다 : 당신의 hover 이벤트의 흐름을 상상 속성을 통해 자체적으로 또는 어딘가에 객체 참조를가집니다.

두 번째로, 전역 개체는 악합니다. 논쟁의 여지가있는 논쟁의 여지가있는 상당한 정도의 범위.노래의 요소를 정렬하고, DOM 자체 필터링 것 같은

셋째, 그것은 소리. $.data을 통해 데이터를 첨부하면 추가 추적없이 DOM 요소와 함께 정렬되고 필터링됩니다. 노래 요소는 DOM에서 지워야합니까? 그것에 .remove()를 부르십시오 --- 관련은뿐만 아니라 삭제된다 얻는다. 무료 기능!

마지막으로, $.data은 (내가 그 하나 틀리지 경우에 저를 정정)뿐만 아니라 순환 참조 메모리 누수를 방지하기 위해 최적화되어 있습니다.

게다가, 데이터의 2~5킬로바이트는 훨씬 같은 소리하지 않습니다.

그냥 내 두 센트. 답변 지금까지 사람에 대한

Answer 2

) 내가 선호하는 선택입니다. dom 확장을 피하려고 노력해야합니다.

Direct DOM manipulation is rather slow이므로 가능하면 피하십시오.

Answer 3

IMO 귀하의 JS/JQ 코드에 따라 다릅니다. 구성 요소화된 경우 .data을 사용하여 각 구성 요소의 데이터를 로컬로 유지하는 것이 더 깔끔합니다. 그렇지 않은 경우 중요하지 않을 수도 있지만 단일 위치에 보관하면 작업이 더 쉬워 질 수 있습니다. 나는 .data 첨부 파일을 많이 사용하여 특정 문제에 부딪치지 않았지만 운이 좋았을 수도 있습니다.

페이지의 데이터를 항상 유지해야한다고 결정 했습니까? 페이지 저장 공간을 임의로 늘리면 커다란 덩어리를 추가/제거하는 것보다 약간 신경질을 느낄 수 있습니다.