Как ускорить выполнение JavaScript в браузере? Как распаралелить JavaScript?

Question

[Надим]

Каким образом можно было бы распаралелить выполнение JavaScript в браузере? Например, если сгенерировать множество фреймов и расчеты вести внутри них по частям, будут ли он выполнятся в отдельных потоках паралельно?

Пояснения, если нужны детали

Дело в том, что у меня возникала нестандартная задача по парсингу больших объемов текста посредством регулярных выражений (конкретно в браузере). Нестандартность заключается в том, что разобрать тексты нужно максимально быстро: каждую секунду я получаю 10 текстов, на разбор каждого текста регулярками уходит в среднем 3 секунды, если обрабатывать тексты последовательно, это уйдет целых пол минуты, прежде, чем я получу результат по всем 10-ти текстам. Соответственно, у меня закономерно возникает вопрос, а не могу ли я каким-нибудь хитрым трюком распаралелить код? Например, каждый полученный текст разбирать в своем фрейме или popup-окне? Как обычно в таких случаях поступают, когда надо выполнить код в браузере в несколько потоков?

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

Answer 1

[Дмитрий Беляев]

Однозначно нужно выносить эту работу в WebWorker'ы
Вот тут можно почитать: https://developer.mozilla.org/ru/docs/DOM/Using_we...

Ну и еще в плане ускорения, так ли нужно парсить текст регулярками? Регулярки очень медленные. И на больших объемах текста естественно это становится заметно. Разбор текста узконаправленным алгоритмом, сделанным под конкретный формат данных будет в разы быстрее, если правильно его сделать.

Comments

[Надим]

Вы конечно правы, но я просто не представляю, как спарсить определенные переменные внутри тега script не применяя регулярных выражений(

Просто посмотрите этот пример, там весь контент страницы лежит в json-ах. Только как эти json-ы вытащить без регулярок? Я просто не вижу других способов.

[Денис Инешин]

Надим Закиров, Дмитрий все правильно говорит, регулярки медленные. Давайте представим ситуацию:

1. У вас текст из 1.000.000 символов
2. Вы ищите в этом тексте что-то регулярками
3. На каждый поиск регуляркой, под капотом, скрипт пробегает эту строку в 1.000.000 символов много много раз и делает много миллионов операций сравнения
4. Грубо говоря сложность вместо O(n) - у вас может расти вплоть до O(n^2). Что очень плохо и медленно для больших текстов.
5. В теории же, вы можете пробежаться по этой строке в 1.000.000 символов лишь 1 раз и вычлинить все что вам нужно в 1 проход
6. Но тут нужен некий самописный алогритм, который будет проверять символ за символом и применять заранее определенные правила.

[Надим]

Денис Инешин, понял теперь к чему вы. Буду думать.

[Дмитрий Беляев]

Надим Закиров, если речь идет о исходных кодах на любых языках, то парсинг регулярками еще и багов может принести просто уйму.
Для парсинга html и xml в браузере есть встроенный инструмент DOMParser
Для парсинга js лучше взять babel или espree

Answer 2

[ned4ded]

Распараллелить - нет, но вы можете чанковать текст и парсить его чанки асинхронно, что освободит основной поток.

const arr = [1, 2, 3, 4, 5];

const rec = (theArr) => {
    const [first, ...rest] = theArr;

    if (!first) return;

    setTimeout(() => {
        /* do some parsing, example: */
        if ([3, 4].includes(first)) alert('found it!');

        return rec(rest);
    }, 0);
};

rec(arr);

Comments

[Надим]

То есть, если я создам десять фреймов и в каждом из них начну парсить один из 10-ти текстов, то это никак не поможет? Про чанки впервые слышу, если не сложно, можно описать в двух словах, что это такое и как способно мне помочь? Спасибо)

[ned4ded]

Надим Закиров, особенности работы js, есть поток синхронный, выполняемый в данный момент, а есть стек - отложенные вызовы, которые выполняются, когда освобождается основной поток.

Полезный видосик на тему

пример привел выше.

[Надим]

ned4ded, понял, попробую, надо натурные тесты провести. Спасибо, еще раз)

[ned4ded]

