المدونة ياهو واجهة المستخدم (YUIBlog)

سكرينكست: روس Harmes في YUI حزمة لTextmate

30 نوفمبر 2006 في 17:27 بواسطة Miraglia اريك | في التنمية ، YUI مسرح | 14 تعليقات

مواصلة القراءة سكرينكست: روس Harmes في YUI حزمة لTextmate ...

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

بحث الأداء، الجزء 1: ما هي قاعدة 80/20 يخبرنا عن الحد من طلبات HTTP

28 نوفمبر 2006 في الساعة 12:56 من قبل Theurer Tenni | في التنمية ، الأداء | 128 تعليقات

ليس سرا أن المستخدمين يفضلون المواقع على شبكة الإنترنت بشكل أسرع. أنا أعمل في فريق متخصص يركز على قياس وتحسين أداء منتجات ياهو في جميع أنحاء العالم. كجزء من عملنا، ونحن إجراء التجارب المتعلقة بأداء صفحة على شبكة الإنترنت. نحن تقاسم النتائج التي توصلنا إليها حتى آخر الأمامية المهندسين الانضمام إلينا في تسريع تجربة المستخدم على شبكة الإنترنت.

حكم أداء 80/20

أدلى فيلفريدو باريتو، وهو خبير اقتصادي في وقت مبكر 1900s، الملاحظة الشهيرة حيث 80٪ من ثروة البلاد ينتمون الى 20٪ من عدد السكان. هذا وكان معمما في وقت لاحق إلى ما يشار اليه عادة باسم مبدأ باريتو (المعروف أيضا باسم القاعدة 80-20)، والذي ينص على أي ظاهرة، 80٪ من عواقب تأتي من 20٪ من الأسباب. نحن نرى هذه الظاهرة في هندسة البرمجيات حيث ينفق 80٪ من الوقت في 20٪ فقط من رمز. عندما كنا تحسين التطبيقات لدينا، ونحن نعلم أن تركز على أن 20٪ من رمز. وينبغي أيضا هذا الأسلوب نفسه يطبق عند تحسين صفحات الويب. وأضاف أن معظم الأداء الأمثل اليوم على الأجزاء التي تولد وثيقة HTML (أباتشي، C + +، قواعد البيانات، وغيرها)، ولكن تلك الأجزاء تساهم فقط في نحو 20٪ من زمن الاستجابة للمستخدم. من الأفضل أن تركز على تحقيق الاستفادة المثلى من الأجزاء التي تساهم في 80٪ أخرى.

باستخدام علبة الشم، نكتشف ما يجري في ذلك 80٪ أخرى. الرقم 1 هو طريقة عرض رسومية من حيث الوقت الذي تستغرقه تحميل http://www.yahoo.com مع مخبأ فارغ. كل شريط يمثل عنصر معين ويظهر في النظام التي كتبها المتصفح. شريط الأول هو الوقت الذي تستغرقه للمتصفح لاسترداد مجرد وثيقة HTML. لاحظ ينفق سوى 10٪ من الوقت هنا للمتصفح أن تطلب من صفحة HTML، وأباتشي لغرزة معا HTML والعودة استجابة إلى المستعرض. وينفق الآخر 90٪ من الوقت في جلب عناصر أخرى في الصفحة بما في ذلك النصوص والصور ومعدات الشكل.

ويبين الجدول 1 المواقع على شبكة الإنترنت شعبية تنفق ما بين 5٪ و 38٪ من الوقت في تحميل المستند HTML. وينفق الآخر 62٪ إلى 95٪ من وقت تقديم طلبات HTTP لإحضار جميع المكونات في تلك الوثيقة HTML (أي الصور، ومخطوطات، ومعدات الشكل). ومما يزيد من تأثير وجود العديد من العناصر في الصفحة من خلال حقيقة أن متصفحات تحميل سوى اثنين أو أربعة عناصر في نفس الوقت لكل اسم المضيف، وفقا لإصدار HTTP من الاستجابة ومتصفح المستخدم. تجربتنا تبين أن تخفيض عدد طلبات HTTP له أكبر الأثر على تقليص زمن الاستجابة وغالبا ما يكون أسهل تحسن أداء لجعل.

لا ينبغي أن يتم حفظ كل شيء في ذاكرة التخزين المؤقت للمتصفح على أي حال؟

