Полезная информация
Страницы: 1
- Форумы
- » Разработка
- » Javascript анимация - Медленная перерисовка страницы
№108-12-2010 10:43:00
Javascript анимация - Медленная перерисовка страницы
Есть скрипт бегущей строки (ну нужен) в которой "бегут" html теги со стилями.
Это все работает. Но если в Опере, Хроме, IE6(!) и IE7 это работает с нормальной (удовлетворительной) скоростью, то в Firefox 3.6 и IE8 скрипт выдает не FPS, а SPF, т.е. дико торомзит.
Я заоптимиризовал всё что можно, хотя это мало (никак не) сказалось на скорости работы.
Может есть какое-то интересное решение для FF? Или он как-то особенно понимает некоторые команды JS?
Я понимаю, что проблема может быть решена в FF4, но ждать пока все с 3.6 перейдут на него не получается.
Собсвтенно скрипт:
var nar=[[],[],[]];
var tmp='';
var el=document.getElementById('anicc'); /* Контейнер, в который мы записываем содержимое после загрузки страницы. В т.ч. и перемещающийся блок ani */
el.innerHTML='<div id="anic"><pre id="ani"></pre></div><img id="anifgl" src="/img/anifg_l.png" alt="" /><img id="anifgr" src="/img/anifg_r.png" alt="" />';
var el=el.firstChild.firstChild; /* переходим к элементу ani */
var w=-1; /* длина части в px, которая должна уйти влево для нового витка. Сразу после загрузки начинаем новый виток */
var nl=0;
function newschk (xmldoc) { /*функция для подтягивания новых новостей. Работает раз в 5мин, на скорость влиять не должна*/
var news = xmldoc.getElementsByTagName('item');
var id,p,fl;
var narid=[];
var s={'Jan':'янв','Feb':'фев','Mar':'мар','Apr':'апр','May':'май','Jun':'июн','Jul':'июл','Aug':'авг','Sep':'сен','Oct':'окт','Nov':'ноя','Dec':'дек'};
nl=news.length;
for (var i=0; i<nl; i++) {narid[i]=nar[0][i]}
var nartmp=nar;
var nltmp=nl;
for (var i=0; i<nl; i++) {
id=_xmlGetOneChildValue(news[i], 'link').match(/\?news=(\d+)$/)[1];
p=_xmlGetOneChildValue(news[i], 'pubDate').match(/\d+\s[a-zA-Z]{3}|\d+:\d+/g);
p[0]=p[0].replace(/.{3}$/,function(m){return s[m]});
fl=false;
for(var j=0;j<nl;j++) {if(narid[j]==id) fl=true}
nar[0][i]=id;
nar[1][i]='<b>'+p[0].split(' ')[0]+'<em>'+p[0].split(' ')[1]+'</em>| '+p[1]+' || </b>'+
'<a href="'+_xmlGetOneChildValue(news[i], 'link')+'">'+_xmlGetOneChildValue(news[i], 'title')+'</a>';
if (tmp!='' && fl==false) nar[2][i]=true;
else nar[2][i]=false;
}
processRSS();
}
callSrv('/rss/news.xml', null, newschk, '');
window.setInterval(function(){callSrv('/rss/news.xml', null, newschk, '')}, 300000); /* 15мин - 900000 мс */
function processRSS() { /* Функция занесения новостей в строку, вызывается также раз в 5 мин. Также не должна влиять на производительность */
el.innerHTML=tmp; tmp='';
for (var i=0; i<nl; i++) {
if (nar[2][i]) tmp+='<span class="new">'+nar[1][i]+'</span>'
else tmp+=nar[1][i];
if (i==nl-4) {
el.innerHTML+=tmp; tmp='';
w=-el.offsetWidth;
}
}
el.innerHTML+=tmp;
}
/* Начало "тяжелого профиля" */
var pp=0;
function OnTimer() {
var stmp;
if (--pp<w) pp=0;
pp=pp.toString();
stmp=pp;
stmp+='px';
el.style.left=stmp;
}
/* Был еще вариант:
function OnTimer() {
if (--pp<w) pp=0;
el.style.left=pp+'px';
}
Скорость от замены не выросла. */
if (el
&& !(navigator.userAgent.toLowerCase().indexOf("firefox") != -1) /* для теста это стОит убрать 
*/
&& !(navigator.userAgent.toLowerCase().indexOf("msie 8") != -1) /* и это тоже */
)
window.setInterval(OnTimer, 50);
}
Страница выглядит в итоге так:
<div id="anic">
<pre id="ani" style="left: -5283px">
<b>07<em>дек</em>| 14:54 || </b>
<a href="ссылка">Текст</a>
<b>...</b>
<a href="ссылка">Текст</a>
<b>...</b>
<a href="ссылка"></a>
<span class="new">...</span>
<b></b>
<a href="ссылка"></a>
<b></b>
<a href="ссылка"></a>
и т.д.
</pre>
</div>
<img id="anifgl" src="/img/anifg_l.png" alt="">
<img id="anifgr" src="/img/anifg_r.png" alt="">
</div>
Ф-и newschk и processRSS вызываются пренебрежимо редко. Остается только OnTimer.
Что же с ней сделать, чтобы подружить с Лисом? Спасибо.
да, похоже (в ходе экспериментов)) Firefox перерисовывает всю область экрана (в отличие от Хрома или Оперы), может ему можно как-то скриптом задать область прорисовки?
Отредактировано RedElf (13-12-2010 13:21:31)
Отсутствует
№308-12-2010 14:36:48
Re: Javascript анимация - Медленная перерисовка страницы
1) большинством браузеров поддерживается,какой смысл изгаляться?
2)я конечно не спец по жабоскрипту но даже мне видно что скрипт уж больно мудрёный и главное куча регекспов которые как известно тормозят, вобщем простой поиск выдал четвертой ссылкой
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
вполне работоспособный и не тормозящий скрипт,который можно подправить под свои нужды.
1) При чем здесь браузеры вообще?
2) И пост вы тоже видать не читали, потому что там очень четко и понятно написано, что повторяются (т.е. тормозят) только две строчки кода, в которых никаких регулярок нет (собственно их там всего две штуки).
Ну и простым поиском я вполне умею пользоваться, раз написал код в котором вы с ходу не смогли разобраться, хотя там 70 строк и комментарии на русском)
А на счет ЖКвари - я пробовал это решение - оно не тормозит пока находится в вакууме. Как только оно помещается в реальную страницу и туда загоняется реальный контент начинаются аналогичные тормоза.
Спасибо, попробую ваше вдруг тормозить не будет.
Отсутствует
№408-12-2010 15:11:24
Re: Javascript анимация - Медленная перерисовка страницы
Вообще тормозит скорее не скрипт а перерисовка.
Для начала можно увеличить интервал отрисовки с 50 до 150мс, например
Ну и, поскольку проблема похоже в вёрстке, лучше смотреть на полную страницу, а не на «скрипт в вакууме».
ссылка для чтения: http://chikuyonok.ru/2010/11/optimization-story/
Isn't it ironic... don't you think? — Alanis Morissette
Отсутствует
№508-12-2010 15:38:09
Re: Javascript анимация - Медленная перерисовка страницы
вполне работоспособный и не тормозящий скрипт,который можно подправить под свои нужды.
Угу, этот "не тормозящий" скрипт грузит мой проц на 100% (с учетом других задач - ~80). А странице он конечно же тормозит сильнее, что впрочем не удивительно - он работает точно также как и мой, только использует дополнительно ЖКвери, а значит работает медленнее.
Вообще тормозит скорее не скрипт а перерисовка.
Ага И тормозит она в частности из-за того, что ФФ перерисовывает всю область экрана, а не только изменившуюся.
Для начала можно увеличить интервал отрисовки с 50 до 150мс, например
Можно вообще строку убрать) Если бы меня устроили настолько дискретные перемещения, я бы не спрашивал.
ссылка для чтения: http://chikuyonok.ru/2010/11/optimization-story/
Спасибо, изучу.
Отредактировано RedElf (14-12-2010 11:25:17)
Отсутствует
№609-12-2010 17:39:19
Re: Javascript анимация - Медленная перерисовка страницы
Мда, прочитал. В качестве решения предлагается забить.
Попробовал ставить строку в iframe. Ага. Опера и Хром как обычно показывают, ФФ как обычно нет.
cont.innerHTML='';
var tmp=document.createElement('div');
tmp.innerHTML='<iframe id="anic" name="anic" scrolling="no"></iframe>';
cont.appendChild(tmp.firstChild);
cont=cont.firstChild.contentWindow.document /* (или contentDocument) */;
var el=cont.getElementsByTagName('head')[0];
tmp.innerHTML='<link rel="stylesheet" type="text/css" href="css/ani.css" />';
el.appendChild(tmp.firstChild);
el=cont.getElementsByTagName('body')[0];
tmp.innerHTML='<div id="ani">test</div>';
el.appendChild(tmp.firstChild);
el=el.firstChild; /* переходим к элементу ani */
var w=-1; /* длинна части в px, которая должна уйти влево для нового витка */
var nl=0;
Когда же в Гекко будут условные комментарии, как в IE?! Хотя здесь и они не помогут.
Отредактировано RedElf (09-12-2010 18:00:22)
Отсутствует
№713-12-2010 11:46:52
Re: Javascript анимация - Медленная перерисовка страницы
уфф. Остановился на комбинированном варианте: Opera, Chrome, IE6 и 7 грузят начальный вариант, а Firefox и IE8 - iframe (спасибо Lynn навел на мысль).
var cont=document.getElementById('anicc');
if (cont && !(navigator.userAgent.toLowerCase().indexOf("firefox") != -1)
&& !(navigator.userAgent.toLowerCase().indexOf("msie 8") != -1)) {
var nar=[[],[],[]]; /* id, новость, обновление */
var tmp='';
cont.innerHTML='<div id="anic"><pre id="ani"></pre></div><img id="anifgl" src="/img/anifg_l.png" alt="" /><img id="anifgr" src="/img/anifg_r.png" alt="" />';
var el=cont.firstChild.firstChild; /* переходим к элементу ani */
var w=-1; /* длина части в px, которая должна уйти влево для нового витка */
var nl=0;
function newschk (xmldoc) {
var news = xmldoc.getElementsByTagName('item'); /* получаем список новостей .documentElement */
var id,p,fl;
var narid=[];
var s={'Jan':'янв','Feb':'фев','Mar':'мар','Apr':'апр','May':'май','Jun':'июн','Jul':'июл','Aug':'авг','Sep':'сен','Oct':'окт','Nov':'ноя','Dec':'дек'};
nl=news.length;
for (var i=0; i<nl; i++) {narid[i]=nar[0][i]} /* заносим все айдишники во временный массив */
var nartmp=nar;
var nltmp=nl;
for (var i=0; i<nl; i++) {
id=_xmlGetOneChildValue(news[i], 'link').match(/\?news=(\d+)$/)[1];
p=_xmlGetOneChildValue(news[i], 'pubDate').match(/\d+\s[a-zA-Z]{3}|\d+:\d+/g);
p[0]=p[0].replace(/.{3}$/,function(m){return s[m]});
fl=false;
for(var j=0;j<nl;j++) {if(narid[j]==id) fl=true} /* просмотр новостей - если новсть уже есть - Ъ */
nar[0][i]=id;
nar[1][i]='<b>'+p[0].split(' ')[0]+'<em>'+p[0].split(' ')[1]+'</em>| '+p[1]+' || </b>'+
'<a href="'+_xmlGetOneChildValue(news[i], 'link')+'">'+_xmlGetOneChildValue(news[i], 'title')+'</a>';
if (tmp!='' && fl==false) nar[2][i]=true;
else nar[2][i]=false;
}
el.innerHTML=tmp; tmp=''; /* в начале идут последние 3 новсти предыдущей стоки */
for (var i=0; i<nl; i++) { /* потом новости новой строки */
if (nar[2][i]) tmp+='<span class="new">'+nar[1][i]+'</span>'
else tmp+=nar[1][i];
if (i==nl-4) { /* если текущая новость - 3-я с конца */
el.innerHTML+=tmp; tmp='';
w=-el.offsetWidth;
}
}
el.innerHTML+=tmp;
}
else {
cont.innerHTML='<iframe src="/js/ani.html" type="text/html" id="anic" name="anic" scrolling="no"></iframe><img id="anifgl" src="http://news.vdv-s.ru/img/anifg_l.png" alt="" /><img id="anifgr" src="http://news.vdv-s.ru/img/anifg_r.png" alt="" />';
}
}
ani.html:
<head>
<title></title>
<style type="text/css">
body {margin:0; padding:0; border:0;}
#ani {
display:inline;
position:absolute;
float:none;
top:-1px;
height:16px;
overflow:hidden;
}
#ani a {
margin-right:60px;
text-decoration:none;
font:bold 12px "Courier New", Arial;
color:#003399;
}
#ani a:hover {color:#0066ff}
#ani b {font:normal 11px Georgia, "Times New Roman", serif; color:#555;}
#ani b em {
font-style:normal;
margin:0 2px;
font-size:10px;
}
#ani .new a, #ani .new b {color:red}
</style>
<script type="text/javascript" src="http://static.vdv-s.ru/js/XMLHttpRequest/XMLHttpRequest.js"></script>
<script type="text/javascript" src="http://static.vdv-s.ru/js/transform.js"></script>
<script type="text/javascript" src="http://static.vdv-s.ru/js/ajax_obj.js"></script>
<script type="text/javascript">
function anistart() {
var tmp='';
var nar=[[],[],[]]; /* id, новость, обновление */
var narid=[];
var el=document.getElementById('body');
el.innerHTML='<div id="ani"></div>';
el=el.firstChild; /* переходим к элементу ani */
var w=-1; /* длина части в px, которая должна уйти влево для нового витка */
function newschk (xmldoc) {
var news = xmldoc.getElementsByTagName('item'); /* получаем список новостей .documentElement */
var id,p,fl;
var s={'Jan':'янв','Feb':'фев','Mar':'мар','Apr':'апр','May':'май','Jun':'июн','Jul':'июл','Aug':'авг','Sep':'сен','Oct':'окт','Nov':'ноя','Dec':'дек'};
var nl=news.length;
for (var i=0; i<nl; i++) {narid[i]=nar[0][i]} /* заносим все айдишники во временный массив */
var nartmp=nar;
var nltmp=nl;
for (var i=0; i<nl; i++) {
id=_xmlGetOneChildValue(news[i], 'link').match(/\?news=(\d+)$/)[1];
p=_xmlGetOneChildValue(news[i], 'pubDate').match(/\d+\s[a-zA-Z]{3}|\d+:\d+/g);
p[0]=p[0].replace(/.{3}$/,function(m){return s[m]});
fl=false;
for(var j=0;j<nl;j++) {if(narid[j]==id) fl=true} /* просмотр новостей - если новсть уже есть - Ъ */
nar[0][i]=id;
nar[1][i]='<b>'+p[0].split(' ')[0]+'<em>'+p[0].split(' ')[1]+'</em>| '+p[1]+' || </b>'+
'<a href="'+_xmlGetOneChildValue(news[i], 'link')+'" target="_top">'+_xmlGetOneChildValue(news[i], 'title')+'</a>';
if (tmp!='' && fl==false) nar[2][i]=true;
else nar[2][i]=false;
}
el.innerHTML=tmp; tmp=''; /* в начале идут последние 3 новости предыдущей стоки */
for (var i=0; i<nl; i++) { /* потом новости новой строки */
if (nar[2][i]) tmp+='<span class="new">'+nar[1][i]+'</span>'
else tmp+=nar[1][i];
if (i==nl-4) { /* если текущая новость - 3-я с конца */
el.innerHTML+=tmp; tmp='';
w=-el.offsetWidth;
}
}
el.innerHTML+=tmp;
}
callSrv('/rss/news.xml', null, newschk, '');
window.setInterval(function(){callSrv('/rss/news.xml', null, newschk, '')}, 300000); /* 15мин - 900000 мс */
var pp=0;
function OnTimer() {
if (--pp<w) pp=0;
el.style.left=pp+'px';
}
if (el) window.setInterval(OnTimer, 40)
}
window.onload=anistart;
</script>
</head>
<body id="body"></body>
</html>
И чтобы строка отображалась в ФФ нормально нужно дописать в стилях iframe#anic {width:120%}, чтобы правая пятая часть фрейма была скрыта.
Везде приемлемая скорость и одинаковый внешний вид. Это вин 
Отредактировано RedElf (13-12-2010 13:20:57)
Отсутствует
Страницы: 1
- Форумы
- » Разработка
- » Javascript анимация - Медленная перерисовка страницы
Board footer
Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia 
Язык отображения форума: [Русский] [English]