Apakah Pekerja Web dan Cara Memanfaatkan Mereka untuk Prestasi Frontend yang Dioptimumkan

Hello, Vinyl di sini lagi! ?

Selamat datang kembali ke blog saya. Saya tahu sudah agak lama, tetapi saya teruja untuk berkongsi beberapa penemuan dan pembelajaran terkini saya semasa mengerjakan satu projek yang telah saya jalankan tahun ini — taman permainan templat yang digunakan untuk mendraf, menguji dan bereksperimen dengan kontrak undang-undang pintar dan dokumen. Hari ini, kami akan menyelami Pekerja Web: apakah mereka, cara mereka berfungsi dan cara anda boleh menggunakannya untuk mengecas projek bahagian hadapan anda.

Baiklah, mari bayangkan anda berada di bar untuk mendapatkan bir dengan betul, dan pelayan bar (bekas utama anda) perlu menerima pesanan, menyediakan pesanan dan membersihkan kaunter sekaligus. Jika mereka sibuk membuat pesanan yang rumit (pengiraan berat), semua orang dalam barisan perlu menunggu—mengecewakan, bukan? Sekarang bayangkan pelayan bar mempunyai pembantu (Pekerja Web) yang menjaga pembersihan dan menyusun gelas pint di latar belakang manakala pelayan bar menumpukan pada mengambil dan membuat pesanan. Kerja berpasukan ini memastikan operasi yang lebih lancar.

Itu hanya gambaran ringkas. Saya tahu anda mungkin memikirkan API daripada huraian lol, Tidak, mereka tidak! Jom terjun terus.

Apakah Pekerja Web?

Pekerja Web dalam pembangunan web adalah sama seperti pembantu itu. Mereka mengendalikan tugas mengangkat berat di latar belakang, membebaskan utas utama untuk memastikan apl anda responsif dan lancar. Dalam artikel ini, kami akan menyelami Pekerja Web, meneroka fungsi utama mereka, menerangkan cara menavigasi mereka dan menggunakan tiga senario dunia sebenar untuk menunjukkan kuasa mereka dalam pembangunan bahagian hadapan. Saya juga akan memberikan petua untuk menggunakan Pekerja Web dalam rangka kerja lain seperti Vue kerana kes penggunaan utama di sini ialah React.

Tiga Jenis Pekerja Web

Sebelum menyelami cara menggunakan Pekerja Web, mari kita fahami tiga jenis utama:

Pekerja Dedikasi: Ini khusus untuk satu skrip dan merupakan pekerja yang paling biasa digunakan. Ia sesuai untuk tugas seperti pengiraan latar belakang atau mengendalikan panggilan API untuk satu contoh apl.

Contoh: Memampatkan data untuk sesi pengguna tertentu.

Pekerja Kongsi: Ini boleh dikongsi antara berbilang skrip atau tab penyemak imbas, menjadikannya sesuai untuk tugasan yang memerlukan komunikasi silang tab, seperti menyegerakkan data merentas tab.

Contoh: Memastikan data sesi pengguna konsisten merentas berbilang tab penyemak imbas.

Pekerja Perkhidmatan: Tidak seperti Pekerja Berdedikasi dan Berkongsi, ini memintas permintaan rangkaian dan bertindak sebagai proksi antara apl anda dan rangkaian. Ia biasanya digunakan untuk caching dan sokongan luar talian.

Contoh: Menyediakan templat cache apabila pengguna berada di luar talian.

Anda boleh membaca lebih lanjut tentang jenis ini dalam Dokumentasi Pekerja Web MDN.

Untuk mengetahui pekerja mana yang hendak digunakan, pertimbangkan skop tugas anda:

• Gunakan Pekerja Berdedikasi untuk tugasan terpencil, satu skrip.

• Gunakan Pekerja Kongsi untuk komunikasi berbilang tab.

