Аппаратное ускорение по умолчанию включено во всех популярных браузерах, таких как Google Chrome и Яндекс Браузер, а также в плагине Flash (в том числе во встроенном в Chromium-браузеры) при условии наличия необходимых драйверов видеокарты, однако в некоторых случаях может вызывать проблемы при воспроизведении видео и другого контента онлайн, например — зеленый экран при воспроизведении видео в браузере.

В данной инструкции — подробно о том, как отключить аппаратное ускорение в Google Chrome и Яндекс Браузере, а также в Flash. Обычно, это помогает решить многие проблемы с отображением видео содержимого страниц, а также элементов, выполненных с помощью Flash и HTML5.

Примечание: если вы еще не пробовали, рекомендую сначала установить оригинальные драйверы вашей видеокарты — с официальных сайтов NVIDIA, AMD, Intel или с сайта производителя ноутбука, если это ноутбук. Возможно, этот шаг позволит решить проблему, не отключая аппаратное ускорение.

Отключение аппаратного ускорения в Яндекс Браузере

Для того, чтобы отключить аппаратное ускорение в Яндекс браузере, проделайте следующие простые шаги:

  1. Зайдите в настройки (нажатие по кнопке настроек справа вверху — настройки).
  2. Внизу страницы настроек нажмите «Показать дополнительные настройки».
  3. В списке дополнительных настроек, в разделе «Система» отключите пункт «Использовать аппаратное ускорение, если это возможно».

После этого перезапустите браузер.

Примечание: если проблемы, вызванные аппаратным ускорением в Яндекс Браузере возникают только при просмотре видео в Интернете, можно отключить аппаратное ускорение видео, не затрагивая его для других элементов:

  1. В адресной строке браузера введите browser://flags и нажмите Enter.
  2. Найдите пункт «Аппаратное ускорение для декодирования видео» — #disable-accelerated-v >Для того, чтобы изменения настроек вступили в силу, перезапустите браузер.

Google Chrome

В браузере Google Chrome отключение аппаратного ускорения выполняется практически точно так же, как и в предыдущем случае. Шаги будут следующими:

  1. Откройте «Настройки» Google Chrome.
  2. Внизу страницы настроек нажмите «Показать дополнительные настройки».
  3. В разделе «Система» отключите пункт «Использовать аппаратное ускорение (при наличии)».

После этого закройте и снова запустите Google Chrome.

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

  1. В адресную строку Google Chrome введите chrome://flags и нажмите Enter
  2. На открывшейся странице найдите «Аппаратное ускорение для декодирования видео» #disable-accelerated-v >На этом действия можно считать завершенными, если вам не требуется отключение аппаратного ускорения отрисовки каких-либо других элементов (в данном случае вы также можете найти их на странице включения и отключения экспериментальных функций Chrome).

Как отключить аппаратное ускорение Flash

Далее — о том, как отключить аппаратное ускорение Flash, причем речь пойдет именно о встроенном плагине в Google Chrome и Яндекс Браузере, так как чаще всего задача стоит в отключении ускорения именно в них.

Порядок действий для отключения ускорения плагина Flash:

  1. Откройте в браузере любое Flash-содержимое, например, на странице https://helpx.adobe.com/flash-player.html в 5-м пункте имеется Flash ролик для проверки работы плагина в браузере.
  2. Нажмите по Flash содержимому правой кнопкой мыши и выберите пункт «Параметры» (Settings).
  3. На первой вкладке снимите отметку «Включать аппаратное ускорение» и закройте окно параметров.

В дальнейшем, вновь открываемые ролики Flash будут запускаться без аппаратного ускорения.

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

А вдруг и это будет интересно:

Почему бы не подписаться?

Рассылка новых, иногда интересных и полезных, материалов сайта remontka.pro. Никакой рекламы и бесплатная компьютерная помощь подписчикам от автора. Другие способы подписки (ВК, Одноклассники, Телеграм, Facebook, Twitter, Youtube, Яндекс.Дзен)

13.02.2017 в 22:10

в Google Chrome 56 нельзя отключить Flash player
как быть?

14.02.2017 в 11:26

Странно. Chrome 56 — аппаратное ускорение отключается как описано выше, сам плагин Flash отключается в настройки — личные данные.

11.05.2017 в 17:47

При включённом аппаратном ускорении в браузере появляются чёрные квадраты (похожи на артефакты) при отключении аппаратного ускорения всё работает как раньше на более старых версиях браузера. Заметил что после обновления Гугл Хрома на более свежую началась такая проблема. Пробовал на Win 10 тоже самое. Сейчас снова поставил Win7. Раньше аппаратное ускорение мне не мешало и работало корректно. Я честно сказать разницы не заметил с вкл или выкл аппаратного ускорения.

