createElement('table') и тормоза
создаю таблицу, в принципе, стандартным методом:
var table = document.createElement('table');
table.style.borderCollapse = 'collapse'
table.style.position = "absolute"
table.style.width = xlen*cellwd+'px'
table.style.height = ylen*cellhg+'px'
table.style.borderWidth = '0px'
table.style.borderStyle = 'solid'
table.id=tid
for (var k = 0; k < 50; k++) {
var row = table.insertRow(-1);
for (var j = 0; j < 50; j++) {
var cell = row.insertCell(-1);
cell.style.width = cellwd+'px'
cell.style.height = cellhg+'px'
cell.style.borderWidth = '1px'
cell.style.borderStyle = 'solid'
cell.style.borderColor = '#cccccc'
cell.innerHTML = " ";
}
}
однако, после выполнения кода браузер начинает дико нагружать процессор и вся страница беспомощно тормозит. С чем это может быть связано? firefox 3.5.1 |
Нельзя клонировать темы:nono:
|
прошу прощения, если я сделал гадость. но все-таки прошу помощи по-теме
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
спасибо за помощь. сразу следующий вопрос.
stage.timeline = function (source, routx, routy){
for(var i=0; i<ttimeline.length; i++){
var model = document.getElementById(ttimeline[i]);
model.left-=-model.routx
model.top-=-model.routy
model.style.left = model.left+'px'
model.style.top = model.top+'px'
if (model.what == 'player') {
model.src = eval(model.actor+"_"+model.pscen)[model.rmv]
if (model.rmv == eval(model.actor+"_"+model.pscen).length)
model.rmv = 0
model.rmv++
}
}
if(usetimer==1)setTimeout(stage.timeline,v_time)
}
var i=1;
stage.new_player_model = function (left, top){
var onew=document.createElement("img");
document.getElementById("oworld").appendChild(onew)
onew.src="sprites/full_plt/looking e0.gif"
onew.id='b'+i
onew.width=64
onew.what="player"
onew.left=left
onew.top=top
onew.actor='full_plt'
onew.pscen='running_e'
onew.animations = new Array("running_e")
onew.wvector='w'
onew.nvector='n'
onew.evector='e'
onew.svector='s'
onew.vector='e'
onew.routx='5'
onew.routy='0'
onew.rmv='0'
onew.style.width=onew.width+'px'
onew.style.position="absolute"
onew.style.left=onew.left+'px'
onew.style.top=onew.top+'px'
onew.timeturn=ttimeline.length
ttimeline.push(onew.id)
i++
}
stage.new_player_model добавляет новый объект на страницу и в массив ttimeline, stage.timeline перебирает элементы массива. каждый элемент по-сути - img, stage.timeline меняет src и через определенное время сдвигает элемент. вот только если элементов 5 и больше - начинаются тормоза. Я так понимаю, что мой код далеко не совершенство. помогите с оптимизацией, подскажите на что обратить внимание. |
При сложном рендеринге + таймауты, избежать тормозов практически невозможно. Вам нужно не код оптимизировать, а визуальную нагрузку на браузер. Иногда простое временное скрытие ненужных элементов может сильно облегчить жизнь браузера.
|
И ещё совет. Устанавливать свойства нужно ПЕРЕД его вставкой в DOM.
|
Цитата:
|
Цитата:
|
var i=1;
stage.new_player_model = function (left, top){
var onew=document.createElement("img");
onew.src="sprites/full_plt/looking e0.gif"
onew.id='b'+i
onew.width=64
onew.what="player"
onew.left=left
onew.top=top
onew.actor='full_plt'
onew.pscen='running_e'
onew.animations = new Array("running_e")
onew.wvector='w'
onew.nvector='n'
onew.evector='e'
onew.svector='s'
onew.vector='e'
onew.routx='5'
onew.routy='0'
onew.rmv='0'
onew.style.width=onew.width+'px'
onew.style.position="absolute"
onew.style.left=onew.left+'px'
onew.style.top=onew.top+'px'
onew.timeturn=ttimeline.length
ttimeline.push(onew.id)
i++
document.getElementById("oworld").appendChild(onew)
}
|
хм, вроде как помогло. не думал что так повлияет. спасибо за помощь
|
| Часовой пояс GMT +3, время: 13:26. |