Рабочий интерфейс может создавать фоновые задачи. То есть можно добавить потоки в js для запуска. Используется для обработки некоторых трудоемких и требовательных к производительности задач (кроме асинхронных).
1. Конкретное использование Web Worker
//main.js 主线程
//传递一个数字给worker线程。worker线程计算处理完毕后，返回一个信息给主线程。
if (window.Worker) { //这一步比较重要，兼容性判断。
//1.创建一个worker线程。
const myWorker = new Worker("worker.js");
//2.向worker线程发送数据，值可以是number,string,boolean ,file,blob 等
myWorker.postMessage(10000000000);
//3.监听后台任务，
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from worker');
}
//4.当离开页面的时候，或者需要结束worker时(比如任务完成时)，
//可以结束Worker线程，不必占用资源
// myworker.terminate();
//5.当myWorker异常时的时候，会触发onerror事件
myWorker.onerror = function() {
console.log('There is an error with your worker!');
}
} else { //这一步非常重要。具体代码根据需要更具自己的业务写。
console.log('Your browser doesn\'t support web workers.')
}
//worker.js worker 线程
// 程序处理完毕后返回一个结果给主线程。//0 可以加载其他js进来，比如ajax.
//importScripts('ajax.js','b.js')
//1.监听主线程
onmessage = function(e) {
console.log('Worker: Message received from main script');
接收来自主线程发送过来的数据
let num = e.data;
//使用for循环模拟一个耗时、耗性能的任务。（如果这个for循环放在主线程，那么页面很可能会卡死，
//影响用户体验）。for(let i = 0;i<=num;i++){
if(i==num){
//2.向主线程发送数据
postMessage('任务完成啦！')
}
}
//3.worker 线程也可以调用close 方法来结束worker线程。
// close()
//4.同样的，在worker 线程中也可以监听错误信息。
onerror = function(err){
console.log(err)
}2. Сценарии использования
Далее поговорим о том, для каких задач больше подходит использование Worker. Это самый важный момент.
1. Если это программа, потребляющая производительность основного потока. Рассмотрите возможность использования веб-воркеров. Это может предотвратить зависание страницы.
2. Всплывающий экран, вебаудио (просмотры двух друзей группы).www.bilibili.com/Существует использование Worker. Однако, поскольку код сжат и запутан, детальное использование невозможно увидеть. Комментарии приветствуются и дают дополнительные советы по сценариям применения Worker.
3. Вопросы, требующие внимания
1. Ограничения на неоднородность (если локальный код открыт в виде буквы диска, то работать не будет, т.к. исходников нет)
Код основного потока и код рабочего потока должны иметь один и тот же источник для правильной совместной работы.
2. DOM, ограничения скрипта
«Контекстная среда, в которой находится рабочий поток, отличается от среды основного потока, поэтому он не может читать элементы DOM веб-страницы, на которой находится основной поток, и не может ее использовать.document,windowэти объекты. Однако рабочие потоки могут использоватьnavigator，location,XMLHttpRequest. Кроме того, рабочие потоки не могут выполнятьсяalert(),confirm()等方法.
3. Порядок выполнения задания
Задача рабочего потока должна дождаться завершения задачи основного потока, прежде чем продолжить.
4. Рабочий конец
Рабочие потоки могут быть активно закрыты. Если это многостраничное приложение, если вы покинете страницу Worker, Worker не будет работать.
4. Другое
1. По поводу мнения о том, что Ajax-опрос размещается в потоке Worker.
Ajax изначально является асинхронной операцией, имеет собственный поток и обладает хорошей совместимостью. Если вы используете Worker, вам необходимо учитывать совместимость. Таким образом, опрос ajax более чем стоит потери в Worker. неразумно.
2. Взгляды на создание Worker in Worker.
Из-за плохой совместимости создания Worker в Worker не рекомендуется его использовать.
Если вы думаете, что эта статья хорошая, вы можете поддерживать ее (например, + следуйте); если вы думаете, что это не хорошо, вы можете оставить свои ценные предложения в области комментариев! Ваше предложение - наше драгоценное богатство!
Получите полный набор видеороликов по nodejs, веб-сокет nodejs, полный набор видеороликов по базовым классам MySQL, видеоролики по phthon, десятки электронных книг по программированию, вводные базовые видеоролики по PHP, вводные базовые видеоролики по Java и т. д. бесплатно! (Ответ публичного аккаунта на «Мир сингулярности»)
Статьи по Теме
Тщательно понимать операции с файлами и двоичными данными
developer.Mozilla.org/en-US/docs/…