الاستنتاج هو نفسه: تخفيض عدد طلبات HTTP له أكبر الأثر على خفض زمن الاستجابة وغالبا ما يكون أسهل تحسن أداء لجعل. في المقال القادم سوف نبحث في تأثير التخزين المؤقت، وبعض النتائج مفاجئة في العالم الحقيقي.

تنويه: ضرورات التصميم يملي الثراء البصري في حاجة إلى أن يوزن ضد هذا الهدف طلب تخفيض. عندما كنت في حاجة الثراء البصري، يمكن اتخاذ خطوات إضافية - تجميع ملفات JS، وذلك باستخدام العفاريت المغلق، وما إلى ذلك - ولكن الغنى البصري لا تميل إلى تتعارض مع خط أنابيب نحيل طلب HTTP.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

فيديو: دوغلاس Crockford، قال: "تقدم جافا سكريبت"

27 نوفمبر 2006 الساعة 10:59 صباحا من قبل Miraglia اريك | في التنمية ، YUI مسرح | 34 تعليقات

في الشهر الماضي، نشرت لي بعض الفيديو التي اتخذت من واحد من دوغلاس Crockford ل تقديم عروض عن هندسة الواجهة ( فيديو: دوغلاس Crockford، "إن المعهد مزعجة: نظرية دوم" ). قد أولئك الذين يتمتعون دوغلاس العميقة الغوص في DOM تكون مهتمة أيضا في تقريره "متقدمة جافا سكريبت" العرض، والآن متاحة للجمهور على ياهو فيديو. في هذا العرض - وهو الثالث من سلسلة من ثلاثة أجزاء انه تم تدريس في ياهو - دوغلاس يبحث عن كثب في أنماط رمز من المبرمجين جافا سكريبت التي يمكن أن تختار في التأليف تطبيقاتها. فهو يقارن البنى مألوفة مثل نمط Pseudoclassical مع أنماط أكثر فريدة من نوعها مثل نمط الطفيلية التي (كما يقول) تشغيل أكثر "مع الحبوب" من جافا سكريبت. عندما برندان إيتش تكلم في ياهو هذا الصيف وصفها دوغلاس ك "يودا للبرمجة جافا سكريبت وامدا"، بعد مشاهدة "متقدمة جافا سكريبت"، قد يكون لديك إحساس واضح من حيث أن هذه الثقة تأتي من.

يجدر التذكير بأن الأفكار دوغلاس وجهات النظر هي بلده، وأن الكثير من العيوب في براعة videographic هي الألغام.

• جزء 1: 31 دقيقة
• الجزء 2: 25 دقيقة
• الجزء 3: 11 دقيقة
• تحميل الشرائح (مضغوط ملف باور بوينت)

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

متدرج دعم المتصفح: تحديث Q4

15 نوفمبر 2006 في 01:42 صباحا بواسطة Koechley نيت | في تطوير | 17 تعليقات

كل ثلاثة أشهر تقريبا قمنا بتحديث المخطط الذي يفصل المتصفحات الحصول على الدرجة الدعم وفقا ل دعم المتصفح مدرج . بالتزامن مع يوم أمس إصدار التحديث YUI ، وهنا التحديث لدينا دعم المتصفح لعام 2006 Q4.

باختصار: A-درجة الدعم ليبدأ فايرفوكس 2.0، وأكد ل IE7. يتم التوقف A-درجة الدعم لIE 5.5 و 1.0 فايرفوكس. نادرا ما تستخدم المشتقات أبو بريص (على سبيل المثال، نتسكيب وموزيلا جناح تطبيق) تتلقى الآن X-درجة بدلا من درجة A-الدعم. أوبرا 9 يتلقى الآن A-درجة الدعم على منصات إضافية.

في شكل رصاصة، وهنا كل التغييرات في هذا التحديث:

1. تكرار A-درجة الدعم، اي 7، وين (XP)
2. إنهاء A-درجة الدعم، IE5.5، وين
3. الشروع في الصف الدعم، الإصدار 2.x من فايرفوكس، وين / ماك.
4. إنهاء A-درجة الدعم، فايرفوكس 1.0.x، وين / ماك.
5. التوسع في الصف الدعم، أوبرا 9.x من، وين / ماك
6. إنهاء A-درجة الدعم والتطبيق موزيلا جناح، وين / ماك
7. إنهاء A-درجة الدعم، ونتسكيب، وين / ماك

على الرغم من أنك ينبغي أن تشير دائما في الرسم البياني GBS رسمية استضافتها على شبكة ياهو المطور ، لقد تضمنت لمحة عن المخطط في هذا الربع لمصلحة الأجيال القادمة في:

	فوز 98	فوز 2000	فوز XP	10.3.x ماك	ماك 10.4
IE 7.0			A-درجة
6.0 IE	A-درجة	A-درجة	A-درجة
فايرفوكس 2.0. *	A-درجة	A-درجة	A-درجة	A-درجة	A-درجة
فايرفوكس 1.5. *	A-درجة	A-درجة	A-درجة	A-درجة	A-درجة
أوبرا 9. *	A-درجة	A-درجة	A-درجة	A-درجة	A-درجة
رحلات السفاري 2.0 *					A-درجة

التطلع إلى الربع القادم (2007Q1)، فإننا سوف تعكس الإصدارات الإضافية من المتصفحات ولكن لا يتوقع وجود تغييرات كبيرة.

شكرا،
نيت

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

YUI الإصدار 0.12.0: TabView التحكم، وثائق API تحسن، وأكثر

13 نوفمبر 2006 في الساعة 06:35 من قبل Miraglia اريك | في تطوير | 23 تعليقات

صدر اليوم نحن الإصدار 0.12 من المكتبة YUI. وهنا يبرز:

• و تحكم TabView بقلم: YUI الرسوم المتحركة و دوم مؤلف مات سويني ، هذا الحل التبويب الديناميكية هو أحدث إضافة YUI وملامح دعم قوي على حد سواء لتعزيز تقدمية وشديد اللمعان ثراء. راجع الجدول مات من الأمثلة TabView عن فكرة عما عنصر التحكم الجديد يمكن أن يفعله؛ عرض المصدر على أمثلة لنرى كيف كنت تنفيذها.
• YUI مطور آدم مور (: وثائق وتحسين حدث ، السحب والإفلات ، المتزلج ، تحكم TreeView خلقت) وسيلة جديدة لتوليد API الوثائق ، مما يسمح لنا لتوليد موحد، crosslinked API مستندات مع يتجزأ الإكمال التلقائي التي تعمل بالطاقة التحكم بحث . الجديد وثائق API للمطورين مع تقديم صورة أكثر وضوحا من الهياكل الطبقية وتقديم تصنيف مستقل لخصائص وخيارات التكوين. يمكنك أبدا العودة إلى الغش صحائف مرة أخرى ...
• ... ولكن في حال كنت لا تزال مثل أوراق الغش: الغش ويتم تحديث ورقة للنسخة 0.12 وتتضمن ورقة جديدة لTabView وCSS نيت Koechley ل إعادة تعيين ، خطوط و شبكات المؤسسة. يمكنك تحميل جميع أوراق الغش YUI من موقع مكتبة YUI.
• الحديث عن شبكات CSS: ونيت rev'd حزمة الشبكات مع خبز في دعم ل950px، 750px، وكامل منفذ العرض ("السائل") تخطيطات. شبكات 0،12 يتضاعف ثلاث مرات على عدد من المخططات المعتمدة والأوزان لا يزال في إطار 3KB قبل gzipping. لقد بنينا هذا الموقع YUI على خطوط / مسح / مؤسسة شبكات الآن ونحن في الاستفادة من استخدام الدعم الكامل منفذ العرض الجديد.
• التحسينات في جميع أنحاء المكتبة: لا وجود التعزيزات التي يمكن العثور عليها في جميع أنحاء المكتبة، من الحدث الجديد onContentReady طريقة إلى تحسن كبير في التحكم في التقويم مع واجهة مبسطة لخلق يعرض تقويم عدة أشهر (إذا كنت تقوم بالترقية من إصدار سابق من التقويم، راجع دليل الترقية خطوة بخطوة ). للحصول على قائمة كاملة من التغييرات، راجع وثائق ملاحظات الإصدار التي ترافق عملية التوزيع.

وسوف نتابع مع مزيد من المعلومات حول بعض من هذه المواضيع في وقت لاحق من هذا الاسبوع. في الوقت الحالي، الرجاء جعل طريقك الى سورس لتحميل توزيع آخر YUI، وانظر ملاحظات الإصدار في توزيع واضح للحصول على كامل من التغييرات في جميع أنحاء المكتبة. كما هو الحال دائما، و موقع ياهو YUI على شبكة مطوري لديه كل الوثائق الاخيرة.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

جافا سكريبت، ونحن بالكاد new يا

13 نوفمبر 2006 في 09:21 صباحا بواسطة Crockford دوغلاس | في تطوير | 54 تعليقات

