tugas menganggur – npm

Teknologi2 Dilihat

versi npm
ukuran bundel npm
Uji
Lisensi: MIT
semantik-rilis: sudut

Tingkatkan kinerja situs web Anda dengan mengeksekusi JavaScript selama periode tidak aktif browser.

Daftar isi

Apa perbedaan antara idle-task dan requestIdleCallback

Mengapa Anda harus menggunakan idle-task dari pada requestIdleCallback ?

Kelola prioritas tugas

import { setIdleTask } from 'idle-task';
setIdleTask(yourLowPrioryFunction, { prioriy: 'low' });
setIdleTask(yourHighPrioryFunction, { prioriy: 'high' });

Dapatkan hasil dengan menggunakan API berbasis Janji

import { getResultFromIdleTask } from 'idle-task';
// get result asynchronously
const result = await getResultFromIdleTask(yourFunction);

Cache

import { setIdleTask, waitForIdleTask } from 'idle-task';
const taskId = setIdleTask(yourFunction);
const result1 = await waitForIdleTask(taskId);
// from cache
const result2 = await waitForIdleTask(taskId);

Mengoptimalkan pelaksanaan tugas

import { setIdleTask } from 'idle-task';
setIdleTask(longTask);
// these functions will be executed during next browser's idle time.
setIdleTask(shortTask);
setIdleTask(shortTask);

Menganalisis waktu pelaksanaan tugas

import { setIdleTask, configureIdleTask } from 'idle-task';
configureIdleTask({ debug: true })
// output the execution time to the web console.
setIdleTask(yourFunction1);

Install

Mulai cepat

Cara paling sederhana adalah dengan menggunakan setIdleTask .

import { setIdleTask } from 'idle-task';

const sendAnalyticsData = () =>
        console.log("send analytics data during a browser's idle periods.");
setIdleTask(sendAnalyticsData);

Jika Anda ingin mendapatkan hasil tugas, silakan gunakan waitForIdleTask .

import { setIdleTask, waitForIdleTask } from 'idle-task';

const taskId = setIdleTask(yourFunction);
const result = await waitForIdleTask(taskId);

API

setIdleTask

const sendAnalyticsData = () => console.log("send analytics data");
const options = {
    priority: 'high',
    cache: false
};
const taskId = setIdleTask(sendAnalyticsData, options);

idle-task memiliki antrian FIFO (First-In-First-Out).

setIdleTask enqueues tugas yang idle-task akan keluar dari antrean dan dijalankan saat browser dalam keadaan diam.

setIdleTask mengembalikan id tugas yang diperlukan untuk cancelIdleTask , isRunIdleTask dan waitForIdleTask.

Saya merekomendasikan kurang dari 50 mdtk untuk menjalankan tugas karena model REL . Jika Anda ingin mengetahui berapa lama waktu yang dibutuhkan untuk menyelesaikan suatu tugas, silakan gunakan modus debug .

setIdleTask juga dapat diatur opsi seperti di bawah ini.

priority?: 'low' | 'high'

Anda dapat menjalankan tugas secara istimewa menggunakan priority: 'high' (standarnya adalah false) pilihan.
setIdleTask menambahkannya ke kepala antrian.

cache?: boolean

Opsi ini untuk meningkatkan kinerja.

idle-task menyimpan hasil tugas secara default .

Saya sarankan untuk mengatur false jika Anda tidak membutuhkan hasil tugas menganggur.

waitForIdleTask akan kembali undefined Kapan cache adalah false .

import {waitForIdleTask} from "idle-task";

const sendAnalyticsData = (): void => {
    console.log("send analytics data")
};
// Recommend: sendAnalyticsData result is not needed
setIdleTask(sendAnalyticsData, {cache: false});

const generateRandomNumber = () => Math.floor(Math.random() * 100);
const taskId = setIdleTask(generateRandomNumber, {cache: false});
// result is undefined
const result = await waitForIdleTask(taskId);

waitForIdleTask

const generateRandomNumber = () => Math.floor( Math.random() * 100 );
const taskId = setIdleTask(generateRandomNumber);
const randomNumber = await waitForIdleTask(taskId, {
    cache: false
});

Anda bisa mendapatkan hasil tugas dengan menggunakan waitForIdleTask .

waitForIdleTask juga dapat diatur opsi seperti di bawah ini.

cache?: boolean

idle-task menyimpan hasil tugas secara default .

const generateRandomNumber = () => Math.floor( Math.random() * 100 );
const taskId = setIdleTask(generateRandomNumber);
const firstRandomNumber = await waitForIdleTask(taskId);
// this result from cache
const secondRandomNumber = await waitForIdleTask(taskId);
// same objects
console.log(Object.is(firstRandomNumber, secondRandomNumber));
// => true

Jika Anda mendapatkan hasil dari suatu tugas hanya sekaliharap atur { cache: false } . Ini akan meningkatkan memori dalam JavaScript.

const generateRandomNumber = () => Math.floor( Math.random() * 100 );
const taskId = setIdleTask(generateRandomNumber);
// delete cache
const firstRandomNumber = await waitForIdleTask(taskId, { cache: false });
// this is undefined
const secondRandomNumber = await waitForIdleTask(taskId);
// not same objects
console.log(Object.is(firstRandomNumber, secondRandomNumber));
// => false

timeout?: number

waitForIdleTask mungkin menunggu tugas selamanya karena akan selesai saat browser dalam keadaan diam.
timeout pilihan dapat mencegahnya.

const generateRandomNumber = () => Math.floor( Math.random() * 100 );
const taskId = setIdleTask(generateRandomNumber);
try {
    const firstRandomNumber = await waitForIdleTask(taskId, { timeout: 1000 });
} catch (e) {
    if (e instanceof WaitForIdleTaskTimeoutError) {
        console.error('this is timeout error')
    }
}

Pada kasus ini, waitForIdleTask akan melempar WaitForIdleTaskTimeoutError jika tugas tidak dapat diselesaikan dalam 1000 ms.

getResultFromIdleTask

const generateRandomNumber = () => Math.floor( Math.random() * 100 );
const randomNumber = await getResultFromIdleTask(generateRandomNumber, {
    priority: 'high',
    timeout: 3000,
});

// same
const taskId = setIdleTask(generateRandomNumber, { priority: 'high' });
const randomNumber = await waitForIdleTask(taskId, { timeout: 3000, cache: false });

Anda bisa mendapatkan hasilnya dengan menggunakan getResultFromIdleTask jika Anda tidak memerlukan id tugas.

getResultFromIdleTask juga dapat diatur pilihan yang SetIdleTaskOptions.priority dan WaitForIdleTaskOptions.timeout .

cancelIdleTask

const taskId = setIdleTask(() => console.log("task will be canceled."));
cancelIdleTask(taskId);

Anda dapat berhenti untuk menjalankan tugas dengan menggunakan cancelIdleTask jika tidak dijalankan.

cancelAllIdleTasks

setIdleTask(() => console.log("task 1 will be canceled."));
setIdleTask(() => console.log("task 2 will be canceled."));
setIdleTask(() => console.log("task 3 will be canceled."));
cancelAllIdleTasks();

Anda dapat berhenti untuk menjalankan semua tugas dengan menggunakan cancelAllIdleTasks jika mereka tidak dieksekusi.

isRunIdleTask

const taskId = setIdleTask(() => console.log("task"));
const isRun = isRunIdleTask(taskId);
if (isRun) {
  console.log("the task was completed");
}

usang : Fungsi ini akan diganti alternatif satu.

Anda dapat mengetahui apakah tugas dijalankan atau tidak dengan menggunakan isRunIdleTask .

configureIdleTask

configureIdleTask({
  interval: 1000, // ms
  debug: false,
  timeout: 3000,
});

configureIdleTask mengkonfigurasi idle-task . Anda dapat mengatur properti seperti di bawah ini.

