Задать вопрос
@Speakermen
javascript

Почему браузер так долго рендерит script?

Мне нужна была 8pt grid system как в figma. Но вложенные циклы на 400 итераций вешают браузер.
Нужно canvas знать?
63285ad2ac9c0363062803.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .absolute {
            position: absolute;
            max-width: 960px;
            margin: 0 auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body id="root">
    <div class="absolute">
        <h1>sdsd</h1>
    </div>
    <!--<div id="grid"></div>-->
    <script src="script.js"></script>
    <script>
        // direction row | column
        /*grid({
            columns: 12,
            width: '960px',
            height: '100%',
            direction: 'row',
            bg: 'rgba(255, 0, 0, 0.1)',
            gutter: '24px',
        });*/
    </script>
</body>

</html>

Код
function getGrid({ columns, width, widthCol, height, direction, bg, gutter }) {
  const root = document.getElementById('root');
  const wrapper = document.createElement('div');
  wrapper.style.width = width + 'px';
  wrapper.style.margin = '0 auto';
  wrapper.style.display = 'flex';
  wrapper.style.flexDirection = direction;
  wrapper.style.columnGap = gutter + 'px';
  wrapper.style.position = 'absolute';
  wrapper.style.top = '0';
  wrapper.style.right = '0';
  wrapper.style.bottom = '0';
  wrapper.style.left = '0';
  wrapper.style.zIndex = 5;
  let countW = parseInt(width / gutter);

  if (columns === 'auto') {
    for (i = 0; i <= countW; i++) {
      const colOne = document.createElement('div');
      colOne.style.width = widthCol;
      colOne.style.height = height;
      colOne.style.backgroundColor = bg;

      wrapper.appendChild(colOne);
    }
  }

  for (i = 0; i <= columns; i++) {
    const colOne = document.createElement('div');
    colOne.style.width = widthCol;
    colOne.style.height = height;
    colOne.style.backgroundColor = bg;

    wrapper.appendChild(colOne);
  }

  root.appendChild(wrapper);
}

function getRows({ columns, width, height, direction, bg, gutter }) {
  const root = document.getElementById('root');
  const wrapper = document.createElement('div');
  wrapper.style.display = 'flex';
  wrapper.style.flexDirection = direction;
  //wrapper.style.rowGap = gutter + 'px';
  const countH = parseInt(window.innerHeight / gutter);
  wrapper.style.position = 'relative';
  wrapper.style.top = '0';
  wrapper.style.right = '0';
  wrapper.style.bottom = '0';
  wrapper.style.left = '0';
  wrapper.style.zIndex = 4;

  if (columns === 'auto') {
    for (i = 0; i <= 400; i++) {
      const rowOne = document.createElement('div');
      //rowOne.style.height = '8px';
      rowOne.style.boxSizing = 'border-box';
      rowOne.style.display = 'flex';

      for (j = 0; j <= 400; j++) {
        const colOne = document.createElement('div');
        colOne.style.height = '8px';
        colOne.style.width = '4px';
        colOne.style.borderBottom = '0.1px solid rgba(255, 0, 0, 0.1)';
        colOne.style.borderRight = '0.1px solid rgba(255, 0, 0, 0.1)';
        colOne.style.boxSizing = 'border-box';
        //colOne.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
        rowOne.appendChild(colOne);
      }

      wrapper.appendChild(rowOne);
    }
  }

  root.appendChild(wrapper);
}

getGrid({
  columns: 12,
  width: 960, //960px | 100%
  widthCol: '8.333333%',
  height: '100vh', //100vh| 0.1px
  direction: 'row',
  bg: 'rgba(255, 0, 0, 0.1)',
  gutter: 8, //24px | 8px | 4px
});

getRows({
  columns: 'auto', //12 | auto
  width: '100%', //960px | 100%
  height: '0.1px', // 0.1 | 8.333333%
  direction: 'column', //row | column
  bg: 'rgba(255, 0, 0, 0.1)',
  gutter: 8, //24 | 8 | 4px
});
  • Вопрос задан
  • 68 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
400х400=160000 видимых элементов в документе - это прям много. Проще сгенерить картинку однократно, и ее положить. Можно вообще на фон с background-repeat.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать парсер мегамаркет
18 апр. 2024, в 19:21
18000 руб./за проект
Доработка тикет сейл системы на laravel/attendize
18 апр. 2024, в 19:14
25000 руб./за проект
Надо написать парсер который проверил бы слова есть ли он в википедии
18 апр. 2024, в 19:11
1000 руб./за проект
Ещё заказы