随着变量的增加，Javascript 加载速度问题答案

【问题标题】：Javascript loading speed issue as variable increases随着变量的增加，Javascript 加载速度问题
【发布时间】：2018-08-02 17:43:17
【问题描述】：

我遇到了页面加载时间问题。目前我正在 Oracle Vm Virtual Box 中运行 UBUNTU。我正在使用 mozilla firefox 作为我的浏览器，并且我正在处理“The odin project”中的一个 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();
    };
  };

【问题讨论】：

标签： javascript performance function page-load-time slowdown

【解决方案1】：

您的问题有两个组成部分。一种是您在循环中反复修改 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();

Here is a JSFiddle 是您的原始代码，here is one 是修改后的代码。

您也可以从总共只有一个事件侦听器中受益。您不需要循环并向每个 div 添加事件侦听器。只需将一个添加到#grid 并使用event.target（就像您已经做的那样，找到事件起源的 div）。像这样的：

function hoverColor(){
    document.querySelector("#grid").addEventListener( 'mouseover', function ( event ) {
        event.target.style.backgroundColor = "grey";
    } );
}

【讨论】：

非常感谢保罗。像魅力一样工作！如果我有更多的声望点，我会支持你哈哈！