Kaptain Kitty
انتشار :۳۱ تیر ۱۳۹۳
بازدید :672 بار

بهینه سازی در وب اپلیکیشن های حجیم امروزی امریست ضروری. بهینه سازی ابعاد مختلفی دارد که یکی از آنها رعایت مواردی جهت کم کردن حجم کامپوننت های ظاهری برنامه است. فریم ورک جاوا اسکریپتی sencha touch هم از این قضیه مستثنی نیست و کامپوننت های آن در کنار ظاهر و کارایی فوق العاده حجم بالایی هم دارند. روش های بهینه سازی زیر کمک می کند تا وب اپلیکیشن سبک تر و سریعتری داشته باشید.

 

اخیرا در حال بهینه سازی اپلیکیشنی بودم که با فریم ورک Sencha Touch  نوشته شده بود و بارگذاری آن بر روی دستگاهی که سیستم عامل اندروید x.2 داشت، بیش از ۵ ثانیه طول کشید. این اپلیکیشن یک فایل ۱٫۲ مگابایتی app.css بود که من توانستم آن را به حجم ۱۰۰ کیلوبایت برسانم و مشکل را حل کنم. در اینجا می خواهم ۴ تکنیکی که برای رسیدن به این هدف به کار بردم را ارائه دهم.

۱٫ از تکرار import@ اجتناب کنید

نتیجه : از تبدیل ۱٫۲۳ مگابایت به ۲۵۳ کیلوبایت

این یک اشتباه رایج است و به مراتب بزرگ ترین تاثیر را بر روی افزایش حجم CSS دارد. شما به طور پیش فرض یک فایل app.scss دارید که این دو خط را دارا می باشد:

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

شما می توانید تمام کار ها را در این فایل انجام دهید. اما برای استفاده از آن در یک اپلیکیشن با هر اندازه ای، نیاز به شکستن این فایل خواهید داشت. باید برخی از کدها را در یک فایل جداگانه نوشته و سپس آن را با افزودن خط زیر به آن، مجددا به app.scss خود import کنید:

@import 'MySeparateFile';

شما مجاز به import مجدد ‘sencha-touch/defualt’ و ‘sencha-touch/default/all’ به درون MySeparateFile.scss نیستید. به یاد داشته باشید که این کار باعث می شود تمام CSS های تولید شده در app.css نهایی قرار گیرند. در اپلیکیشنی که من در حال کار با آن بودم، import های مکرر و تکراری بارها در فایل های custom شده ی .scss انجام شده بود و باعث حجمی برابر با تقریبا یک مگا بایت از CSS شده بود.

۲٫ فونت ها و آیکون های پیش فرض را حذف کنید

نتیجه: از ۲۵۳ کیلوبایت به ۱۵۶ کیلوبایت

فریم ورک جاوا اسکریپت Sencha Touch  از فونت های وب برای آیکون ها استفاده می کند و به طور پیش فرض تمام یک مجموعه ی ۱۰۰ آیکونی به درون app.css کامپایل شده، گنجانده می شود. اگر شما از آیکون های custom یا دلخواه خود استفاده می کنید، نیازی به این کار ندارید. خوشبختانه می توان این عمل را با تنظیم متغیر های زیر در app.scss خود، غیر فعال نمود:

$include-pictos-font: false;
$include-default-icons: false;

برای درک بهتر تفاوت بین این دو گزینه، پیشنهاد می کنم که به کد منبع scss. در پوشه ی منابع Sencha Touch نگاه کنید. اگر از کامپوننت هایی مانند فیلد های search یا select استفاد می کنید که از آیکون های پیش فرض برای رفتار های پیش فرض خود استفاده می کنند، باید scss. آنها را override کنید تا بتوانید آیکون هایی با فونت دلخواه خود استفاده کنید.

۳٫ CSS های آزمایشی را حذف کنید

نتیجه: از ۱۵۶ کیلوبایت به ۱۴۴ کیلوبایت

همان طور که می دانید CSS های آزمایشی فراوانی وجود دارد که Compass نه تنها برای سازگار کردن ویژگی های پیشوند دار آزمایشی و واقعی مرورگرهای رایج، بلکه برای به حساب آوردن طیف اندکی از مرورگرهایی که شما از آنها پشتیبانی نمی کنید، تولید می کند. تمام کاری که باید انجام دهید، افزودن خطوط زیر به app.scss خود است:

$experimental-support-for-mozilla : false;
$experimental-support-for-webkit : false;
// $support-for-original-webkit-gradients : false;
$experimental-support-for-opera : false;
$experimental-support-for-microsoft : false;
$experimental-support-for-khtml : false;

توجه داشته باشید که من چگونه خط سوم را غیر فعال کردم. اپلیکیشن من از یک select field (یعنی aka combo box) برای پشتیبانی از Android 2.x استفاده می کرد که از گرادیانت های قدیمی webkit برای رسیدن به این امر در سناریو های فشرده استفاده می کرد:
20130614-optimizing-touch-css-1

اگر خط سوم را فعال کرده و مجددا کامپایل نمایم، شکل زیر را خواهم دید:

20130614-optimizing-touch-css-2

۴٫ Touch SASS های بلا استفاده را حذف کنید