11.05.2017 в 22:13

Я так до конца и не понял, а зачем вобще отключать эту функцию?

12.05.2017 в 09:11

Бывает, что иногда вызывает глюки при воспроизведении видео и игр в браузерах (на некотором оборудовании).

12.07.2017 в 03:33

не помогло. тормозит рывками видео при просмотре онлайн фильмов при 720р. буквально позавчера началось. у меня еще старая версия Хрома 55. не хочу обновляться потому что не очень позитивные комментарии на форумах и нет в новой версии chrome://plugins/, вырезали. и как там отключить или включить Flash Player? но в свою очередь много советов обновится до последней версии Хрома. много советов по поводу обновления Flash Player в Виндовсе. обновил, то же самое. а зачем мне в Виндовс Flash Player и в самом Хроме скажите? и можно обойтись без Flash Player в Виндовс?

12.07.2017 в 08:29

Хром использует свой собственный «встроенный» Flash Player, а не тот, который в Windows. В свою очередь, тот, который в Windows, используется в Internet Explorer, например, или при запуске swf файла на компьютере.

А вот то, что у вас тормозит видео — так наоборот, по идее вам бы включить аппаратное ускорение. Но: с учетом того, что только позавчера началось, проверьте-ка компьютер на левые процессы, может они нагружают процессор и такой результат.

14.07.2017 в 03:14

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

14.08.2017 в 11:53

Спасибо, Дмитрий. Ваша статья в который раз уже выручила. Думал уже в мастерскую свой ноут сдавать. Прочитал вашу статью, отключил ускорение в Хроме и все заработало. Спасибо еще раз

18.08.2017 в 12:46

Здравствуйте Дмитрий. Я уже писал, что отключив ускорение в Хроме, по-вашему совету, решил проблему. А сегодня опять возникла та же проблема (вылетает драйвер AMD) в безопасных платежах касперского. Попробовал заменить безопасный браузер Internet Explorer на Гугл Хром. Ничего не помогло. Опять вылетает видео драйвер. Не знаю чего и делать.

19.08.2017 в 07:15

Пробовали другие версии драйвера (в том числе более старые, если стоит последняя)?

02.09.2017 в 15:54

Пробовал. Даже оперативную память сегодня заменил. Было 6 ГБ поставил 8 ГБ При запуске безопасных платежей вылетел синий экран. Драйвер правда не вылетел.

04.09.2018 в 23:50

Сегодня ходил за хлебом, Не купил, хлеб не завезли. Купил новые ботинки завтра в них пойду, может куплю хлебушка. Звучит как-то так. Обнови дрова на видео, постоянно релизят и пользуй firefox для безопасных платежей. И включайте мозг, а не кошелек)

31.05.2018 в 09:39

Добрый день, Дмитрий. Не подскажете, как включить флеш-плеер в новой Опера? Перерыл все настройки, облазил весь интернет, решения не нашёл.

31.05.2018 в 16:42

04.09.2018 в 13:37

Ура, заработало! Почти полгода видео не шло и я забил, а тут раз и вся проблема решилась! Огромное спасибо!

05.04.2019 в 01:58

Спасибо за советы. Помогло.

28.12.2019 в 11:40

мучился 2 месяца. что только не перепробовал. пока не отключил аппаратное ускорение, аж как-то скучно теперь, у кого вылетает Винда на ЮТУБЕ отключайте это ускорение, я тоже разницы не заметил, благодарю за советы!

Примечание: после отправки комментария он не появляется на странице сразу. Всё в порядке — ваше сообщение получено. Ответы на комментарии и их публикация выполняются ежедневно днём, иногда чаще. Возвращайтесь.

Очередь просмотра

Очередь

  • Удалить все
  • Отключить

Хотите сохраните это видео?

  • Пожаловаться

Пожаловаться на видео?

Выполните вход, чтобы сообщить о неприемлемом контенте.

Понравилось?

Не понравилось?

Аппаратное ускорение по умолчанию включено во всех популярных браузерах, таких как Google Chrome и Яндекс Браузер, а также в плагине Flash. Однако это не всегда положительно отражается на воспроизведении видео и другого контента онлайн (зеленый экран при воспроизведении видео в браузере). В данной видео инструкции я покажу как отключить аппаратное ускорение в Google Chrome, а также в Flash. Обычно, это помогает решить многие проблемы с отображением видео содержимого страниц, а также элементов, выполненных с помощью Flash и HTML5.

