Posts Tagged ‘performance’

شرائح محاضرتى Front-end engineering

10/05/2010

السلام عليكم و رحمة الله و بركاته

من إسبوعين تقريبا ألقيت محاضرة فى كلية هندسة جامعة المنصورة بعنوان Front-end engineering تحدثت فيها عن ال loadtime optimizations يمكنك تحميل الشرائح من هنا .

محاضرة High performance JavaScript

09/05/2010

السلام عليكم و رحمة الله تعالى و بركاته

أعطى كل من Nicholas Zakas و Stoyan Stefanov و Ross Harmes و Julien Lecomte و Matt Sweeney محاضرة بعنوان High performance JavaScript أحتفالا بنشر كتاب O’Reilly High performance JavaScript ، الكتاب أنصح بقرائته بشدة – فصل مجانى -، يمكنك تحميل المحاضرة من هنا مباشرة 572MB عالية الجودة ، او مشاهدة المحاضرة أونلاين من هنا .

أنصح أيضا بقراءة هاذين الكتابين بشدة High performance websites و even faster web sites .

memoizing recursive functions

16/03/2010

السلام عليكم و رحمة الله تعالى و بركاته

فى الموضوع السابق ذكرت ان الوظيفة Fibonacci تنادى نفسها 21 الف و 890 مرة لتحسب رقم Fibonacci للرقم 20 ، و إذا ناديتها مرة أخرى لتحسب الرقم fibonacci للرقم 20 فإنها ستنادى نفسها 20 الف و 890 مرة أخرى :| و هذا بالطبع سيؤدى إلى تعطيل ال thread الرئيسى للتطبيق لفترة من الوقت و سيؤدى إلى user experience سىء للغاية ، الوظيفة fibonacci بطبيعة الحال هى وظيفة Idempotent بمعنى ان اعطيتها نفس المدخلات -العبارات-ستعطيك نفس النتائج فى كل مرة تنادى عليها ، يمكننا تخزين هذه النتيجة فى Cache و ربطها بالمدخل بحيث إذا ناديتها مرة أخرى بنفس المدخل ستحصل على النتيجة من ال Cache إذا كانت موجودة بدلا من ان تنادى نفسها 20,890 مرة لتحصل على النتيجة ، و بذلك يمكن تقليل عدد الاستدعائات من 20,890 إلى إستدعاء واحد فقط :D .

هذا هو الكود الخاص بالوظيفه fib اختصار ل fibonacci من الموضوع السابق :

function fib(n){
    if(n<2) return n;
    return fib(n-1) + fib(n-2);
};

و هذا هو الكود الخاص بالوظيفه memFib اختصارا ل memoized fibonacci بعد تطبيق ال memoization عليها ، الشرح يلى الكود :

//the memoized version of fibonacci
function memFib(n){
    if(!memFib.cache){
        memFib.cache = [0,1];
    }
    var result = memFib.cache[n];
    if(typeof result == "undefined"){
        result = memFib(n-1) + memFib(n-2);
        memFib.cache[n] = result;
    }
    return result;
};

السطر الثالث فى الكود السابق يقوم بفحص هل تم تعريف ال cache من قبل ك static property للوظيفة memFib ، إذا لم يكن تم تعريفه سيتم إعطاءه مصفوفة تحتوى على 0 و 1 و هى ال fibonacci number للرقم 0 و 1 ، اى ان ال key هو الرقم و ال value هو رقم fibonacci لهذ الرقم ، السطر السادس يتم إستخلاص رقم ال fibonacci للرقم n من ال cache ، إذا كان هناك رقم fibonacci سيتم إرجاعه من السطر 11 ، ان لم يكن هناك رقم fibonacci للرقم n سيتم حسابه فى السطر الثامن و سيتم تخزينه فى السطر التاسع فى ال cache لإستخدامه لاحقا ثم إرجاعه فى السطر 11.

و النتيجة لا توصف :|

الكود التالى يوضح كم مرة الوظيفة memFib و الوظيفة fib نادت نفسها لحساب ال fibonacci number لنفس الرقم بإستخدام الوظيفة howMany من الموضوع السابق :

howMany(fib, 10); // 176 calls
howMany(memFib, 10); // 18 calls
howMany(memFib, 10); // 1 call - result from [cache]

