Ускорение onmousemove и редеринга
 

Делаю веб-редактор изображений
http://graphing.ru/d.php?i=none.jpg

Вот если бы кисть оставляла за собой не зернистый след, если быстро вести мышкой - цены бы ему не было. Особенно зернистость проявляется в FF.

Там суть очень простая - на страницу вешается onmousemove с функцией, которая рисует див с абсолютной позицией.

var child = document.createElement('div');
child.style.position = 'absolute';
child.style.left = x+'px';
child.style.top = y+'px';
document.getElementById('content').appendChild(child);
//и т.д.

Без особой надежды на ответ, но все же спрошу. Можно ли что-то придумать, чтобы облегчить браузеру процесс редеринга точек? Пробовал методом тыка, ожидая "а вдруг": заменить див на span, p и другие теги, создавать новый див посредством innerHTML (в последнем случае все только усугубилось).

Эмм… почитайте про html 5 canvas.

Вектором точечные рисунки?

Канвас не вектор.

Я думал, для векторной графики. Тоесть закрашенные области он будет вставлять быстрее, чем браузер добавляет dom элемент?

Не знаю, не тестил. А как это связано?

Связано с чем?

Ilyan,
в десятки раз быстрее. Ну, и, плюс, субпиксельный рендер.

Спасибо, буду эксперементировать.

Проверил, увы, еще медленнее отрисовывает точки по onmousemove. Использвал http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

а не в нем проблема-то.
выведите в консоль фаербага координаты мыши по onmousemove, не трогая DOM и будете неприятно удивлены, при быстром движении мышью.
так что единственный способ убрать зернистость-интерполировать движение мыши.
самым простым вариантом будет линейная интерполяция между двумя последними точками.
когда вам надо будет рисовать плавные линии, то тут уже что-то посложнее придется использовать, например кубические сплайны

Понял, спасибо.

Странно. На канвасе даже псевдо-трехмерные игры делают с приличним fps. Сотню точек в секунду на середнячковой машине он точно выдерживает. Проверьте, не тормозит ли обвертка для всего этого.

Это вроде не canvas.

cloneNode работает быстрее чем createElement

Всем спасибо за ответы, сделал по совету Gvozd, соединением линиями. Зернистость пропала. http://graphing.ru/d.php?i=none.jpg

Осталось только с ие подружить.