Волшебное использование Web Worker в проектах

внешний интерфейс JavaScript

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

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

Используя Web Worker, мы можем запускать Javascript в фоновом режиме браузера, не занимая собственный поток браузера. Web Workers могут повысить общую производительность приложения и улучшить взаимодействие с пользователем. Если вы не знакомы с рабочими,Пожалуйста, обратитесь к, Я не буду делать здесь слишком много вводных. В этой статье в основном представлены сценарии приложений и проблемы с производительностью рабочих процессов.

Как использовать воркеры для предварительной загрузки изображений

Анализ проблем с предварительной загрузкой изображений

  • Как правило, рабочие процессы не используются для предварительной загрузки изображений в проектах, но подумайте, как реализовать отложенную загрузку изображений, но, исходя из потребностей бизнеса, рабочие процессы используются для предварительной загрузки изображений; вам может не понадобиться предварительная загрузка изображений, но эта статья должна дать вам понимание работников очень полезно;
  • У нас есть много решений для загрузки изображений (не все, если у вас есть другие решения, которыми вы хотите поделиться):
    • Изображения загружаются с помощью тега Img в DOM.
    • Его также можно загрузить через объект изображения js.
    • Его также можно загрузить через ajax.
  • Загрузка изображений путем непрерывного манипулирования DOM является наиболее ресурсоемким и медленным решением; загрузка изображений через объекты Image потребляет больше памяти, а также занимает ресурсы основного потока; загрузка изображений в воркере, безусловно, наиболее целесообразна. нельзя манипулировать в дочернем потоке, поэтому объект изображения также нельзя использовать, поэтому мы можем рассмотреть возможность использования только ajax для его реализации.К счастью, независимо от того, какая схема используется для загрузки изображений, междоменной проблемы не возникает.

конкретное применение

Запустите воркер один, чтобы загрузить картинку, и отправьте данные, возвращаемые каждым запросом, в воркер через postMessage, Не много ерунды, просто вставьте код напрямую:

  • Включить воркеры в Index.js
let w = new Worker("js/workers.js");
 w.onmessage = function (event) {
   /*var img = document.createElement("img");
    img.src = window.URL.createObjectURL(event.data);
    document.querySelector('#result').appendChild(img)
    */
    console.log(event.data);
 };

 w.onerror = function(e){
     e.currentTarget.terminate();
    console.log('erro: ' + e.message);
};
  • Запрос изображений в worker.js
let arr = [...好多图片路径];
for (let i = 0, len = arr.length; i < len; i++) {
    let req = new XMLHttpRequest();
    req.open('GET', arr[i], true);
    req.responseType = "blob";
    //req.setRequestHeader("client_type", "DESKTOP_WEB");
    req.onreadystatechange = () => {
      if (req.readyState == 4) {
      // postMessage(req.response);
    }
  }
  req.send(null);
}

Резюме важно

  • Сравнивая производительность использования XMLHTTTPREQUEST на работнике и использование XMLHTTPREQUEST в главной ните, я использовал узел для ползания URL более 500 изображений веб-сайта на выходных, чтобы проверить следующие выводы:
    • В основном потоке каждый запрос XMLHttpRequest будет потреблять ресурсы.Хотя браузер открывает другой поток в процессе запроса, ему все равно нужно потреблять ресурсы основного потока в процессе взаимодействия, использование воркера не будет занимать основной поток слишком много , Он просто потребляет ресурсы при запуске рабочего процесса.
    • Когда выполняется большое количество запросов XMLHttpRequest, когда скорость сети низкая, использование XMLHttpRequest в рабочем потоке и использование XMLHttpRequest в основном потоке не будут чувствовать себя заблокированными, а при высокой скорости сети будет возвращено большое количество запросов. .

  • В процессе использования работника было обнаружено, что если фактическая ссылка на столбец работника равна 0, рабочий процесс будет закрыт сразу после простоя; если фактическая ссылка на столбец работника не равна 0, рабочий процесс не будет закрыт, когда он бездействует.

    ​
    ​

Категории