جافا سكريبت هي لغة نموذجي، لكنه لا يملك new المشغل الذي يحاول جعل الامر يبدو وكأنه نوع من اللغة الكلاسيكية. يميل إلى الخلط بين المبرمجين، مما أدى إلى بعض أنماط البرمجة إشكالية.

تحتاج أبدا إلى استخدام new Object() في جافا سكريبت. استخدام الكائن الحرفي {} بدلا من ذلك. وبالمثل، لا تستخدم new Array() ، واستخدام مجموعة حرفية [] بدلا من ذلك. والمصفوفات في جافا سكريبت عمل أي شيء مثل صفائف في جاوة، واستخدام بناء الجملة جافا مثل الخلط لك.

لا تستخدم new Number ، new String ، أو new Boolean . هذه الأشكال إنتاج مغلفة كائن لا لزوم لها. مجرد استخدام بسيط الحرفية بدلا من ذلك.

لا تستخدم new Function لخلق قيم وظيفة. استخدام التعبيرات وظيفة بدلا من ذلك. على سبيل المثال،

  إطارات [0]. onfocus = وظيفة جديدة ("document.bgColor = 'antiquewhite'") 

كما هو مكتوب أفضل

  إطارات [0] onfocus = وظيفة () {document.bgColor = 'antiquewhite'؛}. 

النموذج الثاني يسمح للمترجم أن يرى الجسم وظيفة عاجلا، لذلك سوف يتم الكشف عن أية أخطاء في ذلك عاجلا. في بعض الأحيان new Function يستخدم من قبل الناس الذين لا يفهمون كيفية عمل وظائف داخلية.

  selObj.onchange جديد = وظيفة ("dynamicOptionListObjects [" +
         dol.index + "] تغيير (هذا).")؛ 

اذا واصلنا الهيئات وظيفة في الجمل، ويمكن للمترجم لا نراهم. اذا واصلنا الهيئات وظيفة بوصفها تعبيرا عن سلسلة، لا يمكننا أن نراهم إما. فمن الأفضل أن لا البرنامج في الجهل. عن طريق جعل وظيفة تقوم بإرجاع وظيفة، يمكن أن نعبر بشكل واضح في القيم التي ترغب في ربط. وهذا يسمح لنا لتهيئة مجموعة من selObj في حلقة.

  selObj.onchange = وظيفة (ط) {
     عودة وظيفة () {
         . dynamicOptionListObjects [ط] تغيير (هذا)؛

     }؛
 } (dol.index)؛ 

انها ليست ابدا فكرة جيدة لوضع new مباشرة أمام function . على سبيل المثال، new function لا يقدم أي ميزة في بناء الكائنات الجديدة.

  myObj وظيفة جديدة = () {
     this.type = 'الأساسية'؛
 }؛ 

فمن الأفضل أن استخدام كائن الحرفي. هو أصغر وأسرع.

  myObj = {
     نوع: 'الأساسية'
 }؛ 

إذا نحن نبذل كائن يحتوي على الأساليب التي لا بد أن المتغيرات الخاصة وظائف، فإنه لا يزال من الأفضل ترك قبالة new البادئة.

  فار فو وظيفة جديدة = () {
     processMessages وظيفة (رسالة) {
         تنبيه ("نص الرسالة:" + message.content)؛
     }
     this.init = وظيفة () {
         الاشتراك ("/ mytopic"، هذا، processMessages)؛
     }
 } 

باستخدام new لاستدعاء وظيفة، الكائن يحمل قيمة لها في الصعود إلى prototype كائن. أن يهدر الذاكرة مع عدم وجود ميزة مقابلة. إذا كنا لا تستخدم new ، ونحن لا تبقي اهدر prototype الكائن في السلسلة. هكذا بدلا من ذلك سوف نقوم استدعاء الدالة مصنع في الطريق الصحيح، وذلك باستخدام () .

  فو فار = وظيفة () {
     processMessages وظيفة (رسالة) {
         تنبيه ("نص الرسالة:" + message.content)؛
     }
     عودة {
         الحرف الأول: وظيفة () {
             الاشتراك ("/ mytopic"، هذا، processMessages)؛
         }
     }؛
 } ()؛

وبالتالي فإن حكم بسيط: المرة الوحيدة التي ينبغي لنا أن نستخدم new المشغل استدعاء دالة منشئ pseudoclassical. عند استدعاء وظيفة البناء، واستخدام new إلزامي.

هناك وقت لل new ، والوقت ليست كذلك.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!