jQuery :이 코드를 개선하려면 어떻게해야합니까?

PhoneGap으로 개발중인 iOS 앱에서이 탭 이벤트가 발생했습니다. 왼쪽 화살표를 클릭하면 원하는 내용을 찾아서 JSON 파일에서 검색합니다. 그런 다음 결과를 화면에 표시합니다.jQuery :이 코드를 개선하려면 어떻게해야합니까?

어떻게 향상시킬 수 있습니까? 약간의 지연이 있습니다 ... 지연의 일부는 300ms 지연 (fastclick.js 및 다른 라이브러리에서 해결할 수 있음)에 기인 한 것으로 알고 있지만이 코드를 재구성하고 좀 더 기민하게 만들려면 어떻게해야합니까? 빨리 대응해야합니다. 감사합니다.

// PREVIOUS DAYS 
    $('.left-arrow').on("tap", function() { 
     dateArrayIndex--; 
     todaysDate = morehShiur[dateArrayIndex]['date']; 
     todaysContent = morehShiur[dateArrayIndex]['description']; 
     $('.date').text(todaysDate); 
     var path = window.location.href.replace('index.html', ''); 
     $.getJSON(path + "data/heb-text/" + todaysContent, function(data) { 
      $('.title').empty(); 
      $('ol').empty(); 
      $('.title').append(data['title']); 
      for (var i = 0; i < data.content.length; ++i) { 
       $('ol').append('<li>' + data.content[i]['content'] + '</li>'); 
      } 
      $("html, body").animate({ scrollTop: 0 }, 0); 
     }); 
    });

출처

2014-12-10 shmuli

지연은 아마도 ajax 호출에 있습니다. 각 탭은 요청입니다. 당신이 할 수있는 일은 어떤 종류의 캐시/프리 페칭 데이터를 만드는 것입니다. –

이 코드가 작동하는 경우 http://codereview.stackexchange.com/ –

에서 더 많은 질문을 던집니다. jQuery가 더 필요합니다. –

지연에 대한 의견은 ajax 호출과 관련이 있습니다. 그러나 잠재적으로 사물을 향상시킬 수있는 몇 가지 방법이이 코드에 있습니다.

$('.date')과 같은 선택기를 범위 지정하거나 캐시 할 수 있습니다. DOM 조회는 비용이 많이 듭니다.
당신은 , 그래서 당신의 빈을하게 사용하여 여러 가지를 선택할 수 있습니다 $('.title, ol').empty()
당신은 메모리에 한 번 HTML을 구축 할 수 있으며, 다음 오히려 당신의 루프의 각 반복에 추가보다 DOM에 추가합니다. 마지막 점의 예로서

var $liArray = $('<div/>'); 
for (var i = 0; i < data.content.length; ++i) { 
    $liArray.append('<li>Hello</li>'); 
} 
$("ol").append($liArray);

출처

2014-12-10 20:55:26 Baer

나에게 제 3의 요점을 알려주시겠습니까? – shmuli

@shmuli - 더 이해가 되니? – Baer

콘텐츠가 메모리에있는 동안 콘텐츠를 작성한 다음 각 루프의 DOM을 앞뒤로 이동하는 대신 ** DOM **에 추가하는 것으로 추측합니까? – shmuli

당신은 반복 서버 호출을 방지하기 위해 클라이언트에서 서버 데이터를 캐시 할 수 있습니다. 또한 3 일간의 데이터 (현재 날짜, 이전 날짜 및 다음 날짜)를 미리 가져올 수 있습니다. 따라서 사용자는 현재 날짜에 대한 지연을 볼 수 없습니다. 그러나 배경에서는 다른 날의 데이터를 가져 오는 중입니다.

요청 캐싱을 위해 http://amplifyjs.com/과 같은 라이브러리를 사용해 볼 수 있습니다.

출처

2014-12-10 21:01:52 Ahuman

jQuery :이 코드를 개선하려면 어떻게해야합니까?

답변

관련 문제