عملکرد در JavaScript/Reactjs: قسمت 2

سلام توسعه دهندگان! به وبلاگ دوم من در مورد عملکرد JavaScript خوش آمدید.

در این پست ، با پیاده روی شما از طریق بهینه سازی کارهای طولانی در JavaScript در این پست برای جلوگیری از تنگناهای عملکرد ، توصیه می کنم قسمت قبلی قسمت 1 عملکرد را در JavaScript بخوانید

ما برای تجزیه و تحلیل توابع عملکرد آهسته ، شناسایی تنگناها و بهبود موثر زمان اجرای ، به برگه عملکرد DevTools شیرجه می شویم.
بیایید چگونگی کارآمدتر کردن کد جاوا اسکریپت خود را بررسی کنیم!

در پرونده login/index.tsx ، من یک کار طولانی اضافه کرده ام

function heavyComputation() {
    let total = 0;
    for (let i = 0; i < 1e9; i++) {  // Heavy loop
      total += i;
    }
    console.log("Computation done:", total);
  }

    useEffect(() => { 
      heavyComputation();  // UI freezes while processing
      console.log("Task complete!")
    },[])

روی کلیک کردن “گزارش رویداد“TAB ، ما می توانیم” تماس عملکرد “را مشاهده کنیم و در گسترش آن ، جزئیات Computation را نشان می دهد (با دقت در سمت راست نگاه کنید ، index.tsx: 203: 12 همان چیزی که در سمت راست مشاهده می کنید) -> این خط دقیق را نشان می دهد که این عملیات سنگین در آن اتفاق می افتد.
زمان کل: 1023ms پوند

اکنون می توانیم در زیر مشاهده کنیم ، زیرا حلقه تقریباً 2 ثانیه برای انجام عملیات انجام می شود و موضوع اصلی ما را مسدود می کند.

🔴 مسائل:

1. UI در حالی که محاسبات اجرا می شود ، یخ می زند.
2. تا زمان اتمام کار ، تعامل یا به روزرسانی ارائه نمی شود.

راه حل

در پوشه عمومی یک پرونده worker.js ایجاد کنید

self.onmessage = () => {
  let total = 0;
  for (let i = 0; i < 1e9; i++) {
    // Heavy computation
    total += i;
  }
  self.postMessage(total); // Send result back
};

وارد کردن کارگر.

 useEffect(() => {
    const worker = new Worker(new URL('./public/worker.js', 
import.meta.url));
    worker.onmessage = (e) => {
      setResult(e.data);
      console.log('Task complete!', e.data);
    };

    worker.postMessage('start'); // Start computation
    return () => worker.terminate(); // Cleanup
  }, []);

اکنون ، ضبط عملکرد را دوباره امتحان کنید و نتیجه را ببینید –

🟢 مزایا:

1. زمان کل به طور قابل توجهی کاهش یافته است.
2. UI پاسخگو است (بدون مسدود کردن موضوع اصلی).
3. محاسبات در یک موضوع جداگانه اجرا می شود و از انجماد UI جلوگیری می کند.
4. تجربه کاربر بهتر و تعامل سریعتر.

راه حل جایگزین به جای استفاده از “کارگر”؟ 💡
اگر کارگران وب گزینه ای نباشند ، می توانیم محاسبه را نیز انجام دهیم تا فقط در زمان بیکار اجرا شود. (با استفاده از رویکرد RequestIdleCallback)

useEffect(() => {
  let total = 0;
  let i = 0;

  function processChunk(deadline) {
    while (i < 1e9 && deadline.timeRemaining() > 0) {
      total += i;
      i++;
    }

    if (i < 1e9) {
      requestIdleCallback(processChunk);
    } else {
      console.log('Computation done:', total);
    }
  }

  requestIdleCallback(processChunk);
}, []);

چه مهلت. یعنی در درخواست idlecallback؟
Deadline.TimerEmaining () یک روش در داخل است RequestIdleCallback این به ما می گوید که چقدر زمان (در میلی ثانیه) در دوره بیکار فعلی باقی مانده است. این کمک می کند تا کارهای سنگین را به تکه های کوچکتر تقسیم کنید که فقط در صورت بیکار بودن مرورگر انجام می شود و UI را پاسخگو نگه می دارد.

✔ کلیدهای مهم از این وبلاگ؟
1⃣ از کارگران وب برای کارهای سنگین CPU استفاده کنید
2⃣ برای کارهای اولویت پایین از درخواست DESPEDIDLECALLBALL استفاده کنید ✔
3⃣ هرگز نخ اصلی را در JavaScript/Reactjs مسدود نکنید! 👍

نظر خود را به راه حل کنید