Если ролик оказался Вам полезен – жмите LIKE и делитесь с друзьями! Оставляйте, пожалуйста, отзывы и подписывайтесь на канал. Спасибо!

Введение

Для большинства веб-разработчиков фундаментальным представлением веб-странницы является DOM. В то время как процесс преобразования этого представления в изображение на экране (далее рендеринг) часто покрыто пеленой непонимания. В последние годы разработчики браузеров активно оптимизируют этот процесс, перекладывая часть работы на плечи графических процессоров: то что называется “аппаратным ускорением (hardware acceleration)”. Мы рассмотрим рендеринг в контексте обычных страниц, исключая Canvas2D и WebGL. Эта статья попытается пролить свет на фундаментальную концепцию использования аппаратного ускорения при генерации изображения веб-контента в браузере Chrome.

Предупреждение

Мы здесь будем говорить только о движке WebKit, а если быть более точным о его форке в Chromium’е. Эта статья покрывает детали реализации в Chrome’е, которые не коем образом не задокументированы в стандартах. Поэтому нет гарантий в том, что, что-либо описанное в этой статье будет применимо к другим браузерам. Тем не менее, знание этих тонкостей поможет вам провести тонкую отладку и повысить производительность.

Также, примите во внимание, что движок рендеринга в Chrome’е развивается стремительными шагами. И нет гарантий в том, что всё здесь описанное будет справедливо так же через полгода.

Важно иметь в виду, что на данный момент Chrome поддерживает два механизма рендеринга: аппаратный и старый программный. На момент написания этой статьи все страницы рендерятся с привлечением аппаратного ускорения в Windows’е, ChromeOS и Chrome’е на Android. В MacOS и Linux только страницы, содержащие композиционные элементы сваливаются в этот режим (ниже мы поговорим об этом), но совсем скоро это исправят.

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

Путь от DOM’а на экран

Концепция слоёв

Когда страница загружена и обработана в браузере, она превращается в то, что всем известно как DOM. Процесс рендеринга страницы протекает через серию промежуточных преобразований непосредственно недоступных разработчику. Важнейшая из порождаемых в процессе структур — слой.

Слои в Chrom’е бывают двух типов: Слои Преобразования (RenderLayers), которые содержат поддеревья DOM, и Графические Слои (GraphicsLayers), которые содержат поддеревья предыдущих. Сейчас последние для нас представляют больший интерес, так как Графические Слои это то что отправляется графическому процессору в качестве текстур. Далее по тексту везде, где встречается слово “слой”, я подразумеваю именно Графический Слой.

Слегка отвлечёмся на GPU терминологию и попробуем разобраться, что такое текстура?
Думайте о ней как о порции битового отображения графического объекта (bitmap), которая передаётся из основной памяти (RAM) в память графического процессора (VRAM). Когда текстура попадает в руки GPU, он может натянуть её на полигональную сетку — в видео играх это техника используется для натяжки “кожи” на трёхмерные объекты. Chrome использует текстуры для передачи порций контента страницы графическому процессору, что бы тот впоследствии мог наложить их на простую квадратную сетку и вытворять с ней любые трёхмерные преобразования. Именно так работает 3D CSS и также это прекрасно сказывается на производительности прокрутки страницы — но обо всём по порядку.

Давайте рассмотрим пару примеров для более наглядной демонстрации концепции слоёв.

Есть очень полезный инструмент для понимания слоёв в Chrome’е — опция “show composited layer borders” в разделе “rendering” окна настроек панели инструментов разработчика. Эта опция просто подсвечивает границы расположения слоёв на экране оранжевым цветом. Давайте её включим. Все скриншоты для примеров были сделаны в Chrome Canary, Chrome 27 на момент написания данной статьи.

Пример 1: Однослойная страница

Эта страница имеет единственный слой. Голубая сетка представляет собой границы тайлов — частей слоя, которые Chrome использует для разбивки большого слоя и отправки их GPU. Сейчас они не представляют для нас большого интереса.

Пример 2: Элемент в своём собственном слое

Задавая 3D CSS свойство элементу, которое поворачивает его, мы можем видеть, что ему выделяется его собственный слой: обратите внимание на оранжевую рамку, которая оборачивает его на скриншоте выше. (Это делается для того, что бы можно было рендерить каждый слой независимо от других)

Условия создания слоёв

