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

سلام ، من مطمئن هستم که قبلاً آن را شنیده اید – “ما باید این کد را بهینه کنیم یا جریان را بهینه کنیم ؛ خیلی طولانی طول می کشد و به تجربه کاربر آسیب می رساند!” به نظر می رسد آشنا؟ شما این را گرفتید! 😎🚀

بهینه سازی در واقع به چه معنی است ..

اگر صفحات شما به آرامی بارگیری می شوند ، وظایف برای بازگشت نتایج خیلی طولانی می شوند ، یا صفحه فرود شما لاغر است – به نظر می رسد که کاربران به دور خود نمی چسبند تا ببینند وب سایت شما چه چیزی را ارائه می دهد. این یک نشانه واضح است که زمان بهینه سازی است!

چگونه؟
1 موضوع اصلی را مسدود نکنید
2 کارهای طولانی خود را بشکنید

خوب ، اکنون درک کنید که این به چه معنی است.
شما باید بفهمید که کارها چیست و چگونه مرورگر آنها را اداره می کند

چه کارهایی وجود دارد؟

1. کار بخشی از کار است که مرورگر انجام می دهد.
2. این کار شامل می شود ارائه دهندهبا تجزیه HTML و CSSبا در حال اجرا جاوا اسکریپت وت نوع دیگر کار که ممکن است کنترل مستقیمی بر روی آن نداشته باشید. از همه اینها ، JavaScript شما می نویسید شاید بزرگترین منبع کارها باشد.

موضوع اصلی چیست؟

1 این موضوعی است که تقریباً تمام کد JavaScript را که می نویسید اجرا می کنید و بیشتر کارها در مرورگر اجرا می شوند.
2 این وظایف 1 در 1 را در یک صف پردازش می کند

وظایفی که بیش از 50 میلی ثانیه مصرف می کند در نظر گرفته می شود کار طولانی
زمان مسدود کردن کار: زمان کل توسط یک کار جدید 50 میلی ثانیه

آیا باید با اجرای کار طولانی شروع کنیم؟

function longTask() {
  for (let i = 0; i < 30_000; i++) {
    // Emulate CPU load, as using console.log
    // with open devtools is a very CPU-intensive operation.
    console.log(index);
  }
}

بیایید این را امتحان کنیم ..
عملکرد مانند این را مشاهده خواهید کرد

می گوید ، کار طولانی 2.55 ثانیه طول کشید. به رنگ قرمز ، این بدان معنی است که این کار بیش از آنچه که انتظار می رفت به عنوان یک زمان ایده آل انجام شود.

هر کار بیش از 50ms یک کار طولانی است
مثال 1

function task(name, num = 5_000) {
  console.log(`Starting task: ${name}`);

  for (let i = 0; i < num; i++) {
    console.log({i});
  }
}

function longTask() {
    task('1');
    task('2');
    task('3');
    task('4');
    task('5');
    task('6');
  }

  useEffect(() => { 
    longTask()
  },[])

مثال 2: پس از شکستن کارهای طولانی در کارهای کوچکتر.

useEffect(() => {
  function longTask() {
  // Critical tasks.
  task('1');
  task('3');

  // Deferring set of tasks.
  setTimeout(() => {
    task('2');
    task('4');
    task('5');
    task('6');
  });
}

longTask()
  },[])

اکنون همانطور که در زیر مشاهده می کنید ، یک کار طولانی به 4 کار فرعی تقسیم می شود (63.46 ms + 836.75 ms + 520.72 ms + 510.94 ms)

• این تکنیک به عنوان شناخته شده است بازده، با کارهای متوالی بهترین کار را می کند.
  (به زبان ساده – تنظیم یک مجموعه در یک سری از کارکردها به عنوان بازده شناخته می شود.)

• این به تقسیم وظایف به زیرنویس کمک می کند ، به طوری که می توان کارهای مهم را ابتدا در کارهای بعدی غیر مهم انجام داد.

مثال 3:

async function saveSettings () {
  // Do critical work that is user-visible:
  task('1');
  task('3');

  // Yield to the main thread:
  await scheduler.yield()

  // Work that isn't user-visible, continued in a separate task:
    task('2');
    task('4');
    task('5');
    task('6');
}

جایگزین SettimeOut –

1. Scheduler.Yield () یک API است که به طور خاص برای بازده موضوع اصلی در مرورگر طراحی شده است.
2. از لینک کتابخانه Scheduler استفاده کنید

به طور خلاصه به طور خلاصه:

1. ببینید وظایف اولویت که بر تجربه کاربر تأثیر می گذارد چیست.
2. برای کارهای کروتی به موضوع اصلی باز می شود.
3. برای جلوگیری از مسدود کردن موضوع ، کار را در هر عملکرد تا 10 متر و زیر 50ms به حداقل برسانید.

با استفاده از این رویکردها می توانید عملکرد وب خود را به طور موثر بهبود بخشید.

اگر از این وبلاگ (کوتاه و شیرین) لذت بردید ، وبلاگ های دیگر من را نیز بررسی کنید! جدید

با ما همراه باشید! من به زودی وبلاگ دیگری را با نمونه های عملی در دنیای واقعی رها می کنم ، بنابراین می توانید از نگرانی در مورد عملکرد وب به خوبی دست بکشید!

👍 در صورت داشتن هر گونه سؤال یا اگر آن را مفید می دانید نظر را دوست دارید و رها کنید!