Question

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

这在Safari中比Chrome / Firefox（在Mac上）更严重。

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

Snippet＃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>

Snippet＃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在运行一段时间后会导致内存问题。

许多复选框元素会“减慢”Safari的速度

1 个答案: