Как интерфейс обрабатывает большой объем данных на уровне 100 000

HTML

предисловие

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

Кратко объяснить

Это вопрос собеседования, сначала интервьюер объяснил мне, как работать с большими объемами данных во фронтенде. Я ляпнул про использование пейджинга с первого раза! Интервьюер сказал, что это было из-за кулис. А как насчет фронтенда? эммммм... Я думал об этом, пакетная загрузка, ленивая загрузка. Отслеживайте скользящие данные дисплея пользователя в пакетном режиме. Затем я спросил, хочу ли я делать вычисления на этих больших объемах данных, и в то же время я не могу допустить, чтобы страница рухнула и инсценировала смерть. Как это сделать? Сразу же я был ошеломлен, это. . Как это работает. Разве это не должно быть сделано в фоновом режиме, если вы хотите выполнять вычисления?

И как можно сразу передать столько данных во внешний интерфейс,~~

Жалоба есть жалоба, Тукао есть Тукао~~

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

Хорошо, тогда давайте узнаем об этом работнике

что такое рабочий


运行者 Worker 接口是Web Workers API的一部分，代表一个后台任务，
它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数，指定一个脚本，在工作线程中执行。（引自MDN）

Это может быть немного скучно смотреть на концепцию.С точки зрения непрофессионала, это так: поскольку js работает в одном потоке, при столкновении с некоторыми js, которые должны обрабатывать большой объем данных, он может блокировать загрузку страницы и привести к зависанию страницы. В настоящее время мы можем использовать worker для открытия подпотока, независимого от основного потока, для выполнения большого количества операций. Это не приведет к зависанию страницы. Это также показывает, что рабочие процессы могут быть использованы для решения проблемы, связанной с тем, что большое количество операций приводит к зависанию страницы.

рабочий синтаксис


const worker=new Worker(aURL, options)

Он имеет два параметра:

aURL (обязательно) — это DOMString, представляющая URL-адрес сценария, который будет выполнять рабочий процесс. Он должен подчиняться политике того же происхождения.

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

рабочие свойства

Worker.onerror: указывает функцию прослушивания для события ошибки.

Worker.onmessage: определяет функцию прослушивания события сообщения, а отправляемые данные находятся в свойстве Event.data.

Worker.onmessageerror: определяет функцию прослушивания для события messageerror. Это событие запускается, когда отправленные данные не могут быть сериализованы в строку.

рабочий метод

Worker.postMessage(): отправить сообщение в рабочий поток.

Worker.terminate(): немедленно завершить рабочий поток.

Примечания по использованию воркеров

1. Гомологическая рестрикция

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

2. Ограничения DOM

Глобальный объект, в котором находится рабочий поток, отличается от основного потока, он не может читать DOM-объект веб-страницы, где находится основной поток, и не может использовать такие объекты, как документ, окно и родитель. Однако рабочие потоки могут перемещаться по объектам и объектам местоположения.

3. Общение

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

4. Ограничения скрипта

Рабочие потоки не могут выполнять методы alert() и confirm(), но могут выполнять запросы AJAX, используя объект XMLHttpRequest.

5. Ограничения файлов

Рабочий поток не может читать локальные файлы, то есть он не может открывать локальную файловую систему (file://), а загружаемые им скрипты должны поступать из сети.

Давайте посмотрим на реальную колонку

Ни один рабочий не используется

Найдите 38-й член последовательности Фибоначчи.

 <div style="width:100px;height:100px;background-color:red;"></div>
 document.querySelector('div').onclick=function(){
    console.log('hello world');
  }
  function fibonacci(n){
    return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);
   }
console.log(fibonacci(38));

При использовании рабочего

<div style="width:100px;height:100px;background-color:red;"></div>
 
var worker=new Worker('worker.js');
worker.postMessage(40);
worker.onmessage=function(event){
    var data=event.data;
    console.log(data)
};
worker.onerror=function(event){
    console.log(event.fileName,event.lineo,event.message);
};

<!--worker.js-->
self.onmessage = function (event) {
    var data = event.data;
    var ans = fibonacci(data);
    this.postMessage(ans);
};

function fibonacci(n) {
    return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
}

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

То, что я записал здесь, может быть немного грубым, более подробно вы можете прочитать следующие статьи (конечно, я ссылаюсь на эти статьи)

MDN

Что, черт возьми, такое Web Worker?

Учебник по веб-воркеру

Если письмо не очень хорошее, пожалуйста, попросите друзей оставить это в комментариях!

Категории