نکات کلیدی
1. بارگذاری کارآمد جاوااسکریپت برای کاهش درخواست‌های HTTP و بهبود سرعت صفحه
تعداد درخواست‌های HTTP مورد نیاز برای رندر صفحه را کاهش دهید.
ترکیب و موقعیت‌دهی اسکریپت‌ها. چندین فایل جاوااسکریپت را به یک فایل واحد ادغام کنید تا درخواست‌های HTTP را به حداقل برسانید. تگ‌های اسکریپت را در انتهای بدنه HTML قرار دهید تا صفحه قبل از اجرای اسکریپت‌ها به‌طور بصری بارگذاری شود. از تکنیک‌های بارگذاری غیرهمزمان مانند درج اسکریپت دینامیک یا ویژگی defer در صورت امکان استفاده کنید.
فشرده‌سازی و بهینه‌سازی. از ابزارهایی مانند YUI Compressor برای حذف کاراکترها و فضای خالی غیرضروری از فایل‌های جاوااسکریپت استفاده کنید. فشرده‌سازی gzip را در سرور وب خود فعال کنید تا اندازه فایل‌ها را بیشتر کاهش دهید. در نظر داشته باشید که از شبکه تحویل محتوا (CDN) برای ارائه دارایی‌های استاتیک، از جمله فایل‌های جاوااسکریپت، از سرورهای جغرافیایی توزیع‌شده برای تحویل سریع‌تر استفاده کنید.
استراتژی‌های کش را پیاده‌سازی کنید. هدرهای کش مناسب را برای فایل‌های جاوااسکریپت تنظیم کنید تا مرورگرها بتوانند آن‌ها را به‌صورت محلی ذخیره کنند. از نسخه‌بندی یا زمان‌سنجی در نام فایل‌ها برای مجبور کردن به‌روزرسانی‌ها در صورت لزوم استفاده کنید. برای دستگاه‌های موبایل با قابلیت‌های کش محدود، در نظر داشته باشید که از کش برنامه HTML5 یا مکانیزم‌های ذخیره‌سازی سمت کلاینت استفاده کنید.
2. بهینه‌سازی دسترسی به داده‌ها و مدیریت دامنه برای اجرای سریع‌تر
متغیرهای محلی همیشه سریع‌ترین دسترسی را در داخل یک تابع دارند، در حالی که متغیرهای جهانی معمولاً کندترین هستند.
کاهش پیمایش زنجیره دامنه. متغیرهای خارج از دامنه که به‌طور مکرر دسترسی دارند را در متغیرهای محلی ذخیره کنید. از استفاده از دستور with و eval() خودداری کنید، زیرا می‌توانند زنجیره دامنه را گسترش دهند و اجرای کد را کند کنند. از بستن‌ها به‌طور معقول استفاده کنید، زیرا آن‌ها ارجاعات به دامنه خارجی خود را حفظ می‌کنند و می‌توانند بر استفاده از حافظه تأثیر بگذارند.
بهینه‌سازی دسترسی به اشیاء و آرایه‌ها. از نوتیشن نقطه‌ای به‌جای نوتیشن براکت برای دسترسی به ویژگی‌های اشیاء با شناسه‌های معتبر و شناخته‌شده استفاده کنید. طول آرایه‌ها را در حلقه‌های for ذخیره کنید تا از جستجوی مکرر ویژگی‌ها جلوگیری شود. در نظر داشته باشید که از اشیاء یا آرایه‌های ساده به‌جای ساختارهای داده پیچیده‌تر استفاده کنید زمانی که ذخیره‌سازی کلید-مقدار ساده کافی است.
استفاده از نوتیشن ادبی. از ادبیات اشیاء و آرایه‌ها به‌جای معادل‌های سازنده آن‌ها (به‌عنوان مثال، {} به‌جای new Object()) استفاده کنید. این نه‌تنها خوانایی را بهبود می‌بخشد بلکه می‌تواند در بسیاری از موتورهای جاوااسکریپت سریع‌تر باشد.
3. کاهش دستکاری DOM برای بهبود عملکرد
دسترسی و دستکاری DOM بخشی مهم از برنامه‌های وب مدرن است. اما هر بار که از ECMAScript به دنیای DOM عبور می‌کنید، هزینه‌ای دارد.
عملیات DOM را دسته‌بندی کنید. با ایجاد تغییرات در یک قطعه سند یا گره کپی‌شده قبل از به‌روزرسانی DOM زنده، دستکاری مستقیم DOM را به حداقل برسانید. این کار تعداد reflow و repaint را که هزینه محاسباتی بالایی دارند، کاهش می‌دهد.
از انتخاب‌گرهای کارآمد استفاده کنید. از روش‌های بومی DOM مانند getElementById() و querySelector() به‌جای روش‌های عمومی‌تر استفاده کنید. هنگام استفاده از کتابخانه‌ها، اطمینان حاصل کنید که آن‌ها از این روش‌های بومی سریع‌تر در دسترس استفاده می‌کنند. ارجاعات DOM را برای عناصری که به‌طور مکرر دسترسی دارند، ذخیره کنید.
بهینه‌سازی مدیریت رویدادها. با اتصال شنوندگان رویداد به عناصر والد به‌جای عناصر فرزند فردی، مدیریت رویدادها را پیاده‌سازی کنید. این کار تعداد شنوندگان رویداد را کاهش می‌دهد و عملکرد را بهبود می‌بخشد، به‌ویژه برای عناصر اضافه‌شده به‌طور دینامیک.
4. پیاده‌سازی الگوریتم‌های کارآمد و تکنیک‌های کنترل جریان
در واقع فقط دو عامل وجود دارد: کار انجام‌شده در هر تکرار و تعداد تکرارها.
بهینه‌سازی حلقه‌ها. کار انجام‌شده در هر تکرار را با انتقال کد ثابت به خارج از حلقه به حداقل برسانید. در صورت امکان از حلقه‌های معکوس while استفاده کنید، زیرا معمولاً سریع‌تر از حلقه‌های for هستند. در نظر داشته باشید که از روش‌های آرایه‌ای مانند forEach()، map() و reduce() برای تکرارهای تمیزتر و احتمالاً سریع‌تر استفاده کنید.
شرایط مناسب را انتخاب کنید. از عبارات switch به‌جای زنجیره‌های طولانی if-else هنگام کار با چندین مقدار گسسته استفاده کنید. برای شرایط پیچیده، در نظر داشته باشید که از جداول جستجو یا بیت‌ماسک‌ها برای ارزیابی سریع‌تر استفاده کنید.
پیاده‌سازی حافظه‌سازی. نتایج فراخوانی‌های پرهزینه تابع را ذخیره کنید تا از محاسبات تکراری جلوگیری شود. این کار به‌ویژه برای توابع بازگشتی یا عملیات‌هایی که به‌طور مکرر با ورودی‌های یکسان فراخوانی می‌شوند، مفید است.
5. انتخاب فرمت داده مناسب برای عملکرد بهینه Ajax
JSON در مقایسه با XML مزایای زیادی دارد. این فرمت بسیار کوچکتر است و بخش کمتری از اندازه کل پاسخ به ساختار اختصاص داده شده و بیشتر به داده‌ها مربوط می‌شود.
JSON را به XML ترجیح دهید. JSON فشرده‌تر و سریع‌تر از XML تجزیه می‌شود. در صورت امکان، از JSON-P (JSON با padding) برای تجزیه سریع‌تر، به‌ویژه هنگام کار با مجموعه‌های داده بزرگ، استفاده کنید. برای مجموعه‌های داده بسیار بزرگ، در نظر داشته باشید که از فرمت‌های سفارشی با جداکننده‌های حداقلی استفاده کنید.
انتقال داده را بهینه کنید. از درخواست‌های GET برای عملیات ایپیدمیک و POST برای بارهای بزرگ‌تر استفاده کنید. استراتژی‌های کش مناسب را برای پاسخ‌های Ajax پیاده‌سازی کنید تا از درخواست‌های غیرضروری شبکه جلوگیری شود. در نظر داشته باشید که از تکنیک‌هایی مانند multipart XHR برای بسته‌بندی چندین منبع در یک درخواست واحد استفاده کنید.
داده‌ها را به‌طور کارآمد مدیریت کنید. پاسخ‌های JSON را با استفاده از روش‌های بومی مانند JSON.parse() در صورت در دسترس بودن تجزیه کنید. برای مجموعه‌های داده بزرگ، از رندرینگ تدریجی برای بهبود عملکرد درک‌شده استفاده کنید. از کارگران وب برای وظایف تجزیه یا پردازش زمان‌بر استفاده کنید تا UI پاسخگو باقی بماند.
6. ایجاد رابط‌های پاسخگو با مدیریت رشته UI مرورگر
هیچ وظیفه جاوااسکریپت نباید بیش از 100 میلی‌ثانیه طول بکشد.
وظایف طولانی را تقسیم کنید. از setTimeout() یا setInterval() برای تقسیم عملیات طولانی به قطعات کوچکتر استفاده کنید تا UI پاسخگو باقی بماند. در نظر داشته باشید که از کارگران وب برای وظایف پردازشی سنگین که به دسترسی DOM نیاز ندارند، استفاده کنید.
مدیریت شنوندگان رویدادها را بهینه کنید. شنوندگان رویدادها را برای رویدادهای مکرر مانند اسکرول یا تغییر اندازه به‌صورت debounce یا throttle کنید تا تعداد فراخوانی‌های تابع کاهش یابد. اطمینان حاصل کنید که شنوندگان رویدادها به‌سرعت کامل شوند، به‌ویژه برای تعاملات کاربر.
مدیریت انیمیشن‌ها به‌طور کارآمد. از requestAnimationFrame() برای انیمیشن‌های نرم‌تر که با چرخه رندرینگ مرورگر همزمان هستند، استفاده کنید. تعداد عناصری که انیمیشن می‌شوند را به حداقل برسانید و در صورت امکان از انتقال‌ها یا انیمیشن‌های CSS برای بهبود عملکرد استفاده کنید.
7. استفاده از فرآیندهای ساخت و استقرار برای افزایش عملکرد جاوااسکریپت
هر چیزی که می‌تواند در زمان ساخت انجام شود، نباید در زمان اجرا انجام شود.
بهینه‌سازی‌ها را خودکار کنید. یک فرآیند ساخت با استفاده از ابزارهایی مانند Grunt، Gulp یا Webpack پیاده‌سازی کنید تا وظایفی مانند ادغام، فشرده‌سازی و فشرده‌سازی فایل‌های جاوااسکریپت را خودکار کنید. از نقشه‌های منبع برای حفظ قابلیت اشکال‌زدایی کد فشرده‌شده استفاده کنید.
تقسیم کد را پیاده‌سازی کنید. برنامه خود را به قطعات کوچکتر تقسیم کنید که می‌توانند به‌صورت درخواستی بارگذاری شوند، بار اولیه را کاهش داده و زمان راه‌اندازی را بهبود بخشند. از تکنیک‌هایی مانند بارگذاری تنبل برای منابع غیرضروری استفاده کنید.
برای تولید بهینه‌سازی کنید. کدهای مختص توسعه، مانند بیانیه‌های لاگ‌گذاری و اشکال‌زدایی را در ساخت‌های تولید حذف کنید. به‌جای شناسایی مرورگر، از شناسایی ویژگی استفاده کنید تا کد قابل نگهداری و کارآمدتری در محیط‌های مختلف ایجاد کنید.
8. استفاده از ابزارهای پروفایلینگ برای شناسایی و حل گلوگاه‌های عملکرد
داشتن نرم‌افزار مناسب برای شناسایی گلوگاه‌ها در بارگذاری و اجرای اسکریپت‌ها ضروری است.
از ابزارهای توسعه‌دهنده مرورگر استفاده کنید. از پروفایلرهای داخلی در مرورگرهایی مانند Chrome DevTools، Firefox Developer Tools و Safari Web Inspector برای تجزیه و تحلیل زمان اجرای جاوااسکریپت و شناسایی توابع کند استفاده کنید. از پنل‌های شبکه برای بهینه‌سازی بارگذاری منابع و شناسایی گلوگاه‌ها در تحویل دارایی‌ها استفاده کنید.
زمان‌بندی سفارشی را پیاده‌سازی کنید. از API عملکرد (window.performance) یا توابع زمان‌بندی سفارشی برای اندازه‌گیری عملیات خاص در کد خود استفاده کنید. این کار امکان ردیابی و بهینه‌سازی عملکرد دقیق‌تر را فراهم می‌کند.
عملکرد واقعی را نظارت کنید. نظارت بر کاربران واقعی (RUM) را برای جمع‌آوری داده‌های عملکرد از کاربران واقعی پیاده‌سازی کنید. این کار بینش‌هایی درباره عملکرد برنامه شما در دستگاه‌ها و شرایط شبکه مختلف ارائه می‌دهد و به اولویت‌بندی تلاش‌های بهینه‌سازی کمک می‌کند.
آخرین به‌روزرسانی::
نقد و بررسی
کتاب جاوااسکریپت با عملکرد بالا نقدهای متفاوتی دریافت کرده است و به‌طور میانگین امتیاز 4.11 از 5 را کسب کرده است. بسیاری از خوانندگان از بینش‌های دقیق و نکات عملی آن برای بهینه‌سازی کد جاوااسکریپت تمجید می‌کنند. با این حال، برخی از محتوای قدیمی آن انتقاد می‌کنند، زیرا کتاب در سال 2010 منتشر شده است. جنبه‌های مثبت شامل توضیحات جامع از تکنیک‌های عملکرد، تعاملات DOM و عبارات منظم است. منتقدان اشاره می‌کنند که بسیاری از روش‌ها اکنون استاندارد شده‌اند و معیارهای مرورگر منسوخ شده‌اند. با وجود قدمت آن، برخی از خوانندگان هنوز ارزش‌هایی در اصول و دیدگاه تاریخی بهینه‌سازی عملکرد جاوااسکریپت می‌یابند.
