Пластилиновый код: как перестать кодить и начать житьMoscow.pm
Елена Шишкина, ведущий программист Деньги Mail.Ru. Она покажет практический пример лени как двигателя прогресса в отдельно взятом веб-проекте:
- Надоело писать код? Будем думать, как его не писать!
- Боремся с однотипным кодом. Боремся с неоднотипным кодом.
- Код, которого не существует, и код, который существует.
- Следите за руками: программируем на конфигах!
- Как жить дальше?
Пластилиновый код: как перестать кодить и начать житьMoscow.pm
Елена Шишкина, ведущий программист Деньги Mail.Ru. Она покажет практический пример лени как двигателя прогресса в отдельно взятом веб-проекте:
- Надоело писать код? Будем думать, как его не писать!
- Боремся с однотипным кодом. Боремся с неоднотипным кодом.
- Код, которого не существует, и код, который существует.
- Следите за руками: программируем на конфигах!
- Как жить дальше?
QA Fest 2019. Андрей Солнцев. Selenide для профиQAFest
Если вы устали от примитивных "Hello World" примеров и хотите знать больше про кишки Selenide и подводные камни, приходите на этот доклад. Обсудим параллельный запуск, рулы и листенеры, трюки с помощью JavaScript и прокси и всё такое.
А ещё лучше, если вы сами предложите свою тему. Повлияй на доклад!
Миша Рудрастых: Введение в HTTP API WordPressRuslan Begaliev
Всё чаще и чаще в реальной жизни нам приходится взаимодействовать со сторонними сервисами через API — от получения количества лайков до подключения к платёжным шлюзам, а значит мы не можем игнорировать встроенный в WordPress механизм, предназначенный специально для этого.
В своей работе мы постоянно используем инструменты, призванные облегчить нам жизнь. Но как хорошо мы ими на самом деле владеем? И почему мы пренебрегаем их суперсилами? Например, Chrome DevTools — это не только отладчик и инспектор HTML. Но когда у нас в руках молоток, кругом мерещатся гвозди. Десятки мегабайт и процентов загрузки процессора на вкладку браузера — верный признак того, что пора учиться пользоваться микроскопом.
Роман предложит освоить что-то посложнее молотка и расскажет о том, какую реальную пользу можно получить от профилирования, как найти в огромном отчёте проблему с кодом и что лучше — написать в коде десяток console.log или async debug.
QA Fest 2019. Андрей Солнцев. Selenide для профиQAFest
Если вы устали от примитивных "Hello World" примеров и хотите знать больше про кишки Selenide и подводные камни, приходите на этот доклад. Обсудим параллельный запуск, рулы и листенеры, трюки с помощью JavaScript и прокси и всё такое.
А ещё лучше, если вы сами предложите свою тему. Повлияй на доклад!
Миша Рудрастых: Введение в HTTP API WordPressRuslan Begaliev
Всё чаще и чаще в реальной жизни нам приходится взаимодействовать со сторонними сервисами через API — от получения количества лайков до подключения к платёжным шлюзам, а значит мы не можем игнорировать встроенный в WordPress механизм, предназначенный специально для этого.
В своей работе мы постоянно используем инструменты, призванные облегчить нам жизнь. Но как хорошо мы ими на самом деле владеем? И почему мы пренебрегаем их суперсилами? Например, Chrome DevTools — это не только отладчик и инспектор HTML. Но когда у нас в руках молоток, кругом мерещатся гвозди. Десятки мегабайт и процентов загрузки процессора на вкладку браузера — верный признак того, что пора учиться пользоваться микроскопом.
Роман предложит освоить что-то посложнее молотка и расскажет о том, какую реальную пользу можно получить от профилирования, как найти в огромном отчёте проблему с кодом и что лучше — написать в коде десяток console.log или async debug.
Here is an informational slideshow about Dominican Young Adults, USA, a member state of the International Dominican Youth Movement. Slideshow created by DYA Communications Chair Sean Mundy in May 2012.
Презентация мастер-класса "Создание динамических пользовательских интерфейсов и AJAX-приложений промышленного класса с помощью Dojo Toolkit и Zend Framework"
Семинар по Node.js в КПИ 20 октября 2014. Докладчики: Тимур Шемсединов, Никита Савченко, Максим Петренко. Краткое содержание:
* Что такое Node.js и как работает JavaScript в V8
* Профессионалы расскажут, почему они выбрали Node.js
* Вы узнаете его сильные и слабые стороны и где его лучше применять
* Будет полный обзор особеностей и внутреннего строения Node.js
* Примеры внедрения и Highload-проекты
* Вопросы развертывания, хостинг, тестирования, и отладки
* Где и что учить, что читать, как осваивать
Мир мобильных телефонов очень сильно изменил нашу жизнь. В наше время невозможно представить современного человека, без этого чудо устройства. На рынке появляется все больше устройств и приложений. И чтобы удобнее пользоваться этими приложениями пользователи выбирают “умные” телефоны, или как их еще принято называть смартфоны. В своем докладе я хочу поделиться своим опытом автоматизации приложений под Android и iOS. Я расскажу о том, какие инструменты автоматизации я использовал. Поговорим о недостатках этих инструментов и какие из них стоит использовать у себя на проекте.
Баба-Яга против! — Роман Дворнов, Ostrovok.ruYandex
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
3. Все любят jQuery
• Простота и более низкий порог вхождения;
• легко написать плохой код;
• кроссбраузерный фасад для рутинных операций;
• не все понимают, что происходит за этим фасадом;
• «there is a jQuery plugin for it»;
• значительная часть кода вам больше не принадлежит.
16. Профилирование JS
Зачем:
•для получения полного отчета о том на что тратит время ваш js код.
Чем профилировать:
•console.profile;
•YUI profiler;
•любой другой самописный профайлер.
23. YUI Profiler
Зачем:
•для браузеров, в которых нет профайлера;
•можно профилировать только обращения к jQuery.
developer.yahoo.com/yui/profiler
24. YUI Profiler
Использование:
YAHOO.tool.Profiler.registerFunction('init', window);
// профилируемый код
init();
var report = YAHOO.tool.Profiler.getFunctionReport('init');
YAHOO.tool.Profiler.unregisterFunction('init');
25. YUI Profiler
Достоинства:
•работает везде;
•хорошо подходит для профилирования jQuery (например, можно
логировать только $.fn.*, $.*).
Недостатки:
•нельзя отличить $(selector) от $(html), $(element), $(function);
•логирует вложенные вызовы, что может искажать статистику;
•нет own time, только total time.
26. jquery.profile.js
Зачем:
•потому что велосипеды — это здорово;
•чтобы избавиться от недостатков YUI Profiler.
Плюсы:
•не логирует вложенные вызовы;
•раздельно логирует $(selector), $(html), $(function) и $(element).
github.com/private-face/jquery.profile
35. 1. Селекторы разбираются cправа-налево
$('div.post a.vote-up') // плохо
$('.post .vote-up'); // лучше
$('.vote-up'); // еще лучше
36. 2. Сужайте область поиска
•Задавайте контекст
$('div.post a.vote-up'); // плохо
$('#content').find('.vote-up'); // хорошо
•Используйте children, closest и т.п.
$('ul#list').find('li'); // плохо
$('ul#list').children('li'); // хорошо
$('li').parents('div').first(); // плохо
$('li').closest('div'); // хорошо
37. 3. Кешируйте выборки и используйте chaining
$('div.post').mousemove(function() ...);
$('div.post').find('a').click(function() ...); // плохо
var posts = $('div.post');
posts.mousemove(function() ...);
posts.find('a').click(function() ...); // хорошо
$('div.post')
.mousemove(function() ...)
.find('a').click(function() ...)
.end()
.find('.invisible').hide(); // тоже хорошо
38. 4. Делегируйте обработку событий
•Избавьтесь от live. Совсем.
$('a').live('click', function() {... // плохо
$(document).on('click', 'a', function() {... // супер
•Замените bind на on/delegate
$('.vote').click(function() {... // плохо
$('#content').on('click', '.vote', function() {... // хорошо
39. Слишком много делегирования
Симптомы:
•задержка между событием и реакцией на него;
•большое количество вызовов $.fn.is в профайлере.
Оптимизация:
•отсекать лишние on/delegate;
•использование bind вместо on/delegate.
40. Повторяющиеся события
Симптомы:
•«тормоза» в момент ресайза, скролла или интенсивного ввода текста;
•профайлер показывает большое количество вызовов обработчиков
событий keydown, scroll, resize и т.п.
Оптимизация:
•Группировка нескольких вызовов события в один путем применения
декораторов debounce и throttle.
benalman.com/projects/jquery-throttle-debounce-plugin/
43. Оптимизация $(element)
внутри each/map
Симптом:
•много времени тратится на $(element).
Оптимизация:
•использовать один общий jQuery–объект для всех элементов внутри
each/map;
•quickEach.
44. // создаем общий jQuery-объект за пределами map/each:
var a = $([0]);
$('a').each(function() {
// подставляем текущий элемент в объект
a[0] = this;
// и используем его как обычный $(this)
// ...
});
45. Недостаток:
•Нельзя использовать во вложенных асинхронных функциях.
var a = $([0]);
$('a').each(function() {
a[0] = this;
a.click(function() {
// всегда будет выводиться текст последней ссылки
alert(a.text());
});
});
47. 1. Клонирование быстрее создания
// создание
var soldiers = $.map(names, function(name) {
return $('<div class="soldier"><span>' + name + '</span></div>');
});
// клонирование
var bobaFett = $('<div class="soldier"><span>Boba</span></div>');
var name = bobaFett.find('span');
var soldiers = $.map(names, function(name) {
name.text(name);
return bobaFett.clone();
});
48. 2. Минимизируйте число операций вставки в DOM
// вставка сразу после создания
$.each(messages, function(_, text) {
$('#history').append('<div class="message">' + text + '</div>');
});
// вставка пакетом
var fragment = $(document.createDocumentFragment());
$.each(messages, function(_, text) {
fragment.append('<div class="message">' + text + '</div>');
});
$('#history').append(fragment);
49. Restyle, layout, paint
Restyle:
•пересчет стилей не меняющих геометрию объектов.
Layout:
•пересчет геометрии.
Paint:
•перерисовка после пересчета свойств и геометрии.
50. Restyle, layout, paint
• Время restyle, layout, paint сильно зависит от разметки;
• изменения откладываются на потом;
• иногда браузер вынужден применить изменения досрочно:
– offsetTop/Left/Width/Height
– scrollTop/Left/Width/Height
jQuery.fn.css
– clientTop/Left/Width/Height
– getComputedStyle(), currentStyle [IE]
51. $('div').click(function() {
var e = $(this);
e.css('color', e.css('backgroundColor'));
e.css('width', 100);
e.css('font-size', 20);
return false;
});
52. $('div').click(function() {
var e = $(this);
e.css('width', 100);
e.css('color', e.css('backgroundColor'));
e.css('font-size', 20);
return false;
});
53.
54. Оптимизация .css
• Проводить операции с элементами с display: none, либо до вставки в
документ;
• заменить несколько css на add/removeClass;
• группировать запросы CSS-свойств в начале функции (когда очередь
restyle и layout пуста);
• не чередовать запросы и установку CSS у элемента.
55. Инициализация по требованию
Показания к применению:
•При загрузке страницы одновременно инициализируются множество
одинаковых контролов (модулей, плагинов).
Оптимизация:
•Инициализировать каждый контрол в момент первого обращения к
нему.
56. Повышение отзывчивости
Симптом:
•В момент выполнения ресурсоемкого кода браузер плохо реагирует
внешние воздействия.
Оптимизация:
•Откладывать трудоемкие итерации через setTimeout.
57. Общие рекомендации
• Кешируйте все, что может пригодиться;
• отсекайте лишние выборки, инициализацию плагинов и модулей, на
страницах, на которых они точно не нужны;
• медленный JavaScript — это не единственная и не всегда главная
причина «тормозов» на сайте;
• не бойтесь пересматривать требования.
- Простота ведет к тому, что плохой код написать становится еще легче. - обратной стороной кроссбраузерного фасада является то, что далеко не все понимают что происходит за этим фасадом. - а обилие плагинов ведет к тому, что большая часть кода перестает вам принадлежать. И в итоге часто получается, что когда объем j Query кода и количество одновременно подключенных на странице плагинов превышает некий критический порог, сайт начинает жутко тормозить.
Страница начинает при загрузке залипать, анимация проигрывается рывками, возникают непонятные задержки между событием и реакцией на это событие. И это проблема.
и этим зарабатывает себе пару профессиональных заболеваний. вы их наверняка знаете.
Вадим, есть хорошие новости для нас? Как раз для таких случаев существуют жаваскриптовые профайлеры
Рекомендую послушать доклад Артемия Ломова «Быстрый удар точно в цель» сегодня в 15.30. Там артемий подробно расскажет как более лучше писать селекторы.
Однако увлекаться делегированием тоже не стоит. Потому что при большом количестве делегированных событий вы можете столкнуться с другой проблемой.
И раз мы заговорили. Самое время рассказать про то, как происходит рендеринг страницы в браузере. О процессах
стрелочка
стрелочки
разъезжающаяся текстарея, плейер, скрытые элементы