В браузерах ускорено аппаратное ускорение (scrollTop)?

Моя первоначальная догадка заключается в том, что ответ отрицательный, из-за представленных здесь доказательств:

https://github.com/inuyaksa/jquery.nicescroll/wiki/Native-scroll-vs-Hardware-accelerated-one

Я могу качественно заметить, что версия с ускоренным ускорением HW более сглаживает мой компьютер. Я запускаю монитор на 120 Гц. Это говорит о том, что второй метод быстрее и эффективнее.

Для элемента HTML, такого как

<div id="a" style="overflow-y: hidden; height: 100px">
    Content <em>which exceeds 100px in height</em>
    <img src='lolcat.png' alt='lolcat'/>
</div>

Я предполагаю, что простой способ для аппаратного ускоренного макета 3D, который должен быть реализован, состоит в том, что полная высота div отображается, а затем этот вывод загружается как текстура полной высоты, а затем координаты текстуры, используемые для визуализации фактического div будет показывать только 100 пикселей за раз.

Мой вопрос связан с тем, как теоретически это должно иметь свойство scrollTop, но кажется, что в настоящее время существует гораздо больше шансов получить описанное мной поведение с помощью TWO-элементов следующим образом:

<div id="a" style="overflow-y: hidden; height: 100px; position: relative">
    <div style="position: relative">
        Content <em>which exceeds 100px in height</em>
        <img src='lolcat.png' alt='lolcat'/>
    </div>
</div>

Где вместо установки свойства scrollTop document.getElementById('a') я устанавливаю свойство CCS3 -webkit/moz/ms/o-transform в 3D-значение с соответствующим отрицательным значением пикселя оси Y.

Каков наиболее эффективный способ прокрутки с помощью CSS3? В частности, как я могу структурировать свой DOM, чтобы иметь наилучшие шансы получить самую простую прокрутку (не вызывая повторной розыгрыш внутреннего содержимого при прокрутке элемента)?

Обновление: я использую действительно хороший плагин для плавного прокрутки для Chrome, который, похоже, использует JS для назначения смещения scrollTop на странице для достижения рендеринга прокрутки, что, по-видимому, указывает на то, что если бы это не было аппаратное ускорение, производительность не могла не отставать от частоты обновления экрана (120 Гц) без большого количества использования ЦП. Тем не менее, такие спекуляции остаются крайне ненаучными. Вывод, который я собираюсь на этом этапе, заключается в том, что браузеры имеют право ускорить все, что они выбирают, в разумных пределах, поэтому ответ может звучать, возможно.

Ответ 1

В соответствии с указанной вами страницей аппаратное ускорение зависит от того, поддерживает ли браузер аппаратное ускорение.

Div с оберткой можно ускорить. (если браузер поддерживает его)

Итак, я думаю, что ваша идея вложенности двух divs создаст более простой способ добиться того, чего вы хотите. Но чтобы ответить на ваш вопрос, scrollTop - это только аппаратное ускорение в браузерах, поддерживающих аппаратное ускорение.

Firefox 4.0 beta 5 поддерживает ускорение HW.
IE 9 betastrong > поддерживает ускорение HW.
Chrome 6 + поддерживает ускоренную композицию HW.

~~Safari и Opera еще не поддерживают аппаратное ускорение.~~

Это соответствует этой странице с 2010 года. http://www.webmonkey.com/2010/09/a-guide-to-hardware-acceleration-in-modern-browsers/

Согласно http://arstechnica.com/information-technology/2012/06/opera-12-arrives-with-webcam-apis-and-experimental-webgl-support/, Opera 12 поддерживает аппаратное ускорение.

Согласно TechCrunch, Safari 5 для Windows поддерживает аппаратное ускорение.

Согласно веб-сайту Apple Safari, Safari 6 поддерживает аппаратное ускорение.

Извините! У меня были ссылки на статью TechCrunch и сайт Safari, но я могу использовать только две гиперссылки.

EDIT:

Чтобы лучше ответить на вопрос, я добавляю к вопросу. Самый эффективный способ прокрутки с помощью CSS3 - overflow: scroll; или overflow-x: scroll;. Свойство CSS overflow: является более эффективным CSS, чем scrollTop, потому что scrollTop является тегом jQuery, который использует JavaScript. Поэтому использование scrollTop не CSS, а JavaScript. Кроме того, использование CSS также является самым простым способом достижения горизонтальной прокрутки, поскольку для него не требуется импортировать библиотеку jQuery или включить JavaScript.

Я полностью согласен с вами, говоря, что существует гораздо больше шансов получить описанное вами поведение с помощью двух тегов div и CSS вместо использования jQuery/JavaScript.

Если вы не хотите, вы хотите, чтобы иметь возможность автоматически прокручиваться до другого места, при использовании scrollTop вы можете эффективно прокручивать до разных мест с помощью кнопки или ссылки.

$(document).ready(function() {
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
});

Этот код jQuery с помощью scrollTop делает все <a href="#top">top</a> анимированным прокруткой вверх, а не просто прыжком. При использовании CSS для прокрутки вы не получаете эти анимированные свитки. Кроме того, вы можете использовать этот метод для прокрутки до другой точки по горизонтали или по вертикали, путем установки идентификатора нескольких тегов div и редактирования вышеуказанного кода в соответствии с вашими потребностями. Это от http://www.electrictoolbox.com/jquery-scroll-top/.

Ответ 2

scrollTop не аппаратное ускорение. Лучший способ найти гладкую прокрутку даже на мобильном устройстве - заставить аппаратное ускорение css3 в сочетании с переходом.

Я предполагаю, что у вас есть jQuery, поэтому я использую этот синтаксис для ясности, все, что я делаю, это установка атрибутов css и других основных вызовов.

var $body = $('body');
function scrollTop(scrollPosition) {
    // account for the current scroll position
    var scrollDiff = $body.scrollTop() - scrollPosition;

    // use css transition
    $body.css('transition', '.5s');

    // translate3d forces hardware acceleration, second param is 'y'
    $body.css('transform', 'translate3d(0, ' + scrollDiff + 'px, 0)');

    // revert back to native scrollTop
    $body.bind('transitionend webkitTransitionEnd', function(event) {
        $body
        .scrollTop(scrollPosition)
        .css({'transition': '', 'transform': ''})
        .unbind(event);
    });
}

Примечание. Я заметил, что событие transitionend не всегда надежно на мобильных устройствах; это приводит к тому, что фрагмент кода "вернуться к исходной scrollTop" выглядит глючным. Я думаю, что лучший подход - это сделать это дальше и реализовать свою собственную полосу прокрутки без использования scrollTop. Второй параметр translate3d(), деленный на высоту контейнера, будет местом (в процентах) вашего скроллера в терминах трек-панели.

Ответ 3

document.getElementById("a").scrollTop более эффективен, потому что он был дольше. У браузера было более 10 лет, чтобы оптимизировать его.