Web çalışanının somut kullanım alanı

Son modülde web çalışanlarına genel bir bakış verilmişti. Web çalışanları JavaScript'i ana iş parçacığının dışına taşıyarak giriş duyarlılığını iyileştirin Bu, web sitenizin Etkileşimini iyileştirmeye yardımcı olabilecek ayrı web çalışanı ileti dizileri Örneğin Sonraki Boyama (INP) iş parçacığı. Ancak genel bakış tek başına yeterli değildir ve bu modülde bir web çalışanı için somut bir kullanım alanı sunuluyor.

Bu kullanım alanlarından biri, Exif meta verilerini resmi değil. Bu çok da uçuk bir kavram değil. Aslında Flickr gibi web siteleri, kullanıcıların teknik ayrıntıları öğrenmek için Exif meta verilerini görüntülemesine görüntüler. (ör. renk derinliği, kamera markası ve modeli) dışı verilerdir.

Ancak bir resmi getirme, ArrayBuffer biçimine dönüştürmenin mantığı, ve Exif meta verilerini ayıklamak tamamen yapılırsa pahalı olabilir. ana ileti dizisinde yer alır. Neyse ki web çalışanı kapsamı bu işin yapılmasını sağlıyor ana ileti dizisinden çıkar. Ardından web çalışanının mesajlaşma ardışık düzenini kullanarak EXIF meta verileri, ana iş parçacığına bir HTML dizesi olarak geri iletilir ve kullanıcıya gösterilir.

Web çalışanı olmadan ana iş parçacığı nasıl görünür?

Öncelikle, bu işlemi yardımcı olur. Bunun için aşağıdaki adımları uygulayın:

1. Chrome'da yeni bir sekme açıp Geliştirici Araçları'nı açın.
2. Performans panelini açın.
3. https://exif-worker.glitch.me/without-worker.html adresine gidin.
4. Performans panelinde, sitenizin sağ üst köşesindeki Kaydet'i tıklayın. geliştirici araçları bölmesini açın.
5. Bu resim bağlantısını veya EXIF içeren başka bir bağlantıyı yapıştırın. meta verilerini girin. alana ve JPEG'i al! düğmesini tıklayın.
6. Arayüz Exif meta verileriyle doldurulduğunda Kaydet'i tekrar tıklayarak kaydı durdur.

Pikselleştirici gibi, mevcut olabilecek diğer ileti dizilerinin dışında Uygulamadaki her şey ana ileti dizisinde gerçekleşir. Ana ileti dizisinde şunlar gerçekleşir:

1. Form, girdiyi alır ve ilk istek URL'sini almak için bir fetch isteği gönderir kısmı için EXIF meta verileri bulunur.
2. Resim verileri ArrayBuffer biçimine dönüştürülür.
3. exif-reader komut dosyası, görüntüsüdür.
4. Meta veri, bir HTML dizesi oluşturmak için kazınır ve bu dize, daha sonra meta veri görüntüleyicidir.

Şimdi, aynı davranışın web sitesi kullanımı ile karşılaştırılması yardımcı oluyor!

Bir web çalışanı ile ana ileti dizisi nasıl görünür?

Artık bir XML dosyasından EXIF meta verilerini çıkarmak için daha fazla bilgi edinmek için ana ileti dizisinde bir JPEG dosyası bulunduğundan, önemlidir:

1. Chrome'da başka bir sekme ve Geliştirici Araçları'nı açın.
2. Performans panelini açın.
3. https://exif-worker.glitch.me/with-worker.html adresine gidin.
4. Performans panelinde sağ üstteki kaydet düğmesini tıklayın köşesindeki simgesini tıklayın.
5. Bu resim bağlantısını alana yapıştırın ve JPEG'i al! düğmesini tıklayın.
6. Arayüz Exif meta verileriyle doldurulduğunda kaydet düğmesini tıklayın tekrar tıklayın.

Bu, web çalışanlarının gücüdür. Her şeyi temel düzeyde yapmak yerine meta veri görüntüleyicinin HTML ile doldurulması hariç her şey ayrı ileti dizisi oluşturabilirsiniz. Bu, ana iş parçacığının başka işler için serbest bırakıldığı anlamına gelir.

Belki de buradaki en büyük avantaj, bu uygulamanın bir web çalışanı kullanmıyorsa exif-reader komut dosyası ana makineye yüklenmez iş parçacığı yerine web çalışanı iş parçacığı üzerinde çalışır. Bu da proje yöneticisinin exif-reader komut dosyasının indirilmesi, ayrıştırılması ve derlenmesi, iş parçacığı.

Şimdi, tüm bunları mümkün kılan web çalışanı kodunu yakından inceleyelim.

Web çalışanı koduna bakış

Bir web çalışanının yarattığı farkı görmek yeterli değildir, bu kodun nasıl göründüğünü (en azından burada) anlayabilir, mümkün olan en iyi sonucu verir.

Web çalışanının çalışması için gerekli olan ana iş parçacığı koduyla başlayın resmi girin:

// scripts.js

// Register the Exif reader web worker:
const exifWorker = new Worker('/js/with-worker/exif-worker.js');

// We have to send image requests through this proxy due to CORS limitations:
const imageFetchPrefix = 'https://res.cloudinary.com/demo/image/fetch/';

// Necessary elements we need to select:
const imageFetchPanel = document.getElementById('image-fetch');
const imageExifDataPanel = document.getElementById('image-exif-data');
const exifDataPanel = document.getElementById('exif-data');
const imageInput = document.getElementById('image-url');

// What to do when the form is submitted.
document.getElementById('image-form').addEventListener('submit', event => {
  // Don't let the form submit by default:
  event.preventDefault();

  // Send the image URL to the web worker on submit:
  exifWorker.postMessage(`${imageFetchPrefix}${imageInput.value}`);
});

// This listens for the Exif metadata to come back from the web worker:
exifWorker.addEventListener('message', ({ data }) => {
  // This populates the Exif metadata viewer:
  exifDataPanel.innerHTML = data.message;
  imageFetchPanel.style.display = 'none';
  imageExifDataPanel.style.display = 'block';
});

Bu kod, ana iş parçacığında çalışır ve formu, resim URL'sini her şeyi kapsıyor. Ardından, web çalışanı kodu bir importScripts ile başlar. deyimiyle birlikte harici exif-reader komut dosyasını yükler ve ardından ana iş parçacığına aktarmanızı sağlar:

// exif-worker.js

// Import the exif-reader script:
importScripts('/js/with-worker/exifreader.js');

// Set up a messaging pipeline to send the Exif data to the `window`:
self.addEventListener('message', ({ data }) => {
  getExifDataFromImage(data).then(status => {
    self.postMessage(status);
  });
});

Bu JavaScript parçası, mesajlaşma hattını, kullanıcı formu bir JPEG dosyasına URL ile gönderdiğinde, URL web çalışanına ulaşır. Oradan, bu sonraki kod biti JPEG dosyasından Exif meta verilerini çıkarır, bir HTML dizesi oluşturur ve bu HTML kodunu window öğesine geri gönderir. kullanıcıya gösterilir:

// Takes a blob to transform the image data into an `ArrayBuffer`:
// NOTE: these promises are simplified for readability, and don't include
// rejections on failures. Check out the complete web worker code:
// https://glitch.com/edit/#!/exif-worker?path=js%2Fwith-worker%2Fexif-worker.js%3A10%3A5
const readBlobAsArrayBuffer = blob => new Promise(resolve => {
  const reader = new FileReader();

  reader.onload = () => {
    resolve(reader.result);
  };

  reader.readAsArrayBuffer(blob);
});

// Takes the Exif metadata and converts it to a markup string to
// display in the Exif metadata viewer in the DOM:
const exifToMarkup = exif => Object.entries(exif).map(([exifNode, exifData]) => {
  return `
    <details>
      <summary>
        <h2>${exifNode}</h2>
      </summary>
      <p>${exifNode === 'base64' ? `<img src="data:image/jpeg;base64,${exifData}">` : typeof exifData.value === 'undefined' ? exifData : exifData.description || exifData.value}</p>
    </details>
  `;
}).join('');

// Fetches a partial image and gets its Exif data
const getExifDataFromImage = imageUrl => new Promise(resolve => {
  fetch(imageUrl, {
    headers: {
      // Use a range request to only download the first 64 KiB of an image.
      // This ensures bandwidth isn't wasted by downloading what may be a huge
      // JPEG file when all that's needed is the metadata.
      'Range': `bytes=0-${2 ** 10 * 64}`
    }
  }).then(response => {
    if (response.ok) {
      return response.clone().blob();
    }
  }).then(responseBlob => {
    readBlobAsArrayBuffer(responseBlob).then(arrayBuffer => {
      const tags = ExifReader.load(arrayBuffer, {
        expanded: true
      });

      resolve({
        status: true,
        message: Object.values(tags).map(tag => exifToMarkup(tag)).join('')
      });
    });
  });
});

Okuması biraz kolay olsa da bu, web çalışanları için de oldukça kapsamlı bir kullanım alanıdır. Ancak sonuçlar sadece bu kullanım alanıyla sınırlı değil, çalışmaya değer. Web çalışanlarını, fetch çağrılarını ayırmak gibi her türlü işlem için kullanabilirsiniz ve yanıtları işleme, büyük miktarlarda veriyi işleme koyma, ana ileti dizisi. Bu yalnızca başlangıç için.

Web uygulamalarınızın performansını artırırken, kullanacağınız web çalışanı bağlamında makul şekilde yapılabilecek her şey. Kazanım, ve web siteniz için genel olarak daha iyi bir kullanıcı deneyimi sağlayabilir.