howMany(fib, 20); // 21,891 calls
howMany(memFib, 20); // 21 calls - [cache] used

howMany(fib, 15); // 1973 calls
howMany(memFib, 15); // 1 call - result from [cache]

howMany(fib, 9); // 109 calls
howMany(memFib, 9); // 1 call - result from [cache]

howMany(fib, 25); // 242785 calls
howMany(memFib, 25); // 11 calls [cache] used

هههههههههه تم تقليل 242,785 إستدعاء إلى 11 إستدعاء فقط :D و إذا إستدعينا memFib مرة أخرى ستنادى نفسها مرة واحدة فقط لأن الناتج موجود فى ال cache .

كم مرة نادت ال recursive function نفسها ؟

15/03/2010

السلام عليكم و رحمة الله تعالى و بركاته

لنفرض أنك تقوم بكتابة recursive function تقوم بإستدعاء نفسها عدد معين من المرات بناءا على العبارات التى تستقبلها لحساب الناتج ، مثلا يقال ان الوظيفه Fibonacci لكى تحسب ال Fibonacci number للعد 20 فإنها تنادى نفسها 21 الف و 890 مرة :| خخخخخ ، و يقال ان الوظيفة Factorial لكى تحسب ال factorial number للعدد 20 فإنها تنادى نفسها 20 مرة ، بما ان هذه الوظائف Idempotent اى ان الناتج لا يتغير مادام العبارات ثابتة يمكننا اخضاعها ل optimization pattern مثل ال Memoization لتقليل هذا العدد الهائل من المرات التى تنادى بها نفسها ، هذا موضوع المقال القادم إن شاء الله ، لكن هذا الموضوع عن معرفة العدد الذى تنادى به ال recursive function نفسها ، هذه المعلومة تهمنى للغاية لأنى أقوم بكتابة بعض ال Benchmarks لوظائف recursive ، يمكنك معرفة ذلك من خلال profiler او debugger فى المتصفح او IDE مثل Aptana Studio على سبيل المثال ، لكنى بعد العديد من المحاولات كتبت وظيفه howMany تقوم بحساب عدد المرات التى تنادى الوظيفة ال recursive نفسها بناءا على طريقة عمل Alias Chaining فى لغة البرمجة Ruby تم تعديل الكود ، الكود التالى يوضح الوظيفه Fibonacci :

function fibonacci(n){
    if(n<2) return n;
    return fibonacci(n-1) + fibonacci(n-2);
};

fibonacci(10); //55
fibonacci(13); //233

و عن طريق الوظيفة howMany يمكننا حساب عدد المرات التى تنادى فيها الوظيفة fibonnaci نفسها لتحسب ال fibonacci number للعدد 10 و 13 ، الوظيفة howMany تقبل العبارة الاولى لها recursive function و باقى العبارت هى العبارت التى ستمرر لهذه ال recursive function كما يلى :

howMany(fibonacci, 10); //call itself 176 times
howMany(fibonacci, 13); //call itself 752 times
howMany(fibonacci, 20); //call itself 21,890 times

كما ترى تمكننا من حساب كم مرة تنادى الوظيفة fibonacci نفسها ، و يمكننا تطبيق المثال السابق على اى وظيفة اخرى .

مميزات howMany :
تقوم بحساب عدد المرات التى تنادى ال recursive function نفسها دون الحاجة إلى تشغيل ال debugger او ال profiler فى كل مرة للحاجة لمعرفة ذلك ، و عليه يمكن دمجها فى test suits المكتوب بجافاسكربت .

عيوب howMany :
لا يمكنها حساب عدد المرات التى تنادى فيها ال recursive function نفسها إذا كانت anonymous او كانت ناتجة عن closure .

الكود الخاص ب howMany :

