Learning About Computer & Internet

بهینه سازی حجم کدهای جاوا اسکریپت 3

موضوع: JAVASCRIPT جمعه یکم دی 1385 21:28

در اين مقاله سعي شده كه با بيان يك مثال و با استفاده از يك سري تكنيكهاي جديد همراه با تكنيكهايي كه در دو قسمت قبل بيان شده بودند تكنيكهاي كاهش حجم كدهاي جاوااسكريپت را به صورت عملي بكار بنديم.
در قسمتهاي قبلي بيشتر با خود كدها كار ميكرديم و عمليات بهينه سازي بدون در نظر گرفتن عملياتي كه كدها انجام ميدادند انجام مي شد. اما يك را ديگر براي بهينه سازي حجم كدها اين است كه از ابتدا از الگوريتم هاي مناسب و حساب شده براي طراحي برنامه استفاده شود.
در اين مثال تابعي مينويسيم كه يك كلمه عبور بصورت اتفاقي براي ما ايجاد كند ، كه اين كلمه عبور شامل حروف (حروف كوچك) و اعداد باشد.
در اين مثال از توابع و دستورات جاوااسكريپت زير استفاده شده كه به بيان توضيحات مختصري درباره هركدام مي پردازيم.

Math.random() : يك عدد اتفاقي بين 0 و 1 را برميگرداند. بطور مثال عبارت زير يك عدد اتفاقي بين 0 و 25 را توليد ميكند.
25 * Math.random();

Math.round() : مقدار گرد شده يك عدد اعشاري را باز ميگرداند.
String.fromCharCode() : معادل كاراكتر ascii يك عدد را برميگرداند.
بطور مثال كد كاراكتر a عدد 97 است. در اين صورت خروجي تابع فوق با عدد 97 حرف a خواهد بود
String.fromCharCode(97) // return “a” character

? : : يك دستور شرطي است كه ابتدا عبارت قبل از علامت سئوال (?) را چك ميكند در صورتي كه مقدار آن true يا عددي غير صفر باشد خروجي آن مقدار قبل از علامت : است و در صورتي كه مقدار عبارت قل از ? false يا مقدار عددي صفر باشد خروجي آن مقدار بعد از علامت : است. بطور مثال

var exp1;
var temp="";

exp1 = true;
temp = exp1 ? "ON" : "OFF"
document.writeln (temp); // write ON

exp1 = false;
temp = exp1 ? "ON" : "OFF"
document.writeln (temp); //write OFF

+= :
اين دستور عمليات جمع و انتساب را باهم انجام ميدهد. مثلا هر دو عبارت زير با هم معادلند.

str = str + "end. "
str += "end. "

بعد از توضيحات كلي، كدهاي مروط به تابع مورد نظر را مي نويسيم.

function makepass(){
var str = "";
var len = 10;
var randomselect;
for (i = 1; i <= len; i++){
randomselect = Math.round(Math.random());
if (randomselect != 0)
charcode = Math.round(25*Math.random())+97;
else
charcode = Math.round(9*Math.random())+48;
str = str + String.fromCharCode(charcode);
}
return (str);
}

كار برنامه به اين صورت است كه در يك حلقه تكرار كه به تعداد طول كلمه عبور تكرار ميشود، در هر بار تكرار يك كاراكتر از كل كلمه عبور ايجاد ميشود، به اين صورت كه ابتدا يك عدد 0 يا 1 به صورت اتفاقي ايجاد ميشود اين عدد در متغير randomselect قرار مي گيرد. حال اگر عدد اتفاقي توليد شده مخالف 0 يعني 1 بود از يك حرف براي ايجاد كاراكتر فعلي كلمه عبور استفاده ميشود و در غير اين صورت از يك عدد در ايجاد كاراكتر فعلي كلمه عبور استفاده ميشود.
اما نحوه ايجاد يك كاراكتر يا يك عدد اتفاقي براي كلمه عبور به اين صورت است كه ابتدا يك عدد اتفاقي در محدوده مورد نظر ايجاد مي كنيم مثلا براي ايجاد يك حرف از حروف انگليسي (26 حرف داريم) به يك عدد اتفاقي بين0 تا 25 احتياج داريم حال در صورتي كه اين عدد را با عدد 97 كه كد حرف a است جمع كنيم يك حرف به صورت اتفاقي ايجاد كرده ايم .
در نهايت كاراكترهاي ايجاد شده را در كنار هم مي گذاريم تا كلمه عبور ساخته شود.

حال به سراغ بهينه سازي كدها مي رويم در اين مرحله از عبارت ? : بجاي if …else استفاده مي كنيم كدها به اين صورت در مي آيند.

