ادامه بحث Java Script
در اين قسمت مطالب قبلي را ادامه ميدهيم به دوستان عزيز خواندن قسمت اول اين مطلب را توصيه ميكنم
تكنيكهاي بهينه سازي
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) قابل استفاده است.
<script language="JavaScript" src="code_o.js" defer="defer"> </script>
در اين صورت مرورگر بدون توجه به فايل جاوااسكريپت محتويات صفحه را بارگذاري ميكند و در نهايت به سراغ فايل .js ميرود.
يك راه بهتر براي صفحاتي كه داراي ترافيك بالايي هستند استفاده از SSI (Server Side Include) است. كار اين دستور مثل اين است كه كدها را مستقيما در جاي مورد نظر اضافه كرده باشيم. اين كار باعث ميشود كه حجم درخواستهاي مرورگر از سرويس دهنده كاهش يابد.
بطور مثال :
<script type="text/javascript">
<!--#include virtual="code_o.js" -->
</script>
</body>
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 نيز قابل استفاده هستند.