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

Поиск

Категории

Облако тегов

acer ado.net amd asp.net c sharp c# cms css exceptions google html ipad iphone it бизнес javascript jquery linq microsoft mysql net nokia nokia lumia samsung seo silverlight sql surface tsql windows 8 windows blue windows phone windows rt xna безопасность библиотека вопросы на собеседовании интересные проекты интернет интернет магазин исключения книга книги компьютерная безопасность компьютерные игры контролы курсы по программированию логированние исключений мобильные приложения монетизация сайтов наушники новости новости it новости microsoft новости интернет новости технологий ноутбук ноутбуки обработка исключений оптимизация острова периферия планшет планшеты поддержка сайтов поисковое продвижение программы продвижение продвижение сайта продвижение сайтов рабство разработка игр разработка сайтов раскрутка сайта рекламные технологии смартфон смартфоны собеседование создание сайтов средства разработки туризм фриланс хостинг яндекс
  << Предыдущий пост       Следующий пост >>  
От: 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...

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

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

Комментарии

 
styledress.co.uk 19.04.2018 18:35:53 #

ние приемам работы в графических редакторах Adobe photoshop и Adobe Photoshop. После прохождения...

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




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


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