نتیجه: از ۱۴۴ کیلوبایت به ۱۲۰ کیلوبایت

درست مانند زمانی که وابستگی های کلاس در Touch به ما این امکان را می دهد که یک فایل جاوا اسکریپت را تنها با بخش های مورد نیاز خود از فریم ورک کامپایل کنیم، می توانیم با CSS هم به همین نتیجه دست یابیم که البته به تلاش بیشتری نیاز دارد. ممکن است نیاز داشته باشید که به منبع SASS مراجعه کنید تا آن مرحله را به خوبی اجرا نمایید. برای مثال، فایل SASS برای فیلد های select از mixin هایی استفاده می کند که در فایل SASS برای checkbox ها تعریف شده اند. به عبارت دیگر، اگر اپلیکیشن شما از checkbox استفاده نمی کند، با فرض اینکه نمی خواهید بقیه ی SASS مربوط به checkbox را در اپلیکیشن خود قرار دهید، باید mixin مربوط به آن را از فایل sacc. آن خارج کنید.

فایل پیش فرض app.scss دارای این دو خط است:

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

کد منبع برای این فایل ها در زیر قرار دارد:

touch2.2/resources/themes/stylesheets/sencha-touch/_default.scss
touch2.2/resources/themes/stylesheets/sencha-touch/default/_all.scss

اگر شما منبع را دنبال کنید، فایل اول مقداری فایل scss. را از پوشه ی “var” وارد می کند که متغیر های مختلف SASS را تنظیم و راه اندازی می کند. احتمالا باید این فایل را نگه دارید.

فایل دوم SASS واقعی را که توسط هر یک از کامپوننت ها به کار رفته است را import می کند که چیزی شبیه به این خواهد بود:

...
@import 'Button';
@import 'Panel';
@import 'Sheet';
@import 'MessageBox';
@import 'Toolbar';
@import 'carousel/Carousel';
@import 'form/Panel';
...

آسان ترین راه برای انجام این کار، حذف کلمه ی “all” از app.scss میباشد:

// @import 'sencha-touch/default/all';

و به جای آن باید import هایی که از all.scss_ انجام شده است، قرار گیرد. به عبارت دیگر، اگر شما در اپلیکیشن خود تنها از message box و toolbarاستفاده می کنید، باید موارد زیر را به app.scss اضافه کنید:

@import 'MessageBox';
@import 'Toolbar';

هنگامی که قصد کامپایل کردن آن را دارید، احتمالا باید به موارد مربوط به مسیر یابی (pathing) بپردازید. موارد زیر را فیکس کنید:

@import 'sencha-touch/default/src/_MessageBox.scss'; 
@import 'sencha-touch/default/src/_Toolbar.scss';

نتیجه:

این تکنیک ها مربوط به عملکرد اپلیکیشن بوده و می تواند بارگذاری صفحه ی آغازین اپلیکیشن را، بدون تاثیر گذاری بر موارد بصری و کارایی، چند ثانیه سرعت بخشد. در دستگاه های قدیمی که دارای اتصالات Edge می باشند، صرفه جویی در زمان می تواند ۱۰ ثانیه نیز بیشتر باشد. کاربران احساسات ماندگار خود را در همان اولین ثانیه های تجربه ی کار با اپلیکیشن شما به دست می آورند؛ اجازه ندهید که اولین تجربه ی آنها بارگذاری یک آیکن “در حال بارگذاری…” باشد.

css در sencha touch css در سنچا css در سنچا تاچ sass در سنچا sass در سنچا تاچ بهینه سازی اپلیکیشن کم کردن حجم css کم کردن حجم استایل
مطالب مرتبط

  خرید کتاب سوپر فریم ورک قدرتمند برنامه نویسی وب Ext JS   خرسندیم که به استحضار دوستان و علاقه مندان برنامه نویسی برسانیم که با درخواست های شما عزیزان و پس از مدت ها، بر آن شدیم تا اولین کتاب کامل آموزش سوپر فریم ورک Ext JS را تحت عنوان “ساخت وب اپلیکیشن های […]

همانطور که در قسمت قبلی این مقاله ذکر کردیم، وجود تعداد زیادی فریم ورک در بازار، انتخاب را برای برنامه نویسان کمی مشکل کرده است. هر کدام از فریم ورک ها نقاط قوت و ویژگی هایی دارند که بررسی کامل آنها وقت زیادی را از شما خواهد گرفت. در این مقاله می توانید با انواع […]

    یکی از مهم ترین دغدغه های این روز های برنامه نویسان وب این است که اگر بخواهند اپلیکیشنی تولید کنند که هم از نظر کدنویسی ساخت یافته باشد و هم از نظر ظاهر کامپوننت های خوب و قوی ای داشته باشد از چه فریم ورک و تکنولوژی باید استفاده کنند؟! جالب است بدانید […]

همانطور که بررسی نموده اید، در قسمت قبلی این مقاله بیشتر به مقایسه و تشریح ویژگی های عمومی فریم ورک های موبایل وب پرداختیم. در این قسمت می خواهیم هر کدام را به طور جداگانه و ریزتز مورد بحث قرار دهیم. اگر هنوز قسمت اول این مقاله را مطالعه نکرده اید، از لینک زیر می توانید […]

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه