فید با محتوای رسانهای متنوع و اسکرول بینهایت یک کار معمولی در مصاحبههای توسعه برنامههای وب مدرن و طراحی سیستم است. بیایید سعی کنیم فید را با عناصر گرافیکی سنگین پیاده سازی کنیم و به تدریج از تکنیک های مختلف بهینه سازی عملکرد استفاده کنیم.
در اینجا الزامات عملکردی وجود دارد که من هنگام ساخت چنین فید برای یک پلت فرم تجزیه و تحلیل داده با آن مواجه شدم:
-
صدها نمودار در یک صفحه
-
نمودارها انواع مختلفی دارند: نمودارها، نمودارهای خطی، نقشه های حرارتی، پین ها در نقشه های گوگل و غیره.
-
هر نمودار می تواند از صدها یا حتی هزاران نقطه داده تشکیل شده باشد.
-
ما می خواهیم فید را با طرح بندی Pinterest در یک صفحه نمایش دهیم. این صفحه حتی در دستگاه های تلفن همراه باید عملکرد خوبی داشته باشد.
-
اگرچه خود کارتهای نمودار ممکن است تعاملی نباشند، با کلیک بر روی کارتی در فید باید یک نسخه تمام صفحه از آن نمودار باز شود که دارای تعاملات فراوان است.
بیایید سعی کنیم با در نظر گرفتن تکنیک های مختلف برای بهینه سازی عملکرد صفحات سنگین با گرافیک پیچیده، یک نسخه ساده شده از این فید بسازیم. ممکن است یک کار نسبتا معمولی به نظر برسد. می توانید چارچوب یا کتابخانه مورد علاقه خود را برای ترسیم نمودارها بردارید، آن را به API متصل کنید و کارتان تمام شد، درست است؟
1. پیاده سازی ساده لوحانه
ما با الگوی برنامه و اجزای ضروری شروع می کنیم: صفحه خوراک و کارت …