Upload
yandex
View
1.288
Download
7
Embed Size (px)
DESCRIPTION
В своей работе мы постоянно используем инструменты, призванные облегчить нам жизнь. Но как хорошо мы ими на самом деле владеем? И почему мы пренебрегаем их суперсилами? Например, Chrome DevTools — это не только отладчик и инспектор HTML. Но когда у нас в руках молоток, кругом мерещатся гвозди. Десятки мегабайт и процентов загрузки процессора на вкладку браузера — верный признак того, что пора учиться пользоваться микроскопом. Роман предложит освоить что-то посложнее молотка и расскажет о том, какую реальную пользу можно получить от профилирования, как найти в огромном отчёте проблему с кодом и что лучше — написать в коде десяток console.log или async debug.
Citation preview
Код проекта - черный ящик
События ➔
?➔ Отрисовка
Внешние API ➔ ➔ Данные
Время ➔ ➔ Внешние API
3
4
DevTools обывателя
5
DevTools профессионала
6
Тренировочная площадка
7
1. Отладка
Баг - элемент добавляется дважды
9
Хардкорная обычная отладка1. Ищем по проекту что-то похожее
2. Читаем код
3. Ставим console.log и/или брэйкпоинт
4. Повторяем
10
Есть кое-что
мощнее
Умные брэйкпоинты— Изменения DOM
— XHR запросы
— Event Listeners
— Workers
12
Event Listeners
13
DOM breakpoint
14
Асинхронные коллстэкиПробивают сквозь пространство и время
— setInterval
— setTimeout
— XMLHttpRequest
— promises
— requestAnimationFrame
— и т.д, и т.п
15
Обычный vs. Async коллстэкКоллстэк курильщика Коллстэк здорового человека
16
Async + breakpoints = ❤1. Включаем Async call stack
2. Ловим результат бага (DOM, XHR breakpoints)
3. Можем вернуться к истокам проблемы
4. ???
5. Profit
17
Async + breakpoints = ❤
18
Async + breakpoints = ❤
19
Console
$0 + getEventListeners
21
Events
22
Отладка объектов JavaScriptvar watchMe = {};
Object.observe(watchMe, function() {
debugger;
});
watchMe.foo = 'bar'; // выполнение останавливается
01.
02.
03.
04.
05.
06.
23
Snippets
24
Инструменты для отладки— Умные брэйкпоинты
— Async call stack
— Console API
25
2. FPS
Страница заметно
тормозит
FPS meter
28
Timeline
29
Timeline
30
Timeline
31
Timeline— JavaScript
— Recalculate Style , Layout
— Paint
32
Recalculate Style— Собирает все стили
— Находит соответствие между элеметами DOM и селекторами
— Высчитывает Calculated Style для каждого элемента
33
Layout— Высчитывает геометрии элементов на основе стилей
34
Paint— Преобразует все, что было подсчитано, в пиксели
— Отрисовывает на экране
35
Timeline
36
37
CPU profiler
38
CPU profiler (Heavy)
39
CPU profiler (Chart)
40
CPU profiler (Chart)
41
Диагностика FPS JavaScript— CPU Profiler Tree - дает снимок, не дает понимания динамики
— CPU Profiler Chart - лучше, но сложно синхронизировать с Timeline
42
43
Прокачанный Timeline— Включить режим экспериментов DevTools в chrome://flags
— Включить дополнительные настройки
— Наслаждаться результатом
44
Прокачанный Timeline
45
Прокачанный Timeline
46
Прокачанный Timeline
47
Прокачанный Timeline
48
Диагностика FPS Styles
49
Forced synchronous layout StylesBad way
Изменяемразмеры A
➔Invalidate
layout➔
Получаемразмеры
➔ Layout ➔Изменяемразмеры B
➔ . . .
Good way
Получаемвсе размеры
➔Изменяем
все размеры➔
Invalidatelayout
➔ Layout ➔ . . .
50
Диагностика FPS Styles
51
Мы поняли:— updateHeaderPosition - корень всех проблем
— Из нее вызывается много тяжелого кода jQuery
— Есть проблема с инвалидацией лэйаута
52
function getHeaderOffset() {
return $(window).scrollTop()
- $('#pageHeader').offset().top;
}
01.
02.
03.
04.
53
$('#pageHeaderText').css({
top: headerHeight/2 - (getHeaderOffset() / 2)
});
...
$('.letter').animate({
paddingLeft: getHeaderOffset() / 10,
paddingRight: getHeaderOffset() / 10
}, 0);
01.
02.
03.
04.
05.
06.
07.
08.
54
var headerOffset = getHeaderOffset();
var destPadding = headerOffset / 10;
...
$('#pageHeaderText').css({
top: headerHeight/2 - (headerOffset / 2)
});
$('.letter').css({
paddingLeft: destPadding,
paddingRight: destPadding
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
55
После исправления анимации
56
Диагностика FPS Paint— Paint Rectangles - показывает, какая область экрана перерисовывается
на каждом кадре.
— Чем реже требуется перерисовка, тем лучше
— Чем меньше область перерисовки, тем лучше
57
Paint Rectangles
58
Решение проблемы с перерисовкой
59
Решение проблемы с перерисовкой
60
Timeline после всех изменений
61
62
Так что же всё-таки делать с FPS?— FPS meter
— Timeline
— JavaScript CPU Profiler / Canary Timeline
— Styles Обращаем внимание на предупреждения
— Paint Paint Rectangles, скрываем подозрительные элементы
63
3. Память
Timeline умеет показывать расходуемуюпамять
66
Heap snapshots
67
Heap snapshots
68
Heap snapshots
69
Detached nodes
70
71
После устранения проблемы
72
Память— Изолируем проблему
— Проверяем с помощью Timeline (forced GC)
— Определяем, что искать
— Сравниваем до/после через Heap Snapshots
73
Итоги
Chrome DevTools помогает— Отлаживать
— Изучать незнакомый код
— Искать проблемы с производительностью
75
Пример из этой презентацииhttps://github.com/bardt/devtools_training_app
Пул-реквесты приветствуются. Сделаем этот проект еще хуже!
76
Если хочется еще deeperОтладка
— Debugging Asynchronous JavaScript with Chrome DevTools - Pearl Chen
— Using the Console
— Breakpoints on JavaScript Event Listeners
77
Если хочется еще deeperFPS и память
— Advanced performance tooling in Chrome DevTools - Paul Irish
— Parallax Performance [CSSConfUS2014] - Paul Irish
— JavaScript Memory Management - Addy Osmani
— GPU boundedness - Nat Duca
78
Firefox— Debugging with Firefox
— Performance fundamentals
Opera— Dragonfly documentation
79
К чему это все?— Осваивайте инструменты, упрощающие вам жизнь
— Не растрачивайте время впустую
— Пишите больше фич и получайте от этого кайф
80
Спасибо!