- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Декларативное программирование на CSS презентация
Содержание
- 1. Декларативное программирование на CSS
- 2. Как оптимизировать фронт-энд? Кэширование Минификация загружаемых данных Оптимизация рендеринга Оптимизация javascript
- 3. Оптимизация javascript Замена медленных функций и конструкций
- 4. Что значит понизить уровень? Заставить браузер исполнять
- 6. Преимущества нативного API Уменьшение количества оберток ->
- 7. Event loop Филип Робертс: https://youtu.be/8aGhZQkoFbQ
- 8. Что значит понизить уровень? Заставить браузер исполнять
- 9. Псевдопример
- 10. div.style.background = '#000'
- 11. div.style.background = '#000'
- 12. div.classList.add('black')
- 13. div.classList.add('black')
- 14. Как переключать состояния без скриптов? Псевдоселекторы состояний :hover :active :checked :valid :target
- 15. :checked + label
- 16. :checked + label
- 17. Преимущества Не тратится время на инициализацию скриптов
- 18. OverHead
- 19. Где это применить? Покажи кейсы!!!
- 20. Тултипы
- 22. Тултипы
- 23. Тултипы
- 24. Табы
- 25. Табы
- 26. Табы
- 27. Фильтр
- 28. Последовательное заполнение форм
- 31. Модальное окно
- 33. Рейтинг
Слайд 2Как оптимизировать фронт-энд?
Кэширование
Минификация загружаемых данных
Оптимизация рендеринга
Оптимизация javascript
Слайд 3Оптимизация javascript
Замена медленных функций и конструкций на быстрые
Устранение антипаттернов
Динамическое создание функций
Динамическое
создание массивов
Постепенное расширение объектов
Понижение уровня
Постепенное расширение объектов
Понижение уровня
Слайд 4Что значит понизить уровень?
Заставить браузер исполнять команды на родном для него
языке
Использовать нативное API браузера
Использовать низкоуровневое API asm.js
Использовать нативное API браузера
Использовать низкоуровневое API asm.js
Слайд 6Преимущества нативного API
Уменьшение количества оберток
-> Уменьшение стека
-> Ускорение очереди
-> Уменьшение времени
отклика страницы
Слайд 8Что значит понизить уровень?
Заставить браузер исполнять команды на родном для него
языке
Использовать нативное API браузера
Использовать низкоуровневое API asm.js
Декларировать состояния DOM элементов в зависимости от условий
Использовать нативное API браузера
Использовать низкоуровневое API asm.js
Декларировать состояния DOM элементов в зависимости от условий
Слайд 14Как переключать состояния без скриптов?
Псевдоселекторы состояний
:hover
:active
:checked
:valid
:target
Слайд 17Преимущества
Не тратится время на инициализацию скриптов
Минимальное время срабатывания event’а
Анимации в CSS выполняются
асинхронно JavaScript-коду.