Какие ещё элементы могут заполучить свой слой? Эвристика Chrome’а развивается в этом направление последнее время, но в настоящий момент любое из следующих условий приводит к созданию слоя:

  • наличие у элемента CSS свойств трёхмерных трансформаций
  • элемент использующий аппаратное ускорение при декодировании видео
  • в 3D(WebGL) контексте или ускоренном 2D
  • сторонние плагины (т.ч. Flash)
  • элементы, использующие CSS анимацию прозрачности или анимацию трансформаций
  • элементы, использующие CSS фильтры задействующие аппаратное ускорение
  • элементы, имеющие потомков со своими композиционными слоями
  • наличие у элемента брата (сестринского элемента) с более низким z-index’ом, который сам при этом обладает своим слоем (иными словами, если элемент рендерится поверх композиционного)
Практическое применение: Анимация

Мы знаем, что посредством анимации CSS трансформации элемент свалится в свой собственный слой. А слои очень хороши для анимации.

Пример 3: Анимированные слои

В простейшем случае Chrome’е программно отрисует содержимое слоя и отправит его на отмашку графическому процессору в качестве текстуры. Если это содержимое не будет изменяться в будущем, то нет нужды его перерисовывать. И это хорошо: перерисовка отнимает время, которое может быть потрачено, например, на отработку скриптов. И если перерисовка занимает много времени, это может привести к досадным дефектам в виде падения частоты кадров и задержек в анимации.

Можете убедится, что на временной шкале панели разработчиков нет ни каких операций перерисовки, пока слой вращается туда — сюда.

Осторожно! Repainting

Но если содержимое слоя изменить, это приведёт к его перерисовке.

Пример 4: Перерисовка слоёв

Каждый раз, когда кнопка будет нажата, вращающийся элемент будет прибавлять пиксель в ширине. Это приведёт к перерисовке всего элемента, который в данном случае находится в отдельном слое.

Простой способ, увидеть какие части страницы перерисовываются включить опцию “show paint rects” всё в том же разделе “Rendering” окна настроек панели разработчиков. После включения обратите внимание как анимированный элемент, и кнопка мерцают красным при клике по кнопке.

События перерисовки можно также заметить на временной шкале. Зоркий глаз заметит сдвоение событий перерисовки: одно собственно для слоя, другое для смены отображения состояния кнопки.

Заметьте, что Chrome’е не всегда перерисовывает слой полностью. Он пытается быть выборочным и перерисовывать только те фрагменты слоя (те самые тайлы отмеченные голубыми границами) в которых DOM подвергся изменению. В нашем случае только один элемент на весь слой, но в большинстве реальных проектов элементов на слой приходится гораздо больше.

Напрашивается следующий вопрос: что приводит к устареванию DOM’а и его перерисовке? Сложно в нескольких предложения охватить все случаи, которые могут привести к невалидности DOM’а. В большинстве случаев это порча DOM’а посредством изменения CSS стилей и динамическая генерация видимого контента в рантайме. Тони Гентилкор описывал их в своём блоге, также Стоян Стояноф писал очень детализированную статью, но она ограничивается описанием перерисовки без деталей этой новой штуки, о которой мы пытаемся говорить — композиционирование посредством видео подсистемы.

Складываем всё вместе: DOM в экран

Так как же Chrome’е превращает DOM в изображение на экране? Концептуально можно выделить следующие шаги:

  1. Берёт DOM и разбивает его на слои, следуя изложенным выше критериям
  2. Программно рисует каждый из слоёв по отдельности
  3. Отправляет их GPU в качестве текстур
  4. На графической подсистеме компонует все слои в финальное изображение

Это то, что происходит при прорисовке первого кадра страницы. Но есть несколько способов сократить накладные расходы на рендеринг каждого следующего кадра:

  • Не все изменения CSS стилей приводят к перерисовке. Chome может всего лишь перекомпоновать существующие слои уже находящиеся в памяти GPU. Этого можно добиться изменением только композиционных свойств (т.к. трансформации, прозрачность, фильтры).
  • Если часть слоя изменена она будет перерисована и заново отправлена GPU. Если контент оставить неизменным, а менять только композиционные свойства (трансформацию или прозрачность) Chrome’е может оставить их в видео памяти и перекомпоновать для генерации следующего кадра.

Как нам должно было стать понятным, основанная на слоях композиционная модель даёт большое преимущество для производительности рендеринга. Композиционирование более недорогой способ рендеринга в сравнение с полной перерисовкой. Поэтому попытка избежать перерисовки слоя, дёргая только композиционные свойства элементов — неплохой способ оптимизации производительности. Здравомыслящие разработчики возьмут на заметку список свойств активирующих композиционирование, что бы в подходящий момент мочь форсировать создание слоёв. Но будьте аккуратны в создание слоёв — это не бесплатно: им нужна системная память и память видео подсистемы (которая ограниченна на мобильных устройствах).