هنوز چند بایت مونده که پیدا کنم...

25 تکنیک برای بهبود راندمان جاوا اسکریپت قسمت دوم

کدهای جاوا اسکریپتی که به خوبی مدیریت نشده باشن سطح UX را تنزل میدن.
 

2- وابستگی ها رو مدیریت کنید و کاهش بدید

 

مشکل:

وقتی صفحه شما داره بارگیری میشه یا به اصطلاح render میشه عموما اینطور هست که تا زمان دانلود شدن کل کتابخانه ها و وابستگی های موجود در کد جاوا اسکریپت در مرورگر، صفحه نمایش داده نخواد شد، ناقص دیده میشه و یا با کاربر محاوره ای نداره.

 

راهکار:

تلاش کنید تا حد ممکن وابستگی ها رو مدیریت کنید و کاهش بدید.

 
تکنیک ها:

 

  • کدی بنویسید که نیازمندیش به کتابخانه ها به حداقل مطلق برسه.

همونطوری که تو قسمت اول هم گفتم می تونید از کدهای جاوا اسکریپتی خالص جای جی کوئری استفاده کنید برای منظورهایی مثل پیدا کردن یه آبجکت یا تک خاص.
اگر به انتخاب سی اس اس ها به صورت پیچیده تری احتیاج دارید جای جی کوئری می تونید از کتابخانه Sizzle.js استفاده کنید که حجمش نسبت به جی کوئری حدودا یک بیستم هستش.
در ضمن قبل از اضافه کردن هر کتابخانه ببینید آیا واقعا به اون احتیاج دارید یا فقط یک یا چند ویژگی مختصر اون رو قراره استفاده کنید! اگر اینطوریه چرا اون تکه کدهای بدرد بخور رو جدا نمی کنید و به کد خودتون اضافه نمیکنین؟ (البته لطفا به حق کپی و لایسنس هر محصولی احترام بذارید)

 

  • کدها رو فشرده (کمینه یا minimize) کنید و ترکیب کنید.

میتونین همه فایل های جاوا اسکریپتتون رو با استفاده از ابزارهایی مثل Google Closure یا JsMin با هم ترکیب کنید و از شر اطلاعات اضافی مثل فاصله ها، کامنت ها و خطوط هرز راحت بشین. آقا فلسفه اینه که یک فایل 10 کیلو بایتی جاوا اسکریپت خیلی سریعتر از ده تا فایل 1 کیلو بایتی لود میشه و این بر اساس پهنای باند و تاخیر شبکه (network latency) هستش.
ممکنه مقاله بعدی رو اختصاصی به این بحث اختصاص بدم و یک نمونه پروژه براتون بذارم اینجا.

 

  • از تکنیک های پس بارگیری استفاده کنید (از زور فارسی نویسی دارم محتوا رو از دست میدم! منظورم post load هستش).

بی رو در بایستی بخش زیادی از عملکرد کدهای شما در لحظه لود صفحه مورد نیاز نیست! (اگر هست این قسمت رو ندیده بگیرید... اما به نظرم عجیبه!)
پس بیاین با ابزار هایی مثل RequierJs یا Webpack مدیریت وابستگی کنید و هر پکیج یا فایل جاوا اسکریپتی رو در زمانی که میخواین ازش استفاده کنید لودش کنید. 

 

  • بیشترین استفاده رو از کش کردن بکنید.

اگر میخواید صفحه شما زودتر لود بشه با کش کردن دوست شین! کدهای جاوا اسکریپتتون رو بریزین توی یک فایل استاتیک با پسوند js که بشه با یک آدرس مستقمی بهشون دسترسی داشت با وجود اینکه دات نت کار هستم توصیه نمیکنم از باندل های (Bundle) داینامیک تولید شده توسط دات نت استفاده کنید در مورد جاوا هم همین گفته صدق میکنه پسوند های jsp و ashx توی کشینگ مزخرف نشون دادن خودشون رو. اگر از یو آر ال مستقیم استفاده کنید در واقع دارین به مرورگر میگین در صورت دسترسی از نسخه محلی دانلود شده استفاده کنه هر بار که اون لایبرری قراره تزریق بشه به کد وتوصیه نهایی در این باره اینکه در مورد تکنیک های eTags تحقیق کنید.

 

  • روش سنتی انتقال اسکریپت ها به انتهای صفحه است (مسخره است البته).

اگر قراره اول صفحه لود بشه بعد اسکریپت ها باید از یک تکنیک مدیریت پس بارگیری که توی همین نوشته گفتم استفاده بشه نه این که بذارین آخر صفحه به امید تفاوت پرفورمنس چشم گیر. البته اگر فقط یکی دو تا اسکریپت سبک دارین خیالی نیست بذاریدش آخر و خیال خودتون رو راحت کنید.

 

قسمت اول | قسمت سوم

نویسنده : محمد ملک مکان
پنجشنبه 19 فروردین 1395
+ 80 -

خوشحال میشیم نظرتُ بدونیم