عملکرد Frontend یک میدان گسترده و چند وجهی است که شامل طیف گسترده ای از موضوعات است. این پست فقط یک مقدمه سطح بالا است که پایه و اساس بحث های عمیق تر را فراهم می کند ….
مقدمه
عملکرد جنبه مهمی از مهندسی جلو است. یک جبهه بهینه شده ، تجربیات کاربر صاف را تضمین می کند ، رتبه بندی بهتر سئووت نامزدی بهبود یافتهبشر در این پست کوتاه ، ما فقط ملاحظات اساسی در مورد برنامه های جبهه مدرن را به همراه استراتژی هایی برای بهینه سازی رندر ، بارگیری منابع و تعامل خواهیم نامید.
درک تنگناهای عملکرد
بیشتر تنگناهای عملکرد جلوی آن به طور معمول از:
- بسته های بزرگ جاوا اسکریپت: جاوا اسکریپت بیش از حد می تواند تعامل صفحه را به تأخیر بیندازد.
- رندر بهینه سازی نشده: به روزرسانی های ناکارآمد DOM و بازتاب های غیر ضروری عملکرد را کند می کند.
- مسدود کردن درخواست های شبکه: اسکریپت های همزمان ، دارایی های بزرگ و درخواست های شخص ثالث بیش از حد باعث تأخیر می شوند.
- بارگیری منابع ناکارآمد: تصاویر ضعیف ، قلم ها و برگه های سبک زمان بار را افزایش می دهد.
فراخوانی چند تکنیک بهینه سازی …
- JavaScript را به حداقل برسانید و زمان اجرای را بهبود بخشید
- برای حذف کد استفاده نشده از لرزش درخت و تقسیم کد استفاده کنید.
- اسکریپت های غیر بحرانی را به تعویق بیندازید یا تنبل کنید.
-
برای جلوگیری از بازگرداندن مجدد بیش از حد ، گیرنده های رویداد را بهینه کنید.
-
عملکرد رندر را بهینه کنید
-
با استفاده از DOM مجازی به طور کارآمد از دستکاری های غیر ضروری DOM خودداری کنید.
-
از مهار CSS برای ارائه دامنه استفاده کنید.
-
انیمیشن های تحول و Opacity را بر روی خواص تحت تأثیر طرح ترجیح می دهید.
-
بارگیری منابع کارآمد
-
تصاویر را با استفاده از فرمت هایی مانند WebP یا AVIF فشرده کنید.
-
برای جلوگیری از فای (فلاش متن نامرئی) از فونت-خط: مبادله استفاده کنید.
-
بارگیری تنبل را برای تصاویر و iframes پیاده سازی کنید.
-
سطح بالای شبکه را کاهش دهید
-
استراتژی های ذخیره سازی HTTP را پیاده سازی کنید.
-
از CDN برای ارائه کارآمد دارایی های استاتیک استفاده کنید.
-
درخواست های شخص ثالث را با بارگیری فقط منابع لازم بهینه کنید.
اندازه گیری و نظارت بر عملکرد
- فانوس دریایی برای حسابرسی عملکرد کلی.
- صفحه اصلی برای تجزیه و تحلیل دقیق آبشار.
- chrome devtools برای بینش عملکرد زمان اجرا.
- ویتای اصلی وب برای ردیابی معیارهای تجربه کاربر در دنیای واقعی.
پایان
بهینه سازی عملکرد جلو یک فرایند مداوم است که نیاز به آگاهی ، بهینه سازی استراتژیک و نظارت مداوم دارد. با اجرای این بهترین شیوه ها ، می توانید یک تجربه وب صاف ، سریع و کاربر پسند را تضمین کنید.
استراتژی های شما برای بهینه سازی عملکرد Frontend چیست؟ بیایید در نظرات بحث کنیم!
