Что делать с сообщениями в чате, которых уже не видно?

Question

[Айнур Ярулин]

Вообщем я сделал чат в котором нельзя скролить. Но вот сообщения, которых уже не видно еще остаются
в структуре HTML. Мне кажется, если лишние сообщения не удалять, то это повлияет на на производительность.

Как нужно удалять самые старые сообщения?

Comments

[Денис Юрьев]

https://developer.mozilla.org/ru/docs/Web/API/Chil...

Answer 1

[Tim]

Answer 2

[8XL]

Здравствуйте.
Самый простой способ реализации сообщений - через массив. Если ваш подход именно таков, то вы можете просто ограничить длинную массива, например при получении нового сообщения приложением, оно проверяет длину истории сообщений и удаляет лишние, в зависимости от метода добавления(array.splice()).

Если же реализация выглядит иначе, то приложите код для ознакомления.

Comments

[Айнур Ярулин]

У меня просто добавляются новые сообщения внутрь блока.

const chatContent = document.getElementById('chat-content')
chatContent.insertAdjacentHTML('beforeend', 'тут вставляю сообщение')

[8XL]

В вашем случае можно попробовать ограничить количество символов в блоке chat-content, если сообщение просто текстом(метод substring в помощь) / добавлять hidden в первые элементы, если количество элементов в блоке chat-content превышает 10(например). Получить количество поможет метод childElementCount или .children().length, а дальше уже разберетесь(а то как-то неверно для обучения сразу все решение выдавать))

Метод, честно признаюсь, несколько деревянный. Например, если понадобится подключить функционал удаления сообщений, то будет сложнее в реализации. Проще было бы пушить сообщения в массив, а оттуда через цикл или перебор отрисовывать их в блоке отдельным элементом. В таком случае вы заметите, сколь сильно расширяться возможности как в моменте, так и на перспективу.

[Айнур Ярулин]

8XL, Да, нужно попробовать тему с массивом.

Answer 3

[xmoonlight]

На производительность не повлияет, если отображение фиксированного кол-ва строк будет из массива идти.
Что не отображаем - хранится в памяти.

PS: без скролла - как-то, криво...

Comments

[Айнур Ярулин]

xmoonlight, я тоже так думаю кстати

[xmoonlight]

squadbrodyaga, конечно, это лучший вариант...

[Айнур Ярулин]

xmoonlight, Для JavaScript'a это массив?

<div class="главный_блок">
  <div>сообщение</div>
  <div>сообщение</div>
  <div>сообщение</div>
  <div>сообщение</div>
  <div>сообщение</div>
</div>

[xmoonlight]

squadbrodyaga, нет! Это теги.
let msg=[];это массив.

[Айнур Ярулин]

xmoonlight, ну я имею ввиду, если сделать так:

const главныйБлок = document.querySelector('.главный_блок')

То как ограничить в нём количество элементов, ведь это не массив, да?

[xmoonlight]

squadbrodyaga, все сообщения изначально пишем в массив, а уже после - делаем рендер из него в нужный div-блок.

[Айнур Ярулин]

xmoonlight, хорошо, попробую