• Gunakan Pekerja Perkhidmatan untuk tugas berkaitan rangkaian seperti caching atau keupayaan luar talian.

Kelebihan utama Pekerja Web ialah keupayaan mereka untuk memunggah tugasan ini dari urutan utama, memastikan pengalaman pengguna yang lancar. Komunikasi antara utas utama dan pekerja berlaku melalui sistem pemesejan menggunakan postMessage dan API onmessage.

Fungsi Pekerja Web Utama

• onmessage: Mengendalikan mesej yang dihantar dari utas utama kepada pekerja.

self.onmessage = (event) => {
  console.log('Message received from main thread:', event.data);
};

• postMessage: Menghantar mesej daripada pekerja kembali ke utas utama.

self.postMessage('Task completed');

• tamatkan: Menghentikan pekerja daripada berlari.

worker.terminate();

• Pengendalian Ralat: Menangkap ralat dalam pekerja.

self.onerror = (error) => {
  console.error('Worker error:', error.message);
};

Fungsi berguna lain termasuk importScripts untuk memuatkan skrip luaran, self.close untuk mematikan pekerja dan setTimeout/setInterval untuk operasi bermasa. Rujuk dokumentasi untuk butiran lanjut jika perlu.

Contoh Kes Penggunaan dalam Projek Taman Permainan Web

Berikut ialah tiga senario praktikal di mana Pekerja Web boleh meningkatkan contoh projek Taman Permainan Templat dengan ketara:

Kes 1: Panggilan API untuk Data Templat

Mengambil data templat daripada API boleh menghasilkan set data yang besar yang perlu dihuraikan sebelum digunakan. Ini boleh menyekat urutan UI jika dilakukan secara terus.

1. Cipta Fail Pekerja: Cipta dataParser.worker.js.

// dataParser.worker.js
self.onmessage = (event) => {
  const { rawData } = event.data;
  const parsedData = rawData.map((template) => ({
    name: template.name,
    tag: template.tag,
  }));

  self.postMessage(parsedData);
};

2. Gunakan Pekerja dalam React:

import React, { useState } from 'react';

export default function templateDataParser({ rawData }) {
  const [parsedData, setParsedData] = useState([]);

  const parseData = () => {
    const worker = new Worker(new URL('./dataParser.worker.js', import.meta.url));
    worker.postMessage({ rawData });

    worker.onmessage = (event) => {
      setParsedData(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={parseData}>Template Parsed Data</button>
      <pre class="brush:php;toolbar:false">{JSON.stringify(parsedData, null, 2)}

); }

Salin selepas log masuk

Kes 2: Pemampatan dan Penyahmampatan URL

Untuk membolehkan pengguna berkongsi templat mereka melalui URL padat, Pekerja Web boleh mengendalikan pemampatan dan penyahmampatan dengan cekap.

1. Cipta Fail Pekerja: Cipta urlCompressor.worker.js.

// urlCompressor.worker.js
import LZString from 'lz-string';

self.onmessage = (event) => {
  const { action, data } = event.data;
  let result;

  if (action === 'compress') {
    result = LZString.compressToEncodedURIComponent(data);
  } else if (action === 'decompress') {
    result = LZString.decompressFromEncodedURIComponent(data);
  }

  self.postMessage(result);
};

2. Gunakan Pekerja dalam React:

import React, { useState } from 'react';

export default function URLCompressor({ template }) {
  const [compressedURL, setCompressedURL] = useState('');

  const compressTemplate = () => {
    const worker = new Worker(new URL('./urlCompressor.worker.js', import.meta.url));
    worker.postMessage({ action: 'compress', data: template });

    worker.onmessage = (event) => {
      setCompressedURL(event.data);
      worker.terminate();
    };
  };

  return (
    <div>
      <button onClick={compressTemplate}>Compress Template</button>
      <pre class="brush:php;toolbar:false">{compressedURL}

); }

Salin selepas log masuk