function makepass_1(){
var str = "";
var len = 10;
var randomselect;
for (i = 1; i <= len; i++){
randomselect = Math.round(Math.random());
charcode = randomselect ? Math.round(25*Math.random())+97 : Math.round (9*Math.random())+48;
str = str + String.fromCharCode(charcode);
}
return (str);
}

بعد از آن بايد در صورت امكان بجاي متغييرها مقادير آنها را بكار بريم. كدها به صورت زير تغيير پيدا ميكنند.

function makepass_2(){
var str = "";
var len = 10;
for (i = 1; i <= len; i++){
charcode = Math.round (Math.random()) ? Math.round (25*Math.random())+97 : Math.round (9*Math.random())+48;
str = str + String.fromCharCode(charcode);
}
return (str);
}

در اين قسمت بجاي اينكه ابتدا يك عدد اتفاقي ايجاد كنيم و در يك متغير قرار دهيم و در نهايت مقدار آن متغير را به معادل ascii آن تبديل كنيم همه اين كارها را به صورت يكجا انجام مي دهيم. كدهاي زير ايجاد خواهند شد.

function makepass_3(){
var str = "";
var len = 10;
for (i = 1; i <= len; i++){
str = str + Math.round(Math.random()) ? String.fromCharCode (Math.round (25*Math.random())+97) : String.fromCharCode (Math.round (9*Math.random())+48);
}
return (str);
}

كدهاي نهايي به اين صورت در مي آيند.

function makepass_4(){
var str = "";
for (i = 1; i <= 10; i++)
str += Math.round(Math.random()) ? String.fromCharCode (Math.round (25*Math.random())+97) : String.fromCharCode (Math.round (9*Math.random())+48);
return (str);
}

اگر دقت كرده باشيد تا اينجا با روشهايي غير از روشهايي كه در بخشهاي قبلي بيان شده بودند حجم كدها را بهينه كرديم. البته همين تغييرات باعث كاهش قابل ملاحظه اي از حجم كدهاي جاوااسكريپت مورد نظر ما شد. اكنون كه نوشتن و ايجاد تغييرات بر روي كدها تمام شده ميتوان كد نهايي را با استفاده از قواعدي كه قبلا بيان شده بودند دوباره بهينه كرد. كه در نهايت كدهاي زير ايجاد خواهند شد.

function mp(){
var s="";
for (i=1;i<=10;i++)
s+=(Math.round(Math.random()))?String.fromCharCode(Math.round(25*Math.random())+97):String.fromCharCode(Math.round(9*Math.random())+48);
return (s);
}

نوشته شده توسط هادی قنبری | لینک ثابت |

بهینه سازی حجم کدهای جاوا اسکریپت 2

موضوع: JAVASCRIPT جمعه یکم دی 1385 21:27

در اين قسمت مطالب قبلي را ادامه ميدهيم به دوستان عزيز خواندن قسمت اول اين مطلب را توصيه ميكنم

تكنيكهاي بهينه سازي
3- يكي از راههاي اضافه كردن كدهاي جاوااسكريپت به صفحات وب كه اغلب استفاده ميشود نوشتن كدهاي جاوااسكريپت در يك فايل جداگانه و سپس فراخواني آن در قسمت head صفحه است. مانند مثال زير

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" src="code_o.js"> </script>
</head>
<body>
. . .
</body>
</html>

در اين صورت قبل از اينكه محتويات صفحه مورد نظر ما بارگذاري شود بايد فايل .js مورد نظر بطور كامل دريافت شود كه اين عمل باعث كاهش سرعت نمايش صفحات ميشود.

در صورتي كه كدهاي جاوااسكريپت مورد نظر ما خروجي خاصي براي نمايش درون صفحه نداشته باشند ميتوان بارگذاري كدها را به تاخير انداخت، بطور مثال كدهايي كه مقادير درون يك فرم وب را اعتبار سنجي ميكند. براي اين كار ميتوان از خصوصيت defer در تگ <script> بصورت زير استفاده نمود. البته اين خصوصيت فقط براي مرورگر IE (Internet explorer) قابل استفاده است.

در اين صورت مرورگر بدون توجه به فايل جاوااسكريپت محتويات صفحه را بارگذاري ميكند و در نهايت به سراغ فايل .js ميرود.

يك راه بهتر براي صفحاتي كه داراي ترافيك بالايي هستند استفاده از SSI (Server Side Include) است. كار اين دستور مثل اين است كه كدها را مستقيما در جاي مورد نظر اضافه كرده باشيم. اين كار باعث ميشود كه حجم درخواستهاي مرورگر از سرويس دهنده كاهش يابد.

بطور مثال :

