View
1.327
Download
6
Category
Preview:
DESCRIPTION
В своей работе мы постоянно используем инструменты, призванные облегчить нам жизнь. Но как хорошо мы ими на самом деле владеем? И почему мы пренебрегаем их суперсилами? Например, Chrome DevTools — это не только отладчик и инспектор HTML. Но когда у нас в руках молоток, кругом мерещатся гвозди. Десятки мегабайт и процентов загрузки процессора на вкладку браузера — верный признак того, что пора учиться пользоваться микроскопом. Роман предложит освоить что-то посложнее молотка и расскажет о том, какую реальную пользу можно получить от профилирования, как найти в огромном отчёте проблему с кодом и что лучше — написать в коде десяток console.log или async debug.
Citation preview
Суперсилы Chrome Developer Tools
Роман Сальников
1
Код проекта – черный ящик
События ➔
?➔ Отрисовка
Внешние API ➔ ➔ Данные
Время ➔ ➔ Внешние API
3
4
DevTools обывателя и профессионала
5
Тренировочная площадка
6
1. Отладка
Баг – элемент добавляется дважды
8
Хардкорная обычная отладка1. Ищем по проекту что-то похожее
2. Читаем код
3. Ставим console.log и/или брэйкпоинт
4. Повторяем
9
Есть кое-что
мощнее
Умные брэйкпоинты— Изменения DOM
— XHR запросы
— Event Listeners
— Workers
11
Event Listeners
12
DOM Breakpoints
13
Асинхронные коллстэкиПробивают сквозь пространство и время
— setInterval
— setTimeout
— XMLHttpRequest
— promises
— requestAnimationFrame
— и т.д, и т.п
14
Обычный vs. Async коллстэкКоллстэк курильщика Коллстэк здорового человека
15
Async + Breakpoints = ❤1. Включаем Async Call Stack
2. Ловим результат бага (DOM, XHR Breakpoints)
3. Можем вернуться к истокам проблемы
4. ???
5. Profit
16
Console
$0 + getEventListeners
18
Отладка объектов JavaScript
19
var watchMe = {};
Object.observe(watchMe, function() {
debugger;
});
watchMe.foo = 'bar'; // выполнение останавливается
01.
02.
03.
04.
05.
06.
20
Snippets
21
Инструменты для отладки— Умные брэйкпоинты
— Async Call Stack
— Console API
22
2. FPS
Страница заметно
тормозит
FPS meter
25
Timeline
26
Timeline— JavaScript
— Recalculate Style , Layout
— Paint
27
Recalculate Style— Собирает все стили
— Находит соответствие между элеметами DOM и селекторами
— Высчитывает Calculated Style для каждого элемента
28
Layout— Высчитывает геометрии элементов на основе стилей
29
Paint— Преобразует все, что было подсчитано, в пиксели
— Отрисовывает на экране
30
31
CPU profiler
32
Диагностика FPS JavaScript— CPU Profiler Tree – дает снимок, не дает понимания динамики
— CPU Profiler Chart – лучше, но сложно синхронизировать с Timeline
33
34
Прокачанный Timeline— Включить режим экспериментов DevTools в chrome://flags
— Включить дополнительные настройки
— Наслаждаться результатом
35
Диагностика FPS Styles
36
Диагностика FPS Styles
37
Forced synchronous layout StylesBad way
Изменяемразмеры A
➔Invalidate
layout➔
Получаемразмеры
➔ Layout ➔Изменяемразмеры B
➔ . . .
Good way
Получаемвсе размеры
➔Изменяем
все размеры➔
Invalidatelayout
➔ Layout ➔ . . .
38
Мы поняли— updateHeaderPosition – корень всех проблем
— Из нее вызывается много тяжелого кода jQuery
— Есть проблема с инвалидацией лэйаута
39
function getHeaderOffset() {
return $(window).scrollTop()
- $('#pageHeader').offset().top;
}
01.
02.
03.
04.
40
// updateHeaderPosition
$('#pageHeaderText').css({
top: headerHeight/2 - (getHeaderOffset() / 2)
});
...
$('.letter').animate({
paddingLeft: getHeaderOffset() / 10,
paddingRight: getHeaderOffset() / 10
}, 0);
01.
02.
03.
04.
05.
06.
07.
08.
09.
41
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.
42
После исправления анимации
43
Диагностика FPS Paint— Paint Rectangles – показывает, какая область экрана перерисовывается
на каждом кадре.
— Чем реже требуется перерисовка, тем лучше
— Чем меньше область перерисовки, тем лучше
44
Решение проблемы с перерисовкой
45
Timeline после всех изменений
46
Так что же всё-таки делать с FPS?— Убедиться, что есть проблема, с помощью FPS meter
— Записать активность в Timeline
— JavaScript CPU Profiler / Canary Timeline
— Styles Обращать внимание на предупреждения
— Paint Paint Rectangles, скрыть подозрительные элементы
47
3. Память
Timeline показывает память
50
Heap Snapshots
51
Detached Nodes
52
После устранения проблемы
53
Память— Изолируем проблему
— Проверяем с помощью Timeline (forced GC)
— Определяем, что искать
— Сравниваем до/после через Heap Snapshots
54
4. Итоги
Chrome DevTools помогает— Отлаживать
— Изучать незнакомый код
— Искать проблемы с производительностью
56
Пример из этой презентацииhttps://github.com/bardt/devtools_training_app
Пул-реквесты приветствуются. Сделаем этот проект еще хуже!
57
Если хочется еще deeperОтладка
— Debugging Asynchronous JavaScript with Chrome DevTools – Pearl Chen
— Using the Console
— Breakpoints on JavaScript Event Listeners
58
Если хочется еще deeperFPS и память
— Advanced Performance Tooling in Chrome DevTools – Paul Irish
— Parallax Performance [CSSConfUS2014] – Paul Irish
— JavaScript Memory Management – Addy Osmani
— GPU Boundedness – Nat Duca
59
Firefox— Debugging with Firefox
— Performance fundamentals
Opera— Dragonfly documentation
60
К чему это все?— Осваивайте инструменты, упрощающие вам жизнь
— Не растрачивайте время впустую
— Пишите больше фич и получайте от этого кайф
61
Спасибо!
Суперсилы Chrome Developer Tools
Роман Сальников
r.salnikov@2gis.ru
techno.2gis.ru
63
Recommended