Bagaimana untuk Mencapai Prestasi UI Responsif dengan Lelaran Asynchronous?

Lelaran Asynchronous untuk Prestasi UI Responsif

Untuk mengelak daripada menyekat UI semasa tugas lelaran, terutamanya dengan tatasusunan besar dan panggilan API, terdapat dua pendekatan utama: menggunakan teknik tak segerak tanpa pekerja web dan menggabungkan pekerja web.

Lelaran Asynchronous Tanpa Pekerja Web

Jika kod tidak memerlukan interaksi dengan UI, anda boleh leverage setTimeout() untuk lelaran tak segerak. Ini membolehkan ketulan tatasusunan diproses sambil masih memberi peluang kepada penyemak imbas untuk mengendalikan acara lain.

<code class="javascript">function processLargeArray(array) {
  var chunk = 100;
  var index = 0;
  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Process array[index]
      ++index;
    }
    if (index < array.length) {
      setTimeout(doChunk, 1); // Set Timeout for async iteration
    }
  }
  doChunk();
}</code>

Lelaran Asynchronous Menggunakan Pekerja Web

Pekerja web menyediakan persekitaran terpencil untuk pengiraan dan komunikasi melalui mesej pos. Ia sesuai untuk tugasan yang tidak berkaitan dengan UI.

Membuat Pekerja Web:

<code class="javascript">// Create a Worker script file
// worker.js:
self.addEventListener('message', function(e) {
  // Perform computations
  var result = computeResult(e.data);
  self.postMessage(result);
});

// Create a Worker
var worker = new Worker('worker.js');</code>

Berkomunikasi dengan Pekerja:

<code class="javascript">worker.onmessage = function(e) {
  // Handle post message from worker
  // Update UI or process results
};
worker.postMessage(data); // Send data to worker</code>

Pertimbangan

• Tanpa Pekerja Web:

  • Mungkin lebih cekap untuk tugasan yang memerlukan interaksi yang kerap dengan UI.
  • Boleh mencabar untuk mengimbangi responsif dengan prestasi.

• Dengan Pekerja Web:

  • Sesuai untuk tugasan lama yang tidak berkaitan dengan UI.
  • Menyediakan pengasingan dan prestasi keseluruhan yang lebih baik.
  • Memerlukan pengasingan kod ke dalam fail skrip yang berasingan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Prestasi UI Responsif dengan Lelaran Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!