Проблема со скоростью загрузки Javascript при увеличении переменной

У меня проблема со временем загрузки страницы. В настоящее время я запускаю UBUNTU в Oracle Vm Virtual Box. Я использую mozilla firefox в качестве браузера и работаю над проектом etchasketch из проекта odin.

Моя проблема - время загрузки страницы. Код принимает подсказку в начале и создает сетку для травления эскиза на основе этой подсказки. Я не дал ему минимальное и максимальное значения (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 function performance slowdown page-load-time
person Jake Ruiz    schedule 02.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашей проблеме есть две составляющие. Во-первых, вы многократно изменяете 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";
    } );
}
person Paul    schedule 02.08.2018
comment
Большое спасибо, Пол. Работал как шарм! если бы у меня было больше очков репутации, я бы проголосовал за тебя, ха-ха! - person Jake Ruiz; 03.08.2018