页面加载时间有问题。目前，我正在Oracle Vm Virtual Box中运行UBUNTU。我正在使用mozilla firefox作为我的浏览器，我正在处理"The odin项目"中的etchasketch项目。
我的问题是页面加载时间。代码在开始时得到一个提示，并根据该提示为蚀刻草图生成网格。我没有分别给它最小值和最大值(16和64(，但是，当一开始提示超过35的任何数字都不会加载或需要很长时间才能加载。
如何加快处理时间？/为什么它移动得这么慢？/我该如何避免这种情况？/有没有一个我一直在寻找的解决方案可以让这项工作更快？/请随意回答所有这些问题！
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8"/>
<title>
</title>
</head>
<body>
<div class="etchhead">
<p> Choose your grid size </p>
<input type = "text"></input>
<button id="startOver"> Clear Grid </button>
<p> Change color </p>
</div>
<div id="grid">
</div>
<script src="eas.js"></script>
</body>
</html>
这是我的CSS代码：
p {
color: blue;
display: inline;
}
#grid {
display: grid;
width: 800px;
max-width: 800px;
height: 800px;
max-height: 800px;
line-height: 0;
}
.gridBox {
border: 1px solid black;
background-color: lightgrey
}
这是我的JAVASCRIPT代码：
gridStart();
function gridStart(){
var boxes = 0
var selectBody = document.querySelector("#grid");
var addBox = document.createElement("div");
var boxCountStart = prompt("enter a number between 16 and 64");
var boxDimensions = (boxCountStart * boxCountStart);
function rowsAndColumns() {
var selectBody = document.querySelector("#grid");
var gridTemplateColumns = 'repeat('+boxCountStart+', 1fr)';
selectBody.style.gridTemplateColumns= gridTemplateColumns;
selectBody.style.gridTemplateRows= gridTemplateColumns;
};
function hoverColor(){
var divSelector = selectBody.querySelectorAll("div");
divSelector.forEach((div) => {
div.addEventListener("mouseover", (event) => {
event.target.style.backgroundColor = "grey";
});
});
};
rowsAndColumns();
for (boxes = 0; boxes < boxDimensions ; boxes++) {
var selectBody = document.querySelector("#grid");
var addBox = document.createElement("div");
addBox.classList.add("gridBox");
addBox.textContent = (" ");
selectBody.appendChild(addBox);
hoverColor();
};
};
您的问题有两个组成部分。一种是在循环中重复修改DOM。您可以通过将所有框附加到DocumentFragment，然后在循环结束后将其添加到DOM来修复它。您还在循环中调用hoverColor();，这将导致添加大量的事件侦听器，这些侦听器都做相同的事情(因为在hoverColor中，您将向每个div添加一个侦听器(。你可以像这样解决这两个问题：
var fragment = document.createDocumentFragment( );
for (var i = 0; i < boxDimensions ; i++) {
var addBox = document.createElement("div");
addBox.classList.add("gridBox");
addBox.textContent = (" ");
fragment.appendChild(addBox);
}
document.querySelector("#grid").appendChild( fragment );
hoverColor();
这是一个带有原始代码的JSFiddle，这里是一个经过修改的代码。
您还可以从总共只有一个事件侦听器中获益。您不需要循环并向每个div添加一个事件侦听器。只需向#grid添加一个并使用event.target(就像您已经做的那样，查找事件源自的div(。类似这样的东西：
function hoverColor(){
document.querySelector("#grid").addEventListener( 'mouseover', function ( event ) {
event.target.style.backgroundColor = "grey";
} );
}