Waypoint를 빠르게 만드는 방법은 무엇입니까?

Question

페이지마다 2000 개의 요소에 웨이 포인트를 붙이고 있습니다. 각 요소마다 다른 이벤트를 트리거하고 싶기 때문입니다. jquery를 사용하는 것뿐만 아니라 noframework 방법을 시도했으며 각 페이지가 내 페이지를로드하는 데 약 20 초를 추가합니다. 웨이 포인트를 페이지로드를 늦추지 않고도 많은 요소에 부착 할 수있는 기술이 있습니까? 감사.

의 jQuery 버전 (한 번 전화) : (2000 년의 각 요소에 대해 한 번씩 호출)

var waypoints = $('[data-waypointidentifier="iswaypoint"]').waypoint({ 
      handler: function (direction) { 
       waypointHandler(direction, this); 
      } 
     }); 

없음 프레임 워크 버전 :

var waypoint = new Waypoint({ 
      document.getElementById('element-waypoint1'), 
      handler: function (direction) { 
       waypointHandler(direction, this); 
      } 
     }); 

Answer 1

이건 정말 답하지 않고 않습니다 가장 가까운 형태로 문제를 시연하십시오.

편집 : 이제 약간의 해킹 해킹이 될 수 있습니다. 단순히 청크로 붙이도록 수정되었습니다.

참고 : 2000 년에 마지막 청크 광을 수정해야합니다. 그룹에서 "청크"를 한 다음 끈으로 묶은 시간 제한을 설정합니다. 그것은 여전히 ​​오래 걸리지 만 모든 상황이 첨부 될 때까지 상황을 약간 눈에 띄지 않게합니다.

// approx times to attach (not definitive) 
 
// - note each increment nearly doubles times, not linear 
 
// super simple test, chrome, prob more on most computers 
 
// var punchCount = 250; // 150ms 
 
// var punchCount = 500; // 500ms 
 
// var punchCount = 1000; // 2350ms 
 
// var punchCount = 1500; // 4700ms 
 
var punchCount = 2000; // 8750ms 
 

 
function initme() { 
 
    var addme = $('<div class="facepunch" data-iam="-1">hi</div>'); 
 
    var addgroup = $('<div>start</div>'); 
 
    for (var i = punchCount; i > 0; i--) { 
 
    addme = $('<div class="facepunch">hi</div>').data('iam', i); 
 
    addme.appendTo(addgroup); 
 
    } 
 
    $('#punchme').append(addgroup); 
 
} 
 
var t0 = performance.now(); 
 

 
console.log('init 1'); 
 
initme(); 
 

 
var t1 = performance.now(); 
 
console.log("Call to initme took " + (t1 - t0) + " milliseconds."); 
 

 
console.log('before 1'); 
 

 
function waypointHandler(direction, me) { 
 
    // NOOO... this will kill your perf console.log(direction, me); 
 
    var newt = "howdy " + $(me.element).data('iam'); 
 
    $(me.element).text(newt + " " + direction); 
 
} 
 
t0 = performance.now(); 
 
console.log('before 2'); 
 
var waypoints = {}; 
 

 
function createWaysChunk(begin, end) { 
 
    console.log(begin, end, $('.facepunch').slice(begin, end).length); 
 

 
    $('.facepunch').slice(begin, end).waypoint({ 
 
    // enabled: false,//no perf benefit 
 
    handler: function(direction) { 
 
     waypointHandler(direction, this); // "this.element" is the element 
 
    } 
 
    }); 
 
} 
 

 
function createWays() { 
 
    t0 = performance.now(); 
 
    var chunksize = 40; 
 
    var y = punchCount/chunksize; // 250 
 
    var x = 0; 
 
    for (var i = 0; i < chunksize; ++i) { 
 
    begin = x; 
 
    end = y * i; 
 
    setTimeout(createWaysChunk.bind(null, begin, end), 100); 
 
    x = end; 
 
    } 
 
    t1 = performance.now(); 
 
    console.log("Call to createways = took " + (t1 - t0) + " milliseconds."); 
 
} 
 
// time out just moves the "freeze" to after the page loads 
 
//var timeoutID0 = window.setTimeout(createWays, 2000); 
 
window.onload = createWays; 
 
// createWays(); 
 
t1 = performance.now(); 
 
console.log("Call to waypoints = took " + (t1 - t0) + " milliseconds."); 
 

 
// Test with .enableAll 
 
//t0 = performance.now(); 
 
//console.log('after 1'); 
 
// time out just moves the "freeze" to after the page loads 
 
//var timeoutID = window.setTimeout(Waypoint.enableAll, 2000); 
 
//initial enabled = false then enable is way slow, slower than true overall by 15000+ ms 
 
//Waypoint.enableAll(); 
 
//console.log('after 2'); 
 
//t1 = performance.now(); 
 
//console.log("Call to enableAll took " + (t1 - t0) + " milliseconds.");

.facepunch { 
 
    height: 3em; 
 
    border: solid 1px lime; 
 
    margin: 0.25em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE=" crossorigin="anonymous"></script> 
 
<div id="punchme"></div>

당신이 시도 것을