#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов

Sep 19, 20151 like664 views

Документ рассматривает производительность JavaScript и UI, обсуждая важность времени исполнения кода и быстроты реакции приложения. Он описывает факторы, вызывающие подвисание приложений, включая блокировку event loop и неэффективные алгоритмы. В документе также показаны примеры блокирующего и неблокирующего кода, подчеркивая преимущества и недостатки каждого подхода.

Technology

pragmadash Денис Речкунов
Ведущий JavaScript-разработчик
Отзывчивый UI без блокировки Event Loop

Что такое производительность JavaScript?
• Время исполнения кода
• Алгоритмические оптимизации
• Куча нечитабильного "оптимизированного" кода
• Грязные хаки для VM, которые ускоряют код
2

Что такое производительность UI?
• Как быстро работает приложение для пользователя
• Насколько быстро оно реагирует на действия
• Приложение не подвисает
3

Почему приложение может подвисать?
• iframe – убийца производительности
• repaint & re`ow – неоптимальная верстка или CSS
• Блокировка Event Loop
4

#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов

Почему Event Loop блокируется?
• Внешние тяжелые обработчики внутри браузера
repaint & re`ow, iframe
• Блокирующий JavaScript-код
6

Блокирующий код
function sort(arr) {
var tmp = null;
for(var i = 0; i < arr.length; i++)
for(var j = 0; j < arr.length - 1; j++)
if(arr[j] > arr[j+1]) {
tmp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = tmp;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
7

В чем же он блокирующий?
• Не рассчитан на очень большие массивы
• На время сортировки все приложение зависнет
8

Неблокирующая версия
function sortStep(arr, i, j, callback) {
if(arr[j] > arr[j + 1]) {
var tmp = arr[j];
var[j] = arr[j + 1];
arr[j + 1] = tmp;
}
if (++j === arr.length - 1) {
i++; j = 0;
}
if (i === arr.length) {
callback();
return;
}
setTimeout(sortStep.bind(this, arr, i, j, callback));
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
9

Неблокирующая версия
function sort(arr, callback) {
if (arr.length < 2) {
callback();
return;
}
sortStep(arr, 0, 0, callback);
}
01.
02.
03.
04.
05.
06.
07.
10

Преимущества неблокирующего кода
• UI всегда жив и обрабатывает события
• Параллельное исполнение функций
• Пользователю приятнее работать с приложением
12

Недостатки неблокирующего кода
• Он сложный
• Общее время исполнения больше
13

Полезные ссылки
• Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014
• Loupe by Philip Roberts
14

Catberry.js — это изоморфный фреймворк с flux-архитектурой, предназначенный для создания веб-компонентов с возможностью серверного рендеринга. Компоненты описываются в формате JSON и имеют специфическую логику для рендеринга, привязки событий и работы со store. Фреймворк поддерживает прогрессивный рендеринг, позволяя быстро загружать контент для пользователей.

#5 "React.js" Антон АртамоновJSib

Документ обсуждает преимущества и особенности использования React.js для разработки веб-приложений, акцентируя внимание на важности удобства поддержки, тестирования и расширения приложений. Он выделяет ключевые концепции, такие как виртуальный DOM, реактивное программирование и компонентный подход, а также преимущества кэширования и использования JSX. В конце упоминаются компании, которые применяют React, и подчеркиваются основные идеи, такие как необходимость эффективного применения компонентов и быстрого рендеринга.

#7 "Многообещающий JavaScript – Promises" Денис РечкуновJSib

Документ обсуждает возможности и преимущества использования асинхронного кода в JavaScript, акцентируя внимание на Promises как более удобном способе обработки асинхронных операций по сравнению с callback-ами. Рассматриваются исторические предпосылки возникновения Promises, их спецификации и функциональные возможности, такие как chaining и обработка ошибок. Также упоминаются полезные методы, такие как Promise.all и Promise.race, которые позволяют эффективно управлять несколькими асинхронными процессами.

React.js – introAndrew Makarow

Документ представляет собой введение в библиотеку React.js, подчеркивающее ее отличие от других MVC-фреймворков и акцентирующее внимание на ее роли в создании пользовательских интерфейсов. Основные концепции, такие как виртуальный DOM, управление данными и жизненный цикл компонентов также обсуждаются. Приведены ссылки на демонстрационные материалы и ресурсы для дальнейшего изучения.

#13 "Управление состоянием в Redux" Роман СальниковJSib

Документ обсуждает управление состоянием в Redux, описывая ключевые концепции, такие как создание хранилища, редюсеры и действия. Он также затрагивает темы маршрутизации, асинхронных запросов и написания тестов. В заключение упоминаются преимущества и недостатки использования Redux в приложениях.

Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Ontico

Документ описывает процесс разработки нового фронтенда для сайта tinkoff.ru, включая обзор технологий и оптимизацию кода. Основное внимание уделяется переиспользованию компонентов, улучшению производительности и упрощению архитектуры приложения. Также рассматриваются стратегии сборки и деплоя, а также использование различных библиотек и инструментов для достижения эффективности.

«Изоморфные js приложения с использованием catberry.js», Денис РечкуновDevDay

Документ обсуждает изоморфные приложения на JavaScript, сосредотачиваясь на инструменте catberry.js, который обеспечивает одностраничные приложения без жертвенности SEO. Приводятся преимущества и недостатки различных существующих решений, а также объясняется концепция модульного модуля в catberry.js и его архитектура, включая потоковый рендеринг и параллельное выполнение. Кроме того, документ упоминает о поддержке open source и предоставляет ссылки на дополнительные ресурсы.

Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico

Документ обсуждает Vue.js и его серверный аналог vueserver.js, описывая их особенности и сравнительные характеристики. Представлены технические детали, примеры кода и различные методы работы с компонентами и директивами. Также рассматриваются преимущества и недостатки использования vue.server, а также рекомендации по переходу на более новую версию Vue 2.0.

Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico

Документ рассматривает вопросы быстрого рендеринга с использованием различных дом-шаблонизаторов, таких как AngularJS, ReactJS и менее известные библиотеки. Выделяются плюсы и минусы каждого подхода, обсуждаются проблемы производительности и предлагаются решения для оптимизации. В частности, упоминается шаблонизатор Temple, который обеспечивает быстрое обновление DOM и переиспользование шаблонов.

Как мы ускоряли WebGL / Мстислав Живодков (2GIS)Ontico

Документ описывает оптимизацию приложения на основе WebGL, в частности улучшение производительности за счёт объединения геометрий, что позволило увеличить FPS с 20 до 50. Также упоминаются инструменты и библиотеки, такие как three.js и rbush, которые использовались для облегчения зависимости и данных. Важные аспекты, включая профилирование и проблемы z-fighting, также рассматриваются.

Современный фронтенд -- как не утонуть в море хайпа?Vladimir Malyk

Документ обсуждает современный фронтенд, акцентируя внимание на языке JavaScript и его эволюции за 20 лет. Он затрагивает различные фреймворки, библиотеки и инструменты, такие как vanillajs, jQuery, Backbone, Marionette, а также новые спецификации ES6 и ES7, которые вводят модули и другие улучшения. Основное внимание уделяется требованиям рынка к UX и интеграции современных технологий для создания динамичных веб-приложений.

55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico

Документ предлагает более 55 советов по улучшению кода на JavaScript, включая принципы модульности, единой ответственности и оптимизации производительности. Особенное внимание уделяется использованию AngularJS, соблюдению код-стиля и тестированию приложений. Авторы призывают к внедрению современных методологий разработки и рефакторинга кода для повышения его качества.

Переезжаем с Zabbix на Prometheus / Василий Озеров (fevlake)Ontico

Документ описывает переход от Zabbix к Prometheus для мониторинга систем и приложений, включая детали настройки и конфигурации. Приведены преимущества Prometheus, такие как простота конфигурации, быстрая обработка данных и поддержка различных экспортеров. Также упоминаются проблемы, с которыми сталкиваются при использовании InfluxDB, и положительный опыт в использовании Prometheus с различными сервисами.

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib

Документ описывает развитие клиентской разработки на JavaScript с акцентом на Vue и Webpack, охватывая эволюцию от jQuery до современного компонентного подхода. Основное внимание уделяется принципам реактивного программирования, модульности и оптимизации приложений, а также взаимодействию Vue и Webpack. В документе также рассматриваются примеры кода для создания компонентов и настройки сборки приложения с использованием Webpack.

Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)7bits

Документ описывает стажировку 2014 года и знакомит с фреймворком Sails, основанным на Node.js и Express. Он охватывает установку и конфигурацию необходимых компонентов, создание веб-приложения по шаблону MVC, а также основные функции и структуры каталогов. В заключение упоминается использование ORM и детализация работы с моделями и контроллерами в приложении.

How to build solid CI-CD pipeline / Илья Беда (beda.software)Ontico

Документ описывает опыт автора в коммерческом программировании и автоматизации разработки с использованием Docker. Основное внимание уделяется решению проблем, связанным с ручным управлением инфраструктурой, и важности автоматизации процессов через контейнеризацию. Включены примеры кода для автоматизации развертывания приложений и советы по улучшению разработки и деплоя.

base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)Ontico

Документ описывает проект base.network, который представляет собой опенсорсную пиринговую сеть на JavaScript, обеспечивающую децентрализованное взаимодействие без центральных серверов. Он подробно рассматривает архитектуру сети и возможности клиентских приложений, а также проблемы существующих пиринговых технологий. Включен обзор криптографии, используемой в проекте, и ссылки на репозитории GitHub для серверной и клиентской части.

"Посмотрим на Акку-Джаву" Дмитрий МантулаFwdays

Документ описывает развитие вычислительных систем, включая управляемые сервера и контейнеры, а также важные тренды, такие как масштабируемость и высокая доступность. Он также рассматривает концепции реактивного программирования, особенности акторов и их использование в различных языках программирования, таких как Java и Scala, а также включает ссылки на различные версии 'Reactive Manifesto'. Дополнительно упоминаются компоненты экосистемы Akka и их применение в построении надежных систем.

Быстрый старт iOS приложения на примере iOS Почты Mail.Ru / Николай Морев (Ma...Ontico

Документ описывает оптимизацию времени запуска приложения почты mail.ru на iOS, выявляя проблемы медленного запуска и предлагая решения. Оптимизация включает анализ производительности с использованием time profiler, автоматизацию тестирования и корректировку кода для повышения эффективности. В результате оптимизаций удалось значительно улучшить время запуска и повысить удовлетворенность пользователей.

Превышаем скоростные лимиты с Angular 2Oleksii Okhrymenko

Документ обсуждает производительность Angular 2, включая факторы, влияющие на скорость загрузки и работу приложений. В нем представлены советы по оптимизации, такие как использование производственного режима, отслеживание изменений и предварительная компиляция шаблонов. В также описываются методы улучшения восприятия производительности и многопоточности.

Prometheus мониторинг микросервисных приложений / Виталий ЛевченкоOntico

Доклад Виталия Левченко посвящён мониторингу микросервисных приложений с помощью Prometheus, описывающему проблемы, возникающие при внедрении микросервисов и их мониторинга. Он акцентирует внимание на простоте решений, правильных метриках и необходимости использования инструментов для автоматизации и агрегации данных. Prometheus выделяется как производительное и гибкое решение для мониторинга, с положительным восприятием среди программистов, но с новыми вызовами для администраторов.

Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays

Документ описывает разработку одностраничного веб-приложения с использованием Vue.js и RethinkDB для реализации реального времени взаимодействия. Основные темы включают преимущества выбранного стека технологий, а также сравнение методов обновления данных, таких как polling и changefeeds. Также рассматриваются особенности системы компонентов Vue.js и инструменты для разработчиков.

Конструктор / Денис Паясь (Яндекс)Ontico

Документ описывает процесс разработки различных функций для веб-платформы, акцентируя внимание на разработке компонентов и использованию систем управления дизайном. В нём представлены примеры реализации функций, улучшения дизайнерских процессов и внедрения адаптеров для взаимодействия между фронтендом и бэкендом. В итоге документ подчеркивает значительные преимущества, такие как сокращение времени разработки и улучшение консистентности дизайна.

Dump-IT Загрузка и инициализация JavaScriptMikhail Davydov

Документ содержит информацию о загрузке и инициализации JavaScript приложений с использованием различных методов, таких как последовательная и параллельная загрузка скриптов, а также использование AppCache и AMD. Рассмотрены преимущества этих подходов и предоставлены ссылки на ресурсы для дальнейшего изучения. Дополнительно представлены рекомендации по оптимизации загрузки и управлению версиями скриптов.

Алексей Фомкин, Практическое применение Web WorkersAleksey Fomkin

Документ представляет собой обзор технологии web workers, позволяющей выполнять код параллельно с основным потоком выполнения, обмениваться сообщениями и не манипулировать DOM. Он также обсуждает основные применения, такие как шифрование и конвертация файлов, а также проблемы, с которыми сталкиваются разработчики, включая дублирование кода и затраты на контекстный переключатель. В заключение, автор подчеркивает важность информирования пользователей о процессе выполнения для предотвращения недовольства неизвестностью.

Javascript-фреймворки:  должен остаться только одинSergey Xek

Доклад Сергея Аверина освещает процесс выбора нового веб-фреймворка для компании с 5 миллионами пользователей, где текущие технологии устарели и вызвали проблемы с качеством кода. В результате анализа были рассмотрены различные фреймворки и выбрано применение flux + react с типизацией на TypeScript для упрощения архитектуры и улучшения производительности. Был проведен сравнительный анализ производительности между существующей системой на extjs и новой архитектурой, демонстрирующей значительное сокращение размеров кода и времени загрузки.

non-blocking java scriptEcommerce Solution Provider SysIQ

Документ посвящен загрузке скриптов в JavaScript, описывая различные методы и их влияние на производительность и рендеринг страницы в разных браузерах. Рассматриваются техники параллельной загрузки, блокировки рендеринга, а также использование элементов script с различными атрибутами (async, defer). Также упоминаются подходы и загрузчики для интеграции сторонних виджетов на веб-страницах.

"Изоморфная разработка на javascript с помощью react.js" Максим КлимишинFwdays

Документ обсуждает изоморфную разработку на JavaScript с использованием React.js, описывая преимущества и недостатки изоморфного кода, включая улучшение производительности и видимости в поисковых системах. Также рассматриваются архитектурные аспекты, включая серверный рендеринг и консолидацию бизнес-логики между клиентом и сервером. В заключение упоминается возможность создания мобильных приложений с React Native и важность общего кода для различных платформ.

Антон Довгоброд: Highload и очереди задач на примере PHP + Gearman + Yii2Oleg Poludnenko

Документ охватывает тему асинхронности в веб-приложениях, выделяя использование системы очередей Gearman в сочетании с PHP и фреймворком Yii2. Рассматриваются принципы работы асинхронного выполнения задач, его преимущества и недостатки, а также предлагаются практические решения и примеры реализации. В заключение предоставляются ссылки на ресурсы и дополнительные материалы для дальнейшего изучения.

Кирилл Комлев. О реализации continuous integration для web проектовOlesya_V

Документ рассматривает реализацию непрерывной интеграции (CI) для веб-проектов, акцентируя внимание на инструментах и методах оценки качества кода. Основное внимание уделяется языкам PHP и JavaScript, а также полезным инструментам и системам, таким как TeamCity, Jenkins и SonarQube. В заключение подчеркивается необходимость CI в условиях длительной разработки и поддержки продуктов.

More Related Content

What's hot (20)

Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico

Как мы ускоряли WebGL / Мстислав Живодков (2GIS)Ontico

Современный фронтенд -- как не утонуть в море хайпа?Vladimir Malyk

55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico

Переезжаем с Zabbix на Prometheus / Василий Озеров (fevlake)Ontico

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib

Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)7bits

How to build solid CI-CD pipeline / Илья Беда (beda.software)Ontico

base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)Ontico

