производительность JS против про-и CSS
 

JS уже обогнал Flash , о чём я ликую уже полдня.

Сейчас , в целях повторения JS, я пишу маленькую функцию анимирования элементов. И конечно, являясь фанатом CSS Transitions, я их там использую.

для браузеров без поддержки переходов я пишу другую функцию, которая, анимируя элемент, дёргает не его CSSStyleDeclaration( element.style ),а CSSStyleDeclaration у правила для этого элемента в таблице стилей :

document.styleSheets[ 0 ].cssRules[ 0 ].style

дальше принцип одинаков, как и во всех ф-ях анимации.

я уже её написал, анимировал группы элементов (благо селектор в CSS позволяет делать это как два пальца об бордюр)

так вот, вопрос в этом :

что быстрее в браузере, CSS или JS ?

ведь по моей логике почти всю работу совершает CSS

Любой нативный код быстрее написанного тобой. Экспериментировал недавно:

<div id="imageSlider">
    <ul>
        <li>
            <figure>
                <a href="#"><img src="img/sliderImg.jpg" alt="#"></a>
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li>
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li>
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li>
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
        <li class="last">
            <figure>
                <img src="img/sliderImg.jpg" alt="#">
                <figcaption>
                    TransAtlantic trip...
                </figcaption>
            </figure>
        </li>
        
    </ul>
</div>

/*---------------(slider)------------------*/

#imageSlider {
    position: absolute;
    top: 100px;
    left: 25%;
    z-index: 100;
    width: 600px;
    height: 300px;
    border: 15px solid #000;
    background: #red;
    overflow: hidden;
    
    -webkit-box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0  0 10px rgba(0, 0, 0, 0.5);
}

#imageSlider ul {
    position: absolute;
    width: 2500px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
}

#imageSlider:hover li {
    margin-left: -80px;
}

#imageSlider:hover li:first-child {
    margin: 0;
}

#imageSlider li {
    position: relative;
    float: left;
    width: 120px;
    border-left: 3px solid #000;
    overflow: hidden;
    
    -o-transition: all .3s;
    -moz-transition: all .7s;
    -webkit-transition: all .7s;
    transition: all .5s;
}

#imageSlider li:hover {
    width: 500px;
}

#imageSlider li.active, #imageSlider li.active:hover {
    width: 500px;
}

#imageSlider li.last {
    width: 500px;
}

#imageSlider li.last:hover {
    width: 550px;
}

#imageSlider li:hover figcaption {
    opacity: 1;
}

#imageSlider figure {
    padding: 0;
    margin: 0;
}
#imageSlider figcaption {
    position: absolute;
    top: 50%;
    width: 150px;
    padding: .5em;
    margin-top: -1em;
    background: #000;
    background: rgba(0, 0, 0, 0.9); 
    color: #fff;;
    opacity: 0;
    
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    
    -o-transition: all .5s;
    -moz-transition: all .5s .3s;
    -webkit-transition: all .5s .3s;
    transition: all .5s;
}

#imageSlider figcaption.active {
    top: 10%;
    width: 90%;
    height: 40%;
}

#imageSlider li.active {
    width: 500px;
    margin: 0 50px 0 -150px;
}

#imageSlider li.active figcaption {
    opacity: 1;
}

вы меня не поняли

я про спросил анимирование элементов на JS через таблицы стилей.
и быстрее это, или медленнее, чем через прямое обращение в styledeclaration каждого элемента.

ясное дело, что нативно это делается быстрее, а если надо сделать анимацию для браузера без поддержки transition?

Проверяю на поддержку, добавляю класс в #imageSlider для нейтрализации ховеров, анимирую пару свойств в jQuery через animate. Хотя если честно я так и не пробовал дописывать код для поддержки браузеров без transition.:)

В ближайшие годы, флеш сохранит свои позиции на рынке, потому что ему нет альтернативы для работы с аудио/видео потоками и прочими вещами.
Сравнивать JS и AS вообще абсурдно. Чем вам AS не угодил? Может потому, что вы его не знаете и плевать хотели на тысячи AS-программистов?
А тесты, что приводят всякие ... полная хрень, вот у меня на двух ноутах с процессором i5 и памятью 8гб вот эта недавно анонсированное чудо с крахом после нескольких секунд завершает работу браузера, вы видели чтобы флеш-приложения так работали?

По-моему никто тут не сравнивает JS и AS в плане их пользы. Автор лишь искренне радуется за улучшение JS движков, и теперь JS, в какой-то степени можно сравнить с Flash по производительности, что сулит выгоду как для пользователей так и для разработчиков.

monolithed, я нигде и не сравнивал) радуюсь не только потому что JS - мой любимый язык, но еще из-за того, что Flash-банеры на страницах загружают проц на 80%. Радуюсь, что скоро этим тормозам придет конец.

против АС не имею ничего плохого, кроме как гавнокода в банерах

(я знаю, можно их отрезать)

Не пытаюсь придраться к словам, но о какой производительности вы говорите? Как правило, технология флеш используется там где ей нет достойной альтернативы.
Эту багу исправили еще в прошлом году. А если все-таки грузит, то это корявые руки дизайнера, который рисовал баннер.
Не придет, а знаете почему? - потому что делать флеш-баннеры очень просто, там не нужно быть программистом. Представьте сколько времени у вас займет реализация и внедрение простенького баннера на JS/CSS3.
А теперь поставьте себя на место заказчика.

К тому же, если начнется массовое внедрение JS/CSS3 баннеров, то от горе-верстальщиков столько говнокода будет, что вы будете рады вспоминать времена когда баннера были на флеше и их можно было легко отключать с помощью NoScript, AddBlock ...

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

Я говорю лишь про то что раньше был гораздо медленнее, что ограничивало разработчиков. Теперь же производительность увеличилась, и ее можно сравнить с Flash к примеру (скорость вычислений и обработки данных). Я не пытаюсь указать на конкретную область применения.

В видеокарте дело наверное.
Нравится же им ерундой заниматься... Корова... Ни одна штучка за ней лежит, ни она...

Flash ещё очень долго будет сохранять свои позиции, сейчас начал разрабатывать свою игру на 3D движке Alternativa 3D 8. Разработка идёт очень быстро и легко. С использованием этого движка, грамотного подхода к программированию (AS3) и к моделированию можно сделать по-настоящему крутые штуки, я не говорю даже о крутых спец эффектах в баннерах, я говорю о полностью трёхмерных играх, которые по уровню графики и производительности почти дошли уже до настольных аналогов. Взять к примеру Max Racer.

Я скачал и посотрел ради интереса. Но это я. Не вижу причин, почему обычные пользователи будут это делать.

float, не понял о чём Вы? Что Вы скачали?

Наверное 11-й флэш?

прочитайте название темы

Игру в макс качестве. По графике как контра 1.6... Ну мот чуточку лучше(из-за новых фишек). Как игра 1-2 бала из 10:) .