Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

UI, сделай мне хорошо

•
•

Лицо разработчика — это качество его кода. А что может быть лучше, чем плавный интерфейс без глитчей. Разберемся, как рендерится UI, где возникают проблемы и как их лечить.

1 of 3
Download to read offline
Проблемы CPU: I. Layout 1. Отказ от Auto Layout и верстка на фреймах. 2. Оптимизация констрейнтов: a. Добавляйте все констрейнты одновременно. b. Скрывайте вью вместо удаления. c. Изменяйте константы констрейнтов вместо удаления и добавления новых. d. Управляйте приоритетами констрейнтов. II. Core Graphics 1. Свойство drawAsynchronously позволяет обрабатывать код в методе draw(_ rect:) асинхронно в глобальных очередях. 2. Работу с контекстом Core Graphics можно заворачивать в глобальные очереди с помощью GCD. III.Картинки ● Если картинка никогда не меняет свой размер, используйте PNG. Если размер картинки изменяется в зависимости от места, где вы ее используете, или от устройства, на котором показываете – PDF. ● Заранее вызывайте процессы декомпрессии и масштабирования с помощью отрисовки на контексте Core Graphics. Либо используйте новое API для работы с изображениями preparingForDisplay и prepareThumbnail. ● Для загрузки картинок с очень большим разрешением используйте CATiledLayer. Проблемы GPU: I. Offscreen rendering 1. Shadow
2. Mask 3. Visual Effect II. Color Blending 1. Opacity – использование свойства isOpaque позволяет не учитывать альфа компонент при вычислении цвета. 2. Corner Radius – отрисовка закругленных углов с помощью CAShapeLayer не приводит к проблемам на этапе рендеринга. Универсальные решения: ● shouldRasterize подходит для отдельных анимаций (не для списков). ● Используйте картинки вместо создания визуальных эффектов программно. Проблемы Run Loop: Эта проблема связана с асинхронной работой Run Loop и Render Loop. Чтобы Render Loop «не крутился вхолостую», распараллеливайте все, что возможно, и выносите на глобальные очереди. Источники: WWDC: 1. Explore UI animation hitches and the render loop 2. Find and fix hitches in the commit phase 3. Demystify and eliminate hitches in the render phase 4. Make blazing fast lists and collection views Книги: 1. Nick Lockwood - iOS Core Animation: Advanced Techniques 2. Marcel Weiher - iOS and macOS Performance Tune Статьи: 1. UIKit ты вообще про UI? 2. Вертел я ваши UIView
3. Как UIView мешал слоям анимироваться 4. Сложные отображения коллекций в iOS: проблемы и решения на примере ленты ВКонтакте 5. Оптимизация рендера в iOS: frame buffer, Render Server, FPS, CPU vs GPU

More Related Content

UI, сделай мне хорошо

  • 1. Проблемы CPU: I. Layout 1. Отказ от Auto Layout и верстка на фреймах. 2. Оптимизация констрейнтов: a. Добавляйте все констрейнты одновременно. b. Скрывайте вью вместо удаления. c. Изменяйте константы констрейнтов вместо удаления и добавления новых. d. Управляйте приоритетами констрейнтов. II. Core Graphics 1. Свойство drawAsynchronously позволяет обрабатывать код в методе draw(_ rect:) асинхронно в глобальных очередях. 2. Работу с контекстом Core Graphics можно заворачивать в глобальные очереди с помощью GCD. III.Картинки ● Если картинка никогда не меняет свой размер, используйте PNG. Если размер картинки изменяется в зависимости от места, где вы ее используете, или от устройства, на котором показываете – PDF. ● Заранее вызывайте процессы декомпрессии и масштабирования с помощью отрисовки на контексте Core Graphics. Либо используйте новое API для работы с изображениями preparingForDisplay и prepareThumbnail. ● Для загрузки картинок с очень большим разрешением используйте CATiledLayer. Проблемы GPU: I. Offscreen rendering 1. Shadow
  • 2. 2. Mask 3. Visual Effect II. Color Blending 1. Opacity – использование свойства isOpaque позволяет не учитывать альфа компонент при вычислении цвета. 2. Corner Radius – отрисовка закругленных углов с помощью CAShapeLayer не приводит к проблемам на этапе рендеринга. Универсальные решения: ● shouldRasterize подходит для отдельных анимаций (не для списков). ● Используйте картинки вместо создания визуальных эффектов программно. Проблемы Run Loop: Эта проблема связана с асинхронной работой Run Loop и Render Loop. Чтобы Render Loop «не крутился вхолостую», распараллеливайте все, что возможно, и выносите на глобальные очереди. Источники: WWDC: 1. Explore UI animation hitches and the render loop 2. Find and fix hitches in the commit phase 3. Demystify and eliminate hitches in the render phase 4. Make blazing fast lists and collection views Книги: 1. Nick Lockwood - iOS Core Animation: Advanced Techniques 2. Marcel Weiher - iOS and macOS Performance Tune Статьи: 1. UIKit ты вообще про UI? 2. Вертел я ваши UIView
  • 3. 3. Как UIView мешал слоям анимироваться 4. Сложные отображения коллекций в iOS: проблемы и решения на примере ленты ВКонтакте 5. Оптимизация рендера в iOS: frame buffer, Render Server, FPS, CPU vs GPU