"Посмотрим на Акку-Джаву" Дмитрий МантулаFwdays

Быстрый старт iOS приложения на примере iOS Почты Mail.Ru / Николай Морев (Ma...Ontico

Превышаем скоростные лимиты с Angular 2Oleksii Okhrymenko

Prometheus мониторинг микросервисных приложений / Виталий ЛевченкоOntico

Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays

Конструктор / Денис Паясь (Яндекс)Ontico

Dump-IT Загрузка и инициализация JavaScriptMikhail Davydov

Алексей Фомкин, Практическое применение Web WorkersAleksey Fomkin

Javascript-фреймворки:  должен остаться только одинSergey Xek

non-blocking java scriptEcommerce Solution Provider SysIQ

"Изоморфная разработка на javascript с помощью react.js" Максим КлимишинFwdays

Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico

Как мы ускоряли WebGL / Мстислав Живодков (2GIS)Ontico

Современный фронтенд -- как не утонуть в море хайпа?Vladimir Malyk

55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico

Переезжаем с Zabbix на Prometheus / Василий Озеров (fevlake)Ontico

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib

Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)7bits

How to build solid CI-CD pipeline / Илья Беда (beda.software)Ontico

base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)Ontico

"Посмотрим на Акку-Джаву" Дмитрий МантулаFwdays

