4 تکنیک بهینه سازی عملکرد برای برنامه های React
راه‌های زیادی برای بهینه‌سازی اپلیکیشن React وجود دارد. همه برای هر برنامه کار نمی‌کنند و هر کاری که انجام می‌دهید باعث افزایش عملکرد قابل توجهی نمی‌شود.
سفارش ساخت سایت در فریلنس پروژه
اخیراً وظیفه‌ای به من محول شده است که می‌گوید: "بهبود عملکرد برنامه". این من هستم که آن سفر را مستند می کنم.
مرحله 1 - سناریوهایی را پیدا کنید که پس از آن عملکرد شروع به کاهش می کند
من خوش شانس بودم که از سناریویی مطلع شدم که عملکرد آنقدر کاهش می یابد که تجربه کاربر کاملاً غیرقابل تحمل است. برای پیدا کردن همه این سناریوها، باید به شدت به انجام اقدامات مختلف روی برنامه ادامه داد و زمانی که عملکرد شروع به تنزل کرد، نظارت داشت. هیچ راه ساده ای برای انجام این کار وجود ندارد، تنها روش این است که افراد بیشتر و بیشتری از برنامه استفاده کنند و تجربیات خود را گزارش کنند. راه دیگر نیز می‌تواند این باشد که داده‌های ساختگی زیادی تولید کنید و سعی کنید همه آنها را روی رابط کاربری بارگذاری کنید و ببینید که چگونه کار می‌کند. همچنین، انتظار نداشته باشید که همه سناریوها را به یکباره کشف کنید، هر از گاهی آنها را کشف خواهید کرد و سپس می توانید مراحل زیر را برای بهبود عملکرد هر یک از آنها انجام دهید.
مرحله 2 - اشکال زدایی کنید و سعی کنید مقصر واقعی را پیدا کنید
انجام پروژه با متخصصان پروژه
گام بعدی این است که اشکال زدایی کنید و ببینید چه چیزی واقعاً باعث تمام تاخیر یا افت عملکرد شده است. برای این کار می‌توانید از نمایه‌ساز در ابزارهای توسعه‌دهنده استفاده کنید، همچنین راهی برای برجسته کردن تمام مؤلفه‌هایی که در یک عمل خاص دوباره رندر می‌شوند وجود دارد. برای من، این دو بهترین کار را دارند زیرا به من کمک می‌کنند بفهمم چه چیزی دوباره رندر می‌شود و نمایه‌گر نیز دلیل آن را توضیح می‌دهد. نمایه‌ساز همچنین به شما می‌گوید که کدام مؤلفه‌ها چقدر زمان برای رندر گرفتن و تعداد چرخه برنامه شما برای رسیدن به حالت آماده نیاز دارد. علاوه بر این، اگر حلقه‌های تودرتو را ببینم و ببینم تکمیل آنها زمان زیادی می‌برد، از متد console.time() از جاوا اسکریپت نیز استفاده می‌کنم. در سناریوی من، به من اطلاعات دقیقی داده شد مبنی بر اینکه زمینه‌های React که استفاده کرده‌ایم باعث مشکلات اصلی می‌شوند.
طراحی لوگو حرفه ای با بهترین طراحان لوگو
برای خواندن همه چیز در مورد React Profiler اینجا را کلیک کنید.
مرحله 3 - استفاده از تکنیک های زیر برای بهبود عملکرد
من در این بخش لیستی از کارهایی که انجام دادم و به من کمک کرد عملکرد برنامه ام را بهبود بخشد را فهرست می کنم.
متغیرهایی را از حالت حذف کرد که واقعاً نیازی به رندر مجدد مؤلفه نداشتند:
ما دو زمینه و در همه حدود 10-15 متغیر حالت در آنجا داشتیم. مشکل این بود که هر بار که متن به دلیل setState دوباره رندر می‌شد، پیش می‌رفت و باعث می‌شد همه کودکانی که از متن استفاده می‌شد دوباره رندر شوند. همه متغیرهای حالت را که دلیلی برای ادامه دادن و رندر مجدد مؤلفه نداشتند، حذف کردم، همچنین همه متغیرهایی را که به عنوان مقادیر به ارائه‌دهنده زمینه ارسال می‌شد و می‌توانستند مشتق شوند یا در هیچ کجای برنامه استفاده نمی‌شدند، حذف کردم. این یادگیری مهم بود، ما تمایل داریم همه چیز را در چارچوب قرار دهیم، در حالی که شما فقط باید آنچه را که واقعاً نیاز دارید اضافه کنید.
از Context در مکان های مناسب استفاده کرد:
من دیدم که در چند مؤلفه ما متن را فراخوانی می‌کردیم، اما واقعاً از هیچ یک از ویژگی‌های متن در آنجا استفاده نمی‌کردیم. بلکه ما آن را به عنوان پشتوانه به اجزای کودک منتقل می کردیم. این باعث رندرهای زیادی شد زیرا رندر مجدد در زمینه باعث می شود مولفه A دوباره رندر شود، که باعث می شود مولفه های B، C و D همه فرزندانشان دوباره رندر شوند. متن فقط در جزء D مورد نیاز بود، بنابراین من مستقیماً متن را به مؤلفه فرزند منتقل کردم. این کار را برای هر مکانی که دیدم یک متغیر زمینه به عنوان پایه به مولفه فرزند ارسال می‌شود، انجام دادم.
اضافه شدن چک های خالی و خالی:
من دیده‌ام که ما یک مؤلفه فرزند را ارائه می‌کنیم که به برخی داده‌ها از والد نیاز دارد و در داخل فرزند، مؤلفه بررسی‌هایی را برای وجود داده‌ها اضافه می‌کند. هیچ مشکلی در این رویکرد وجود ندارد، اما اگر مؤلفه فرزند به‌عنوان چند useEffects یا در حال فراخوانی APIهای دیگر باشد، منطقی است که بررسی خالی/تهی بودن داده را به والدین منتقل کنید. شما اصلاً نیازی به رندر کردن مؤلفه فرزند در DOM ندارید زیرا ارزشی ندارد. با این کار تمام عملکردهایی که ممکن است برنامه برای رندر کردن کودک و فراخوانی همه هوک‌ها و APIهای داخل آن گرفته باشد ذخیره می‌کند.
انجام پروژه متلب با بهترین برنامه نویسان
بازسازی مجدد کد:
یک مرحله کلی که من انجام دادم، تلاش برای درک کد نوشته شده بود، به خصوص در جایی که داده ها دستکاری شده بودند، یا به یک آرایه اضافه می شدند، یا از حلقه های تودرتو استفاده کرده بودیم، و غیره. آرایه وابستگی که در آن هیچ ارزشی اضافه نمی‌کردند، و در آخر نیز بررسی‌هایی را که روی داده‌هایی که چندان منطقی نبودند حذف کردند. این مرحله می‌تواند برای برنامه‌های مختلف متفاوت باشد و باید با دقت انجام شود، زیرا نمی‌خواهید آنچه را که قبلاً کار می‌کند، خراب کنید. بنابراین در حالت ایده‌آل سعی کنید تا آنجا که می‌توانید عمیق شیرجه بزنید تا ابتدا منطق را درک کنید و سپس اگر احساس اطمینان کردید، ادامه دهید و آن را اصلاح کنید.
با روش های بالا، من توانستم حدود 25 تا 30 رندر مجدد را برای برنامه خود کاهش دهم. بارگذاری صفحه اولیه را چند ثانیه بهبود می بخشد و همچنین زمان پاسخگویی را یک یا دو ثانیه بهبود می بخشد، در سناریوهایی که عملکرد به اندازه کافی طول می کشد.
ضربه بزرگ این یک سفر است و من هنوز برای بهتر کردن آن کار می کنم :D
در نهایت، راه‌های زیادی برای بهینه‌سازی اپلیکیشن React وجود دارد. همه برای هر برنامه کار نمی‌کنند و هر کاری که انجام می‌دهید باعث افزایش عملکرد قابل توجهی نمی‌شود. گاهی اوقات مشکلات واضح هستند و حل آنها باعث می شود برنامه عملکرد بالایی داشته باشد، در سناریوهای دیگر مشکلات پیچیده هستند و اضافه کردن هر گونه بهبودی در عملکرد دشوار است. اما در مجموع، بهینه سازی کد شما یک سفر سرگرم کننده است، شما می توانید چیزهای زیادی یاد بگیرید و بیشتر اوقات، ترفندی را یاد می گیرید که احساس می کنید چرا من قبلاً این را نمی دانستم؟
اغلب وقت خود را صرف بازسازی کد خود می کنید و اغلب وقت خود را صرف ارزیابی عملکرد می کنید، زیرا اگر این کار را نکنید، ناگهان ممکن است خیلی دیر شود.
از اینکه وقت خود را برای خواندن این مطلب اختصاص دادید متشکرم، و اگر می خواهید در مورد چیزی زیر آسمان صحبت کنید یا پیشنهاداتی در مورد مقاله من دارید، در زیر نظر خود را بنویسید. همچنین می توانید از طریق تلگرام، لینکدین یا اینستاگرام با من در ارتباط باشید.
مجری ذیصلاح لیست مجریان نظام مهندسی اراک مجری
در نهایت، اگر می خواهید من به نوشتن ادامه دهم و می خواهید از من حمایت کنید، می توانید از اینجا برای من یک قهوه بخرید. از باویا حمایت کنید