Cara menjadualkan tugas latar dalam javascript

mata teras

JavaScript adalah bahasa yang menyekat yang hanya boleh melaksanakan satu tugas pada satu masa, yang boleh menyebabkan skrip jangka panjang untuk membuat penyemak imbas tidak responsif. Walau bagaimanapun, tugas latar belakang yang kurang penting boleh dijadualkan dijalankan tanpa menjejaskan pengalaman pengguna secara langsung.
• adalah API yang membolehkan penjadualan tugas yang tidak perlu apabila penyemak imbas terbiar, sama dengan fungsi requestIdleCallback. Ia boleh digunakan dengan pilihan masa tamat untuk memastikan tugas -tugas yang dijalankan dalam julat masa yang ditetapkan, walaupun penyemak imbas tidak terbiar. requestAnimationFrame
• adalah ciri eksperimen dengan sokongan penyemak imbas terhad dan tidak sesuai untuk tugas -tugas yang melakukan masa yang tidak dapat diramalkan atau untuk menyelesaikan tugas -tugas janji. Untuk pelayar atau tugas yang tidak disokong yang memerlukan akses langsung ke DOM, alternatif seperti pekerja web atau requestIdleCallback boleh digunakan. setTimeout

Jika anda lupa segala -galanya dalam JavaScript, selalu ingat ini:

ia menyekat . Bayangkan wizard pemprosesan ajaib membuat kerja penyemak imbas anda. Sama ada ia memberikan HTML, bertindak balas terhadap arahan menu, melukis pada skrin, mengendalikan klik tetikus, atau menjalankan fungsi JavaScript, semua ini dikendalikan oleh sprite tunggal. Seperti kebanyakan kita, bunian hanya boleh melakukan satu perkara pada satu masa. Jika kita membuang banyak tugas di Elves, mereka ditambah ke senarai tugasan yang besar dan diproses dengan teratur. Segala -galanya berhenti apabila Sprite menemui tag skrip atau mesti menjalankan fungsi JavaScript. Kod (jika diperlukan) akan dimuat turun dan dijalankan dengan segera sebelum peristiwa atau rendering selanjutnya diproses. Ini perlu kerana skrip anda boleh melakukan apa sahaja: memuatkan lebih banyak kod, memadam setiap elemen DOM, mengalihkan ke URL lain, dll. Walaupun dengan dua atau lebih sprite, sprite lain perlu berhenti bekerja apabila Sprite pertama memproses kod anda. Ini menyekat. Inilah sebabnya skrip jangka panjang menyebabkan penyemak imbas tidak bertindak balas. Anda biasanya mahu JavaScript berjalan secepat mungkin, kerana kod itu memulakan widget dan pengendali acara. Walau bagaimanapun, terdapat beberapa tugas backend yang kurang penting yang tidak akan menjejaskan pengalaman pengguna secara langsung, seperti:

• Data Analisis Rekod
Hantar data ke rangkaian sosial (atau tambahkan butang 57 "Kongsi")
Kandungan Prefetch
preprocessing atau pra-rendering html

Ini bukan tugas masa kritikal, tetapi untuk memastikan halaman responsif, mereka tidak boleh berjalan apabila pengguna menatal atau berinteraksi dengan kandungan. Satu pilihan ialah menggunakan pekerja web, yang boleh menjalankan kod secara serentak dalam benang berasingan. Ini adalah pilihan yang baik untuk prefetching dan pemprosesan, tetapi anda tidak membenarkan akses langsung atau kemas kini DOM. Anda boleh mengelakkan ini dalam skrip anda sendiri, tetapi anda tidak dapat menjamin bahawa skrip pihak ketiga seperti Google Analytics tidak akan memerlukannya. Kemungkinan lain ialah

, contohnya setTimeout. Penyemak imbas akan melaksanakan fungsi setTimeout(doSomething, 1); selepas tugas -tugas lain yang dilaksanakan dengan segera selesai. Malah, ia diletakkan di bahagian bawah senarai tugasan. Malangnya, fungsi itu dipanggil tanpa mengira keperluan pemprosesan. doSomething()

API baru yang direka untuk menjadualkan tugas backend yang tidak penting semasa saat-saat pernafasan penyemak imbas. Ia mengingatkan anda tentang requestIdleCallback, yang memanggil fungsi untuk mengemas kini animasi sebelum mengecat semula seterusnya. Anda boleh membaca lebih lanjut mengenai

di sini:

Animasi mudah menggunakan RequestAnimationFrame requestIdleCallback requestAnimationFrame requestAnimationFrame kita boleh menyemak sama ada ia menyokongnya seperti ini :

