https://risingstars.js.org/2019/en/
фреймворки
ECMAScript 6
https://habr.com/en/post/305900/
https://github.com/mbeaudru/modern-js-cheatsheet/blob/master/translations/ru-RU.md
https://fossbytes.com/wp-content/uploads/2015/09/infographic-the-entire-javascript-language-in-one-single-image-491250-2.jpg
Императивный Функциональный ООП
https://habr.com/en/post/274415/
https://habr.com/en/post/243403/ - конспект по JavaScript
https://www.w3.org/TR/hr-time/ - high resolution time
https://www.w3.org/TR/navigation-timing/ - navigation timing
INTERNALIZATION
JavaScript Internationalization API
https://habr.com/en/company/badoo/blog/317484/
Объемная шпаргалка по JavaScript (The Ultimate JavaScript Cheat Sheet)
Объемная шпаргалка по JavaScript (The Ultimate JavaScript Cheat Sheet)
https://www.codementor.io/johnnyb/tutorials/javascript-cheatsheet-fb54lz08k
Четыре типа утечек памяти в JS и как от них избавиться (4 Types of Memory Leaks in JavaScript and How to Get Rid Of
Четыре типа утечек памяти в JS и как от них избавиться (4 Types of Memory Leaks in JavaScript and How to Get Rid Of
Правильная обработка ошибок в JavaScript
https://habr.com/en/company/mailru/blog/282149/
Руководство по качественной обработке ошибок в JavaScript (A Guide to Proper Error Handling in
Руководство по качественной обработке ошибок в JavaScript (A Guide to Proper Error Handling in
Книга заклинаний современного веб-разработчика: большая картинка, тезаурус и таксономия современного веб-разработки JavaScript
ES8 вышел и вот его основные новые возможности
Что за черт, Javascript
https://habr.com/en/company/mailru/blog/335292/
https://habr.com/en/company/mailru/blog/335292/
Как работает JS: управление памятью, четыре вида утечек памяти и борьба с ними
https://habr.com/en/company/ruvds/blog/338150/
Многоликий this в JS
Что нового в ES2018
https://www.sitepoint.com/es2018-whats-new/
Пример Javascript Fetch API, руководство с нуля
https://appdividend.com/2018/08/20/javascript-fetch-api-example-tutorial/
Пример Javascript Fetch API, руководство с нуля
https://appdividend.com/2018/08/20/javascript-fetch-api-example-tutorial/
Обзор новшеств ECMAScript 2016, 2017, и 2018 с примерами
https://habr.com/en/company/ruvds/blog/353174/
Полный современный справочник по JavaScript
https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/
http://stepansuvorov.com/blog/2013/04/все-для-обработки-javascript-error-в-проекте/
https://habr.com/en/company/oleg-bunin/blog/433318 - Garbage Collect
// Таски и микротаски
https://habr.com/en/company/oleg-bunin/blog/417461/
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#test-it
// Придержим ссылки на эти элементы var outer = document.querySelector('.outer'); var inner = document.querySelector('.inner'); // Послушаем изменения атрибутов внешнего // элемента с классом outer new MutationObserver(function() { console.log('mutate'); }).observe(outer, { attributes: true }); // А вот и колбек… function onClick() { console.log('click'); setTimeout(function() { console.log('timeout'); }, 0); Promise.resolve().then(function() { console.log('promise'); }); outer.setAttribute('data-random', Math.random()); } // …который мы повесим на оба элемента inner.addEventListener('click', onClick); outer.addEventListener('click', onClick);
ОТВЕТ (по нажатию на кнопку)
click js-стек завершен
promise - микрозадача mutate - микрозадача
click
js-стек завершен promise - микрозадача mutate - микрозадача timeout - задача timeout - задача
Полный современный справочник по JavaScript
https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/
http://stepansuvorov.com/blog/2013/04/все-для-обработки-javascript-error-в-проекте/
https://habr.com/en/company/oleg-bunin/blog/433318 - Garbage Collect
// Таски и микротаски
https://habr.com/en/company/oleg-bunin/blog/417461/
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#test-it
// Придержим ссылки на эти элементы var outer = document.querySelector('.outer'); var inner = document.querySelector('.inner'); // Послушаем изменения атрибутов внешнего // элемента с классом outer new MutationObserver(function() { console.log('mutate'); }).observe(outer, { attributes: true }); // А вот и колбек… function onClick() { console.log('click'); setTimeout(function() { console.log('timeout'); }, 0); Promise.resolve().then(function() { console.log('promise'); }); outer.setAttribute('data-random', Math.random()); } // …который мы повесим на оба элемента inner.addEventListener('click', onClick); outer.addEventListener('click', onClick);
ОТВЕТ (по нажатию на кнопку)
click js-стек завершен
promise - микрозадача mutate - микрозадача
click
js-стек завершен promise - микрозадача mutate - микрозадача timeout - задача timeout - задача
ОТВЕТ (программно inner.Click())
click
JS стек ещё не завершен, поэтому микрозадачи не запускаются
click
js стек завершен
promise - микрозадача
mutate - микрозадача
promise - задача
мутация второй раз не выполняется
timeout - задача
timeout
Задачи и микрозадачи исполняются по порядку
Браузер может рендерить в промежутках между задачами
Микрозадачи исполняются после каждого колбека, если только это не часть выполнения какого-то другого сценария (стек не пустой) и конце каждой задачи и после очистки стека.
Мы выполняем все микротаски, которые у нас есть в очереди до конца
Еще можно порождать новые микротаски в процессе, и они будут выполнены в этом же microtask checkpoint.
requestAnimationFrame, и даже уже его используют. Он выполняется перед рендером. Его прелесть в том, что, во-первых, он старается выполняться каждые 60 fps (или 30 fps), вo-вторых, это все выполняется непосредственно перед созданием CSS Object Model
RequestIdleCallback работает таким образом, что если браузер понимает, что у него между фреймами (60 fps) есть время, чтобы выполнить что-то полезное, и при этом они уже все сделал — таску сделал, requestAnimationFrame сделал — вроде бы все классно, то он может выдать маленькие кванты, скажем, по 50 мс, чтобы вы что-то сделали (режим IDLE).
Микрозадачи исполняются после каждого колбека, если только это не часть выполнения какого-то другого сценария (стек не пустой) и конце каждой задачи и после очистки стека.
Мы выполняем все микротаски, которые у нас есть в очереди до конца
Еще можно порождать новые микротаски в процессе, и они будут выполнены в этом же microtask checkpoint.
requestAnimationFrame, и даже уже его используют. Он выполняется перед рендером. Его прелесть в том, что, во-первых, он старается выполняться каждые 60 fps (или 30 fps), вo-вторых, это все выполняется непосредственно перед созданием CSS Object Model
RequestIdleCallback работает таким образом, что если браузер понимает, что у него между фреймами (60 fps) есть время, чтобы выполнить что-то полезное, и при этом они уже все сделал — таску сделал, requestAnimationFrame сделал — вроде бы все классно, то он может выдать маленькие кванты, скажем, по 50 мс, чтобы вы что-то сделали (режим IDLE).
- Если это изменение DOM, то используем requestAnimationFrame.
- Если это неприоритетная, недолгая и не тяжелая задача, которая будет не слишком нагружать CPU, то requestIdleCallback.
- Если у нас большая мощная задача, которую надо исполнять постоянно, тогда мы выходим за пределы Event Loop и используем WebWorkers.
Фазы Event Loop в Node.js:
- timers;
- pending callback;
- idle, prepare; - ничего не можем сделать
- poll; IO Здесь круто делать setImmediate
- check; Здесь исполняется setImmediate Фаза прекрасна тем, что setImmediate, вызванный в poll-фазе, выполнится гарантированно раньше, чем таймер. Потому что таймер будет только на следующем тике в самом начале, а из poll-фазы раньше.
- close callbacks.
Алгоритм Event Loop
- Берем свободную таску из нашей очереди,
- Выполняем ее,
- Выполняем microtask checkpoint .
- Обновляем рендеринг (если необходимо), и возвращаемся
