Question

我在网页上附加了2000个元素的路标，因为我想为每个元素触发一个不同的事件。我已经尝试了noframework方式以及使用jquery，每个加载我的页面大约需要20秒。是否有一种技术可以用来将路径附加到很多元素而不会减慢我的页面负载？感谢。

Jquery版本（调用一次）：

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

没有框架版本（为每个2000个元素调用一次）：

    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>

如何加快创建Waypoint？

1 个答案: