Оптимизация тестирования удаленных элементов DOM (Chrome)

Ответ 1

Интересно, что pointer-events: none имеет никакого эффекта. Но если вы подумаете об этом, это имеет смысл, так как элементы с этим флагом все еще затушевывают события указателей других элементов, поэтому hittest должен иметь место в любом случае.

Что вы можете сделать, это наложить на критический контент и ответить на события мыши на этом оверлее, пусть ваш код решит, что с ним делать.

Это работает, потому что, как только алгоритм hittest нашел хит, и я предполагаю, что он делает это вниз, z-index, он останавливается.

С наложением

// ================================================
// Increase or decrease this value for testing:
var NUMBER_OF_OBJECTS = 40000;
// Wether to use the overlay or the container directly
var USE_OVERLAY = true;
// ================================================

var overlay = document.getElementById("overlay");
var container = document.getElementById("container");
var contents = document.getElementById("contents");

for (var i = 0; i < NUMBER_OF_OBJECTS; i++) {
    var node = document.createElement("div");
    node.innerHtml = i;
    node.className = "node";
    node.style.top = Math.abs(Math.random() * 2000) + "px";
    node.style.left = Math.abs(Math.random() * 2000) + "px";
    contents.appendChild(node);
}

var posX = 100;
var posY = 100;
var previousX = null;
var previousY = null;

var mousedownHandler = function (e) {
    window.onmousemove = globalMousemoveHandler;
    window.onmouseup = globalMouseupHandler;
    previousX = e.clientX;
    previousY = e.clientY;
}

var globalMousemoveHandler = function (e) {
    posX += e.clientX - previousX;
    posY += e.clientY - previousY;
    previousX = e.clientX;
    previousY = e.clientY;
    contents.style.transform = "translate3d(" + posX + "px, " + posY + "px, 0)";
}

var globalMouseupHandler = function (e) {
    window.onmousemove = null;
    window.onmouseup = null;
    previousX = null;
    previousY = null;
}

if(USE_OVERLAY){
	overlay.onmousedown = mousedownHandler;
}else{
	overlay.style.display = 'none';
	container.onmousedown = mousedownHandler;
}


contents.style.transform = "translate3d(" + posX + "px, " + posY + "px, 0)";

#overlay{
  position: absolute;
  top: 0;
  left: 0;
  height: 400px;
  width: 800px;
  opacity: 0;
  z-index: 100;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#container {
  height: 400px;
  width: 800px;
  background-color: #ccc;
  overflow: hidden;
}

#container:active {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.node {
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 10px;
  pointer-events: none;
}

<div id="overlay"></div>
<div id="container">
    <div id="contents"></div>
</div>

Ответ 2

Одна из проблем заключается в том, что вы перемещаете КАЖДЫЙ один элемент внутри вашего контейнера, неважно, есть ли у вас ускорение GPU или нет, шея бутылки пересчитывает новую позицию, то есть поле процессора.

Мое предложение состоит в том, чтобы сегментировать контейнеры, поэтому вы можете перемещать различные панели индивидуально, уменьшая нагрузку, это называется широкомасштабным вычислением, то есть только перемещать то, что нужно переместить. Если у вас что-то появилось на экране, зачем вам его перемещать?

Начните с создания вместо одного, 16 контейнеров, вам нужно будет сделать некоторую математику здесь, чтобы узнать, какая из этих панелей отображается. Затем, когда происходит событие мыши, переместите только те панели и оставьте те, которые не показаны, где они находятся. Это должно значительно сократить время, затрачиваемое на их перемещение.

+------+------+------+------+
|    SS|SS    |      |      |
|    SS|SS    |      |      |
+------+------+------+------+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+

В этом примере у нас есть 16 панелей, из которых 2 показаны (отмечены S для экрана). Когда пользователь поворачивается, проверьте ограничительную рамку "экрана", узнайте, какие панели относятся к "экрану", перемещайте только те панели. Это теоретически бесконечно масштабируемо.

К сожалению, мне не хватает времени, чтобы написать код, демонстрирующий эту мысль, но я надеюсь, что это поможет вам.

Ура!