Архив недели @xufocoder
Понедельник
Мой твиттер аккаунт @xufocoder временно заблокирован, ближайшую неделю про JavaScript буду писать с этого: почти ни слова про фреймворки, много слов про JavaScript и около JavaScript
Немного юмора, немного серьезности, куча ссылок
В конце недели надеюсь немного с вами "поиграем"
Мой тимлид попросил ему помочь и написать вспомогательную функцию для тестов, говорит тестов будет до сотни, говорит напиши функцию для проверки четное ли число
я:
Отправил меня переделывать, говорит можно написать код короче. Улучшил свой код:
Ему снова не нравится мой вариант
Помогите решить задачу: 👇
Когда в последний раз вы открывали спецификацию Standard ECMA-262?
🤔
3.1% На этой/прошлой недели🤔
10.5% В этом месяце🤔
31.0% В этом году🤔
55.4% Что за спецификация?Знакомо?
Мой тимлид говорит писать тесты
А я ему отвечаю, зачем писать тесты? Если код все время меняет!?
JavaScript - это не магия! #тред
Во многом "смотрим и повторяем" - это классический подход к изучению языков, в том числе и языков программирования. Однако для изучения синтаксиса ЯП это работает первые несколько минут/часов/дней.
Далее необходимо менять подход, и важно погрузиться в концепции стоящие за ЯП.
Если скажем попытаться сложить "1" + 1 в Python, то случится TypeError, а JavaScript скажет: "спасибо дальше, я сам!".
Все дело в типизации.
Язык JavaScript обладает динамической и слабой типизацией. Давайте разберемся как это влияет на пользование этим ЯП и на сам ЯП
Часть того, от чего плюются разработчики, и что они называют "магией" исходит от слабой типизации. Трактовки слабой типизации в сети могут встречаться разные, однако все они связаны с приведением типов.
Если в выражении ЯП позволяет совершать операции м/у значениями одного типа будем считать такой ЯП абсолютно строгим, если между значениями всегда и везде любых типов то абсолютно слабым.
Однако в своей скромной практике я не встречал таких "абсолютных" языков, ведь даже в JS есть ошибки приведения типов, в языка "посильнее" могут происходить неявное преобразование типов, например при работе над числами docs.microsoft.com/ru-ru/dotnet/c…
Все неявные преобразования в JavaScript от и до описывает спецификация ecmascript 262 ecma-international.org/publications/s…
Минус спецификаций - их нужно читать!
Спецификация описывает помимо всего прочего, то как должен себя вести язык. Она описывает набор абстрактных операторов, которые отвечают за неявных преобразования. И то как должно происходить приведение к конкретному типу
Рассмотрим один из таких операторов ToNumber, как видно в JS присутствуют недопустимые преобразования, возникает TypeError
Когда "JavaScript-движок" получает выражение, он преобразует его в AST, откуда становится очевидным какие операторы будут исполнены и с каким значениями.
Например небольшое выражение:
[1] + [] + 42
Выполнится сначала оператор (+) с аргументами [1] и [], оператор (+) далее результат прошлого вычисления и 42
И если обратится снова к спецификации, то можно обнаружить описание работы оператора (+), в котором присутствует уже упомянутый абстрактный оператор приведения типов ToNumber.
И по итогу вся магия вычислений сводится к тому, как JavaScript бегает по этим таблицам приведений
На досуге пытался выяснить можно ли встроенными средствами JavaScript сделать его сильнее, мб отменить некоторые операции, переписать что-то, чтобы отдавалось TypeError, и понять насколько же JavaScript сильный
medium.com/devschacht/jav…
Благодаря неявным преобразованиям и некоторым конструкциям языка, можно написать вполне валидный и запускаемый код с помощью всего лишь 6 символов, jsfuck.com или 8 символов patriciopalladino.com/files/hierogly…
В jsfuck происходит добыча каждого символа практически из самых недр неявных преобразований
Касательного того, почему и как это работает можно почитать в статье sking7.github.io/articles/14388… или в ролике собственного производства youtube.com/watch?v=LHMk2t… (длительность 6 минут)
Вы очень классная аудитория!
Думал будет тухло, когда провел небольшое исследование перед своей дежурной неделей в андерхуде 😬
@MrFlashAccount @jsunderhood Я вообще не понял зачем вся эта игра с типизацией, которая увеличивает ошибки. Могли же просто кидать ошибки на любое несоответствие типов.
Есть большой и познавательный труд "JavaScript: The First 20 Years" от Allen Wirfs-Brock и Brendan Eich. URL: dl.acm.org/doi/pdf/10.114…. Смотрел по диагонали, про слабую типизацию там не нашел.
ps Второй автор это тот самый, что "создал JavaScript за неделю"
twitter.com/_olegkusov/sta…
Я на собеседовании JS разработчика спрашиваю про this, прототипы и про области видимости var/let/const. Это что, я какой-то рокет саенс спрашиваю? Почему люди не знают это? При этом у них опыт у всех на JS минимум 2-3 года.
Челендж:
5 минут до собеседования новичка в команду, вас назначают в тимлиды, чтобы провести это же собеседование. Какие 3 вопроса необходимо задать JavaScript-разработчику, чтобы понять подходит он вам или нет?
twitter.com/Semenov/status…
- Без тестов пишешь?
- Сэр, никак нет, сэр!
- Спорим, что ты из тех, кто по-тихому задеплоит мастер на прод, даже не проверив, прошли ли пайплайны! Я за тобой присмотрю!
Челендж: 5 минут до собеседования новичка в команду, вас назначают в тимлиды, чтобы провести это же собеседование. Какие 3 вопроса необходимо задать JavaScript-разработчику, чтобы понять подходит он вам или нет? twitter.com/Semenov/status…
1/2 Как показал общественный опрос, у каждого свои критерии, как следствие свой список вопросов.
Если бы мне представилась такая возможность, взять человека в команду, то спрашивал бы про вещи связанные с языком, средой исполнения и проектом над, которым работает команда twitter.com/jsunderhood/st…
2/2 Например
Язык - JavaScript: Как происходит работа с асинхронным кодом?
Среда - Браузер: Что такое Event Loop и как работает?
Проект - например, который рисует realtime графики: какая разница в отрисовке данных для SVG и для Canvas, что быстрее, что удобней, какие +/-
Сегодняшнее дежурство подошло к концу
Встретимся завтра!
Вторник
Мой тимлид спросил меня, не хочу ли я взять дополнительные курсы, подучиться там чему-нибудь?
А я ему говорю, зачем мне изучать то, в чем я не разбираюсь!??
Мой тимлид теперь решил поспорить со мной на желание, говорит, смогу ли я написать алгоритм сортировки сложностью меньше, чем N log N
Написал алгоритм сортировки сложностью N, сижу придумываю желание, перед тем как пушнуть код в проект🤗:
@jsunderhood Короч если кто будет придираться, вот ещё версия pic.twitter.com/MjvoHsbSaz
Если не врут, то это counting sort, en.wikipedia.org/wiki/Counting_… twitter.com/kolyuchii/stat…
Как часто вам требовались знания алгоритмом и/или структур данных в задачах связанных с JavaScript
🤔
7.0% Очень часто🤔
27.1% Случалось раз к разу🤔
42.6% Крайне редко требовались🤔
23.3% Ни разу не требовалисьТе, кто отвечает очень часто прокомментируйте по возможности, чем вы занимаетесь 🤠
JavaScript и динамическая типизация #тред
Если предпосылки слабой типизации в JavaScript были туманны, то решение сделать JavaScript динамическим языком было изначально. Это решение вдохновлено Self, Scheme и испытало на себе влияние Java, C.
Подробнее об этом:
JavaScript: The First 20 Years. dl.acm.org/doi/pdf/10.114…
Тяжело дать однозначное трактование динамической типизации, но можно через сравнение со статической. Переменные связываются с типов в момент объявления переменной - статическая типизация, при присваивании значения - динамическая типизация.
Говоря другими словами при динамической типизации у переменной нет типа, тип есть у значения этой переменной. Изменив значение переменной мы изменим ее тип.
Может наивно показаться, (я как-то попался на этом), что компилируемые языки это как правило статически типизированные, но это не так, пример тому язык Julia, julialang.org
У NodeJS (libuv + v8 - JS движок) есть возможность экспортировать созданный байт код при запуске скрипта. Не знаю можно ли встроенными средствами его снова запустить, но +1 один камень преткновения, чтобы поставить = м/у компилируемые и статическими ЯП
medium.com/dailyjs/unders…
Динамическая типизация не заставляет думать разработчика о типах? И да и нет
Думают:
Опытные разработчики использующие динамически типизированные ЯП, документируют типы в сигнатурах функций. Явно имеют желание "статических типов".
В JavaScript - JSDoc jsdoc.app
JSDoc даже думали ввести на одних JavaScript курсах, чтобы подготовить морально/интеллектуально учащегося к статической типизации.
Минус динамической типизация, который также заставляет думать в сторону статической, это постоянная необходимость обладание контекстом о проекте, помнить что делает код. Приходится больше тратить времени, чтобы вкатиться в проект. Особенно с незнакомой доменной областью.
В своей книге "Типы в языках программирования" Бенджамин Пирс на первых страницах приводит доводы зачем нужны типы:
- Выявление ошибок
- Абстракция
- Документация
- Безопасность языков
- Эффективность
В JavaScript
- Выявление ошибок происходит в runtime
- ES6+ классы как какой-то способ описания абстракций в ЯП
- для документирования нужны как минимум сигнатуры функций, хотя бы на уровне JSDoc, а это сторонний инструмент
- эффективность - вопрос JS-движков, их обработки кода
Немного сравню JavaScript с TypeScript
Во втором после описания кода и запуска компилятор, тот начинает выводить типы (ru.wikipedia.org/wiki/Вывод_тип…), вывод типов гарантирует корректность программы.
Корректность во многом нас уберегла бы от ошибок типа undefined is not a function
Отсюда есть два разных по своей природе способа проверять корректность своих программ.
- покрывать код тестами:
для избежания runtime ошибок
- "покрывать код типами":
вывод типов сделает свою работу
На практике, конечно, лучше совмещать эти два подхода, не иначе
Про типы думают не только разработчики, которым без нее больно, но JavaScript-движки, например v8, который думает о типах постоянно.
В v8 есть такое понятие как hidden classes и inline cache. mathiasbynens.be/notes/shapes-i…
Грубо говоря объекты с одной структурой, являются один классом
Тоесть с точки зрения v8: чем больше будет объектов с одинаковой структурой, тем производительней будет код.
Если в гонке за производительность, оперироваться исключительно на этот факт и ни на какой больше, то напрашивается использование статической типизации как решения
Те, кто глядя на JavaScript не думают о типах внутри этого ЯП, это те люди, кто серьезно занимаются Computer Science: динамически типизированные ЯП, особенно JavaScript, наименее интересны.
Для меня это было показательно при изучении вопроса полиморфизма medium.com/devschacht/pol…
Извиняюсь за частые опечатки
Линтер русского языка сбоит
JavaScript в качестве первого языка программирования
🤔
52.0% Да🤔
48.0% НетЕсли да, то прокомментируйте почему
@jsunderhood Нет не проще, и проблемы все ещё с асинхронностью в пайтоне, а главное сравни комьюнити. Это как блоха против слона
Python проще, чем JavaScript? twitter.com/PoAyPiVuChisly…
Кто предатель? Кто первым кикаем?
На сегодня дежурство завершено, До завтра!
ps. PHP кикнули
Среда
Мой тимлид сегодня с утра слишком веселый, вспомнил какой-то древний боян, сидит спрашивает всех в чате: что появилось первым курица или яйцо?
Что-то про динозавров пишет..
Думаю.. он вообще проф непригоден?
В локальном ростовском JavaScript-чатике на фоне всевозможных обсуждений, появился призыв к помощи, связанный с проблемой гипер ответственности
Помогайте..
Веселимся с эмоджи и JavaScript
bram.us/2016/08/27/fun…
Есть ли у кого-нибудь банковский фронтенд без типов? pic.twitter.com/XuLLINssWM
Тред (Сергей Ufocoder)
Доверили бы вы часть своей жизни JavaScript?
Разработчик-диабетик собрал искусственную поджелудочную железу, работающую на JavaScript, URL: vc.ru/dev/84930-razr…
🤔
46.6% Да🤔
53.4% НетТак ли плоха динамическая типизация?
eax.me/dynamic-typing/
Тред (Сергей Ufocoder)
JavaScript и Браузер #тред
За 30 лет с момента появления 1ого браузера многое изменилось. Браузеры сегодня это очень сложное прикладное ПО. Об этом можно даже судить в 1ом приближении по кол-ву строк кода
How Many Millions of Lines of Code Does It Take (February 8, 2017)
visualcapitalist.com/millions-lines…
Ни для кого не станет открытием, если я напишу, что на текущий момент браузер Google Chrome, является самым популярным, более того, он занимает около 2/3 рынка.
youtube.com/watch?v=W4wWdm…
Браузер Google Chrome (как Opera и Microsoft Edge), основаны на проекте Chromium. Отсюда изучая проект Chromium, в частности документацию Design Documents, вы погружаетесь в устройство современных браузеров.
chromium.org/developers/des…
@jsunderhood С первым допустим понятно, а что учить в качестве второго ЯП? HTML не предлагать 😅
TypeScript
Или есть у кого другие варианты? twitter.com/goddesofwinds/…
У chromuim multiprocess архитектура
Используются отдельные процессы для вкладок браузера, что защитит все приложение от ошибок и сбоев при рендеринге. Ограничивается доступ из каждого процесса рендеринга до других процессов и остальной системы браузера
medium.com/@zicodeng/expl…
Все то, что отображается во вкладке браузера, грубо говоря, делает движок для рендеринга - Blink, форк WebCore
Blink реализует HTML спецификации, занимается работой с DOM деревом, пересчитывает стили и layout, встраивает V8 и запускает JavaScript и тд
bit.ly/how_blink_works
Касательно процессов, пользователь вполне может их сам увидеть в "диспетчере задач" Google Chrome
helgeklein.com/blog/2019/01/m…
Касательно HTML. Как правило, мнение обывателя относительно HTML, что это что-то про верстку, хотя сейчас это есть ни что иное как набор спецификаций, более того описывающий некоторые API
HTML спеки: w3.org/TR/?title=html
Картинка отсюда: de.wikipedia.org/wiki/HTML5
Важным понятием в рендеринге для Frontend-разработчика является - Critical Rendering Path.
Процесс c момента получения HTML, CSS, JS до момента отрисовки пикселя на экране монитора
слайды: bit.ly/lifeofapixel
видео: bit.ly/loap-2018-video
Или вот, есть русская мини страничка о CRP на MDN:
developer.mozilla.org/ru/docs/Web/Pe…
Рекомендую БЕСПЛАТНЫЙ курс от Google разработчиков для понимания, что это, как его оптимизировать, чтобы ваше web-приложение было производительнее, если есть проблемы в CRP
classroom.udacity.com/courses/ud884
Про завтра пообщаемся? (про что тред писать)
ps в опросах ограничение на 25 символов
🤔
53.3% Функцио-ное програм-ние🤔
46.7% Безопасность в браузереpps. текущий тред еще не дописал
ppps глаз замылился, буквы/слова в твитах съедаются
Про завтра пообщаемся? (про что тред писать) ps в опросах ограничение на 25 символов
Голосуйте за безопасность, какое функциональное программирование, вы чего? :D twitter.com/jsunderhood/st…
1/2 Напомню, что Blink движок для рендеринга, V8 - JavaScript-движок. V8 ничего не знает о DOM.
Как связаны V8 и Blink? Присутствует изолирование потоков, есть 3 вида (Main, Isolate, Worker). Есть понятие контекст - глобальный объект (на каждый iframe)
bit.ly/how_blink_works
2/2 Есть понятие World для поддержки content scripts, необходимых для разделение DOM с веб-страничкой. Для разделения DOM тоже существует изоляция для безопасности.
Плюс присутствует обертка над V8 APIs
Подробности в Design Documents
bit.ly/how_blink_works
Есть еще детали того встраивается V8, но повторюсь читайте Chromium Design Documents..
По итогу всех обвязок для JavaScript-мира в Chrome доступно множество API: упомянутый V8 API, XMLHttpRequest, HTML5 и связанные с ним API, WebKit API и так далее
developer.chrome.com/extensions/api…
Как ни странно, но реализация именно HTML спецификации внутри браузера, дает JavaScript всеми любимый Event Loop. Описание модели вычислений Event Loop в спеке можно уместить в несколько печатных страниц
html.spec.whatwg.org/multipage/weba…
За внедряемыми фичами JS можно следить как по отдельности
v8: v8.dev/features
blink: bit.ly/blinkintents
так и за всеми сразу, как они попадают в Chrome:
chromestatus.com/features
chromestatus.com/features/sched…
В завершении треда хочу поделится русскоязычным докладом: "О настоящем и будущем браузера Yandex браузера".
Довольно интересно было узнать о реализованных оптимизациях рендеринга в браузере
youtube.com/watch?v=6OLVN_…
Вопрос для тех, кто пишет на JavaScript/TypeScript.
По большой части вы разрабатываете:
🤔
84.8% Frontend🤔
15.2% BackendЕще не устали от JavaScript? ;)
А на сегодня все! До четверга!
Четверг
Мой тимлид прознал, что я веду коллективный акк, спрашивает заходил ли я сегодня в твиттер?
Я ему - "нет". После он мне, говорит, что знает, что скрины можно подделать, поэтому кидает фото экрана:
Видимо кто-то умеет пользоваться devtools..
Сегодня постараюсь сделать два треда :)
Функциональное программирование:
🤔
71.0% Имею представление🤔
11.5% Недавно начал изучать🤔
17.5% Понятия не имею@jsunderhood Говно полное. Но лучше ничего не видел ))
Коротко о функциональном программировании twitter.com/argent_smith/s…
Экскурс в историю языков программирования с точки зрения используемых в них концепций.
Как происходило смещение видения используемой парадигмы программирования
youtube.com/watch?v=6YbK8o…
Функциональное программирование:
Согласно опросу >70 человек сегодня узнают от меня про функциональное программирование
Да простит меня @_bravit twitter.com/jsunderhood/st…
JavaScript и функциональное программирование #тред
Как известно, JavaScript мультипарадигменный ЯП, позволяет писать код в различных стилях:
событийно-ориентированный - обработка DOM-событий
объектно-ориентированный - благодаря прототипному наследованию
императивный - переменные, выражения, условия, циклы
Что насчет ФП?
Из лекции: Лямбда-исчисление
youtube.com/watch?v=7BPQ-g…
Лямбда исчисления это основа, на которой строятся функциональные языки.
Однако при работе с популярными библиотеками в JavaScript или, решая повседневные для этого языка задачи, как правило, мы не сталкиваемся с понятиям из теории λ-исчислений.
Откуда тогда берется ФП?
λ-исчисления основа для ФП.
Но это не значит, что без Лямбд ФП не бывает
Полная версия доклада:
youtube.com/watch?v=mmvHC3…
We released a quick update to the Ladder of FP! Thanks to all who gave feedback & those who volunteered to help tackle next year's redesign! pic.twitter.com/grnVNE9gOQ
Получается, что и в JavaScript можно использовать концепции из мира ФП, элементы ФП, как следствие писать в ФП-стиле, если конечно ЯП их поддерживает.
Концепций в мире ФП очень много, упомянутые вне треда map/reduce это лишь крупица всей этой ФП пирамиды
twitter.com/lambda_conf/st…
А некоторые абстракции из мира ФП могут лежать на поверхности, и рядовой разработчик скорее всего не будет знать об их существовании
В JavaScript - оператор optional chaining (.?): developer.mozilla.org/en-US/docs/Web…
Полная версия доклада:
youtube.com/watch?v=IkXg_m…
Какие ФП концепции нам доступны или мы можем реализовать в JavaScript, языке с динамической и слабой типизацией?
Функции высшего порядка, композиция функций, каррирование, предикаты, частичное применение и так далее
По ссылке все примеры на JavaScript:
habr.com/ru/post/310172/
Стреляют сразу из артиллерии twitter.com/pavelsilin/sta…
Сегодня наверно будет 1 тред вместо обещанных 2ух, но большой, идет?
Касательно абстракций, существует библиотека, которая их реализует
Если синтаксис js для работы с функциями ещё похож на что-то из фп мира, то абстракции непривычно, для так совсем новичка пугающее
github.com/fantasyland/fa…
Зачем нужны эти абстракции? Выглядит далёким от реальной и практической жизни?
Прикладное применение имеется. Например, моноид, может помочь распаралелить вычисления.
Правда в мире JavaScript это все равно какая-то редкая задача, если не уникальная
ru.m.wikipedia.org/wiki/Моноид
Спустимся на землю, вернемся к коду, чтобы продемонстрировать ФП подход в JS, есть задачка:
Реализовать функции:
five, add, one, two, seven, add, subtract
Должны удовлетворяться следующие проверки:
five(add(one())) === 6
seven(subtract(two())) === 5
Вариант решения:
Демонстрацию некоторых основных элементов ФП в JS на практике еще в 2015 году сделал MPJ на своем канале FunFunFunction
Функции высшего порядка, map, reduce, рекурсия, каррирование, функтор и тд
Ссылка на плейлист: youtube.com/watch?v=BMUiFM…
Кто какие языки пробовал (или мб даже использует на проде), которые компилируются в JS? Кроме TS :)
github.com/jashkenas/coff…
1/3 Помимо упомянутых элементов ФП в JS, в JS можно реализовать то, что называется иммутабельностью,
Это такое поведение, когда при попытке модифицировать объект или данные в какой-то структуре, вместо модификации объекта/структуры создается новый модифицированный
2/3 Как это сделать в JS?
Клонировать объект и модифицировать у него поле.
Для массивов существуют методы которые возвращают новый массив/значение (map, filter, reduce и тд)
developer.mozilla.org/en-US/docs/Web…
Или можно воспользоваться готовой библиотекой:
immutable-js.github.io/immutable-js/d…
3/3 Иммутабельность
+:
Иммутабельные объекты (исходный легко и его модифицированная копия) дешево сравниваться м/у собой, тк сравнение происходит по ссылке
-:
Нагрузка на сборщик мусора, который будет удалять из памяти не используемые оригиналы объектов
Тред (Сергей Ufocoder)
Благодарю за активное участие @slowpnir и дополнения по теме фп 💪
На сегодня завершаю дежурство по андерхуду!
Увидимся в пятницу🤠
ps. Благодарю всех неравнодушных к ФП
Пятница
Поговорим о передаче опыта. Передаете? 🙃
Наставничиствуете? Преподаете?
Выступаете ли на конференциях и митапах? Кстати они про то, чтобы больше потусить или реально про опыт?
Какую форму обучения предпочитаете для себя? 🧐
🤔
45.3% Читаю книги, статьи, доки🤔
15.6% Видеоуроки, митапы, конфа🤔
4.4% Наставники, Bootcamp мб🤔
34.7% Всё одинаково хорошо@dotterian @jsunderhood полностью согласен, я вообще webpack изучил из видосов Кантора, и в доку не смотрел, это не помешало мне тогда написать сборщик для рабочих процессов
Олды здесь?
Лайк, если учился по материалам Кантора twitter.com/iGontarev/stat…
Видели этот фильм про JavaScript?
youtube.com/watch?v=8p1uLK…
Экстренное собрание!
Какой тред дня вам интересен
🤔
46.3% Слежка через браузер🤔
40.6% JS.Браузер.Утечки памяти🤔
13.1% И без тредов хорошо ^_^В выходные тредов не будет!
Две статьи от @xnimorz
Оптимизация производительности фронтенда
habr.com/ru/company/hh/…
habr.com/ru/company/hh/…
Тред (Сергей Ufocoder)
JavaScript и утечки памяти в Браузере #тред
Жизненный цикл памяти практически всегда одинаков и не зависит от ЯП:
- Аллокация памяти (allocate)
- Использование (usage)
- Высвобождение (release)
JavaScript не позволяет напрямую работать с памятью, это происходит опосредованно, через синтаксические конструкции языка
1/2 Аллокация памяти происходит при инициализации значений
2/2 Скрытая аллокация памяти через вызовы функций
Использование памяти в JavaScript. Еще раз подчеркну, что работа с памятью происходит опосредованно через синтаксис.
Под использованием понимается чтение значений из переменных или свойств объектов, а также запись в них новых значений
Высвобождение памяти в JavaScript происходит с помощью сборщика мусора
1/2 Аллоцированные объекты, можно представить в виде направленного графа, причем c одним корневым элементом. Как правило корень - это глобальный объект. В браузере такой корневой узел графа - это объект window
Для следующего блока кода:
2/2 Получится вот такой граф
Manager: I want our web app to feel more like a native app You: pic.twitter.com/Mbt7khSDtS
Библиотека, которая убережет ваш фротенд от ошибок в runtime twitter.com/_jayphelps/sta…
из вики: утечка памяти - процесс неконтролируемого уменьшения объёма свободной оперативной связанный с ошибками в работающих программах
от меня: память, которую высвободили, но не используют, или уже не используемая память согласно решаемой задаче
В ЯП с ручным управлением памятью: выделил память? воспользовался? убери за собой!
Полная ответственность на разработчике
В ЯП с автоматическим управлением памятью за вас уберет сборщик мусора (garbage collector)
Полная ответственность на сборщике мусора.
В ЯП со сборщиками мусора, то что является мусором, зависит исключительно от алгоритмов реализованных в сборщике мусора.
Для понимания этого, к рассмотрению предлагается 2 алгоритма сборки мусора:
Reference Counting - посчет ссылок
Mark-Sweep Collector - "пометь и выброси"
1/4
Возьмем следующий блок кода, создадим объекты, создадим ссылку внутри объект, а после "занулим" некоторые переменные
2/4
Граф объектов до зануления мы можем представить так, как на картинке
Теперь рассмотрим что здесь будет являться мусором для каждого алгоритма
3/4
С точки зрения алгоритма Referece counting, если хотя бы у одного узла есть ссылка, значит его не нужно удалять из памяти, если ссылок нет - это мусор
При таком подходе существует проблема циклических ссылок, разработчик намеренно удалил объект, сборщик не чистит - утечка
3/4 здесь после зануления мусором будет с2
4/4 Для алгоритма mark-and-sweep, мусором будет, те узлы, которые недостижимы из корневого. Для этого производится обход по графу (фаза mark), где помечаются достижимые узлы, после удаляются недостижимые (фаза sweep)
По этому алгоритму мусором будут a1-a2 и c2
4/4 У сборщика мусора с реализацией этого алгоритма больше накладных расходов и есть одна серьезная проблема "проблема остановки мира", мир остановится пока не завершится его работа
Есть еще алгоритмы: Mark-compact garbage collection, Copying garbage collection, Comparing garbage collectors, Generational garbage collection и другие
Разработка сборщика мусора - отдельное искусство с собственным списком решаемых задач
Источников по этой теме немного, но они есть и они хорошие
The Garbage Collection Handbook (платно):
gchandbook.org/contents.html
Курсы и статьи про компиляторы и сборщики мусора у Дмитрия Сошникова: dmitrysoshnikov.com
Вернемся к JavaScript и Браузеру
В современных браузерах сборщики мусора (GC) реализованы на поколениях, используют идею достижимости алгоритма mark-and-sweep и прочее
Например, Webkit: webkit.org/blog/7122/intr…
А что нужно знать JavaScript разработчику, помимо достижимости объектов из корневого глобального объекта window?
Сборщик мусора недетерминирован!
Может запуститься в любом момент, его работа не контролируется, не считая возможностей devtools браузера
Я за
🤔
52.0% Мемы🤔
48.0% Треды@jsunderhood Ещё один неплохой источник для начала dev.to/deepu105/demys… Есть перевод на хабре, но не для всех частей. habr.com/ru/post/489360/
Дополнение по источникам касательно работы с памятью twitter.com/zelarky/status…
Когда-то эмперически было выясненно, что как правило GC запускается после очередной из аллокаций (как сейчас дела обстоят не знаю).
Отсюда можно написать такой JS код, который ни разу не запустит GC. Как? Предварительно аллоцировав все необходимые объекты
html5rocks.com/en/tutorials/s…
Наставничество
На сегодня дежурство закончено! 👽
ps Завтра тред про утечки допишу
Суббота
Это я что? Тред зря начал писать вчера?
Пользуясь случаем хочу лишний раз попиарить несколько источников достойных внимания, откуда можно почерпнуть что-то новое, перенять опыт #тред
Defront
Ведущий: @myshov
Ламповый канал про фронтенд-разработку и не только. Всё самое полезное для опытных web-разработчиков каждый день.
Telegram - t.me/defront
Website: defront.ru
ДевШахта
Ведущий: @amel_true
Подкаст. Переводы. Веб-разработка.
Помимо всего прочего много материалов касательно NodeJS
Telegram: t.me/devSchachtChan…
Medium: medium.com/devschacht
Youtube youtube.com/channel/UCTSVf…
UnderJS
Ведущие: @ovrweb @rage_monk
Самый безызвестный подкаст во всём фронтенде
Website: underjs.ru
Telegram (анонсы): t.me/uderjs_announc…
Веб-стандарты
Telegram: t.me/webstandards_ru
Редакторы новостей: [@pepelsbey](https://twitter.com/pepelsbey) [@dark_mefody](https://twitter.com/dark_mefody)
Подкаст: pod.link/webstandards_ru
Ведущие:
- Ольга Алексашенко
- Никита Дубко [@dark_mefody](https://twitter.com/dark_mefody)
- Вадим Макеев [@pepelsbey](https://twitter.com/pepelsbey)
- Мария Просвирнина @prosvirnina12
- Алексей Симоненко @simonenko
Подкаст Пятиминутка React
Ведущий: @petrmyazin
Подкаст о React и смежных технологиях в мире JavaScript
Website: 5minreact.ru
Twitter: @5minreact
Итак, Креационизм vs Дарвинизм.
Больцмановский мозг twitter.com/mobileunderhoo…
понятие флуктации вакуума
Чисто материалистическая маловероятная, но помноженная на бесконечное время, теория, которая имеет место быть и может связать умозрительно и большой взрыв и эволюцию и прочие теории
Если коротко из ничего появляется все
Потом все умирает (вселенная остывает) и на второй кругу
ps Обещал в понедельник тему затронуть, затронул ;)
@jsunderhood Я хз кто начал вести этот ак. Но заебали и отписка с таким потоком. Дохуя. Душно пиздец
Альтернативные мнения twitter.com/evgeniorodrigu…
Похоже нужно взять паузу на сегодня :)
Перейдем к практике. У современных браузеров (chrome, safari) существуют инструменты для профилирования этой кучи, а также новых аллокаций.
developers.google.com/web/tools/chro…
Идея поиска утечек на практике проста:
- выделяем пользовательский сценарий
- растет ли память в процессе?
- должна ли она расти?
- ищем объекты, которые аллоцируются
- используются ли они?
- нет? утечка!
Chrome devtools. Performace profiling.
Важным здесь является профилирование Memory. Оно покажется количество объектов в JS Heap, documents, listeners, nodes и тд. Вспомните ранее показанный граф объектов, как стало ясно они бывают разных типов.
Помимо возможности вызвать вручную сборку мусора, можно также проследить за работой этого сборщика мусора, в части можно обнаружить фазы его работы. Бывает Major GC, Minor JS и как видно фаза работает не за один раз
На скрине я вручную запустил сборку мусора.
Major GC и Minor GC это намек на то, что сборщик мусора в v8 работает на поколениях. В прикреплении детали работы сборщика мусора Orinoco в v8
Trash talk: the Orinoco garbage collector
v8.dev/blog/trash-talk
youtube.com/watch?v=Scxz6j…
Если график профилирования памяти выглядит так (картинка), значит все хорошо, память аллоцируется, затем срабатывает сборщик мусора.
Общее значение используемой памяти колеблется около одного уровня - утечки памяти нет.
Если график профилирования памяти выглядит так (картинка), GC пытается чистить, но общий уровень растет, значит возможна есть утечка памяти.
Однако утечка это или нет зависит от того какая задача заложена в скрипт, мб аллокации и подразумеваются задачей.
PiterJS
Организаторы: @gopiterjs
Сообщество вокруг JavaScript, платформы node.js и все, что с ними связано c берегов Невы
Youtube канал с докладами: youtube.com/c/PiterJS
HolyJS
Организаторы: @HolyJSconf
Конференция для JavaScript-разработчиков
Youtube канал с докладами: youtube.com/c/HolyJS
@jsunderhood Еще Frontoweek Важнейшие события фронтенда за неделю. Подкаст: anchor.fm/frontoweek t.me/frontoweek
Рекомендация от читателя twitter.com/m0rg0t/status/…
jsunderhood - полезный коллективный аккаунт 🤗
Хорошо, память растет, возможно утечка, что делать дальше? Искать 🙃
Heap Snapshot позволит сделать снимки кучи (место, где все объекты хранятся, вспомните граф) и сравнить снимки м/у собой, этот инструмент позволит понять КАКИЕ объекты "увеличивают память"
Allocation Timeline, другой инструмент, позволит понять КОГДА и ЧТО аллоцировалось
developers.google.com/web/tools/chro…
Какие еще есть инструменты, что они делают, как ими пользоваться - читайте в описании Google DevTools
В статьях скриншоты devtools могут быть устаревшими, так как devtools постоянно развивается, однако ничего страшного.
developers.google.com/web/tools/chro…
Обычно выделяют 4 типа утечек связанных с:
- глобальными переменными
- таймерами
- event listener
- замыканиями
Популярная статья об утечках памяти, помимо всего прочего показывает какие типы утечек бывают:
blog.sessionstack.com/how-javascript…
В своем старом доклад про утечки памяти выделял больше типов. Поэтому вопрос типов утечек - вопрос относительный
Слайды: slides.com/xufocoder/memo…
Времени осталось немного - чуть более суток, потому выбор за вами:
или еще один тред - про браузерные отпечатки
или ctf-квэст, каждый сможет побыть хацкером, но не долго
Сегодня в 22:00 фиксирую результаты
🤔
60.2% тред.браузерные отпечатки🤔
39.8% ctf-квэстНапоследок приведу пример самой простой утечки из доклада.
Напишем сервис кэширования. Также для демонстрации роста памяти будем "сохранять" дополнительные данные.
Создадим его экземпляр и вызовем много раз метод cache
График Performace profile, на нем видно несколько "всплексов", это я вручную запускал GC, однако количество памяти (объектов в JS Heap) не уменьшилось, а сервис в примере выше был удален, тоесть память должна очиститься, объекты остались в памяти - нашли утечку.
В чем проблема? Проблема в переменной cache она хранит в себе значения, после удаления сервиса, поскольку является глобальным объектом
Решение в лоб, сделать переменную локальной
Сделав очередные замеры, и запустив вручную GC, получаем следующий график. После вызовов GC количество объектов в JS Heap возвращается к изначальному уровню. Утечка устранена
@jsunderhood Наверное, в контексте кэширования стоит упомянуть довольно уникальные WeakMap и WeakSet.
Как заметил @anber_ru второе решение это использование Weak-* объектов, в нашем случае WeakMap, который будет хранить ссылки слабо, то есть если на объект больше не ссылаются другие объекты, кроме WeakMap, тогда этот объект удаляется
twitter.com/anber_ru/statu…
Тред (Сергей Ufocoder)
Фиксирую текущие результаты опроса:
Будем раскрывать тему про браузерные отпечатки
Если бы выбрали CTF, то @Vitalliumm опять бы был первым как в fctf3.now.sh, вот пруфы vk.com/rndjs?w=wall-1…
На сегодня дежурство завершено! 🥱
Завтра будет последний день недельного дежурства!
Увидимся!
Воскресенье
@jsunderhood А как на счёт Дмитрия Сошникова и его статьи про ECMA 262?
Упустил из внимания, хотя упоминал в одном из тредов dmitrysoshnikov.com
twitter.com/dmitri_frolof/…
JavaScript и Браузерные отпечатки #тред
Как вам эта неделя?
🤔
70.1% Давай еще одну!🤔
11.5% Хорошо, но хватило и 1ой🤔
4.1% Лучше был бы другой🤔
14.4% Может хватит опросов?!Не для кого не секрет, но за интернет пользователями следят, причем давно, а что если я скажу тебе, что это происходит и с помощью браузера тоже
Кому нужны мои данные?
Рекламные сети: Google AdSense
Брокеры данных: DoubleClick, ComScore, cXense
Сервисы аналитики: Google Analytics, Yandex metrika
Социальные сети: Facebook, Google Plus
и так далее
Когда правительства собирают данные, мы называем это «слежкой», когда компании делают то же самое, мы ошибочно называем это «пользовательскими службами».
myshadow.org/trackography#w…
Причем тут браузеры?
Как правило в веб-сайты встраиваются трекеры, которые отправляют данные о пользовательской активности, в дальнейшей формируется статистика
1/2 Причем тут браузерные отпечатки?
Можно пометить браузер пользователя, и отслеживать его перемещения. Как только он авторизируется на веб-сайте или воспользуется социальными сетями — его метка (отпечаток) будет связан с его реальным профилем
2/2 Далее если пользователь будет неавторизованным, то мы все равно сможем все равно сказать, что это вот тот самый.
Отпечатком может воспользоваться как одиночный сайт и анализировать активность анонимов
Так и сеть сайтов, которая может следить какие сайты сети посещает пользователь с этой меткой, можно даже выстроить маршрут
Например, рекламные сервисы. Сделав запрос на поиск товара на одном сайте, свяжем метку и запрос. Зайдешь на другой сайт из этой сети, мы порекомендуем тебе похожий на твой запрос товар
Встречали как гугл подсовывает вам похожую рекламу, а вы нигде не логинились? Вот это оно
Отчасти дело в трекерах, трекеры повсюду!
Одно время был популярен сторонний сервис комментирования disqus. Некий Дон Вильямсон отключил его на своем сайте и снизил количество сетевых запросов с 105 до 16
Статья за апрель, 2017
donw.io/post/github-co…
Dr. Axel Rauschmayer @rauschma
website: 2ality.com - JavaScript and more
Тред (Сергей Ufocoder)
Далее, чтобы не затягивать спойлер, многое буду брать из доклада про отпечатки youtu.be/3D7HjYLkVrs
Отпечаток это своего рода идентификатор id
Отпечатки бывают трех видов
Пассивные, когда мы ориентируемся на заголовки http и ip протокола, берём хэш от их суммы, коллизий определённо будет много, по таким полям делать id проблемно, но подход имеет место быть
Пассивные отпечатки могут использоваться HTTP-заголовки: Accept, Accept-Encoding, Accept-Language, Connection, Host, User-Agent, Version + Source Address из IP протокола
Пример реализации: github.com/actionhero/bro…
Звезд мало, тк пассивные отпечатки малоэффективны, не интересны
Активные отпечатки для сбора характеристик запускают какой-нибудь код, как правило это JavaScript-код. Здесь также берутся характеристики, например в строковом виде, конкатенируются, затем берется от большой строки хэш - это и есть id
Для активных отпечатков большое раздолье, можно брать очевидные характеристики браузера: включены ли Cookies, timezone, список плагинов, глубина цвета экрана и его разрешение, поддержка Do Not Track, Поддержка LocalStorage/SessionStorage/OpenDatabase, Название UserAgent
Грубо говоря, все то, что можно вытащить из navigator может попасть в активный отпечаток:
Прежде чем продолжить необходимо ввести еще несколько понятий:
Поверхность браузерного отпечатка - набор наблюдаемых характеристик, которые могут использоваться совместно для идентификации пользователя, браузера или устройства
Набор состоит из определяющий характеристик, по сути все то, что характеризует пользовательский браузер, вспомните свойства объекта navigator.
Каждую характеристику можно описать использую факторы: энтропия, обнаруживаемость, живучесть, доступность, масштаб
Важным фактором является энтропия, она показывает насколько бит поверхность одного отпечатка, может отличаться от другого отпечатка.
Покажу важность на примере
1/2 У вас есть 100 знакомых все из них живут на улице Большая Садовая, и вы знаете адрес каждого но без личности
если все живут в 1ом доме, то разницы м/у таким отпечатком, как номер дома, нет, он бесполезен, энтропия ноль
2/2
Если, каждый будет жить по своему номеру доме, тогда вести, слежку и устанавливать личность будет проще.
Если в одном доме будут жить скажем 5еро, тогда если кто-то выйдет из него, нужно будет понять кто же это из тех 5ых
Можно посчитать какой длинны необходима в идеале определяющая характеристика, население планеты ~7,5 млрд -> 33 бита
Грубо говоря, если мы сможем собрать такую строку из характеристик браузера, которая будет отличаться от других строк на 33-бита каждый будет под колпаком
Есть еще другие факторы определяющих характеристик, которые описывает спецификация
да, да, да не удивляйтесь такое существует
с браузерными отпечатками уже давно борются,
первая версия спеки март 2013 год
w3c.github.io/fingerprinting…
Вернемся к техникам получения активных отпечатков, а именно к неочевидным и возможно самым практичным
1/2 Canvas Fingerprint, 2012 год
hovav.net/ucsd/papers/ms…
Самая эффективная и самая простая в реализации техника, необходимо отрисовать текст разными шрифтами и необычными символами, далее canvas переводим в base64, далее хэшируем - получаем id
2/2 Один и тот же текст может отображаться по-разному на разных компьютерах в зависимости от операционной системы, библиотеки шрифтов, видеокарты, графического драйвера и браузера.
Не помню какая у этого отпечатка энтропия, но поверьте мне наслово, что достаточная для слежки
Есть еще техники получения через работу с audioContext (почти устарело), через WebGL как продолжение идеи canvas fingerprint
Интересным является то, что в свое время Battery API позволял также получать строку с высокой энтропией, считай быть отпечатком, но это пофиксили
Кстати и у браузера Tor, есть своя дока, которая описывает как она борется со всеми этими трекерами и фингепринтами
2019.www.torproject.org/projects/torbr…
Несмотря наличие встроенных механизмов можно все таки провернуть одну технику для браузера Tor
browserleaks.com/rects
Повторюсь для закрепления активные отпечатки позволяют через выполнение кода получить наблюдаемые характеристики очевидные или не очевидные, ценность характеристик определяется факторами (см спеку w3c)
Реализации:
- github.com/fingerprintjs/… (github ~11,6k stars)
- github.com/Song-Li/cross_… (github ~1k stars)
- github.com/jackspirou/cli… (github ~1,2k stars)
- github.com/carlo/jquery-b… (github ~150 starts)
- github.com/RobinLinus/ube… (github <100 stars)
Первая реализации это похоже на реинкарнацию другой библиотеки от Валентина Васильева, тк он майнтейнер в новой по первому линку, прошлая реализация жила до 2018 года. Была оч популярна. Кстати вот его доклад на эту тему
youtube.com/watch?v=RcB-Jq…
@jsunderhood Еще есть: WebRTC, Permissions API, размеры окна браузера (звучит дико, но в 99% помогает в отпечатке пользователей маков), window.chrome, Math, SharedArrayBuffer, PaymentRequest, matchMedia, createEvent, HTMLMediaElement, Performance API, рендеринг шрифтов в div, и т.д.
Как заметил @Vitalliumm реализаций FP (fingerprint) очень много, есть даже веб-сайт библиотека таких техник и подходов browserleaks.com
twitter.com/Vitalliumm/sta…
Перейдем к 3ему виду отпечатков, cookie-like или куки-подобные отпечатки, суть: формируем значение (на сервере) отдаем клиенту, он записывает в хранилища, браузера и вы извлекаем по имени это значение из них
Очевидными к использованию здесь является localStorage, sessionStorage
Понедельник
Самый интересный баг, который мог стать экзотическим хранилищем - могли читать историю браузера, записать и прочитать "значение".
Доступ к истории браузера был возможен благодаря атаке по времени, существовала разница по отрисовке посещенной и нет ссылки
owasp.org/www-pdf-archiv…
Было еще одно экзотическое хранилище на основе HSTS, но изначальный pdf документ исследование недоступен, radicalresearch.co.uk/lab/hstssuperc…
техника называется HSTS Supercookies или HSTS Fingerprint
Окей, есть 3 вида отпечатков, с нас собирают характеристики, чтобы из них сформировать уникальный id, что делать?
Браузерные расширения, блэклист на известные трекеры на уровне расширения, прокси это хорошо, но это не все.
И кстати парадокс, но чем больше вы боретесь, тем более уникальным вы становитесь, лучшая тактика быть как все.
Но если серьезно, стоит снова заглянуть в спеку w3c
И эти меры уже предпримаются браузерами, но по разному
w3c.github.io/fingerprinting…
Из браузеров по слухам рекомендуется браузер brave.com, там из коробки больше анти трекинговых механизмов
Информации по теме много, но нужно завершить тред
Добавлю, если браузерный отпечаток основан на общеизвестных характеристиках, то долго он не проживет, по 1ому из исследований около недели, потом у вас будет уже другой fp.
Но помните интернет ничего не забывает
Тред (Сергей Ufocoder)
На этом моя неделя на @jsunderhood заканчивается!
Благодарю всех и каждого за дополнения по темам, а главное за терпение такого большого потока твитов.
Кому интересная моя сетевая активность:
twitter: @xufocoder
telegram: t.me/ufostation
Как вам эта неделя?
По опросу многие (на текущий момент ~70%) хотели бы продолжения.
К сожалению после такой бурной недели мне просто необходим продолжительный отдых. Устал.
Но надеюсь, что это не последняя наша встреча ;)
Твит опроса:
twitter.com/jsunderhood/st…
ps. Извиняюсь за опечатки в твитах их тоже было много 😜
