Posts Tagged ‘فایرباگ’

اندازه‌گیری زمان اجرای توابع جاوا اسکریپت

مرداد ۲۳م, ۱۳۸۸

بعضی اوقات پیش اومده که ما یک تابع یا کلا” انجام یک کاری توسط جاوا اسکریپت رو به چندین حالت مختلف برنامه نویسی میتونیم بنویسیم یا انجام بدیم. برای سایت های کوچک و سایتی که استفاده خیلی کمی از جاوا اسکریپت استفاده میکنند شاید مورد مهمی به نظر نیاید اما برای سایت های وب ۲ و سایت هایی که استفادی زیادی از تکنولوژی های جدید جاوا اسکریپت مثل آژاکس (Ajax) میکنند در نظر گرفتن زمان اجرا میتواند عامل بسیار مهمی باشد. البته باید در نظر داشت که کاربران امروزه از تب ها برای استفاده از سایت های مختلف اسفاده میکنند نه از پنجره های متعدد. و این عامل را حتما” باید در نظر داشت که وقتی شما موتور یک مرورگر را مثلا” برای اجرای جاوا اسکریپت در اختیار میگیرید، مسلما” برای تب های دیگر درصد کمتری اختصاص می یابد. بنابراین درصورتی که سایت شما کدهای سنگینی داشته باشد، علاوه بر سایت شما، باعث کند شدن مرورگر هم شده و کاربر را بشدت ناراضی میکند.
و این ها دلایلی است که باعث میشود که زمان اجرای توابع جاوا اسکریپت برای ما اهمیت پیدا کند.
در فایرباگ (Firebug) در قسمت Console تبی با نام Profile وجود دارد که این کار را انجام میدهد! برای مثال شما تابعی نوشته‌اید و میخواهید زمان اجرای آن را اندازه گیری کنید. برای این کار کافیست ابتدا یک بار دکمه Profile را بزنید و سپس آن تابع را اجرا کنید. حال دوباره دکمه Profile را بزنید تا زمان اجرای آن را با تمام جزئیات ببینید.
اگر قصد دارید چندین تابع را با هم مقایسه کنید، تمام توابع را بعد از زدن دکمه Profile اجرا کنید و اگر میخواهید کل اسکریپت(script) های سایت را بررسی کنید، بعد از زدن دکمه Profile صفحه را رفرش کنید و دوباره Profile را بزنید.
برای مثال به عکس زیر توجه کنید.


من برای یک درخواست Ajax و اجرای یک تابع بعد از آن، کدی نوشتم (البته با استفاده از کتابخانه jQuery) و آنرا اجرا کردم که نتیجه آنرا میبینید.
توابعی که نام آنها بصورت (?)() است، توابع داخلی هستند که نام خاصی ندارند. برای مثال:


(function(){
//	Do something;
})();

ستون Calls تعداد دفعات اجرای هرکدام از توابع در مدت زمانی است که شما Profile را نگه میدارید. برای مثال تابع success یکبار اجرا شده است.
ستون Percentage درصد زمان سپری شده نسبت به کل توابع مورد بررسی قرار گرفته برای این تابع را نمایش میدهد.
ستون Own Time مدت زمان اختصاصی هر تابع را نمایش میدهد. این زمان شامل مدت زمان سپری شده برای توابعی که از داخل این تابع فراخوانی شده اند، نمی باشد.
ستون Time زمان کل هر تابع، با در نظر گرفتن تمام توابع فراخوانی شده از داخل آن میباشد.
ستون های Avg,Minو Max هم بترتیب میانگین، حداقل و حداکثر زمانها را برای هر تابع نمایش می دهد.
در نهایت هم File، لینکی به آدرس فایلی که این تابع در آن قرار دارد برای دسترسی سریع تر برقرار کرده است.

Tags: , , , ,
Posted in Mozilla FireFox, javascript, مرتبط با وب 2 | Comments (۳)

Firebug

دی ۶م, ۱۳۸۷

بعید میدونم که شما طراح و برنامه نویس وب باشین اما با Firebug آشنا نباشید. در واقع FireBug علاوه بر مزیت هایی که در کار با کدهای HTML و CSS داره دارای خط فرمان جاوا اسکریپت نیز هست. وجود خط فرمان javascript در firebug به شما این امکان رو میده که کدهای خودتون رو به صفحه جاری الصاق کنید. انگار که اونها از اول توی صفحه جاری نوشته شده بودند!!
شاید در نگاه اول این چیز خیلی جالبی نباشه اما وقتی یکم دقیق بشین متوجه میشین که چی میگم. بذارین یک مثال بزنم. اگه شما Ajax کار کرده باشید باید بدونید که آژاکس Cross-Domain نیست. یعنی اینکه شما نمیتونید درخواست (request) هایی رو از دامین های دیگه داشته باشین. (البته حالت های خاصی داره ازجمله JSON و CSSHTTPREQUEST) اما مهم اینه که در حالت معمولی چنین امکانی وجود ندارد. خب حالا به شما از طریق FireBug این امکان داده شده که وارد یک سایت بشید و کدهای جاوا اسکریپت خودتون و خصوصا” آژاکستون رو اجرا کنید. شاید بهتر باشه یک مثال بزنم. چند وقت پیش یکی از دوستام یک آدرسی به من داد که اجازه میداد sms رایگان بفرستین. بدون هیچ محدودیتی. البته من نیدونم اون صفحه شخصی بود یا هرچیز دیگه ای! مهم فارسی بودنش بود که خیلی تعجب برانگیزناک آلود بود!
خب بر طبق طبع من چندتا اس ام اس تست ارسال کردم و بعد از ایکه صحتش برام معلوم شد، جرقه ای در سرم زده شد! اومدم کد ساده ای مثل زیر نوشتم :


var xmlhttp= new XMLHttpRequest();
var msg = 'My message will be here!';
var sms = function(){
	xmlhttp.open("POST", 'send.php');
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4) {
			sms();
		}
	};
	i = Math.round( Math.random()*10000 );
	xmlhttp.send('phone=98913333'+i+'&message='+escape(msg));
}

و این کد رو اجرا توی فایرباگ مرورگرم اجرا کردم!! جالبه بدونین که تقریبا” ثانیه ای ۲تا sms ارسال میشد و این بود که من در هزینه تبلیغاتم کمی صرفه‌جویی کردم! بگذریم که این فقط یک روز جواب داد و اون سایت چندروزی میشه که از کار افتاده!!!
مثال دیگه این هم بزنم اینکه یک دایرکتوری بود که من یکی از سایت هام رو بهش اضافه کرده بودم. این دایرکتوری یک rank فرضی بر اساس ورودی هایی که از سایت من به اون دایرکتوری باضافه خروجی های اون دایرکتوری به سایت من ایجاد میکرد و جلو اسم هر سایت نمایش میداد. خب سایت من rank بالایی نداشت. تقریبا” جز ۴۰-۵۰ تا سایت اولش بود که خوب با اجرای کدی شبیه کد بالا هم به سایت خودم ورودی دادم هم خروجی!! و این بود که سایتم از حدود ۵۰ام در یک روز به ۳ام ارتقاء یافت!!!

در واقع از سایت هایی که باگ دارند میتونین به خوبی استفاده کنید. فقط باید یکم حواستون جمع باشه!!! :D
راستی اگر نمیدونید که Firebug چیه، فقط این رو بگم که میتونید با استفاده از گزینه Add-ons  در منوی Tools در مرورگر فایرفاکس (Firefox) آنرا به مرورگر خود اضافه کنید.
موفق تر باشید.

Tags: , , , , , , ,
Posted in Mozilla FireFox, javascript | Comments (۰)