استراتژی های مختلف برای بارگذاری در جاوا اسکریپت
چهارشنبه 13 آذر 1398بارگذاری در جاوا اسکریپت اهمیت بسیار زیادی دارد، ما در این مطلب قصد داریم درباره استراتژی های مختلف برای بارگذاری در جاوا اسکریپت صحبت کنیم.
جاوا اسکریپت دارای یک بعد تاریک است که بسیاری از افراد از آن آگاهی ندارند. استفاده از این بعد تاریک باعث می شود تا مرورگر تمامی کارهایی که در حال انجام آن است را تا زمان دانلود، parse کردن و اجرای اسکریپت شما متوقف کند. در واقع این کار باعث می شود تا برخلاف سایر بارگزاری ها که به صورت همزمان و موازی انجام می شوند مرورگر کاملا متوقف شود. حال سوالی که وجود دارد این است که آیا این موضوع در جاوا اسکریپت یک مشکل است؟
آیا این موضوع در جاوا اسکریپت یک مشکل به شمار می آید؟
سوال بسیار خوبی است. قبل از آن که بخواهیم به آن پاسخ دهیم قصد دارم درباره این موضوع صحبت کنم که یک مرورگر چگونه یک صفحه وب را می سازد. اولین گامی که مرورگر برای این کار انجام می دهد این است که یک فایل html را از سمت سرور دریافت می کند که باعث می شود تا گرافیک صفحه در مموری ساخته شود. در زمانی که مرورگر تلاش می کند تا فایل HTML را به DOM تبدیل کند با سایر منابع وابسته مانند فایل های سی اس اس نیز رو به رو می شود. هر بار که این اتفاق می افتد مرورگر یک درخواست را به سرور برای آن وابستگی ارسال می کند ولی نکته ای که وجود دارد این است که نیازی به این نیست که مرورگر منتظر بماند تا نتیجه برگردد و بعد درخواست دیگری را ارسال کند. با استفاده از این روش صفحه یک نود را هر بار می سازد و به محض نیاز به این وابستگی ها آنها را در جای درست خود قرار می دهد. نکته ای که در این جا وجود دارد این است که زمانی که مرورگر با وابستگی ها رو به رو می شود منتظر می ماند تا آن فایل برسد و در نتیجه ساخت DOM را متوقف می کند. بعد از آن که آن فایل را دریافت می کند آن را parse کرده و اجرا می کند. البته توجه داشته باشید که تمامی این کارها تنها یک بار انجام می شود. بنابراین چیزی که می توان به صورت کلی بیان کرد این است که مدت زمانی که مرورگر برای ادامه کار خود نیاز دارد کاملا وابسته به اندازه و پیچیدگی فایل اسکریپت جاوا اسکریپت موجود است.
یک نکته بسیار مهم
حال تصور کنید که یک فایل 200k جاوا اسکریپت دقیقا در بخش head فایل بارگذاری شود. با وجود این که این فایل خیلی سنگین نیست ولی محاسبات پیچیده ای را دارد که برای تکمیل نیازمند نیم ثانیه وقت است. حال تصور کنید اگر انتقال این فایل یک ثانیه به طول بینجامد چه اتفاقی می افتد؟ می توانید حدس بزنید؟ بله درست است صفحه تا وقتی که این انتقال کامل شود خالی می ماند. یک و نیم ثانیه ای که صفحه خالی است و کاربر باید آن را تحمل کند. با توجه به این موضوع که به صورت کلی افراد بیشتر از چند ثانیه را در یک وب سایت نمی گذرانند این موضوع می تواند برای آنها اذیت کننده باشد.
کاهش حجم
ما چگونه می توانیم با این مشکل رو به رو شویم؟ اولین کاری که باید انجام دهیم این است که حجم پیچیدگی را تا جای ممکن کاهش دهیم. هر چه فایل جاوا اسکریپت کوچک تر باشد بازدید کننده انتظار کمتری می کشد. حال سوالی که پیش می آید این است که برای کاهش حجم فایل جاوا اسکریپت چه کاری می توان انجام داد؟ فایل های java script می توانند از طریق یک minifier مانند YUI Compressor( که فضاهای خالی غیر ضروری را حذف می کند و فایل را فرمت می کند و باعث کاهش حجم آن تا 40 و یا حتی 60 درصد می شود) اجرا شوند. نکته دیگری که وجود دارد این است که سرورها باید فایل های gzip را قبل از ارسال تنظیم کنند. این کار می تواند تعداد بایت های منتقل شده در فایل javaScript را تا جای ممکن کاهش دهد و باعث فشرده سازی متن شود.
به تعویق انداختن فایل جاوا اسکریپت( بخش اول)
بعد از آن که اطمینان حاصل کردید فایل های جاوا اسکریپت شما تا جای ممکن کاهش پیدا کرده اند باید چه کار کنیم؟ اولین کاری که باید انجام دهید این است که اطمینان حاصل کنید در زمان لود شدن صفحه وب سایت برای کاربر، کاربر چیزی را در اختیار دارد که به آن نگاه کند. به جای این که فایل های زبان برنامه نویسی جاوا اسکریپت را به صورت مستقیم در <head> قرار دهید تگ های <script> خود را دقیقا قبل از به اتمام رسیدن تگ </body> قرار دهید. با استفاده از این روش مرورگر زمانی که در حال ساخت DOM است تصاویر را در وب سایت قرار می دهد و فایل های سی اس اس را نیز زمانی که با اسکریپت شما رو به رو می شود اعمال می کند. علاوه بر این، این کار باعث می شود تا کدهای شما سریع تر اجرا شود چرا که دیگر نیازی به بارگذاری صفحه ندارید.
به تعویق انداختن فایل جاوا اسکریپت( بخش دوم)
بنابراین با استفاده از تگ های script که در انتهای فایل جاوا اسکریپت قرار داده شده اند زمانی که مرورگر با آنها رو به رو می شود هر چه قدر که نیاز باشد عملیات را متوقف می کند اما در همین مرحله کاربر می تواند وب سایت شما را مطالعه کند و از آن چه که در سمت بک اند اتفاق می افتد خبر ندارد.
قابلیت های همزمانی
روش دیگری برای بارگذاری فایل های زبان برنامه نویسی javaScript وجود دارد که باعث مسدود شدن مرورگر شما نمی شود و آن روش این است که تگ های script خود را با استفاده از جاوا اسکریپت در صفحه خود قرار دهید. به صورت داینامیک قرار دادن یک تگ script در DOM باعث بارگذاری همزمان می شود. تنها مشکلی که در این روش وجود دارد این است که شما نمی توانید اعتماد داشته باشید که کدی که در فایل اسکریپت شما وجود دارد بعد از آن که شما آن را قرار دادید در دسترس شما باشد. چیزی که برای حل این مشکل نیاز دارید این است که از یک callback استفاده کنید که یک بار اسکریپت شما را بعد از بارگذاری اجرا کند. روش های مختلفی برای انجام این کار وجود دارد. کتابخانه های زیادی برای انجام این کار ساخته شده اند که بهتر است از آن ها استفاده کنید. اما در صورتی که قصد دارید خودتان این کار را انجام دهید آماده باشید که با مشکل idiosyncrasies در مرورگرهای مختلف رو به رو شوید.
بارگذاری به صورت Lazy
حال ما می دانیم که چگونه اسکریپت ها را در پشت صحنه بارگذاری کنیم. آیا چیز دیگری وجود دارد که با انجام آن عملکرد سایت ما بهبود پیدا کند؟
به عنوان مثال این موضوع را در نظر بگیرید که وب سایت شما یک اسکریپت بزرگ را دریافت می کند که یک navigation menu فانتزی را بر روی وب سایت شما قرار می دهد. چه اتفاقی می افتد اگر کاربر هرگز از آن استفاده نکند؟ آیا واقعا نیاز است که این اسکریپت بارگذاری شود؟ چه اتفاقی می افتد اگر شما تنها در زمان نیاز آن را بارگذاری کنید؟ این روش در واقع بارگذاری Lazy نام دارد. پایه انجام این کار بسیار راحت است. به جای این که این navigation menu فانتزی را به منوی صفحه خود وصل کنید می توانید از یک بارگذاری کننده اسکریپت به جای آن استفاده کنید. به عنوان مثال زمانی که یک رخداد مانند onmouseover را تشخیص می دهد تگ مربوط به این navigation menu را بارگذاری می کند. زمانی که این تگ بارگذاری شد تابع callback تمامی رخدادهای لازم را متصل می کند و navigation menu شما به خوبی کار می کند.
اندازه بایت ها در جاوا اسکریپت
در کنار روش بارگذاری lazy روش دیگری وجود دارد و آن این است که سعی کنید شما تنها کامپوننت های اصلی که برای کار کردن صفحه وب سایت شما نیاز هستند را بارگذاری کنید. این موضوع زمانی که شما از کتابخانه ها استفاده می کنید بسیار مهم تر می شود. در بسیاری از مواقع یک کتابخانه شما را مجبور می کند تا حجم زیادی از کد را بارگذاری کنید در حالی که شما تنها نیاز دارید که یک مدیریت کننده رخداد را اضافه کنید و یا این که نام یک کلاس را تغییر دهید. اگر این کتابخانه به شما اجازه ندهد که تنها از بخشی که به آن نیاز دارید استفاده کنید سعی کنید چیزی که می خواهید را جدا کنید و فقط از آن استفاده کنید.
- Java Script
- 1k بازدید
- 1 تشکر