function howMany(fn){
    howMany.__times__ = 0;
    var args = Array.slice(arguments, 1),
    fnStr = fn.toString();
    if(fnStr.indexOf("++howMany.__times__;") < 0){
            eval(fn.name + " = " + fnStr.replace(/\{/, "{++howMany.__times__;"));
    }
    fn.apply(null, args);
    return howMany.__times__;
};

فى الموضوع القادم سأستخدم howMany لمقارنة المرات التى نادت ال recursive function نفسها قبل و بعد تطبيق ال optimization patterns عليها .

محاضرة The Metamorphosis of Ajax

05/03/2010

السلام عليكم و رحمة الله تعالى و بركاته

أعطى دوجلاس كروكفور منذ يومين محاضرة بعنوان The Metamorphosis of Ajax ضمن فعاليات سلسلة Crockford on JavaScript ، تم اليوم رفع المحاضرة فيديو يمكنك تحميل نسخة عالية الجودة 720 ميجا بايت من هنا ، المحاضرات السابقة ستجدها فى الموضوعات السابقة و فى موقع السلسلة .

فيديوهات محاضرات و مؤتمرات اقيمت فى 2009

04/01/2010

السلام عليكم و رحمه الله تعالى و بركاته

اعطى john resig مطور مكتبه jQuery محاضره فى الياهو بعنوان testing, performance analysis & jquery 1.4 يمكنك مشاهدتها و تحميلها من هنا .

فى اخر شهر اكتوبر اقيمت فعاليات مؤتمر YUIConf 2009 يمكنك تحميل كل محاضرته او مشاهدتها من هنا ، انا انصح بشده مشاهده محاضره brendan Eich – اللى بالصوره اعلاه -مخترع الجافاسكربت تكلم فيها عن التطورات التى ستطرأ على الجافاسكرت بعد تبنى مواصفات ECMAScript 5 و الميزات المستقبليه ، و ايضا انصح بمشاهده محاضره Douglas crockford  اما باقى المحاضرات ستفيد فقط مستخدم مكتبه YUI .

قد وضعت العديد من محاضرات مؤتمر JSConf2009 هنا فى المدونه ، لكن موقع InfoQ تبنى رفع العديد من المحاضرات التى لم يرفعها منظمين المؤتمر ستجدها هنا .

اما محاضرات مؤتمر JSConfEu الذى اقيم فى أوروبا ستجدها هنا ، المحاضرات رائعه اووووووووووف .

اما مؤتمر Full Frontal الذى اقيم فى نوفمبر لن يتم رفع محاضراته حتى الان و لا اتوقع ان يتم رفعها :S لكن ستجد الشرائح هنا

كل هذه الفيديوهات لحظه علمى بنزولها قمت بإرسال تويت لكن من يتبعونى على تويتر عنها ، و الموضوع هذا اعرف انه جاء متأخر جدا ، اذا تريد معرفه الجديد او مايهمنى قم بمتابعتى على تويتر لأنى لن ادون هذه الفتره لأنها فتره امتحاناتى @keepondev

كتاب O’Reilly even faster web sites

15/09/2009

السلام عليكم و رحمه الله تعالى و بركاته

oreilly even faster web sites

انتهيت من فتره من قراءه كتاب O’Reilly Even Faster Web Sites ، الكتاب ليس إصدار ثانى لكتاب O’Reilly high performance web sites من تأليف نفس الكاتب Steve Souders و لكنه يبدأ من حيث انتهى high performance web sites حيث يحتوى على الكثير من الابحاث و التكنيكات الجديده فى مجال كفاءه ال front-end ، ساعد فى تأليف الكتاب مع Steve Souders الكثير من الاسماء المعروفه فى مجال ال front-end ، مثل Douglas Crockford مكتشف لغه تبادل البيانات JSON الذى كتب الفصل الاول يتحدث فيه عن كفائه تطبيقات الاجاكس ، و الفصل الثانى كتبه Dion Almaer و Ben Galbraith اصحاب مدونه Ajaxian و تحدثوا فيه عن الإستجابه responsiveness و ال threading ، و الفصل الثالث كتبه Steve Souders يتحدث فيه عن كيفيه تأجيل تحميل وظائف الجافاسكربت عند استخدامها و إستخدام المطلوب منها فقط عند بدايه الوثيقه ، و الفصل الرابع تناول فيه Steve Souders كيفيه تحميل ملفات الجافاسكربت بالتوازى parallel download حيث ان طبيعه تحميل ملفات الجافاسكربت انها تمنع اى مورد من التحميل معها block download حتى تنتهى و تأثير ذلك على ترتيب تنفيذ كود الجافاسكربت Execution order و ال user experience ، و الفصل الخامس يتناول فيه Steve كيفيه ربط الكود ال inline ليتم تنفيذه فقط بعد تحميل الملفات الذى يعتمد عليها من الشبكه بالتوازى بدون عمل blocking و مثال على ذلك من مكتبه DoJo و مكتبه YUI ، و الفصل السادس يتناول فيه Steve تأثيركود الجافاسكربت ال inline على رسم الصفحه rendering و على ظهور تأثيرات ال CSS و الترتيب المناسب لملفات الجافاسكربت و ال CSS ، و الفصل السابع يتناول كيفيه كتابه كود جافاسكربت أسرع فى التنفيذ يكتبه Nicholas Zackas كاتب Wrox: JavaScript for Web developers ، و الفصل الثامن يتناول كفاءه تطبيقات ال comet او ماتعرف بالاجاكس العكسى حيث يبدأ السيرفر الطلب و ليس ال client و يستخدم فى التطبيقات التفاعليه و الreal time كتبه Dylan Schiemann الذى يرأس SitePen و مؤسس Dojo ، و الفصل التاسع يتناول به Tony Gentilcore مهندس بجوجل كيفيه تحسين الكفاءه للمستخدمين الذين لا يستطيعون الحصول على مميزات ال gzipping ، و الفصل العاشر يتناول تأثير الصور على كفاءه التطبيق و كيفيه تحسينها و تقليل حجمها و إستخدام ال CSS sprites و إستخدام command line لمعالجه الصور على السيرفر ديناميكا للحصول على اعلى جود و أصغر حجم يكتبه Nichole Sullivan صاحبه فكره ال CSS الموجه بالكائنات و Stoyan Stefanov مؤلف كتاب Object oriented JavaScript و الاثنين يعملان بياهو ، و الفصل الحادى عشر يتناول كيفيه إستخدام اكثر من دومين للحصول على اكثر من إتصال HTTP بالتوازى يكتبه Steve ، و الفصل التانى عشر يتحدث فيه Steve عن Chunked encoding و كيفيه استخدام ال buffer لزياده كفاءه تطبيقات الويب التى تعتمد على حجم بيانات كبير ، و الفصل التالت عشر يتحدث عن تأثير إستخدام ال iframes كتبه Steve ، و الفصل الرابع عشر يتحدث عن تأثير ال CSS selectors على كفاءه و سرعه اظهار العناصر renderning فى التطبيق و سبل كتابه CSS selectors اسرع و افضل و ال selectors التى يجب عليك تجنبها ، و فى نهايه الكتاب مرجع صغير عن الادوات التى تستخدم فى قياس الكفاءه .

أنص بشده قراءه هذا الكتاب ، فهو غنى جدا بالمعلومات و سيجعلك متقدما اكثر فى مجال ال front-end و ، و ان لم تقرأ كتاب O’Reilly High performance web sites فأنا انصحك ايضا بقرائته بشده ، لأن الكتاب الجديد يعتمد عليه فى بعض المناطق و به ابحاث و بعد التكنيكات الرائعه لترقيه كفاءه تطبيقات الانترنت .

المحاضره العاشره من مؤتمر JSConf2009

24/08/2009

السلام عليكم و رحمه الله تعالى و بركاته

Axiom Stack Server Side JavaScrip video lecture at JSConf2009

وضع منظموا مؤتمر JavaScript Conference 2009 المحاضره العاشره ، اعطاها Nick Campell بعنوان Axiom stack: Serverside JavaScript عرض من خلالها منصه Axiom stack لإستخدام JavaScript لبرمجه السيرفر يمكنك مشاهده المحاضره من هنا ، المحاضرات السابقه كلها ستجدها هنا .

Nick presents the adventures of Timmy through the (stick) world of web programming in order to illustrate the need, beauty, and reality of Server Side JavaScript programming using Axiom Stack. Nick presents the variety of issues that happen when writing templates, multi-language development, and database schema handling. The Axiom Stack provides you with the ability to leverage one language, the web language of JavaScript, to create powerful and wide reaching web applications

فيديوهات و شرائح مؤتمر Velocity 2009

22/08/2009

السلام عليكم و رحمه الله تعالى و بركاته

Ben Galbraith and Dion Almaer

اقيمت فعاليات مؤتمر Velocity 2009 يوم 22/6 بسان جوز بولايه كاليفورينا و استمر لمده يومين حتى 24/6 ، المؤتمر الوحيد من نوعه المتخصص فى كفائه تطبيقات الانترنت بدايه من ال client حتى ال server و يتحدث بها افضل المهندسين مثل douglas crockford مخترع ال JSON و ben galbraith و dion almaer مدونين مدونه Ajaxian اللى بالصوره اللى فوق و stoyan stefanov كاتب كتاب OO JavaScript من دار نشر packet و مهندس الكفاءه بياهو و غيرهم فى اشهر الشركات بالعالم كجوجل و مايكروسوفت و تويتر و ياهو و فيسبوك و امازون و غيرهم عن كيفيه ترقيه كفائه تطبيقات الانترنت على كل من المتصفح و الخادم  و ادوات اختبار الكفائه و اخر الابحاث التى تم نشرها فى مجال الكفاءه و بعضها من كتاب even faster web sites الذى سأتحدث عنه عندما اكمل قرائته ان شاء الله  ، هذه هى السنه التانيه للمؤتمر ، اقيم المؤتمر السنه الماضيه بعد النجاح الباهر الذى حققه كتاب High performance web sites من شركه اوريلى وكاتبه steve souders الذى يعمل مهندس بجوجل ، حيث انتبهت شركه اوريلى ان حدث مثل هذا مفقود بالرغم من اهميه الموضوع البالغه ، و بعد النجاح الساحق للمؤتمر فى سنته الاولى 2008 ، ها هى فيديوهات و شرائح المؤتمر مؤتمر 2009 ، اتمنى لكم و لنفسى الإستفاده وزياده الخبره .

ثلاث محاضرات جديده من مؤتمر JSConf2009

11/08/2009

السلام عليكم و رحمه الله تعالى و بركاته

رفع منظموا مؤتمر JavaScript conference ثلاث محاضرات جديده

sproutCore at jsconf2009

المحاضره الاولى بعنوان Introduction to SproutCore اعطاها Mike Subelsky يمكنك مشاهدتها من هنا ، وصف المحاضره :

Apple made a huge splash with their rich MobileMe release which provides a fluid and feature-rich interface through the web browser. Ignite Baltimore Superstar, Mike Subelsky, shows you the inner workings of SproutCore, the JavaScript library that is used to create MobileMe. Mike has used SproutCore as part of the company he co-founded, OtherInbox.com. Mike presents this rich interaction environment with passion, depth, and deep nerd tech you have come to expect from JSConf presenters and he does it all with class and style

stoyan stefanov high performance web apps at jsconf 2009

المحاضره الثانيه بعنوان High performance kick ass web apps اعطاها Stoyan stefanoc يمكنك مشاهدتها من هنا ، وصف المحاضره :

Got a slow web application? Dr. Stefanov is writing a prescription for you on how to put your application on a web diet using a wide array of techniques, tricks, and magic. Stoyan takes a deep dive into web technology and how to optimize it at levels that rarely get touched upon, even at tech conferences. His experience in pipelining, cacheing, image inlining, and smushing at Yahoo! Developer Network is shared with you to take advantage of every possible performance improvement ever known. He demonstrates how to use smush.it, minifiers, and other ninja techniques to make the web faster than ever before. This is a must see for any and every web developer

couchdb at javascript conference

المحاضره الثالثه بعنوان CouchDB to the edge اعطاها Chris Anderson و Jan Lehnardt يمكنك مشاهدتها من هنا ، وصف المحاضره :

Using CouchDB to create “edgy” web applications that are stored in the database. CouchApps allows you to store not only data in a database like CouchDB, but also full applications, which lends to some rather interesting use cases. Not only do applications then scale up and out, but their ability to revision control themselves comes for free. The CouchApps are pure JavaScript applications that sit on top of the power of CouchDB, and then allow the applications and data to become instantly portable and shareable through replication. This tag team presentation will give you some powerful insight into the concepts of CouchDB and CouchApps

خارج النص : طلع عين امى على ماكتبت و رفعت صور البوست ده ، النت كل شويه يقطع و السرعه 0.1 كيلو بايت فى الثانيه خخخخخخخخخخ


تابع

Get every new post delivered to your Inbox.