Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / FireFox. Тормозит изменение стилей через getObj().style. / 3 сообщений из 3, страница 1 из 1
28.05.2007, 17:07
    #34555911
спакоен каку даф
спакоен каку даф
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FireFox. Тормозит изменение стилей через getObj().style.
Здравствуйте.

Строим график sin(x):

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
<html>

<head>
<style>
	#canvas {width:400px;height:300px;}
	.pix {width:1px;height:1px;background:black;float:left;font-size: 0 }
</style>

</head>

<body>

<script type="text/javascript" language="JavaScript">

function getObj(id) {
  if (document.all) 
    return document.all[id]; 
  else 
    return document.getElementById(id);
}


function sin_x(x) {
 return Math.sin(x* 3 . 14 / 180 );
}



function init()
{

  var pixStart="<div class=pix  id=pix"; 
  var pixEnd="></div>";

  var ff="";
  tmp=getObj("canvas").innerHTML;
  for(var i= 0 ;i< 400 ;i++)
    tmp+= pixStart+i+pixEnd;
  getObj("canvas").innerHTML = tmp;
}




function draw() {
  var k =  0 ;
  for(k= 0 ;k< 400 ;k=k+ 1 )
    getObj("pix"+k).style.marginTop=sin_x(k)* 100 + 100 ;
}

</script>


<div id="canvas"></div>

<script>

init();
draw();

</script>

</body>
</html>



В иксплорере - пулей.
В мозиле - висит секунд 10-20.
Выясниле, что тормоза происходят при обновлении стилей (ф-ция Draw); есть мысль что ФайрФокс обновляет документ при изменении стиля КАЖДОГО объекта - посему и таг медленно.

Кто-нить сталкивалсо с подобной проблемой?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2007, 17:21
    #34555956
1024
1024
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FireFox. Тормозит изменение стилей через getObj().style.
не мучайся

http://www.walterzorn.com/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2007, 17:29
    #34555969
vasa_c
vasa_c
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FireFox. Тормозит изменение стилей через getObj().style.
Конечно, жабаскрипт не для этих вещей. Можно, конечно и в FF добиться приемлимой скорости:
.pix {width:1px;height:1px;background:black;float:left;font-size:0; position:relative; }

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
var PX = [];

function init()
{
  var can = getObj("canvas");
  for(var i= 0 ;i< 400 ;i++) {
      var px = document.createElement("div");
      px.className = "pix";
      can.appendChild(px);
      PX[i] = px;
  }
}

function draw() {
  var k =  0 ;
  for(k= 0 ;k< 400 ;k++)
    PX[k].style.top = sin_x(k)* 100 + 100 ;
}

Однако, в FF для рисования есть поддержка Canvas, так что его лучше и использовать.

Кстати, все актуальные версии IE, давно знакомы с getElementById. А FF с document.all.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / FireFox. Тормозит изменение стилей через getObj().style. / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 507ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1458193]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 161ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 49ms
get tp. blocked users:
 2ms
others: 253ms
total:  507ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]