具體的網路工作人員用途

最後一個單元提供了網路工作站總覽。網路工作者可以只要將主執行緒的 JavaScript 移除，不同的網路工作執行緒執行緒，有助於改善您網站的互動性。主執行緒。然而，僅提供總覽並不足夠在本單元中並提供網路工作者的具體使用案例。

其中一個用途可能是網站必須從圖像，這個概念並非個廣為人知的概念。事實上，Flickr 等網站使用者可以查看 EXIF 中繼資料，瞭解其代管的圖像，例如色彩深度、相機廠牌和型號等資料。

不過，擷取圖片並轉換為 ArrayBuffer 的邏輯。並擷取 EXIF 中繼資料可能會耗用大量資源透過主執行緒呼叫幸好，網路工作站範圍允許這項工作主執行緒的關閉。接著，透過網路工作站的訊息管道 EXIF 中繼資料會以 HTML 字串的形式傳回至主執行緒，且向使用者顯示

沒有網路工作站的主執行緒外觀

首先，請觀察主執行緒在沒有網路工作站。如要這樣做，請按照下列步驟操作：

在 Chrome 中開啟新分頁，然後開啟開發人員工具。
開啟效能面板。
前往 https://exif-worker.glitch.me/without-worker.html。
在效能面板中，按一下右上角的「Record」「開發人員工具」窗格
貼上這個圖片連結，或選擇其他包含 Exif 的其中一個圖片連結中繼資料—然後在欄位中按一下「Get the JPEG!」按鈕。
介面填入 EXIF 中繼資料後，請再次點選「Record」，停止錄製。

，瞭解如何調查及移除這項存取權。

效能分析器，顯示圖片中繼資料擷取器應用程式活動完全在主執行緒上發生的。有兩個主要工作，一個執行擷取作業以取得要求的圖片並解碼，另一個則從圖片擷取中繼資料。 — 圖片中繼資料擷取器應用程式中的主執行緒活動。請注意活動發生在主執行緒上

請注意，除了可能出現的其他執行緒，例如光柵化器執行緒等等，應用程式的所有內容都在主執行緒上。主要透過執行緒後，會發生以下情況：

表單會接收輸入內容，並調度 fetch 要求來取得初始資訊部分包含 Exif 中繼資料的圖片部分
圖片資料會轉換為 ArrayBuffer。
exif-reader 指令碼可用來從圖片。
中繼資料會被剪輯以建構 HTML 字串，並填入中繼資料檢視者

差別在於前者的實作行為相同，但前者需要工人！

網路工作站的「主執行緒」外觀

現在您已瞭解從主執行緒上的 JPEG 檔案，先看一遍下列工作站中的

在 Chrome 中開啟另一個分頁，然後開啟開發人員工具。
開啟效能面板。
前往 https://exif-worker.glitch.me/with-worker.html。
在效能面板中，按一下右上角的記錄按鈕 「DevTools」窗格的角落。
將這個圖片連結貼到欄位中，然後按一下「Get the JPEG!」按鈕。
介面填入 Exif 中繼資料後，點選記錄按鈕 即可停止錄製。

，瞭解如何調查及移除這項存取權。

這個效能分析器會顯示圖片中繼資料擷取器應用程式在主要執行緒和網路背景工作執行緒上的活動。雖然主執行緒上仍有很長的工作，但這些工作縮短了，完全是在網路背景工作執行緒上進行圖片擷取/解碼，以及擷取中繼資料。唯一的主要執行緒工作是指將資料傳入及傳出網路工作站。 — 圖片中繼資料擷取器應用程式中的主執行緒活動。請注意處理大部分作業的其他網路工作執行緒。

這正是網路工作人員的強大力量。與其在主執行緒上進行「所有細節」然而，以 HTML 填入中繼資料檢視器中的所有資訊都是在個別執行緒。也就是說，主執行緒可以釋出給主執行緒，以便執行其他作業。

最大的優勢可能是這個應用程式未使用網路工作站，因此主節點並未載入 exif-reader 指令碼而不是網路背景工作執行緒也就是說下載、剖析及編譯 exif-reader 指令碼後，主執行緒。

現在，讓我們來探討網路工作程式程式碼如何實現上述所有目標！

查看網路工作站程式碼

光是看網路工作人員帶來的差異是不夠的至少在這個例子中，也就是程式碼看起來會是什麼樣子定義或部署 Pod

從網路工作站可以先執行的主要執行緒程式碼開始輸入圖片：

// 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';
});

這段程式碼會在主執行緒上執行，並設定表單傳送圖片網址網路工作站。接著，網路工作站程式碼的開頭為 importScripts 這個陳述式會載入外部 exif-reader 指令碼，然後設定訊息管道與主要執行緒：

// 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);
  });
});

敬上

注意：雖然輸入的 importScripts 語法將外部指令碼匯入網路工作站範圍是很廣泛的相容範圍，在大部分瀏覽器中，使用靜態 import 語法，將模組匯入網路工作站中。如需更多資訊，請參閱透過模組工作站將網路串連起來。

這段 JavaScript 程式碼會設定訊息管道，這樣當使用者提交具有 JPEG 檔案的表單，該網址會傳送至網路工作處理程式。接著這段程式碼會從 JPEG 檔案擷取 Exif 中繼資料建立 HTML 字串，並將該 HTML 傳回 window，向使用者顯示：

// 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('')
      });
    });
  });
});

在此您可以閱讀一些內容，不過這也是相當涉及網路工作人員的使用。不過，結果值得信賴，並非僅限於此用途。網路工作處理程序可用於處理各種作業，例如隔離 fetch 呼叫處理回應、處理大量資料而不封鎖但這只適用於啟動條件。

改善網頁應用程式的效能時，請開始思考任何能在網路工作處理環境中合理完成的任何工作。增益可能會包括而且網站整體的使用者體驗更出色。