Насколько сильная идет нагрузка при большом количестве элементов, с какой либо js фунцкией на каждом?

Question

[Август Милович]

Привет! Вобщем, делаю игру жизнь на js, и в итоге буду делать много элементов div, и укладывать их в сетку, штук 5000-15000 думаю, ибо canvas не подходит тут. Будет ли это большой нагрузкой на браузер, или сильно повлияет на скорость загрузки страницы, если я к каждому div подключу ещё много функций? Заранее спасибо

Comments

[Алексей Ярков]

ибо canvas не подходит тут

Точно? Ибо рендерить поле из 5000-15000 DOM элементов ИМХО будет здорово лагать.
Хотя я не настоящий сварщик ))

[Август Милович]

Алексей Ярков, как то не получается сделать четкие неразмазанные линии, даже если использовать координаты по типу ctx.stroke(0, 0, 100.5, 100,5), что вроде должно помочь, но не очень то и помогает

[Robur]

Август Милович, возможно стоит разобраться почему не получается. Поверьте мне, рисовать в канвасе четкие линии возможно, иначе бы им никто не пользовался.

[Август Милович]

Robur, Я уже знаю почему, если вкратце, ширина у меня непостоянная, количество клеток одинаковое, т.е. я делю ширину на количество клеток, и там линии то в один пиксель шириной то в 2 (сетка нужна). Поэтому и спросил вот

[Robur]

Август Милович, Округлите ширину так чтобы она делилась на количество клеток без остатка, чтобы сетка попадала ровно на пикселы и будет вам счастье.
браузер при использовании div рисует четкие линии не потому что он "может" а потому что просто забивает на размеры которые вы от него хотите и рисует так как ему больше нравится, добавляя/убавляя пикселы. Клетки сетки на дивах у вас будут не одинаковые по размеру и за счет этого граница всегда в 1 пиксел.

[Август Милович]

Robur, Сетка не ровная теперь, но я уже намного ближе к решению, сейчас ещё посижу, спасибо)

Answer 1

[Андрей]

Зависит от железа. На хорошем железе лагать не будет (но всё зависит от числа функций).
Но, с другой стороны, зачем вам функции для каждого объекта?
Жизнь это массив, и вам нужно хранить массив объектов. На каждом шаге изменяете массив и перерисовываете сетку дивов.
Если нужно добавить действия пользователя - вешаете одно событие на всю сетку, и каждому элементу с помощью html-атрибутов добавляете, например, координаты. И потом внутри события получаете координаты объекта.