جاوااسكريپت يك زبان مناسب براي انجام عملياتي چون چك كردن مقادير درون فرمها يا درست كردن منو براي حركت درون سايت يا حركت دادن يك شيئ درون صفحه و... است، اما بعضي از طراحان در استفاده از اين گونه كدها تا جايي پيش مي روند كه صفحه انباشته از كدهاي جاوااسكريپت ميشود. خوشبختانه جاوااسكريپت قدرت زيادي در جهت بهينه كردن كدها براي كاهش حجم يا بالا بردن سرعت اجرا به ما ميدهد. با استفاده از تكنيكهايي مثل فشرده سازي و مبهم سازي ميتوان 50% تا 90% حجم فايل جاوااسكريپت را كاهش داد.
چون فايلهاي جاوااسكريپت قسمتي از محتويات صفحات وب هستند، كاهش حجم آنها در كاهش زمان بارگذاري صفحات وب بسيار موثر است. البته در بعضي از مواقع هم افزايش سرعت اجراي كدها مهم است كه بايد اولويت هر كدام را بر اساس نياز انتخاب نمود.
چه زماني بايد كدها را بهينه كرد ؟
اغلب كدهاي جاوااسكريپت آنقدر كوچك هستند كه نيازي به بهينه سازي ندارند. در ابتدا كدهاي شما بايد درست كار كنند و خوانايي لازم را داشته باشند ) با بهره گيري از بهترين الگوريتمها (algorithms)و ساختمان داده هايي (Data Structures) كه براي شما امكان پذير است) آنگاه اگر متوجه شديد كه سرعت بارگذاري صفحات شما پايين است بايد به فكر بهينه سازي كدهاي خود باشيد.
آغاز بهينه سازي
جاوااسكريپت ميتواند از بيشتر تكنيكهاي بهينه سازي كه درCSS و HTML استفاده ميشود بهره ببرد. حذف فضاهاي خالي ، تكه تكه كردن و مبهم سازي ، تركيب چند فايل بصورت يكپارچه، از همه اين ترفندها به صورت تكي يا تركيبي از آنها ميتوان براي كاهش حجم كدها استفاده نمود. در كل با تركيب همه اين تكنيكها با هم، حجم كدها 50% تا 70% كاهش مي يابد. با استفاده ازCSS و HTML مجال بيشتري براي بهينه سازي كدهاي جاوااسكريپت بدست مي آيد، چون شما مي توانيد نام توابع و متغيرها و شي ها را به صورت دلخواه تعيين كنيد.
اگر حجم كدهاي جاوااسكريپت درون صفحه شما خيلي زياد باشد مطمعنا سرعت بارگذاري صفحه وب شما هم به همين اندازه پايين است. چون ارجاع به هر كدام از فايلهاي خارجي موجود در صفحه در قسمت head صفحه وب صورت مي گيرد در نتيجه تمامي فايلها بايد قبل از به نمايش در آمدن هر قسمتي از محتويات صفحه كه درون تگ body قرار دارند بارگذاري شوند، در اين صورت سرعت به نمايش در آمدن محتويات صفحه كاهش مي يابد. به همين دليل حجم فايلهاي .css و .js بسيار مهم است.
خوانايي برنامه
اولين عيبي كه به كدهاي بهينه شده گرفته ميشود پايين بودن خوانايي آنها است. براي حل اين مشكل ميتوان دوفايل جداگانه داشت، يكي فايل بهينه شده، براي استفاده در صفحه وب و ديگري (همان فايل اصلي) كه داراي خوانايي بالايي است، كه براي تغييرات يا مرورهاي بعدي كنار گذاشته مي شود.
بطور مثال دوفايل زير
code.js
code_o.js
كه فايل code_o.js همان فايل بهينه شده و فايل code.js همان فايل اصلي است.
تكنيكهاي بهينه سازي
1- حذف فضاهاي خالي موجود درون كدها
بطور مثال به كد زير دقت كنيد
function printArray(a) {
if (a.length == 0)
document.write(" Array is empty");
else {
for (var i = 0; i < a.length; i++) {
document.write(a[i] + "
");
}
}
}
پس از حذف فضاهاي خالي اينگونه ميشود
function printArray(a){
if(a.length==0)
document.write("Array is empty");
else{
for(var i=0;i document.write(a[i]+"
");
}
}
}
ويا حتي بهتر از آن
function printArray(a){
if(a.length==0)document.write("Array is empty");
else{for(var i=0;i document.write(a[i]+"
");}}}
2- كوتاه سازي يا حذف توضيحات درون كدها
به كدهاي زير دقت كنيد
function gotoFinList() {
// "SAVE & FINISH"
// this changes the bottom frameset to include a button
//to return to the homepage
// it also submits the form in the main frame that will
// then generate a list of pages
// added during content editing.
پس از كوتاه سازي
function gotoFinList() {
// chgs bottom frameset 2 incl button 2 ret 2 home
// also submits form in main form and gen list of pgs
// added during content editg
بهترين حالت حذف كامل توضيحات است
function gotoFinList() {
در قسمت بعد كه ادامه همين مطلب است تكنيكهاي ديگري در همين زمينه ارائه شده كه خواندن آنها را نيز به شما توصيه ميكنم.
منبع : [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]