Mengurangkan INP: Pengoptimuman Pengendali Peristiwa
Nyahuntun pengendali berat, gunakan scheduler.yield() dan elakkan tugas panjang yang menyekat utas utama.
Mengurangkan INP: Pengoptimuman Pengendali Peristiwa ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah INP?
Interaksi kepada Cat Seterusnya (INP) mengukur kelewatan daripada interaksi pengguna seperti klik, ketik atau tekanan kekunci sehingga pelayar memaparkan respons. INP > 200ms terasa lambat.
Mengapa Acara React Boleh Menjadi Perlahan
Pengendali acara React yang melakukan terlalu banyak kerja secara segerak akan menyekat utas utama. Pelayar tidak dapat memaparkan respons sehingga tugas JS selesai — lalu menyebabkan INP tinggi.
Debounce Input Bertaip
Gunakan debounce pada operasi mahal seperti panggilan API carian dan pengiraan berat yang dicetuskan oleh tekanan kekunci. Kemas kini keadaan React pada setiap tekanan kekunci tidak menjadi masalah; kerja yang mahal perlu menggunakan debounce.
import { useDeferredValue, useState } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query); // defers re-render of slow parts
return (
<>
<input value={query} onChange={e => setQuery(e.target.value)} />
<SearchResults query={deferredQuery} /> {/* re-renders with lower priority */}
</>
);
}useTransition untuk Kemas Kini Tidak Mendesak
Bungkus kemas kini keadaan yang perlahan dalam startTransition untuk menandakannya sebagai tidak mendesak. React menangguhkannya supaya input kekal responsif.
const [isPending, startTransition] = useTransition();
function handleFilter(value) {
setInputValue(value); // urgent — update input immediately
startTransition(() => {
setFilteredList(expensiveFilter(value)); // non-urgent — can be interrupted
});
}Memindahkan Kerja Berat Keluar dari Utas Utama
Gunakan Web Workers untuk tugas yang intensif CPU seperti menghuraikan set data besar dan memproses imej. Utas utama kekal responsif semasa worker melakukan pengiraan.
const worker = new Worker(new URL('./heavy-worker.js', import.meta.url));
function processData(data) {
return new Promise(resolve => {
worker.postMessage(data);
worker.onmessage = e => resolve(e.data);
});
}
// In component:
const handleClick = async () => {
const result = await processData(largeDataset); // doesn't block main thread
setResult(result);
};Mengelakkan Tugas Panjang
Tugas panjang (>50ms) menyekat utas utama dan meningkatkan INP. Pecahkannya menggunakan setTimeout, scheduler.yield() atau requestIdleCallback.
async function processInChunks(items) {
const CHUNK_SIZE = 100;
for (let i = 0; i < items.length; i += CHUNK_SIZE) {
const chunk = items.slice(i, i + CHUNK_SIZE);
processChunk(chunk);
await new Promise(r => setTimeout(r, 0)); // yield to browser between chunks
}
}scheduler.yield() (API Moden)
scheduler.yield() menyerahkan kawalan kembali kepada gelung acara pelayar, supaya interaksi pengguna yang menunggu dapat diproses sebelum kod anda disambung semula.
async function longTask() {
for (const item of largeList) {
processItem(item);
if (/* every N items */) {
await scheduler.yield(); // let browser handle pending clicks/inputs
}
}
}Elakkan Atur Letak Segerak dalam Pengendali
Membaca sifat atur letak seperti offsetWidth dan getBoundingClientRect() memaksa pengiraan semula atur letak secara segerak. Kumpulkan bacaan sebelum penulisan untuk mengelakkan perubahan atur letak berulang.
// Bad — forces layout recalculation on each iteration:
items.forEach(item => {
const height = item.offsetHeight; // READ — forces layout
item.style.height = height * 2 + 'px'; // WRITE — dirties layout
});
// Good — batch reads, then writes:
const heights = items.map(item => item.offsetHeight); // all reads
heights.forEach((h, i) => items[i].style.height = h * 2 + 'px'); // all writesTindakan React 19 untuk INP Tak Segerak
Tindakan React 19 mengendalikan mutasi tak segerak tanpa menyekat antara muka — keadaan menunggu dikemas kini secara berasingan supaya halaman kekal interaktif.
function LikeButton({ postId }) {
const [optimistic, setOptimistic] = useOptimistic(false);
async function handleLike() {
setOptimistic(true);
await likePost(postId); // async — doesn't block
}
return <button onClick={handleLike}>{optimistic ? 'Liked' : 'Like'}</button>;
}Perangkap Delegasi Acara
React menggunakan delegasi acara sintetik, iaitu satu pendengar dilampirkan pada akar. Elakkan melampirkan ratusan pendengar DOM individu dalam useEffect — gunakan acara sintetik React pada elemen JSX.
Mengukur INP dalam DevTools
Gunakan panel Performance Chrome DevTools untuk merakam interaksi dan memeriksa tugas panjang. Cari entri "Interaction" dalam garis masa dan kembangkannya untuk menemukan penilaian skrip yang menyekat.
Semakan Pantas
Hook React manakah yang menandakan kemas kini keadaan sebagai tidak mendesak supaya kemas kini itu boleh disampuk oleh interaksi pengguna?
Ringkasan
Kurangkan INP dengan menggunakan debounce pada kerja mahal, startTransition untuk kemas kini tidak mendesak, Web Workers untuk kerja CPU, serta memecahkan tugas panjang dengan scheduler.yield(). Kumpulkan bacaan DOM sebelum penulisan untuk mengelakkan perubahan atur letak berulang.
Pelajari React dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 88
- Pelajaran
- 324
Soalan Lazim
Adakah pelajaran “Mengurangkan INP: Pengoptimuman Pengendali Peristiwa” percuma?
Ya — teks penuh “Mengurangkan INP: Pengoptimuman Pengendali Peristiwa” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Mengurangkan INP: Pengoptimuman Pengendali Peristiwa”?
Nyahuntun pengendali berat, gunakan scheduler.yield() dan elakkan tugas panjang yang menyekat utas utama. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Mengurangkan INP: Pengoptimuman Pengendali Peristiwa” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mengukur Web Vitals Teras dalam Aplikasi React
- Analisis Himpunan & Strategi Pemisahan Kod
- Pengoptimuman Imej & Fon dalam React
- Mengurangkan INP: Pengoptimuman Pengendali Peristiwa