Надим Закиров, не за что. Только чанковать нужно на такие блоки, обработка которых не забьет стек. Грубо говоря, если у вас массив из 1000 строк, то вы выбираете 1 строчку, парсите ее за 50ms, отправляете парсинг остальных строк в стек. Иначе интерфейс может не реагировать на интеракции пользователя во время парсинга или начать пролагивать.

[Надим]

ned4ded, боюсь что здесь я точно забью стек, так как даже когда я одну регулярку запускаю, на время разбора никакие другие команды у меня не проходят, т. е. основной поток забит значит на 100%. Попробую для начала веб-воркеры, ни разу с ними не работал, но надеюсь они помогут.

[ned4ded]

Надим Закиров, можно нарезать текст и регулярку запускать на куски текста - я это подразумевал под чанкованием. Плюс, я не особо разбирался с сервис-воркерами, но они, скорее всего, работают так же в основном потоке. Событие вызывает их экшн, который выполняется в данный момент, если этот процесс будет идти 3 минуты - значит поток забьется на 3 минуты.

[Надим]

ned4ded, ааа, теперь понял) Но не думаю, что мне это подойдет, текст нарезать не смогу, обработку надо выполнять целиком на весь текст. Если конечно, вы не знаете как достать из тега sctipt определенные переменные не выполняя код из него. Кроме реугулярок способов не вижу.

[Надим]

ned4ded, блин, я тут подумал, а ведь в теории я могу отправить текст на разбор в background.js - не знаю, можно ли в манифесте расширения указать несколько фоновых страниц, но надо попробовать.

Answer 3

[hzzzzl]

есть веб воркеры, которые выполняются в отдельном процессе, но я с ними дела не имел, кроме как "просто попробовать поиграться", так что тут не подскажу
https://developer.mozilla.org/ru/docs/Web/API/Web_...

а если в промисы замотать, то быстрее не станет?

function parse(txt = '') {
  return Promise.resolve(txt.match(/a/gi))
}

texts = ['astajf;lj3', 'AAjfjia33r', '4jlj;lajaaa', 'afdj df jas fjsa ja33a']

await Promise.all(texts.map(parse))
// (4) [Array(2), Array(3), Array(4), Array(5)]

Comments

[Надим]

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

[hzzzzl]

Надим Закиров, вообще выглядит несложно, на каждый отдельный текст создавать отдельный Worker, ему пересылать текст и ждать результат, имеет смысл попробовать
https://github.com/mdn/simple-web-worker/blob/gh-p...

[Надим]

hzzzzl, согласен, обязательно попробую. Просто мне как-то раньше не доводилось с воркерами работать, пришла пора изучить их) Спасибо большое за ответ.

Answer 4

[xmoonlight]

Наиболее простой вариант:
includeHTML создаёте один js-ник с функцией обработки, и циклом загружаете его несколько раз: как только ушёл запрос на загрузку - тут же идёт следующий цикл без ожиданий!.
Сразу после загрузки, в обработчике, вызываете функцию с нужными параметрами и она сразу начинает считать/парсить/etc.
И так, для всех итераций цикла: всё происходит параллельно!

По необходимости, сами следите и контролируйте количество активных/одновременных исполняющихся скриптов через переменную-счётчик.

Всё работает асинхронно!

Comments

[Надим]

В асинхронность верю, однако основной поток у подключенных файлов будет разный или нет?

[xmoonlight]

Надим Закиров, разный. Браузер об этом заботится сам. Вот где фокус!

[Надим]

xmoonlight, это круто. Но ведь чтобы скрипт подключился, нужно время, пока он скачаеться, т. е. при каждом запуске парсера я буду терять время, необходимое на загрузку скрипта или я немного не так понимаю механизм?

[xmoonlight]

Надим Закиров, переиспользование функции в обработчике сразу после завершения предыдущей, надеюсь, не забудете сделать?!)

Каждая загрузка скрипта - это, фактически, отдельная очередь обработки.
И его не нужно грузить каждый раз, а ровно столько, сколько потоков/очередей хотите создать.

[Надим]

xmoonlight, один черт не понимаю в чем прикол. За счет чего обеспечивается многопоточность в вашем коде? Вы используйте iframe для запуска кода или тут нечто другое?

[xmoonlight]

Надим Закиров, нет. Я не использую iframe. Я использую ajax. А это - сразу генерит отдельный поток.
Iframe - это фэйловер для древних браузеров.