anda juga boleh menentukan parameter objek pilihan menggunakan masa tamat (dalam milisaat), contohnya: requestIdleCallback

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 执行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

Ini memastikan bahawa fungsi anda dipanggil dalam tiga saat pertama, tanpa mengira sama ada penyemak imbas itu terbiar atau tidak.

panggil fungsi anda sekali sahaja dan lulus objek tarikh akhir dengan sifat berikut:

requestIdleCallback(backgroundTask, { timeout: 3000 });

requestIdleCallback - Tetapkan ke True

Jika pencetus waktu pilihan pilihan ditetapkan ke True

• didTimeout - Fungsi yang mengembalikan baki milisaat tugas yang boleh dilaksanakan
• timeRemaining()
Tugas anda akan diberikan tidak lebih dari 50 milisaat masa larian. Ia tidak menghentikan tugas yang melebihi had ini, tetapi lebih baik untuk memanggil

sekali lagi untuk menjadualkan pemprosesan selanjutnya. Mari buat contoh mudah yang melakukan pelbagai tugas mengikut urutan. Tugas disimpan dalam array sebagai rujukan fungsi:

timeRemaining() requestIdleCallback Tindakan yang tidak boleh dilakukan dalam

?

// 要运行的函数数组
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 尽快运行所有任务
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回调函数
function backgroundTask(deadline) {
  // 如果可能，运行下一个任务
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排进一步的任务
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

Seperti yang ditunjukkan oleh Paul Lewis dalam catatan blognya mengenai topik ini, kerja yang anda lakukan di requestIdleCallback harus dibahagikan kepada kepingan kecil. Ia tidak berfungsi untuk apa -apa dengan masa pelaksanaan yang tidak dapat diramalkan (seperti mengendalikan DOM, yang paling baik dilakukan menggunakan panggilan balik

). Anda juga harus berhati -hati untuk menyelesaikan (atau menolak) janji itu, kerana panggilan balik akan dilaksanakan dengan segera selepas panggilan balik terbiar selesai, walaupun tidak ada lagi masa yang tersisa.

requestIdleCallback sokongan penyemak imbas

requestIdleCallback adalah ciri eksperimen, dan spesifikasi masih berubah, jadi jangan terkejut apabila anda menghadapi perubahan API. Ia disokong dalam Chrome 47 ... Ini harus tersedia menjelang akhir tahun 2015. Opera juga perlu mendapatkan ciri ini tidak lama lagi. Kedua -dua Microsoft dan Mozilla sedang mempertimbangkan untuk menggunakan API, dan kedengarannya menjanjikan. Apple tidak mempunyai berita seperti biasa. Sekiranya anda ingin mencubanya hari ini, cara terbaik ialah menggunakan Chrome Canary (versi Chrome yang dikemas kini yang tidak sebaik yang pertama, tetapi mempunyai ciri -ciri sejuk terkini). Paul Lewis (disebutkan di atas) mencipta shim requestIdleCallback yang mudah. Ini melaksanakan perihalan API, tetapi ia bukan polyfill yang boleh mensimulasikan tingkah laku pengesanan idle pelayar. Ia menggunakan kaedah menggunakan setTimeout seperti contoh di atas, tetapi ia adalah pilihan yang baik jika anda mahu menggunakan API tanpa pengesanan objek dan forking kod. Walaupun terdapat sokongan terhad hari ini, requestIdleCallback mungkin alat yang menarik untuk membantu anda memaksimumkan prestasi web anda. Tetapi apa pendapat anda? Saya suka mendengar pendapat anda di bahagian komen di bawah.

Soalan Lazim mengenai penjadualan Tugas Backend dalam JavaScript (FAQ)

Apakah API Tugas Latar Belakang dalam JavaScript?

Tugas -tugas latar dalam JavaScript API adalah alat yang berkuasa yang membolehkan pemaju menjadualkan tugas yang berjalan di latar belakang, walaupun benang utama terbiar. API ini amat sesuai untuk tugas -tugas yang memerlukan banyak permintaan pengiraan atau rangkaian, kerana ia membolehkan tugas -tugas ini dilakukan tanpa menyekat benang utama dan berpotensi membawa kepada pengalaman pengguna yang buruk. API Tugas Backend adalah sebahagian daripada API web yang lebih besar yang disediakan oleh pelayar moden, menyediakan cara yang lebih cekap dan berorientasikan prestasi untuk mengendalikan tugas backend daripada kaedah tradisional setTimeout atau setInterval.

Bagaimana API Tugas Latar belakang

berbeza daripada setTimeout dan setInterval?

Fungsi

setTimeout dan setInterval adalah kaedah tradisional dalam JavaScript yang digunakan untuk menjadualkan tugas untuk dijalankan selepas kelewatan tertentu atau pada selang masa yang tetap. Walau bagaimanapun, pendekatan ini mempunyai beberapa batasan, terutamanya dari segi prestasi. Mereka berjalan di benang utama, yang bermaksud bahawa jika mereka mengambil masa yang lama untuk diselesaikan, mereka boleh menyekat tugas -tugas lain dan boleh membawa kepada pengalaman pengguna yang buruk. Sebaliknya, API tugas latar belakang menjalankan tugas di latar belakang, terpisah dari benang utama. Ini bermakna ia boleh mengendalikan tugas yang lebih intensif tanpa menjejaskan prestasi benang utama.

Bolehkah saya menggunakan API Tugas Latar Belakang dalam semua pelayar?

API Tugas Backend adalah tambahan yang agak baru kepada API web yang disediakan oleh pelayar moden, jadi ia mungkin tidak disokong dalam semua pelayar. Apabila merancang untuk menggunakan mana -mana API dalam projek anda, adalah lebih baik untuk memeriksa tahap sokongan semasa API yang anda merancang untuk digunakan. Laman web seperti boleh saya gunakan menyediakan maklumat terkini mengenai tahap sokongan pelbagai API dalam pelayar yang berbeza.

Bagaimana menggunakan API Tugas Latar Belakang untuk menjadualkan tugas yang berjalan di latar belakang?

Untuk menggunakan API Tugas Latar Belakang untuk menjadualkan tugas, anda boleh menggunakan kaedah requestIdleCallback. Kaedah ini mengambil fungsi panggil balik sebagai parameter pertamanya, yang akan dilaksanakan apabila penyemak imbas terbiar. Berikut adalah contoh asas:

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 执行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

Bagaimana untuk membatalkan tugas latar belakang yang dijadualkan?

Jika anda perlu membatalkan tugas latar belakang yang dijadualkan menggunakan kaedah requestIdleCallback, anda boleh menggunakan kaedah cancelIdleCallback. Kaedah ini mengambil ID yang dikembalikan oleh requestIdleCallback sebagai parameternya. Berikut adalah contoh:

requestIdleCallback(backgroundTask, { timeout: 3000 });

Apakah penggunaan pilihan masa tamat dalam

requestIdleCallback?

Pilihan masa tamat dalam

requestIdleCallback menentukan masa maksimum (dalam milisaat) penyemak imbas harus menunggu sebelum menjalankan panggilan balik, walaupun ia tidak terbiar. Ini berguna jika tugas latar belakang anda perlu dijalankan dalam jangka masa tertentu.

Bagaimana menangani kesilapan dalam tugas latar belakang?

Mengendalikan kesilapan dalam tugas latar belakang yang dijadualkan menggunakan API tugas latar belakang adalah serupa dengan mengendalikan kesilapan dalam mana -mana kod JavaScript lain. Anda boleh menggunakan blok percubaan/menangkap untuk menangkap sebarang kesilapan yang berlaku semasa pelaksanaan tugas. Berikut adalah contoh:

// 要运行的函数数组
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 尽快运行所有任务
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回调函数
function backgroundTask(deadline) {
  // 如果可能，运行下一个任务
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排进一步的任务
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

Bolehkah saya menggunakan API Tugas Latar Belakang di Node.js?

API Tugas Backend adalah sebahagian daripada API Web yang disediakan oleh pelayar moden, jadi ia tidak tersedia di Node.js secara lalai. Walau bagaimanapun, terdapat cara lain untuk menjalankan tugas latar dalam node.js, seperti menggunakan benang pekerja atau proses kanak -kanak.

Bolehkah saya menggunakan API tugas latar belakang dengan janji atau async/menunggu?

API tugas latar belakang tidak mengembalikan janji, jadi ia tidak boleh digunakan secara langsung dengan async/menunggu. Walau bagaimanapun, jika anda perlu menggunakannya dalam konteks tak segerak, anda boleh membungkus kaedah requestIdleCallback dalam janji. Berikut adalah contoh:

window.requestIdleCallback(() => {
  // 您的后台任务在此处
});

Apakah beberapa kes penggunaan API Tugas Backend?

Tugas Latar Belakang API berguna untuk sebarang tugas yang memerlukan banyak pengiraan atau permintaan rangkaian, kerana ia membolehkan tugas -tugas ini dilaksanakan tanpa menyekat benang utama. Beberapa contoh kes penggunaan mungkin termasuk mengambil dan memproses data dari API, melakukan pengiraan kompleks, atau mengemas kini UI berdasarkan interaksi pengguna.

Atas ialah kandungan terperinci Cara menjadualkan tugas latar dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!