Пара слов о веб-воркерах

О сервис-воркерах слышали все. А вот когда разговор заходит о веб-воркерах, часто я встречаю вопрос «А что это?». В этом посте расскажу подробнее, что это такое и когда эту технологию стоит использовать.

Что за зверь

Веб-воркер — штука, которая умеет выполняться в браузере параллельно с основным скриптом. А значит — выполняться, не блокируя отрисовку страницы. Проще говоря, если запустить что-то тяжёлое в основном скрипте, то страница будет тормозить, а если в веб-воркере — то не будет.

Что нужно знать перед началом

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

АПИ

У веб-воркеров простое АПИ. Чтобы проверить, поддерживается ли технология браузером:

if (window.Worker) {...}

Чтобы создать воркер:

const worker = new Worker('./path/to/file.js')
// путь должен быть прописан относительно .html, 
// в котором подключается основной скрипт

Чтобы отправить сообщение из основного скрипта в воркер:

worker.postMessage({key: 'value'})

Чтобы подписаться на сообщение внутри воркера:

self.onmessage = e => 
  console.log(e)
// self — глобальный объект внутри воркера,
// как window в основном скрипте

Чтобы отправить сообщение из воркера в основной скрипт:

self.postMessage({key: 'value'})

И чтобы подписаться на сообщение от воркера в основном скрипте:

worker.onmessage = e =>
  console.log(e)

Пример

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

Вначале попробовал сделать анимацию без ЦСС-трансформаций, чтобы результат был нагляднее. Получилось так.

Без применения веб-воркера анимация стопорится, и ФПС падает до 0. Так происходит потому, что процессор занят сложной задачей. На скриншоте видно, сколько места занял response — это вычисления:

Веб-воркер выполняется параллельно, поэтому анимация в среднем держится на уровне 60 ФПС. На скриншоте видно, что вычисления теперь выполняются отдельно:

Результат для анимации без ЦСС-трансформаций видно и невооружённым глазом. Попробуйте покликать на разные кнопки сами.

ЦСС-трансформации спасают положение, страница становится отзывчивее, а анимация глаже. Но даже с ними при чуть больших нагрузках ФПС падает до 45–50. С веб-воркером ФПС стабильно держится на 60.

Зачем это

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

Кто уже использует

Покедекс использует веб-воркер для обзора изменений в shadow DOM. Из-за этого приложение плавно скроллится и работает без подмерзаний даже на старых телефонах.

И на сладкое

Веб-воркеры поддерживаются всеми браузерами, кроме Оперы Мини. Они работают даже в 11-м ИЕ:

Поэтому пользуйтесь, классная же технология :–)

Доп. материалы

«Мозг и тело» Сайен Бейлок

Это книга о том, как тело человека влияет на эмоции и мышление. В ней подробно описаны эксперименты, поэтому читать интересно. В некоторых частях я узнал себя :–)

Несколько цитат о связи разных отделов мозга друг с другом, ассоциативной памяти и обучении:

Пальцы и цифры делят одни и те же «просторы» в головном мозге человека, в частности теменную долю коры. Движения тела во время музыкальных репетиций помогают детям развивать свой мозг для решения математических задач. [А] люди, внезапно потерявшие способность пользоваться пальцами, теряли также способность считать в уме
Клетки мозга, неоднократно активизирующиеся в одно и то же время, тяготеют к установлению связи между собой. Иными словами, активность в одном нейроне приводит к активности в другом
По мере того как клетки снова и снова возбуждают друг друга, происходит определенный рост или изменение метаболизма связей между этими клетками, отчего они начинают ещё эффективнее стимулировать друг друга. [То есть] если одно слово часто встречается в контексте определенного действия, то его звучание провоцирует активность в двигательной области головного мозга, которая, в свою очередь, способствует более быстрому пониманию этого слова

О зависимости мышления от внешних обстоятельств и состояния тела и рекурсивности мышления:

Наше мышление встроено в тело и сопряжено с повторным переживанием схожего телесного опыта. [Следовательно] мозг не всегда четко разграничивает воспоминания из прошлого и впечатления от настоящего
Люди берут в руки электрические лампочки не так, как они хватают теннисные мячи, потому что обычно они применяют эти предметы в разных целях. Одну и ту же бутылку мы берем со стола по-разному в зависимости оттого, что собираемся с ней делать дальше...
Склонность считать более привлекательными те объекты, которые проще достать, можно назвать примером предрасположенности к физическому комфорту. Мы автоматически представляем себе, что и как мы сделали бы с помощью этого предмета, и по степени легкости взаимодействия с ним определяем, нравится он нам или нет

О зависимости эмоций от тела и рефлексии:

Нейротоксин [в ботоксе] парализует мышцы, в которые он вводится. Вместе с морщинами исчезает также и способность строить горестные и «кислые» гримасы... Медики считают, что определенные движения мышц, или отсутствие таких движений, помогает изменить настрой мозга и то, как человек переживает те или иные эмоции
Когда мы видим, слышим, читаем или думаем о чём-то плохом, мы «воплощаем» этот опыт в себе. Реакция распространяется и на нашу мимику и позу. То, как мы держим тело, в свою очередь, посылает мозгу сигнал о том, как мы себя чувствуем
Мышление есть результат взаимодействия мозга, тела и опыта, особенно эмоционального опыта
Связь между температурой и социальным комфортом ощущается человеком с самого рождения. Благодаря физическому контакту мы привыкаем ассоциировать тепло с непосредственной близостью к другим людям
Мы воспринимаем эмоционально негативные ситуации как наносящие физический вред независимо от того, чем именно они нам грозят. С эволюционной точки зрения очень разумно использовать одни и те же зоны мозга для восприятия и социальной, и физической боли. Получается значительная экономия ресурсов
Поскольку мозг не всегда проводит четкое разграничение между физической и социальной болью, некоторые из методов, применяемых для облегчения физической боли, могут сослужить нам службу и тогда, когда мы мучаемся от боли иного рода. Люди, принимающие ацетаминофен [анальгетик, прим. автора заметки] курсами на протяжении нескольких недель, сообщают, что стали [меньше] чувствовать себя социально-изолированными в повседневной жизни
Человек переводит физические, умственные, и духовные [усилия] в мышечное напряжение. Когда он привыкает дышать правильно и держать своё тело естественно, эта непринужденность сказывается и на его мышлении

О зеркальных нейронах:

Их [детей] умственные способности, такие как умение понимать мысли, чувства и намерения других людей, тоже проистекают из навыков действовать в этом мире самостоятельно. ...Малыши гораздо лучше понимают намерения окружающих, когда они умеют делать то, что делают другие у них на глазах
...Активизация двигательной системы происходит только на фоне собственного двигательного опыта человека, а не просто его знакомства с конкретным стилем танца. Когда балерины наблюдают за па и фигурами из собственного репертуара и партнеров по танцу противоположного пола, их мозг реагирует активно именно на те движения, которые выполняют они сами
Когда собственная двигательная система человека вступает в игру, [человек] получает определенные преимущества. Например, он способен предсказывать результаты действий другого человека раньше, чем они будут выполнены до конца
Зеркальные нейроны играют важную роль и в эмпатии. О них чаще всего говорят, когда речь заходит о понимании действий других людей, но они важны также и для понимания чужих эмоций

О важности обратной связи при обучении, и боли — как обратной связи:

Их [детей] двигательная система пока не посылает предупреждений о том, что ходить над обрывом рискованно. В этом кроется одна из причин, почему ходунки столь опасны: они позволяют малышам совершать движения, превосходящие их телесные возможности. В результате дети оказываются в положении, в котором они не способны предвидеть последствия своих действий. Малыши в ходунках склонны, не задумываясь, переступать через край визуального обрыва — например, через лестницу в доме
Ходунки не просто опасны — они замедляют развитие моторики. Дети, проводящие в этих приспособлениях много времени, осваивают умение самостоятельно держаться на ногах не так быстро, как могли бы. Они просто привыкают к тому, что в положении стоя их вес удерживает устройство

Об обучении через опыт и пользе движения для мозга:

Мария Монтессори: «Одна из величайших ошибок нашего времени состоит в том, что мы думаем о движении как о чем-то оторванном от высших функций… Умственное развитие должно быть связано с движением и зависеть от него… При наблюдении за ребенком становится очевидным, что развитие разума происходит через движение… Разум и движение являются частями единого целого»
Физическое участие в опыте действительно облегчает усвоение теоретических знаний. [Потому что] при выстраивании своей концепции реальности мы полагаемся на собственный конкретный физический опыт

О пользе движения для решения задач прямо в точку:

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

О языках и речи:

Языковеды полагают, что нам трудно вникнуть в чужую речь потому, что никогда не доводилось совершать такие движения языком и ртом, какие необходимы для правильного произнесения этих звуков. Тренируясь говорить на иностранном языке с правильным произношением, вы не просто слушаете, как на нём говорят другие, — двигательная практика облегчает вам понимание незнакомых слов
Обмен идеями воспринимается человеком как продолжение обмена предметами. При восприятии речи двигательная система активизируется, если слова содержат в себе значение передачи чего-либо кому-либо независимо оттого, происходит ли реальное перемещение предметов

О жестах:

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

О медитации:

Осознанная медитация, возможно, лучший пример фокусировки на своём организме
Медитация помогает изменить мозг. [Она] не только снижает тревожность и ослабляет хроническую боль, но может уменьшить и симптомы обсессивно-компульсивного расстройства личности
Сначала приходится задействовать много ресурсов рабочей памяти и сознания на то, чтобы контролировать положение тела. Но со временем движения становятся привычными и начинаешь выполнять их автоматически. Только тогда можно уже перевести освободившиеся мыслительные «мощности» на что-то другое, например на изучение теории музыки или интерпретацию музыкальных произведений

В общем, рекомендую. В ней 340 страниц, читается быстро.

А ещё эту книгу дополнят:

  • «Человек, который принял жену за шляпу» — Оливера Сакса
  • «Мозг рассказывает. Что делает нас людьми» — Вилеайнура Рамачандрана
  • «Мозг и душа. Как нервная деятельность формирует наш внутренний мир» — Криса Фрита

Казань, июль 2017

В Казани я был два года назад. Стандартный туристический маршрут не изменился, а вот набережная и парки стали круче. Но обо всём по порядку.

Гулять удобнее начинать с Баумана, это главная пешеходная улица:

Она выведет на Казанский кремль:

Там же мечеть Кул-Шариф и «падающая» башня:

Покрытие классное :–)

Вообще гулять по городу приятно, встречаются милые детали:

Дворец земледельцев у меня не получилось нормально сфотографировать ни в прошлый раз, ни в этот:

Чёрное озеро два года назад обещали облагородить:

И сделали. В парке появились детские площадки, общественные пространства. Вот, например, открытая сцена с навесом (навес я почему-то не сфотографировал, он слева от меня):

Фасады рядом с парком посвежели:

Парк открыли не полностью, только часть. Прямо настоящий итерационный запуск :–)

Кремлёвская набережная очень крутая:

Приезжайте:

Ссылки №10

Сегодня 3 видоса и 5 статей:

«Почему я отвлекаюсь» Эдварда Хэлловэлла

Это книга о синдроме дефицита внимания — СДВ. Автор рассказывает истории о людях с этим синдромом, их жизни и проблемах, с которыми им приходится сталкиваться. Описаниям можно верить, потому что у самого Хэлловэлла этот синдром.

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

Всё начинается с описания синдрома:

СДВ — неврологический синдром, у которого... есть триада симптомов: импульсивность, отвлекаемость и гиперактивность... [Это] вовсе не нарушение обучаемости... и не дислексия. Он не связан с недостаточным развитием интеллектуальных способностей

...и симптомов:

Энергия, открытость... представлялись совершенно типичными для СДВ, как и свойство [героини истории] отклоняться от курса
Осложнения в развитии языковых способностей могут возникать по-разному и на многих уровнях. У человека бывают сложности и с приемом, и с передачей
...Нарушения слуха, близорукость и проблемы с нервами, влияющие на артикуляцию, проблемы с памятью и эпилепсия
Импульсивность в словах или действиях, ощущение опасности, неуверенность, хроническая прокрастинация, склонность говорить не задумываясь, частый поиск сильных стимулов, сложности с соблюдением установленных правил

