ГЛАВНАЯ     АРХИВ     НАПИСАТЬ АДМИНУ     ПОДПИСАТЬСЯ НА RSS     ВОЙТИ      

Поиск

Категории

Облако тегов

  << Предыдущий пост       Следующий пост >>  
От: inbruk
12. августа 2016 22:12

Курсы ITVDN frontend

 Сейчас почти все фронтендщики, при разработке визуальной части сайта, применяют плавные переходы, изменения и анимацию в CSS3, реализуя интерактивные составляющие, которые ранее сложно было представить без кода на JavaScript либо Flash. Сейчас мы можем создавать плавную и интересную анимацию без большого количества CSS кода и совсем не используя JavaScript или Flash. Экспериментируя со свойствами, вы наверное, столкнулись с понятиями CPU, GPU и аппаратное ускорение. Давайте еще раз разберемся с ними:

 

Немного теории о css

CPU (Central Processing Unit), либо основной процессор — то, что обрабатывает практически все операции, совершаемые ПК.

GPU (Graphics Processing Unit), либо графический процессор — то, что отвечает за обработку графики. GPU был специально разработан для графических вычислений и снимает данную нагрузку с процессора.

Аппаратное ускорение используется для разгрузки центрального процессора. В мире CSS (подробнее тут - edu.cbsystematics.com/ru/courses/description/html-css) все визуальные эффекты обычно псевдо обрабатываются GPU. Фактически реализуется отдельный от веб-страницы слой, на котором происходят отрисовка и обработка анимации. Понимая этот принцип, мы можем улучшить качество отрисовки и производительность. Для этого можно воспользоваться небольшим трюком will-change, о котором и пойдет речь в нашем материале.

 

Что такое will-change?

Свойство CSS will-change дает возможность программисту сказать веб-браузеру о том, какие конфигурации будут применяться по отношению к элементу, к которому будет применяться это свойство. Благодаря чему, браузер заблаговременно просчитывает самый оптимальный способ обработки анимации. А значит, для нашей анимации будет заранее выделена память, что позволит нам сделать загрузку странички более быстрой. Звучит круто, но при использовании will-change необходимо учитывать некоторые нюансы.

 

Способы применения свойства will-change

Качество will-change употребляется, чтоб заблаговременно оповещать браузер о том, каких конфигурации стоит ожидать от элемента. Браузеру крайне необходимо понимать заранее будут ли происходить какие-то трансформации с элементами на страничке. Именно поэтому эффективность использования этого свойства зависит от того, в какой период трансформации вы его будете использовать. Нельзя применить will-change к элементу, который уже изменяется — это бессмысленно. Соответственно использование это свойства принесет максимальную пользу, если будет срабатывать раньше, чем начнутся трансформации. То есть will-change должен срабатывать (добавляться) и отключаться (удаляться) в конкретный момент. Это крайне важно помнить и рассчитывать этот момент заблаговременно. Например, вы хотите, что бы элемент менялся каждый раз, когда на него наводят курсором мышки. Если подключить will-change в начале этого действия, то может произойти утечка памяти. Избежать этого можно с помощью применения will-change, когда родительский элемент переходит в состояние hover. Перешли в hover — сработал will-change.

 

Всегда удаляйте will-change

Следите за тем, чтобы will-change был удален сразу после того, как изменения произошли. Это позволит вам улучшить оптимизацию и снизить ресурсозатратность при загрузке сайта.

 

Браузеры, которые поддерживают will-change

 Как оказалось на практике не все браузеры поддерживают это свойство. Всегда проверяйте версия бразура для которого пишете, перед использованием will-change:

  • Chrome 3.6 и выше
  • Firefox 3.6 и выше
  • Opera 2.4 и выше
  • Android браузер 3.7
  • Chrome для Android 4.0
  • Opera Mobile 2.4

Надеемся вам придется по вкусу новое свойство will-change и ваши сайты станут еще круче.Больше информации о css...

Похожие записи


Как добавить ссылку на CSS программно используя JavaScript ?
В этом посте, я покажу кусок JavaScript-ового кода, который позволит вам добавить програмно ссылку на CSS файл в страницу. <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link href="CSS/FloatDes.css" rel="stylesheet" title="Float layout" type="text/css" /> <script type="text/javascript"> func...

Курсы photoshop - Это как цель стать дизайнером
Цель данного курса - формирование у слушателей правильного видения профессии дизайнера, эффективное освоение базовых дисциплин, без знания которых невозможно профессионально и результативно заниматься дизайном, формирование навыков, необходимых для успешной работы, обучение приемам работы в графических редакторах Adobe photoshop и Adobe Photoshop. После прохождения...

Семь бесплатных утилит для уменьшения JavaScript и CSS составляющих вашего сайта
Недавно я много занимался разработкой на клиентской стороне. В процессе я нашел эти 7 утилит. Они оказали мне ощутимую поддержку и немного увеличили производительность разрабатываемых веб сайтов. Они урезали размеры JavaScript-вых и CSS файлов, на которые ссылались страницы сайтов. JSMin (JavaScript Minifier) - убирает комментарии и не нужные пробелы в JavaScr...

Добавить комментарий




biuquote
  • Комментарий
  • Предпросмотр
Loading


  Сохранить комментарий