许多复选框元素“减慢”了 Safari

Question

我在 Safari 中遇到问题。当我在页面上有许多 type="checkbox" 元素时，与文本输入交互变得非常缓慢和滞后。

这在 Safari 中似乎比 Chrome/Firefox（在 Mac 上）严重得多。

我在对包含复选框的海量列表进行一些过滤时注意到了性能问题，但注意到即使我删除了我的过滤代码，性能仍然很差。

片段 #1

1600 type="checkbox" 元素。尝试与 Safari 上的文本输入交互 - Fiddle Here

function make() {
	var num = 1600;
  for( var i = 0; i < num; i++) {
  	var p = document.createElement("div");
    var input = document.createElement("input");
    input.type = "checkbox";
    p.appendChild(input);
    document.getElementById("container").appendChild(p);
  }
}

make();

<input type="text">
<div id="container">
</div>

片段 #2

1600 span 元素；在 Safari 中与文本输入的交互与往常一样流畅 - Fiddle Here

function make() {
	var num = 1600;
  for( var i = 0; i < num; i++) {
  	var p = document.createElement("div");
    var input = document.createElement("input");
    input.type = "checkbox";
    p.appendChild(input);
    document.getElementById("container").appendChild(p);
  }
}

function make2() {
	var num = 1600;
  for( var i = 0; i < num; i++) {
  	var p = document.createElement("div");
    var sp = document.createElement("span");
    sp.innerHTML = Math.floor(Math.random() * 1600);
    p.appendChild(sp);
    document.getElementById("container").appendChild(p);
  }
}

make2();

<input type="text">
<div id="container">
</div>

---

我是否可以在 Safari 中解决这个问题，并让性能更接近 Firefox 和 Chrome 的处理方式？

Answer 1

总结：
根据我对您的问题的理解，当您跨跨度使用复选框时，您说明网页性能会丢失，并且想知道为什么会这样

回答
您的表单复选框数量异常多，虽然浏览器可以很容易地处理更多表单元素，但这最终取决于您在该终端上安装了多少可用 RAM。

官方对网站上可以拥有的 DOM 元素的数量没有限制，我唯一可以建议的是使用 AJAX 和分页来分解你在任何给定时间在 1 页上拥有的复选框数量或升级您的计算机。

我已经查看了您在 JSFiddle 中配置的链接，并且我自己在文本框中输入延迟没有任何问题。

我觉得这不是 HTML 问题，而是内存/性能问题 检查您有多少内存，有多少可用内存，以及您的浏览器版本是否存在可能导致内存延迟的问题。例如，众所周知，Firefox 在运行一段时间后会导致内存问题。

Answer 2

问题似乎在于显示 Safari 复选框。如果复选框在 dom 中存在但被隐藏，通过使用display: none，性能下降就消失了。

虽然我不明白为什么会发生这种情况，但我基本上可以通过使用自定义复选框元素并在原件上应用 display: none 属性来解决此问题。

片段 - Fiddle Here

function make() {
	var num = 1600;
  for( var i = 0; i < num; i++) {
  	var p = document.createElement("div");
    var input = document.createElement("input");
    var l = document.createElement("label");
    var c = "c-" + Math.floor(Math.random() * 1600);
    input.type = "checkbox";
    l.htmlFor = c;
    input.id = c;
    p.appendChild(input);
    p.appendChild(l);
    document.getElementById("container").appendChild(p);
  }
}

function make2() {
	var num = 1600;
  for( var i = 0; i < num; i++) {
  	var p = document.createElement("div");
    var sp = document.createElement("span");
    sp.innerHTML = Math.floor(Math.random() * 1600);
    p.appendChild(sp);
    document.getElementById("container").appendChild(p);
  }
}

make();

input[type=checkbox] {
  display: none;
}

label {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: block;
  height: 12px;
  width: 12px;
  margin-bottom: 4px;
  position: relative;
}

label:after {
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  top: 2px;
  left: 2px;
  display: none;
}

input[type=checkbox]:checked + label {
  border-color: red;
}

input[type=checkbox]:checked + label:after {
  display: block;
}

<input type="text">
<div id="container">

</div>