Из-за последних двух симптомов больные СДВ чаще других злоупотребляют алкоголем и наркотиками:

Больные СДВ часто практикуют самолечение алкоголем, марихуаной и кокаином. Действие кокаина схоже с эффектом от одного препарата из используемых при медикаментозном лечении синдрома

Но его трудно диагностировать, потому что о нём знает мало людей. Особенно трудно определить его у детей:

У очень многих детей с СДВ есть и сильные черты... У них богатое воображение, они сопереживают, тонко подстраиваются под настроение и мысли окружающих, даже если пропускают мимо ушей большую часть сказанного
Разговор в кабинете врача часто заставляет детей с СДВ сосредоточиться. Порядок и новизна резко снимают симптомы СДВ, и даже страх, который дети иногда чувствуют, может помочь им собраться. Поэтому педиатрам легко не заметить этот диагноз: симптомы просто не здесь, не в кабинете. В школе картина будет ближе к истине
По заявке учителя малыш прошел несколько тестов, но, как оказалось, они проверяли только уровень интеллекта. IQ был 145, но между вербальными и невербальными навыками было десять пунктов разрыва
Важно развеять любые представления, что в СДВ кто-то виноват. Недостаточное внимание со стороны родителей может усугубить ситуацию... Причины этого заболевания точно не известны. Как уже говорилось выше, веские доказательства говорят в пользу генетики; плохое воспитание ни при чем

Человеку с СДВ, приходится каждый день решать кучу проблем:

Синдром дефицита внимания усугубляет проблемы с обучением так же, как близорукость: человек не может как следует сфокусироваться, поэтому не способен в полной мере применять имеющиеся таланты. Первый этап лечения — надеть очки, то есть скорректировать СДВ, а затем снова оценить масштаб оставшихся нарушений обучаемости
СДВ может мешать межличностным отношениям не меньше, чем учебе и работе. Чтобы завести друзей, надо уметь сосредоточиваться. Чтобы создать гармоничные отношения в группе, надо прислушиваться к тому, что говорят другие. Язык знаков бывает едва заметным: слегка прищуриться, приподнять брови, немного изменить интонацию, наклонить голову. Больные СДВ не улавливают таких сигналов, и это может привести к серьезным ошибкам в обществе и чувству неуместности
Они всегда все смешивают, занимаются прокрастинацией, с трудом доводят начатое до конца. У них бывают резкие, беспричинные перепады настроения. Такие люди иногда раздражительны, даже впадают в ярость, особенно если их прервать или когда они перескакивают от одного к другому. У них плохая память. Они любят помечтать, обожают возбуждающие ситуации, души не чают в действии и новизне

И постановка диагноза всегда приносит ему облегчение:

Первый этап лечения — постановка диагноза. Часто уже это приносит большое облегчение, потому что человек чувствует: «Наконец-то для моего состояния есть название!»

Но кроме того, что синдром малоизвестен, диагностировать его мешают привычки и закостенелость мнений:

Это беда всех взрослых: о нас уже сложилось какое-то впечатление, да и мы сами уже имеем о себе определенное мнение. Из-за этого провести радикальную переоценку невероятно сложно, а для постановки диагноза СДВ нужно именно это

СДВ мешает строить отношения:

Когда один или оба партнера больны синдромом дефицита внимания, повседневная жизнь становится очень нестабильной. Одна женщина, живущая в такой паре, призналась: «Никогда не знаешь, чего ожидать. На него ни в чем нельзя положиться...». Синдром может нарушить интимные отношения и истощить обоих партнеров. Однако если правильно отрегулировать ситуацию, супруги cмогут сотрудничать, а не воевать друг с другом. Когда СДВ лежит в основе семейных проблем, диагноз часто не замечают, потому что они могут выглядеть не особенно необычными
Партнер человека с таким диагнозом может получить от восприимчивого обсуждения не меньшую пользу, чем сам больной. Пытаясь удержать ситуацию под контролем, не допустить финансового и эмоционального краха семьи, привести дела в порядок, партнер может испытывать сильные нагрузки

Родителям детей с этим синдромом надо быть аккуратнее:

Когда диагноз поставлен и семья сталкивается с необходимостью перемен, этот вызов часто встречают сильным сопротивлением
Семьи, как и большинство сообществ, противятся переменам. Например, если один член семьи хочет уйти, это часто считают предательством. Если кто-то растолстел и пытается сбросить вес, другие начинают саботировать его усилия. А если какой-то член семьи хочет выйти из роли, которую играл годами, это обычно дается нелегко, потому что остальные родственники стремятся ему помешать. Если человек играет роль клоуна, он останется клоуном

Лечить синдром автор рекомендует не только лекарствами, но и тренировками:

Выход нашелся в спорте. Макс стал фанатичным бегуном на длинные дистанции. Он говорил, что последние километры долгого забега дают ему «приятную боль», психическое облегчение, «абсолютную ясность мыслей»
На это тратится много денег: сами занятия ежемесячно обходятся в несколько тысяч долларов, плюс расходы на соревнования, костюмы, разные мелочи. Но оно того стоит. С их диагнозом лишнюю энергию надо расходовать

А ещё он отмечает большую роль семьи и близких в лечении:

В СДВ никто не виноват
Авторы рекомендуют метод, который они называют принципиальными переговорами, или переговорами по существу — отделяйте людей от проблемы
Конечно, переговоры возможны не всегда, а в младшем возрасте нередко и нежелательны. Маленькие дети, больные СДВ, остро нуждаются в структуре и рамках. Они сами хотят ограничений и будут испытывать родителей, пока не добьются своего. В таком возрасте разумнее сказать: «Мы идем в Макдональдс», а не «В какой из пяти ресторанов нашего района ты хочешь сходить сегодня вечером?»
Имейте в виду, что больной СДВ в любом возрасте диалогу предпочитает борьбу, потому что она сильнее стимулирует. Ссоры в семье возбуждают больше, чем разумное, мирное сосуществование, а кидаться картофельным пюре в сестру интереснее, чем вежливо передавать тарелку

Медицинских или научных терминов в книге почти нет, читается легко — советую всем.

Ссылки №9

Давненько не брал я в руки шашек:

Как описывать баги

Разработчики не любят баги и хотят от них поскорее избавиться. Если непонятно описать проблему, то, скорее всего, вам ответят «не воспроизводится». Никому не хочется разбираться в непонятной фигне.

Мне при описании багов другим разработчикам помогает алгоритм:

  • что я сделал;
  • что хотел получить;
  • что получил в итоге.

В нём несколько плюсов.

Понятно, в чём баг

Не всегда очевидно то, что кажется очевидным.

Когда вы с разработчиком ещё не говорите на одном языке, «поправь отступ» для последнего превращается в квест. Сделать меньше, больше, кратным 5, убрать его вообще? «Увеличь отступ на 5 пк» — понятнее.

Если проблема сложная, то одной строчкой не обойдёшься. «Что хотел получить и что получил» сразу показывают на примере, как программа должна работать, а как нет.

Понятно, как воспроизвести

Отмазка «не воспроизводится» уже не прокатит, потому что вы уже написали, как его воспроизвести :–)

Особенно эффективно работает, если указать контекст: браузер, размер экрана и т.д. Здесь уж совсем деваться некуда.

Запись окружения можно автоматизировать. Например, у Жиры есть расширение для браузера, которое во время скриншота записывает браузер, разрешение экрана и операционную систему.

Вас всё равно спросят

Если что-то останется непонятно, вас всё равно об этом спросят, а время уйдёт впустую.

Я заметил, что когда описываю проблему подробно, то на её решение уходит меньше времени. Это относится не только к разработчикам, но и к поддержке, чату в банке. Опишу проблему сразу подробно — меня не дёргают потом за уточнениями.

Конечно, не для всех ситуаций это нужно. «Поменяй цвет ссылки на синий» — тут всё и так ясно. А вот если команда ещё не сработалась, или проблема сложная, то чем подробнее, тем лучше.