4- بعضي از طراحان وب براي سازگاري كدهاي جاوااسكريپت با مرورگرهاي مختلف (مثل IE 4+ يا Netscape 4+ ويا DOM-based browsers) براي هر مرورگر كدهاي خاص همان مرورگر را استفاده ميكنند در اين حالت ميتوان بجاي نوشتن همه كدها در يك فايل حجيم و بزرگ، كدهاي مربوط به هر مرورگر را در فايلهاي جداگانه اي قرار داد (بطور مثال ie4.js و ns4.js و dom.js) و فقط از كدهاي مورد نياز استفاده كرد.
در كدهاي زير پس از تشخيص نوع مرورگر فقط فايل مربوط به همان مرورگر بارگذاري ميشود.

dom = (document.getElementById) ? true : false;
ns4 = (document.layers) ? true : false;
ie = (document.all) ? true : false;
ie4 = ie && !dom;

var src = '';
if (dom) src = '/dom.js';
else if (ie4) src = '/ie4.js';
else if (ns4) src = '/ns4.js';
document.write("<script src=" + src + "> <\/script> ");

5- كوتاه سازي و مختصر سازي كدها
با استفاده از نامهاي خلاصه سازي شده براي توابع و متغيرها و اشياء ميتوان حجم كدها را تاحد زيادي كاهش داد، البته براي اين كار بايد كدهاي HTML درون صفحه را نيز تصحيح كرد، كه اين كار با تغيير نام class و id مربوط به تگهاي مختلف درون صفحه امكان پذير است.
بطور مثال :

function validateParseAndEmail()
var firstButton

به كدهاي زير تبديل شده اند

function email()
var button1

و يا بهتر از آن كدهاي زير

function e()
var b

در اين حالت خوانايي برنامه بسيار پايين مي آيد. قبلا يك راه حل مناسب براي رفع اين مشكل بيان شد، يكي ديگر از راه حلها ايجاد يك جدول در فايل جداگانه است، بصورتي كه نام خلاصه شده درون برنامه و نام كامل هر متغر يا تابع در آن ذخيره شود تا در صورت نياز با مراجعه به جدول مورد نظر نام اصلي تابع يا متغير را تشخيص دهيم. البته دقت داشته باشيد كه اين فايل مخصوص برنامه نويس است و فقط براي خوانايي كدها ايجاد شده و جزئي از صفحات وب شما نيست.

خلاصه مطلب
با كاهش حجم فايلهاي جاوااسكريپت مورد استفاده سرعت بارگذاري صفحات وب نيز افزايش ميابد.
بطور كلي با روشهاي زير ميتوان حجم كدهاي جاوااسكريپت مورد استفاده در صفحات وب را تا حد زيادي كاهش داد:

- حذف فضاهاي خالي درون كدها
- حذف و يا خلاصه سازي توضيحات درون كدها
- استفاده از اسامي خلاصه شده براي متغيرها و توابع

اغلب تكنيكهاي ذكر شده در اينجا براي بهينه سازي حجم فايلهاي HTML و يا CSS نيز قابل استفاده هستند.

منبع : www.informit.com

نوشته شده توسط هادی قنبری | لینک ثابت |

بهینه سازی حجم کدهای جاوا اسکریپت

موضوع: JAVASCRIPT جمعه یکم دی 1385 21:26

جاوااسكريپت يك زبان مناسب براي انجام عملياتي چون چك كردن مقادير درون فرمها يا درست كردن منو براي حركت درون سايت يا حركت دادن يك شيئ درون صفحه و... است، اما بعضي از طراحان در استفاده از اين گونه كدها تا جايي پيش مي روند كه صفحه انباشته از كدهاي جاوااسكريپت ميشود. خوشبختانه جاوااسكريپت قدرت زيادي در جهت بهينه كردن كدها براي كاهش حجم يا بالا بردن سرعت اجرا به ما ميدهد. با استفاده از تكنيكهايي مثل فشرده سازي و مبهم سازي ميتوان 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() {

در قسمت بعد كه ادامه همين مطلب است تكنيكهاي ديگري در همين زمينه ارائه شده كه خواندن آنها را نيز به شما توصيه ميكنم.

منبع : www.informit.com

نوشته شده توسط هادی قنبری | لینک ثابت |

About

این وبلاگ حاوی مطالبی در مورد برنامه های کاربردی کامپیوتر و آموزش های آن داراست که امید است با مطالعه آن نیاز های نرم افزاری شما برآورده شده باشد و ما را از دعای خیرتان محروم نفرمایید . این وبلاگ در سال 85 در دانشکده فنی شهید رجایی در درس مبانی اینترنت با راهنمایی های آقای آذری تهیه و در دست شما دوستان است.لازم به ذکر است کپی از مطالب این وبلاگ با شرح منبع بلامانع است . یکشنبه 26/9/138 ساعت 8:30 هادی قنبری