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

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

این روزا دیگه جاوا اسکریپ داره حاکمیت خودش روی دنیای برنامه نویس های وب قطعی میکنه. منظورم جاوا اسکریپت و تمام لایبرری های بر اساس جاوا اسکریپت هستش.
 
اما معمولا افت پرفورمنس مشکلی هست جدی که در پروژه های بزرگ جاوا اسکریپ چالش برانگیزه. نتیجه تحقیقات من (شامل مطالعه، تجربه و ...) در این رابطه در چند دسته اصلی تقسیم بندی شده که طی قسمت های مختلف بسته به وقتم همینجا به اشتراک میذازمشون.
 

1- با مرورگر کمتر محاوره کنید (Host Objects)

 

مشکل:

کدهای جاوا اسکریپت بومی توسط اکثر موتورهای اسکریپت موجود به زبان ماشین تبدیل میشن که واقعا موثر هستن روی کارایی. به هر ترتیب کار کردن با هاست آبجکت های بیرون جاوا اسکریپت می تونه رفتار های غیر قابل انتظاری نشون بده از خودش که شدیدا روی کارایی تاثیر میذاره خصوصا وقتی دارید با ابجکت های DOM یا ابجکت هایی که IO انجام میدن کار میکنید مثل WebSQL.

 

راهکار:

کاریش نمیشه کرد واقعا! اما سعی کنید این مدل محاوره ها رو به حداقل برسونید.

 
تکنیک ها:

 

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

بدون شرح! دلیل عمده اش اینه که دستورات انیمیشن جاوا اسکریپت به شدت GPU رو بکار میگیرن. اگر نگران مرورگرهای قدیمی هستید که از سی اس اس 3 و انیمیشن با سی اس اس پشتیبانی نمیکنن از یک polyfill استفاده کنید.

 

  • برای پیدا کردن یک المنت از دستور سریع ()getElemntById استفاده کنید.

بدانید و آگاه باشدی که هرچند پیدا کردن یک المنت با جی کوئری بسیار ساده تر است و منعطف تر (مثلا میشه بر اساس نام، ای دی، کلاس و یا ترکیبی و گروهی انتخاب کرد) اما باعث پیمایش های بسیاری خواهد شد! حالا اگر هم میخواید از جی کوئری استفاده کنید با استفاده از Id جستجو کنید نه کلاس یا نوع تگ و غیره...

 

  • اشاره گری به آبجکت DOM نگه دارید.

از این تکنینک برای کاهش پیمایش های DOM به وسیله ذخیره اشاره گرهایی به ابجکت های مرورگر در زمان نمونه سازی استفاده کنید. (جمله سنگین بود توضیح میدم :دی ). برای مثال اگر انتظار ندارین که ابجکت های DOM یا jQuery شما تغییر کنه باید موقعی که صفحه داره ساخته میشه اشاره گر به DOM رو جایی دخیره کنید. کاری که مثلا با علامت $ موقع استفاده از جی کوئری معمولا میشه روش مناسبیه. حتی اگر فقط توی یک متد بهش احتیاج دارین بیاید به صورت محلی یه متغیر تعریف کنید حاوی آدرس DOM و طی کل بدنه متد ازش بهره ببرید.

 

  • رفیق فایل اچ تی ام ال رو فوق العاده سبک نگه دار.

این خیلی خیلی خیلی خیلی مهمه ! از شر هرچی تگ div و span اضافی هست خلاص شین. یه نسبت مستقیم داریم کد اچ تی ام رو نصف کنید سرعت DOM دو برابر میشه! و از جایی که DOM در اپلیکیشن های سنگین جاوا اسکریتپ روی کارایی تاثیر شدیدی داره میتونید با رعایت این اصل یه بهبود عجیبی ببنید. یه نگاه به این بندازید...

 

  • تغییرات DOM را گروهی انجام بدین به خصوص وقتی دارید روی استایل کار میکنید.

ببنید دستورات زیر رو:

این خیلی بده و 5 بار صفحه رو ریفرش میکنه :

 

 jQuery('#my-dialog').width(600).height(400).css('position': 'absolute').css('top', '200px').css('left', '200px');

 

این بدک نیست بذارید جی کوئری ردیف کنه کارتون رو:

 

  jQuery('#my-dialog').css({
  width: '600px',
  height: '400px',
  position: 'absolute',
  top: '200px',
  left: '200px'
);

 

این یکی خوبه از کلاس استفاده کنین:

 

  jQuery('#my-dialog').addClass('aligned-dialog');
 
  • DOM رو جداگانه و قبل از اضافه کردن به صفحه بسازیدش.

طبق گفته قبل هر DOM که میخواد اضافه شه یا به طور کلی ویرایش بشه یک ریفرش صفحه مورد نیازه! بهتره آبجکتتون رو بسازید به صورت یه گراف کامل و بعد با یک دستور به صفحه اضافه اش کنید. خیلی موثره.

 

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

این تکنیک یه پسوندی برای چهار تکنیک گفته شده هستش (سبک نگه داشتن اچ تی ام ال). یعنی بیاید آیتم هایی که بی استفاده یا مخفی هستن رو از DOM حذف کنید. و جایی که لازم میشن باز بیارید بذارین سرجاشون. مثلا جاهایی که توی یک DIV اسکرول پوشش نمیده یا مثلا Viewport کوچکتری داریم. این باعث پیمایش سریعتر DOM میشه. البته کار ساده ای نیست محض همین من استفاده از لایبرری که رفقا تو ExtJs ساخت رو توصیه میکنم.

 

قسمت دوم

نویسنده : مدیر سیستم
ﺳﻪشنبه 20 بهمن 1394
+ 70 -

ایده ها، نظرات و سوالات دوستان ما

Der Lernende
دوشنبه 3 ارديبهشت 1397
پرا زیاد از مطالبتون نمی فهمم؟؟ من کم بلدم ؟؟
+ 00 -

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