Исследование и динамическая оптимизация работы браузера для различных платформ.
Выполнил: Кувалдин А.В.
Научный руководитель: Березин Д.А.
Цели/задачи
- Изучить особенности браузеров
- Исследовать скорость отображения элементов
- Исследовать скорость вставки элементов
- Изучить особенности анимаций
- Сделать выводы в виде рекомендаций
Устройства
- MacBook Air(Mac OSX)
- Lenovo (Windows 7)
- Ipad mini (IOS 8)
- Ipad mini 2 (IOS 8)
- LG Nexus 4 (android 5.3)
- Nokia Lumia 820 (windows phone 8.1)
- Samsung GT-P7300/GT-I9250 (android 4/3.2)
Принцип работы браузеров
- Парсинг HTML
- Построение DOM
- Построение CSSOM
- Объединение
- Отрисовка
Вставка элементов в DOM
IPad 2 mini Safari
Windows 7
Desktop Mac OSX FF
Desktop Mac OSX W
Вставка элементов в DOM
Nokia Lumia
Samsung GT-P7300
Samsung Nexus
LG NEXUS 4
IPad mini Safari
Тестирование css-селекторов
Samsung Nexus
LG NEXUS 4
IPad 2 mini Safari
Windows 7
Desktop Mac OSX FF
Desktop Mac OSX W
Тестирование css-селекторов
Samsung Nexus
LG NEXUS 4
IPad 2 mini Safari
Windows 7
Desktop Mac OSX FF
Desktop Mac OSX W
Тестирование css-селекторов
Samsung Nexus
LG NEXUS 4
IPad 2 mini Safari
Windows 7
Desktop Mac OSX FF
Desktop Mac OSX W
Отображение фона
|
Chrome (Win 7) |
Safari (Mac) |
Chromium (Mac) |
Chrome (Nexus 4) |
Chrome (Galaxy) |
| Background |
3.94 |
16.5 |
15.742 |
181.841 |
175 |
| Background-color |
4 |
15.2 |
14.234 |
167.645 |
164 |
| Background-color(A)
|
4 |
14.7 |
20.342 |
160.354 |
159.9 |
| Background-color(O) |
34 |
65 |
30.88 |
451.335 |
371.9 |
Скорость загрузки страниц
Выводы
- Ограничить вставку элементов на мобильных устройствах
- Использовать GPU
- Селекторы - классы
- Проверять новые технологии
- Сжимать загружаемый контент