interval?: number

idle-task memeriksa tugas yang didaftarkan oleh setIdleTask selama periode idle browser, jadi mereka tidak akan selalu dieksekusi .

Silakan atur interval jika Anda ingin menjamin untuk menjalankan tugas sebanyak mungkin.

Bahkan jika browser tidak menganggur, idle-task memeriksa tugas setiap 1000 ms kapan interval adalah 1000 dan akan melaksanakan tugas tanpa dampak negatif pada kinerja.

debug?: boolean

Jika debug adalah trueAnda dapat mengetahui berapa lama waktu yang dibutuhkan untuk menyelesaikan tugas tersebut melalui konsol web.

Saya merekomendasikan kurang dari 50 mdtk untuk menjalankan tugas karena model REL .

Standarnya adalah process.env.NODE_ENV === 'development' .

timeout?: number

Opsi ini mengonfigurasi timeout dari waitForIdleTask dan getResultFromIdleTask sebagai bawaan pengaturan.

configureIdleTask({ timeout: 3000 });

const taskId = setIdleTask(yourFunction);
// timeout is 3000
const result = await waitForIdleTask(taskId);

// timeout is 5000 if you set timeout as option
const result = await waitForIdleTask(taskId, { timeout: 5000 });

cache?: false

Opsi ini mengonfigurasi cache dari setIdleTask sebagai bawaan pengaturan. Default adalah true . Anda harus mengatur false jika sudah pastikan tidak membutuhkan semua hasil tugas saat menggunakan setIdleTask .

configureIdleTask({ cache: false });

// cache option is false
setIdleTask(yourFunction);
// same
setIdleTask(yourFunction, { cache: false })

// cache is true if you set cache as option
setIdleTask(yourFunction, { cache: true });

Resep

Vanila JS

import { setIdleTask } from 'idle-task';

// this module is loaded during a browser's idle periods because it is not important for UI.
const taskId = setIdleTask(() => import('./sendAnalyticsData'))

const button = document.getElementById('button');
button.addEventListener('click', async () => {
    const { default: sendAnalyticsData } = await waitForIdleTask(taskId);
    // Send analytics data to server when the browser is idle.
    setIdleTask(sendAnalyticsData, { cache: false });
})
import { getResultFromIdleTask } from 'idle-task';

const checkAccessTokenWhenIdle = (accessToken: string): Promise<any> => {
    const fetchCheckAccessToken = async (): Promise<any> => {
        const response = await fetch(`https://yourdomain/api/check?accessToken=${accessToken}`);
        // Promise callback will execute immediately after fetching completely even if the browser is busy.
        // One of the solutions is to run it when next browser's idle time.
        return getResultFromIdleTask(() => response.json());
    };
    return getResultFromIdleTask(fetchCheckAccessToken);
}

const { isSuccess } = await checkAccessTokenWhenIdle('1234');

Reaksi

import {useState, useEffect} from 'react';
import {setIdleTask} from 'idle-task';
import {cancelIdleTask, waitForIdleTask} from "./index";

const fetchNewsList = async () => {
  const response = await fetch('https://yourdomain/api/news');
  return response.json();
}

// this is not important UI for the website main content like e-commerce sites.
export default function WebsiteNewsList() {
  const [newsList, setNewsList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // fetch news list when the browser is idle and cache it.
    const taskId = setIdleTask(fetchNewsList)
    waitForIdleTask(taskId)
        .then(setNewsList)
        .finally(() => setIsLoading(false));
    return () => {
        // stop to fetch news list and remove the cache when the component re-render.
        cancelIdleTask(taskId)
    };
  }, [])
  
  if (isLoading) {
      return <div>Loading...</div>
  }
  return newsList.map(news => (
      <div id={news.id}>
        {news.publiedDate}
        {news.title}
        {news.description}
      </div>
  ))
}

Lisensi

Dirilis di bawah lisensi MIT.

Komentar