Быстрый старт iOS приложения на примере iOS Почты Mail.Ru / Николай Морев (Ma...Ontico

Превышаем скоростные лимиты с Angular 2Oleksii Okhrymenko

Prometheus мониторинг микросервисных приложений / Виталий ЛевченкоOntico

Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays

Конструктор / Денис Паясь (Яндекс)Ontico

Dump-IT Загрузка и инициализация JavaScriptMikhail Davydov

Алексей Фомкин, Практическое применение Web WorkersAleksey Fomkin

Javascript-фреймворки:  должен остаться только одинSergey Xek

non-blocking java scriptEcommerce Solution Provider SysIQ

"Изоморфная разработка на javascript с помощью react.js" Максим КлимишинFwdays

Similar to #11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов (20)

Антон Довгоброд: Highload и очереди задач на примере PHP + Gearman + Yii2Oleg Poludnenko

Кирилл Комлев. О реализации continuous integration для web проектовOlesya_V

Node.js введение в технологию, КПИ #ITmeetingKPITimur Shemsedinov

Документ представляет собой введение в технологии JavaScript и Node.js, описывая основные принципы, преимущества и недостатки, а также практическое применение. Он охватывает основы JavaScript, структуру приложений на Node.js, обработку асинхронного ввода/вывода и использование фреймворка Express для разработки веб-приложений. Также рассматриваются вопросы производительности, отладки и тестирования приложений на Node.js.

D2D Pizza JS Илья Беда "Куда мы все катимся?"Dev2Dev

Доклад Ильи Беды обсуждает развитие JavaScript и его экосистемы, включая проблемы, связанные с использованием jQuery в больших проектах и переход к более современным фреймворкам, таким как React и Elm. Он подчеркивает необходимость архитектурных решений и управления зависимостями в быстрорастущей индустрии фронтенд-разработки. Также обсуждается влияние нового подхода к типизации и организации кода на эффективность разработки.

Дизайн REST API для высокопроизводительных систем / Александр Лебедев (Новые ...Ontico

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

Трудовые будни инженера производительностиVladimir Sitnikov

Документ представляет информацию о важных аспектах производительности программного обеспечения и работы с базами данных на примере опыта работы Владимира Ситникова в компании Netcracker. Основное внимание уделяется правильному тестированию производительности, использованию регулярных выражений и оптимизации SQL-запросов. Также обсуждаются проблемы с производительностью в Java и использование различных инструментов, таких как compact hashmap.

Инструментируй этоRoman Dvornov

Документ обсуждает инструментирование кода, его применение и примеры в JavaScript, включая трассировку, дебаггинг и измерение производительности. Приведены различные примеры и подходы, такие как модификация React-компонентов в реальном времени с использованием библиотеки basis.js. Также охватываются проблемы, связанные с инструментированием, и предлагаются решения для улучшения процесса разработки.

[1.3] Мониторинг событий ИБ — мастерим «дашборд» - Тарас ИващенкоOWASP Russia

Документ описывает разработку дашборда для мониторинга событий информационной безопасности, направленного на анализ состояния безопасности в компании с использованием удобных виджетов и интеграций. Основные функции включают мониторинг уязвимостей, аудит безопасности и динамику активностей, а также возможность отслеживания внешних факторов, таких как курс рубля. Разработчик делится предложениями по архитектуре и используемым технологиям, включая Python и HTTP API.

Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...Oleg Chirukhin

Документ описывает направление развития Java-программистов и внедрение GraalVM в процесс разработки. Он содержит информацию о различных аспектах оптимизации кода, ограничениях текущих технологий и проблемах, связанных с их интеграцией. Также упоминаются мнения авторов и их личные наблюдения по поводу эффективности использования GraalVM и связанных с ним технологий.

Веб-разработка без наркотиков с помощью PostgreSQL, Nginx и c2h5oh / Миша Кир...Ontico

Документ представляет собой обзор веб-разработки с акцентом на использование технологий, таких как Nginx и PostgreSQL, для создания высокопроизводительных HTTP API. Автор делится опытом и примерами конфигураций, а также обсуждает важность функциональности и производительности ввода-вывода. Также рассматриваются недостатки и будущее проекта c2h5oh, включая необходимость в документировании и тестировании.

Мониторинг веб приложений на PHP в режиме реального времени с помощью Pinba. ...Igor Miniailo

Документ описывает использование системы мониторинга Pinba для профилирования веб-приложений на PHP, в частности на примере Magento. Он объясняет, как профилирование помогает выявить узкие места и проблемы производительности, которые не могут быть обнаружены на этапе тестирования, и предлагает применение Pinba для реального времени с минимальным оверхедом. В документе также представлены утилиты для профайлинга и мониторинга, а также результаты тестирования, подтверждающие эффективность использования Pinba.

Zabbix в сервисной компании ОНЛАНТА - Zabbix Meetup Moscow Vadim Nesterov

Документ описывает применение системы мониторинга Zabbix в IT-аутсорсинговой компании, акцентируя внимание на разработке индивидуальных решений под проекты. Обсуждаются различные аспекты мониторинга, включая важность оптимизации триггеров и визуализации данных, а также архитектурные требования к системам. Кроме того, рассматриваются примеры автоматизации отчетности и интеграции с другими системами через ODBC.

Cеминар в Виннице (22.03.2014)Alexander Babich

Документ представляет собой обзор новых возможностей и улучшений в .NET 4.5 и Visual Studio 2013, включая поддержку асинхронного программирования, улучшения в производительности и функционале для разработки приложений. Он также охватывает различные инструменты и сервисы для разработки и развертывания, такие как Team Foundation Server и Azure. В документе упоминаются тенденции в разработке, управление жизненным циклом проектов и автоматизация рабочих процессов.

FrontTalks: Алексей Андросов (Яндекс), «Ошибки, которые мы любим»Yandex

Документ представляет собой презентацию о важности мониторинга ошибок в веб-приложениях, в частности с акцентом на фронтенд-разработку. Алексей Андросов делится своим опытом и советами по обработке багов и отслеживанию производительности с помощью логирования. Подчеркивается, что ошибки должны рассматриваться как неотъемлемая часть разработки, а мониторинг помогает быстро выявлять и исправлять проблемы.

Alexei Sintsov - "Between error and vulerability - one step"Andrew Mayorov

Документ обсуждает различные аспекты безопасности программного обеспечения, включая типы уязвимостей, такие как переполнение буфера и инъекции SQL. Приводятся примеры реальных случаев с известными компаниями и описываются методы предотвращения уязвимостей, такие как анализ кода и использование флагов защиты. Также подчеркивается важность проведения обзоров кода и анализа логики работы приложений.

Основы и применение статического анализа кода при разработке лекция 1m2rus

Документ рассматривает основы и применение статического анализа кода, подчеркивая важность обеспечения качества программного обеспечения в условиях растущих требований и угроз безопасности. Описываются различные подходы к тестированию, выявлению ошибок и анализу кода без его выполнения, а также приводятся примеры результатов анализа, иллюстрирующие типичные ошибки программирования. В заключение, подчеркивается необходимость использования методов статического анализа для повышения надежности и безопасности программ.

Building deployment pipeline - DevOps wayAndrey Rebrov

Документ описывает процесс создания пайплайна развертывания в DevOps, с акцентом на практические инструменты и технологии, такие как Jenkins и Logstash. Упоминаются важные аспекты, включая автоматизацию, измерение и культуру совместной работы между командами разработки и эксплуатации. Также рассматриваются примеры конфигурации для управления окружениями и логами, а также визуализация данных с помощью таких инструментов, как ElasticSearch и Kibana.

еще один недостаток современных клиент серверных приложенийsnowytoxa

Документ обсуждает методы получения доступа к данным в клиент-серверных приложениях, включая использование инструментов для перехвата данных, снятия дампов памяти и анализа сетевого трафика. Антон Сапожников делится своим опытом и решениями для типовых задач, возникающих при тестировании на проникновение, акцентируя внимание на различных подходах и их преимуществах и недостатках. В заключение описываются техники обхода мер безопасности, таких как двухфакторная аутентификация и ограничение доступа по IP-адресам.

Александр Коротин. Безопасность систем управления турбинами в электроэнергетикеKaspersky

Документ обсуждает уязвимости и безопасность систем управления турбинами в электроэнергетике, фокусируясь на платформе Siemens SPPA-T3000. В нём приведены примеры атак, связанных с Java RMI и Tomcat приложениями, а также даны рекомендации по улучшению безопасности системы. Также упоминается ответ компании Siemens на выявленные уязвимости и важность обновления параметров безопасности для критической инфраструктуры.

Система обработки бизнес-логики server-side приложения на GroovyRegn

Документ описывает систему обработки бизнес-логики для server-side приложений на Groovy, позволяющую изменять логику 'на лету' без остановки сервера и перекомпиляции. Рассматриваются примеры применения, архитектура и организация доступа к данным, а также управление транзакциями и многопоточность. В конце подчеркивается возможность расширения системы на другие платформы и обеспечиваемая защита от ошибок.

Антон Довгоброд: Highload и очереди задач на примере PHP + Gearman + Yii2Oleg Poludnenko

Кирилл Комлев. О реализации continuous integration для web проектовOlesya_V

Node.js введение в технологию, КПИ #ITmeetingKPITimur Shemsedinov

D2D Pizza JS Илья Беда "Куда мы все катимся?"Dev2Dev

Дизайн REST API для высокопроизводительных систем / Александр Лебедев (Новые ...Ontico

Трудовые будни инженера производительностиVladimir Sitnikov

Инструментируй этоRoman Dvornov

[1.3] Мониторинг событий ИБ — мастерим «дашборд» - Тарас ИващенкоOWASP Russia

Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...Oleg Chirukhin

Веб-разработка без наркотиков с помощью PostgreSQL, Nginx и c2h5oh / Миша Кир...Ontico

Мониторинг веб приложений на PHP в режиме реального времени с помощью Pinba. ...Igor Miniailo

Zabbix в сервисной компании ОНЛАНТА - Zabbix Meetup Moscow Vadim Nesterov

Cеминар в Виннице (22.03.2014)Alexander Babich

FrontTalks: Алексей Андросов (Яндекс), «Ошибки, которые мы любим»Yandex

Alexei Sintsov - "Between error and vulerability - one step"Andrew Mayorov

Основы и применение статического анализа кода при разработке лекция 1m2rus

Building deployment pipeline - DevOps wayAndrey Rebrov

еще один недостаток современных клиент серверных приложенийsnowytoxa

Александр Коротин. Безопасность систем управления турбинами в электроэнергетикеKaspersky

Система обработки бизнес-логики server-side приложения на GroovyRegn

More from JSib (6)

#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил РеенкоJSib

Документ сравнивает два фреймворка для создания десктопных приложений на JavaScript: Electron и NW.js, подчеркивая преимущества использования этих технологий, такие как кроссплатформенность и экономичность разработки. Также обсуждаются различные варианты фреймворков и их основные отличия, включая точку входа, обработку контекста и интеграцию с Node.js. Документ предоставляет обзор основных характеристик и функций, что помогает разработчикам выбрать подходящий инструмент.

#10 "Опыт создания Real-time игры на WebGL, Angular, Socket.io и Node.js" Его...JSib

Документ содержит рекомендации по созданию real-time игр с использованием технологий WebGL, Angular, Socket.io и Node.js. Автор делится опытом, важными библиотеками и фреймворками, а также советует при разработке опираться на готовые решения и опыт из учебы. Также рассматриваются аспекты серверной части, тестирования и упаковки игр для различных платформ.

#9 "Chrome DevTools: отладка, консоль, профилирование" Роман СальниковJSib

Документ посвящен использованию инструментов разработчика Chrome для анализа и отладки сложных приложений. В нем описываются различные методы отслеживания исполнения кода, управления событиями и анализа бизнес-логики с помощью умных брейкпоинтов и профилирования. Также рассматриваются собственные инструменты и API для расширений DevTools, подчеркивая важность глубокого понимания архитектуры и состояния кода.

#4 "Особенности разработки кросс-браузерных расширений" Сергей РашитовJSib

Документ обсуждает особенности разработки кросс-браузерных расширений, включая архитектурные различия различных браузеров, поддерживаемые технологии и возникающие проблемы. В частности, он рассматривает поддержку Internet Explorer и совместимость с различными версиями JavaScript и CSS. Также приводятся рекомендации для новичков, такие как использование определенных фреймворков и расширений для упрощения разработки.

#2 "Распространённые ошибки в JavaScript" Денис РечкуновJSib

Документ описывает распространенные ошибки в JavaScript, включая неправильное использование `this`, проблемы с переменными цикла и ошибки в области видимости. Предлагаются решения для распространенных ошибок, таких как использование замыканий и методов привязки. Основное внимание уделяется важности правильного понимания механизмов работы JavaScript для избежания типичных ошибок при разработке.

#1 "JSib – Знакомство и амбициозные планы" Денис РечкуновJSib

Документ представляет собой описание сообщества разработчиков JSIB, целью которого является обмен опытом, знакомство с новыми технологиями и установление контактов. Указаны амбициозные планы по проведению встреч с докладами раз в два месяца, а также форматы и темы выступлений. Также предусмотрена отчетность о мероприятиях через различные социальные сети.

#12 "Создание двух desktop приложений на node-webkit и Electron” Михаил РеенкоJSib

#10 "Опыт создания Real-time игры на WebGL, Angular, Socket.io и Node.js" Его...JSib

#9 "Chrome DevTools: отладка, консоль, профилирование" Роман СальниковJSib

#4 "Особенности разработки кросс-браузерных расширений" Сергей РашитовJSib

#2 "Распространённые ошибки в JavaScript" Денис РечкуновJSib

#1 "JSib – Знакомство и амбициозные планы" Денис РечкуновJSib

#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов

1. pragmadash Денис Речкунов Ведущий JavaScript-разработчик Отзывчивый UI без блокировки Event Loop

2. Что такое производительность JavaScript? • Время исполнения кода • Алгоритмические оптимизации • Куча нечитабильного "оптимизированного" кода • Грязные хаки для VM, которые ускоряют код 2

3. Что такое производительность UI? • Как быстро работает приложение для пользователя • Насколько быстро оно реагирует на действия • Приложение не подвисает 3

4. Почему приложение может подвисать? • iframe – убийца производительности • repaint & re`ow – неоптимальная верстка или CSS • Блокировка Event Loop 4

6. Почему Event Loop блокируется? • Внешние тяжелые обработчики внутри браузера repaint & re`ow, iframe • Блокирующий JavaScript-код 6

7. Блокирующий код function sort(arr) { var tmp = null; for(var i = 0; i < arr.length; i++) for(var j = 0; j < arr.length - 1; j++) if(arr[j] > arr[j+1]) { tmp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = tmp; } } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 7

8. В чем же он блокирующий? • Не рассчитан на очень большие массивы • На время сортировки все приложение зависнет 8

9. Неблокирующая версия function sortStep(arr, i, j, callback) { if(arr[j] > arr[j + 1]) { var tmp = arr[j]; var[j] = arr[j + 1]; arr[j + 1] = tmp; } if (++j === arr.length - 1) { i++; j = 0; } if (i === arr.length) { callback(); return; } setTimeout(sortStep.bind(this, arr, i, j, callback)); } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 9

10. Неблокирующая версия function sort(arr, callback) { if (arr.length < 2) { callback(); return; } sortStep(arr, 0, 0, callback); } 01. 02. 03. 04. 05. 06. 07. 10

11. Демо

12. Преимущества неблокирующего кода • UI всегда жив и обрабатывает события • Параллельное исполнение функций • Пользователю приятнее работать с приложением 12

13. Недостатки неблокирующего кода • Он сложный • Общее время исполнения больше 13

14. Полезные ссылки • Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 • Loupe by Philip Roberts 14

15. Денис Речкунов, Flamp

#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов

Recommended

More Related Content

What's hot (20)

Similar to #11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов (20)

More from JSib (6)

#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов