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

[melky]

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

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

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

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

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

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

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

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

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

[SlavaPav]

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

<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;
}

[melky]

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

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

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

[SlavaPav]

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

[monolithed]

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

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

[SlavaPav]

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

[melky]

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

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

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

[monolithed]

в какой-то степени можно сравнить с Flash по производительности

Не пытаюсь придраться к словам, но о какой производительности вы говорите? Как правило, технология флеш используется там где ей нет достойной альтернативы.

Flash-банеры на страницах загружают проц на 80%

Эту багу исправили еще в прошлом году. А если все-таки грузит, то это корявые руки дизайнера, который рисовал баннер.

Радуюсь, что скоро этим тормозам придет конец.

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

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

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

[SlavaPav]

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

[float]

с крахом после нескольких секунд завершает работу браузера

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