بهینه‌سازی عملکرد جاوا اسکریپت: تقسیم کد در مقابل ارزیابی تنبل

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      در حال بارگذاری...
}>
        
      
    

در این مثال، OtherComponent تنها زمانی بارگذاری می‌شود که رندر شود. در حین بارگذاری آن، کاربر پیام «در حال بارگذاری...» را مشاهده خواهد کرد.

ابزارهای تقسیم کد

• Webpack: یک باندلر ماژول محبوب که از تکنیک‌های مختلف تقسیم کد پشتیبانی می‌کند.
• Rollup: باندلر ماژول دیگری که بر ایجاد بسته‌های کوچک و کارآمد تمرکز دارد.
• Parcel: یک باندلر بدون نیاز به پیکربندی که به طور خودکار تقسیم کد را مدیریت می‌کند.
• Vite: یک ابزار ساخت که از ماژول‌های ES نیتیو برای توسعه سریع و بیلدهای تولید بهینه شده استفاده می‌کند.

ارزیابی تنبل (Lazy Evaluation): به تعویق انداختن محاسبات

ارزیابی تنبل چیست؟

ارزیابی تنبل، که به عنوان ارزیابی معوق نیز شناخته می‌شود، یک تکنیک برنامه‌نویسی است که در آن ارزیابی یک عبارت تا زمانی که مقدار آن واقعاً مورد نیاز باشد به تعویق می‌افتد. به عبارت دیگر، محاسبات تنها زمانی انجام می‌شوند که نتایج آنها مورد نیاز باشد، به جای اینکه مشتاقانه آنها را از قبل محاسبه کنند.

تصور کنید در حال آماده کردن یک وعده غذایی چند بخشی هستید. شما تمام غذاها را یکجا نمی‌پزید. در عوض، هر غذا را تنها زمانی آماده می‌کنید که وقت سرو آن فرا رسیده باشد. ارزیابی تنبل نیز به طور مشابه عمل می‌کند و محاسبات را تنها زمانی انجام می‌دهد که نتایج آنها مورد نیاز باشد.

ارزیابی تنبل چگونه کار می‌کند؟

در جاوا اسکریپت، ارزیابی تنبل را می‌توان با استفاده از تکنیک‌های مختلفی پیاده‌سازی کرد:

• توابع: قرار دادن یک عبارت در یک تابع به شما امکان می‌دهد ارزیابی آن را تا زمان فراخوانی تابع به تعویق بیندازید.
• ژنراتورها (Generators): ژنراتورها راهی برای ایجاد تکرارکننده‌هایی فراهم می‌کنند که مقادیر را بر حسب تقاضا تولید می‌کنند.
• ممویزیشن (Memoization): ممویزیشن شامل کش کردن نتایج فراخوانی‌های توابع پرهزینه و بازگرداندن نتیجه کش شده در صورت تکرار ورودی‌های یکسان است.
• پراکسی‌ها (Proxies): از پراکسی‌ها می‌توان برای رهگیری دسترسی به خصوصیات و به تعویق انداختن محاسبه مقادیر خصوصیات تا زمان دسترسی واقعی به آنها استفاده کرد.

مزایای ارزیابی تنبل

• بهبود عملکرد: با به تعویق انداختن محاسبات غیرضروری، ارزیابی تنبل می‌تواند به طور قابل توجهی عملکرد را بهبود بخشد، به خصوص هنگام کار با مجموعه‌های داده بزرگ یا محاسبات پیچیده.
• کاهش استفاده از حافظه: ارزیابی تنبل می‌تواند با جلوگیری از ایجاد مقادیر میانی که بلافاصله مورد نیاز نیستند، استفاده از حافظه را کاهش دهد.
• افزایش پاسخگویی: با اجتناب از محاسبات غیرضروری در هنگام بارگذاری اولیه، ارزیابی تنبل می‌تواند پاسخگویی اپلیکیشن را افزایش دهد.
• ساختارهای داده نامتناهی: ارزیابی تنبل به شما امکان می‌دهد با ساختارهای داده نامتناهی، مانند لیست‌ها یا جریان‌های نامتناهی، کار کنید، تنها با محاسبه عناصر ضروری بر حسب تقاضا.

مثال: بارگذاری تنبل تصاویر (Lazy Loading)

یک مورد استفاده رایج برای ارزیابی تنبل، بارگذاری تنبل تصاویر است. به جای بارگذاری همه تصاویر در یک صفحه از ابتدا، می‌توانید بارگذاری تصاویری را که در ابتدا در دید کاربر (viewport) قابل مشاهده نیستند، به تعویق بیندازید. این کار می‌تواند به طور قابل توجهی زمان بارگذاری اولیه صفحه را بهبود بخشد و مصرف پهنای باند شبکه را کاهش دهد.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

این مثال از IntersectionObserver API برای تشخیص زمانی که یک تصویر وارد دید کاربر می‌شود، استفاده می‌کند. هنگامی که یک تصویر قابل مشاهده است، ویژگی src آن به مقدار ویژگی data-src آن تنظیم می‌شود و باعث بارگذاری تصویر می‌شود. سپس observer مشاهده تصویر را متوقف می‌کند تا از بارگذاری مجدد آن جلوگیری شود.

مثال: ممویزیشن (Memoization)

ممویزیشن را می‌توان برای بهینه‌سازی فراخوانی‌های توابع پرهزینه استفاده کرد. در اینجا یک مثال آورده شده است:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // شبیه‌سازی یک محاسبه زمان‌بر
  for (let i = 0; i < 100000000; i++) {
    // کاری انجام بده
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('فراخوانی اول');
console.log(memoizedCalculation(5)); // فراخوانی اول - زمان‌بر است
console.timeEnd('فراخوانی اول');

console.time('فراخوانی دوم');
console.log(memoizedCalculation(5)); // فراخوانی دوم - مقدار کش شده را فوراً برمی‌گرداند
console.timeEnd('فراخوانی دوم');

در این مثال، تابع memoize یک تابع را به عنوان ورودی می‌گیرد و یک نسخه مموایز شده از آن تابع را برمی‌گرداند. تابع مموایز شده نتایج فراخوانی‌های قبلی را کش می‌کند، به طوری که فراخوانی‌های بعدی با همان آرگومان‌ها می‌توانند نتیجه کش شده را بدون اجرای مجدد تابع اصلی برگردانند.

تقسیم کد در مقابل ارزیابی تنبل: تفاوت‌های کلیدی

در حالی که هم تقسیم کد و هم ارزیابی تنبل تکنیک‌های بهینه‌سازی قدرتمندی هستند، اما به جنبه‌های متفاوتی از عملکرد می‌پردازند:

• تقسیم کد: بر کاهش حجم بسته اولیه با تقسیم کد به قطعات کوچکتر و بارگذاری آنها بر حسب تقاضا تمرکز دارد. این تکنیک عمدتاً برای بهبود زمان بارگذاری اولیه صفحه استفاده می‌شود.
• ارزیابی تنبل: بر به تعویق انداختن محاسبه مقادیر تا زمانی که واقعاً مورد نیاز باشند تمرکز دارد. این تکنیک عمدتاً برای بهبود عملکرد هنگام کار با محاسبات پرهزینه یا مجموعه‌های داده بزرگ استفاده می‌شود.

در اصل، تقسیم کد مقدار کدی را که باید از ابتدا دانلود شود کاهش می‌دهد، در حالی که ارزیابی تنبل مقدار محاسباتی را که باید از ابتدا انجام شود کاهش می‌دهد.

چه زمانی از تقسیم کد و چه زمانی از ارزیابی تنبل استفاده کنیم؟

تقسیم کد

• اپلیکیشن‌های بزرگ: برای اپلیکیشن‌هایی با حجم زیاد کد جاوا اسکریپت، به خصوص آنهایی که دارای چندین مسیر یا ویژگی هستند، از تقسیم کد استفاده کنید.
• بهبود زمان بارگذاری اولیه: برای بهبود زمان بارگذاری اولیه صفحه و کاهش زمان تا تعاملی شدن (time to interactive) از تقسیم کد استفاده کنید.
• کاهش پهنای باند شبکه: برای کاهش میزان داده‌ای که باید از طریق شبکه منتقل شود از تقسیم کد استفاده کنید.

ارزیابی تنبل

• محاسبات پرهزینه: برای توابعی که محاسبات پرهزینه انجام می‌دهند یا به مجموعه‌های داده بزرگ دسترسی دارند از ارزیابی تنبل استفاده کنید.
• بهبود پاسخگویی: برای بهبود پاسخگویی اپلیکیشن با به تعویق انداختن محاسبات غیرضروری در هنگام بارگذاری اولیه از ارزیابی تنبل استفاده کنید.
• ساختارهای داده نامتناهی: هنگام کار با ساختارهای داده نامتناهی، مانند لیست‌ها یا جریان‌های نامتناهی، از ارزیابی تنبل استفاده کنید.
• بارگذاری تنبل رسانه‌ها: برای بهبود زمان بارگذاری صفحه، بارگذاری تنبل را برای تصاویر، ویدیوها و سایر دارایی‌های رسانه‌ای پیاده‌سازی کنید.

ترکیب تقسیم کد و ارزیابی تنبل

در بسیاری از موارد، می‌توان تقسیم کد و ارزیابی تنبل را برای دستیابی به دستاوردهای عملکردی حتی بیشتر ترکیب کرد. به عنوان مثال، ممکن است از تقسیم کد برای تقسیم اپلیکیشن خود به قطعات کوچکتر استفاده کنید و سپس از ارزیابی تنبل برای به تعویق انداختن محاسبه مقادیر در آن قطعات استفاده کنید.

یک اپلیکیشن تجارت الکترونیک را در نظر بگیرید. می‌توانید از تقسیم کد برای تقسیم اپلیکیشن به بسته‌های جداگانه برای صفحه لیست محصولات، صفحه جزئیات محصول و صفحه پرداخت استفاده کنید. سپس، در صفحه جزئیات محصول، می‌توانید از ارزیابی تنبل برای به تعویق انداختن بارگذاری تصاویر یا محاسبه پیشنهادات محصول تا زمانی که واقعاً مورد نیاز باشند، استفاده کنید.

فراتر از تقسیم کد و ارزیابی تنبل: تکنیک‌های بهینه‌سازی اضافی

در حالی که تقسیم کد و ارزیابی تنبل تکنیک‌های قدرتمندی هستند، آنها تنها دو قطعه از پازل بهینه‌سازی عملکرد جاوا اسکریپت هستند. در اینجا چند تکنیک اضافی وجود دارد که می‌توانید برای بهبود بیشتر عملکرد از آنها استفاده کنید:

• کوچک‌سازی (Minification): کاراکترهای غیرضروری (مانند فضای خالی، کامنت‌ها) را از کد خود حذف کنید تا حجم آن کاهش یابد.
• فشرده‌سازی (Compression): کد خود را با استفاده از ابزارهایی مانند Gzip یا Brotli فشرده کنید تا حجم آن را بیشتر کاهش دهید.
• کش کردن (Caching): از کش مرورگر و کش CDN برای کاهش تعداد درخواست‌ها به سرور خود بهره ببرید.
• حذف کدهای مرده (Tree Shaking): کدهای استفاده نشده را از بسته‌های خود حذف کنید تا حجم آنها کاهش یابد.
• بهینه‌سازی تصاویر: تصاویر را با فشرده‌سازی، تغییر اندازه به ابعاد مناسب و استفاده از فرمت‌های تصویر مدرن مانند WebP بهینه کنید.
• Debouncing و Throttling: نرخ اجرای کنترل‌کننده‌های رویداد (event handler) را برای جلوگیری از مشکلات عملکرد کنترل کنید.
• دستکاری کارآمد DOM: دستکاری‌های DOM را به حداقل برسانید و از تکنیک‌های کارآمد دستکاری DOM استفاده کنید.
• Web Workers: وظایف محاسباتی سنگین را به وب ورکرها منتقل کنید تا از مسدود شدن رشته اصلی جلوگیری کنند.

نتیجه‌گیری

بهینه‌سازی عملکرد جاوا اسکریپت یک جنبه حیاتی برای ارائه یک تجربه کاربری مثبت و دستیابی به اهداف تجاری است. تقسیم کد و ارزیابی تنبل دو تکنیک قدرتمند هستند که می‌توانند با کاهش زمان بارگذاری اولیه، کاهش مصرف پهنای باند شبکه و به تعویق انداختن محاسبات غیرضروری، عملکرد را به طور قابل توجهی بهبود بخشند. با درک نحوه عملکرد این تکنیک‌ها و زمان استفاده از آنها، می‌توانید اپلیکیشن‌های وب سریع‌تر، پاسخگوتر و لذت‌بخش‌تری ایجاد کنید.

به یاد داشته باشید که الزامات خاص اپلیکیشن خود را در نظر بگیرید و از تکنیک‌هایی استفاده کنید که برای نیازهای شما مناسب‌تر هستند. به طور مداوم عملکرد اپلیکیشن خود را نظارت کنید و استراتژی‌های بهینه‌سازی خود را تکرار کنید تا اطمینان حاصل کنید که بهترین تجربه کاربری ممکن را ارائه می‌دهید. از قدرت تقسیم کد و ارزیابی تنبل برای ایجاد اپلیکیشن‌های وبی که نه تنها غنی از ویژگی‌ها، بلکه کارآمد و لذت‌بخش برای استفاده در سراسر جهان هستند، استقبال کنید.

منابع بیشتر برای یادگیری

• مستندات Webpack: https://webpack.js.org/
• مستندات Rollup: https://rollupjs.org/guide/en/
• مستندات Vite: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - بهینه‌سازی اجرای جاوا اسکریپت: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/