در مقاله قبلی، ما در مورد چگونگی ایجاد حس دستکاری مستقیم روی عناصر رابط به کاربران صحبت کردیم. ما همچنین نرخ فریم 60 فریم در ثانیه و طول فریم تقریباً یکسان 16.7 میلی ثانیه را برجسته کرده ایم.
همانطور که می بینید، مفهوم ما بر روی قاب و ساختار آن ساخته شده است.
چرا فریم ها در توسعه وب بسیار مهم هستند؟🚀
ما هر فریم را با زمان محدود 16.7 میلی ثانیه برای انجام محاسبات مختلف، به‌روزرسانی سبک‌ها، بازنویسی طرح‌بندی‌ها و نمایش همه تغییرات بر روی صفحه داریم. با این حال، پیچیدگی عملیات وب گاهی اوقات می‌تواند فریم‌ها را تحت تأثیر قرار دهد و باعث تأخیر شود و از انجام به موقع وظایف خود جلوگیری کند.
این می تواند منجر به افتادن فریم ها یا “فقدان” شود، که به صورت اشکال در صفحه ظاهر می شود. زمانی که فریم ها به تاخیر بیفتند یا گم شوند، تجربه کاربر آسیب می بیند. تصویر روی صفحه ناهموار و از هم گسیخته می شود و باعث حواس پرتی، تحریک و عدم جذابیت بصری می شود. بنابراین، حفظ نرخ فریم پایدار برای ارائه یک UX صاف و بدون درز بسیار مهم است.
وقتی یک فریم رها می شود در پشت صحنه چه اتفاقی می افتد؟👇🏻
این می تواند زمانی اتفاق بیفتد که محاسبات پیچیده یا کارهایی که به زمان و منابع قابل توجهی نیاز دارند انجام شوند. اگرچه دلایل این امر می تواند متفاوت باشد، فریم های تاخیری می توانند کارهای بعدی را مهار کنند و در نهایت منجر به زمان ناکافی برای رندر شوند.
بنابراین، برای دستیابی به انیمیشن‌های صاف و پایدار، فریم‌ها باید از ساختار دقیقی پیروی کنند. اگر هر وظیفه ای از بازه زمانی تخصیص یافته خود بیشتر شود و با دیگری همپوشانی داشته باشد، تمام قسمت های بعدی فریم را جابجا می کند. از آنجایی که رندر کردن یکی از آخرین اقداماتی است که انجام می‌شود، اغلب همان کاری است که حذف می‌شود. سپس فریم تاخیری حالت قدیمی را نشان می‌دهد و مرورگر هیچ دلیلی برای نمایش آن ندارد، که منجر به از دست رفتن فریم‌ها و کاهش کیفیت انیمیشن می‌شود.
علاوه بر این، مرورگرها به قدرت پردازش قابل توجهی برای بارگیری و تجزیه و تحلیل داده ها، به ویژه برای مجموعه داده های بزرگتر، نیاز دارند. برخی از ماشین‌ها ممکن است در مدیریت مجموعه داده‌های بزرگ با مشکل مواجه شوند که به دلیل بار اضافی منجر به تاخیر می‌شود. از سوی دیگر، بارگیری و نمایش داده ها در عرض 100 میلی ثانیه توسط قطعات درخواستی می تواند گردش کار صاف و اثر بلادرنگ را تضمین کند.
حالا به سوال اصلی نزدیکتر شدیم!🎉
چگونه مطمئن شویم که همه فریم ها در جای خود قرار دارند و هیچ تغییری در عملکردهای داخل وجود ندارد؟
این توصیه‌ها می‌توانند به شما کمک کنند تا از تأثیرگذاری بر نمایش بصری جلوگیری کنید. اکثر این نکات را با موفقیت در رویکرد خود پیاده کرده ایم.
اولا، مهم است که به خاطر داشته باشید که مرورگرها کارهای زیادی دارند اما با منابع محدود. از این رو، همه کارها و اقدامات باید اولویت بندی شوند تا اطمینان حاصل شود که همه چیز به موقع انجام می شود.
دومین نصیحت این است که از هر میلی ثانیه استفاده کنید. این به این معنی است که بارگیری و پردازش محاسبات باید در حالت بیکار مرورگر انجام شود تا اوقات فراغت بهینه شود.
ثالثا، تفسیر باید در نظر گرفته شود و ترسیم مجدد غیر ضروری باید اجتناب شود. برخی از اقدامات با DOM یا ویژگی‌های فردی عناصر بصری ممکن است نیاز به تغییرات اضافی در سبک‌ها و طرح‌بندی داشته باشند، که زمان میبرد و توالی واضح فریم‌ها را از بین میبرد.
چهارم، بهتر است از کارهایی که منابع فشرده دارند اجتناب کنیدو اگر این کارها ضروری است، با توجه به اینکه مرورگر برای به روز رسانی صفحه و انجام کارهای دیگر همچنان به زمان نیاز دارد، باید به زیرکارهای کوچکتر تقسیم و به تدریج انجام شود. به عنوان مثال، فقط بخشی از تکرارها را در یک اجرای اسکریپت انجام دهید و بقیه باید در مراحل بعدی انجام شود تا دیگر مراحل یک فریم به تاخیر نیفتد.
در آخر، هنگام کار با مجموعه داده های بزرگ، لازم نیست کل مجموعه داده را به یکباره در مرورگر بارگیری کنید. بجای، داده ها باید توسط قطعات در صورت تقاضا بارگذاری شوند در طول زمان اجرا برای اطمینان از عملکرد بهینه.
هر یک از این نکات کوچک می تواند به طور قابل توجهی بر کار نهایی مؤلفه و تجربه کلی کاربر تأثیر بگذارد. اما چگونه می توان آنها را در زندگی پیاده کرد؟ خوب، منتظر مقالات بعدی این مجموعه باشید. و فراموش نکنید که نسخه ی نمایشی را آزمایش کنید و نظرات خود را با ما در میان بگذارید!
