أفضل الممارسات للحصول على تطبيق ويب أسرع باستخدام HTML5

Paul Irish

مقدمة

ويهدف قدر كبير من HTML5 إلى توفير دعم المتصفح الأصلي للمكونات والتقنيات التي حققناها من خلال مكتبات JavaScript حتى الآن. عند استخدام هذه الميزات، يمكن أن ينتهي بها الأمر إلى تقديم تجربة أسرع للمستخدمين عند توفّرها. في هذا البرنامج التعليمي، لن ألخص الأبحاث الممتازة المتعلقة بالأداء والتي شاهدتها في موقع الأداء الاستثنائي من Yahoo أو مستندات سرعة الصفحة من Google، وموقع لنجعل الويب أسرع. بدلاً من ذلك، سأركز على كيف يمكن أن يؤدي استخدام HTML5 وCSS3 اليوم إلى جعل تطبيقات الويب أكثر استجابة.

النصيحة 1: استخدام مساحة تخزين الويب بدلاً من ملفات تعريف الارتباط

بينما تم استخدام ملفات تعريف الارتباط لتتبع بيانات المستخدم الفريدة لسنوات، إلا أن لها عيوب خطيرة. يتمثل العيب الأكبر في إضافة جميع بيانات ملفات تعريف الارتباط إلى كل عنوان طلب HTTP. يمكن أن يكون لذلك تأثير ملموس على وقت الاستجابة، خاصةً أثناء طلبات XHR. لذا، من أفضل الممارسات تقليل حجم ملفات تعريف الارتباط. في HTML5، يمكننا تقديم ما هو أفضل من ذلك: استخدام sessionStorage وlocalStorage بدلاً من ملفات تعريف الارتباط.

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

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

النصيحة 2: استخدام انتقالات CSS بدلاً من صور JavaScript المتحركة

تمنحك عمليات نقل CSS انتقالاً مرئيًا جذابًا بين حالتين. يمكن نقل معظم خصائص النمط، مثل التحكم في ظل النص أو الموضع أو الخلفية أو اللون. يمكنك استخدام الانتقالات إلى حالات أداة الاختيار الزائف، مثل :hover أو من نماذج HTML5 و:invalid و:valid (مثال مع حالات التحقّق من صحة النموذج). لكنها أكثر قوة بكثير ويمكن تشغيلها عند إضافة أي فئة إلى العنصر.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

من خلال إضافة الفئتين totheleft وtotheright المتاحتين في بعضهما، يمكنك تحريك المربع. قارن هذا الكمية من التعليمات البرمجية بشفرة مكتبة الصور المتحركة بلغة JavaScript. من الواضح أن عدد وحدات البايت التي يتم إرسالها إلى المتصفح يكون أقل بكثير عند استخدام الرسوم المتحركة المستندة إلى CSS. بالإضافة إلى ذلك، وباستخدام التسريع على مستوى وحدة معالجة الرسومات، ستكون هذه الانتقالات المرئية سلسة قدر الإمكان.

نصيحة 3: استخدام قواعد البيانات من جهة العميل بدلاً من جولات الذهاب والإياب للخادم

قاعدة بيانات SQL على الويب وIndexedDB تقدم قواعد البيانات إلى العميل. بدلاً من النمط الشائع لنشر البيانات على الخادم عبر XMLHttpRequest أو إرسال النموذج، يمكنك الاستفادة من قواعد البيانات هذه من جهة العميل. يعتبر خفض طلبات HTTP هدفًا أساسيًا لجميع مهندسي الأداء، ولذلك فإن استخدام هذه الطلبات كمخزن بيانات يمكن أن يوفر العديد من الرحلات عبر XHR أو إنشاء عمليات إرسال إلى الخادم مرة أخرى. يمكن استخدام الترميزَين localStorage وsessionStorage في بعض الحالات، مثل تسجيل مستوى تقدُّم عملية إرسال النموذج، وقد تبيّن أنّهما أسرع بشكل ملحوظ من واجهات برمجة تطبيقات قاعدة البيانات من جهة العميل. على سبيل المثال، إذا كان لديك مكوّن شبكة بيانات أو بريد وارد يحتوي على مئات الرسائل، سيوفّر لك تخزين البيانات محليًا في قاعدة بيانات جولات HTTP ذهابًا وإيابًا عندما يرغب المستخدم في البحث أو الفلترة أو الترتيب. يمكن تصفية قائمة الأصدقاء أو الإكمال التلقائي لإدخال النص عند كل ضغطة مفتاح، مما يوفر تجربة مستخدم أكثر استجابة.

النصيحة 4: تمنح تحسينات JavaScript مزايا كبيرة في الأداء

تمت إضافة العديد من الطرق الإضافية إلى النموذج الأوّلي للمصفوفة في الإصدار 1.6 من JavaScript. تتوفر هذه الميزة في معظم المتصفحات في الوقت الحالي، باستثناء IE. مثال:

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

في معظم الحالات، يؤدي استخدام هذه الطرق الأصلية إلى الحصول على سرعات أسرع بكثير من المعتاد في حلقة التكرار مثل: for (var i = 0, len = arr.length; i < len; i++). يحل تحليل JSON الأصلي (من خلال JSON.parse()) محل ملف json2.js الذي اعتدنا استخدامه لبعض الوقت. ويكون JSON الأصلي أسرع وأكثر أمانًا من استخدام نص برمجي خارجي وهو متوفّر حاليًا في IE8 وOpera 10.50 وFirefox 3.5 وSafari 4.0.3 وChrome. ومن الأمثلة الجيدة الأخرى على كون لغة String.trim الأصلية لا تقتصر على كونها أسرع من مكافئات JavaScript الطويلة، بل أيضًا من المحتمل أن تكون أكثر دقة. لا تكون أي من إضافات JavaScript هذه من الناحية الفنية بتنسيق HTML5، ولكنها تندرج ضمن مجموعة التكنولوجيات التي سيتم توفيرها مؤخرًا.

النصيحة 5: استخدم بيان ذاكرة التخزين المؤقت للمواقع الإلكترونية المباشرة، وليس فقط للتطبيقات المتوفّرة بلا إنترنت

قبل عامين، استخدمت Wordpress برنامج Google Currents لإضافة ميزة تسمى Wordpress Turbo. تم تخزين العديد من الموارد المستخدمة في لوحة المشرف محليًا بشكل أساسي، مما أدى إلى تسريع الوصول إلى الملفات إليها. يمكننا تكرار هذا السلوك مع ملف appCache (ذاكرة التخزين المؤقت للتطبيق) HTML5 وcache.manifest. تتمتع ذاكرة التخزين المؤقت للتطبيق بأفضلية طفيفة على إعداد عناوين Expires، ولأنك تنشئ ملفًا تعريفيًا يشير إلى الموارد الثابتة التي يمكن أن تكون قابلة للتخزين المؤقت، يمكن للمتصفحات تحسين ذلك بشكل كبير، وربما حتى تخزينها مؤقتًا قبل استخدامها. ضع في اعتبارك البنية الأساسية لموقعك على أنها نموذج. لديك بيانات ربما تتغير ولكن HTML عادة ما يظل متسقًا إلى حد كبير. باستخدام ذاكرة التخزين المؤقت للتطبيق، يمكنك التعامل مع HTML كسلسلة من النماذج الأولية، وتخزين الترميز مؤقتًا عبر cache.manifest، ثم إرسال JSON عبر السلك لتحديث المحتوى. ويشبه هذا النموذج إلى حد كبير ما يفعله تطبيق الأخبار الأصلي على iPhone أو Android.

النصيحة 6: تمكين تسريع الأجهزة لتحسين التجربة المرئية

في المتصفحات الرائدة، يمكن للعديد من العمليات المرئية الاستفادة من التسارع على مستوى وحدة معالجة الرسومات، والذي يمكن أن يجعل العمليات المرئية الديناميكية أكثر سلاسة. تم الإعلان عن ميزة "تسريع الأجهزة" في متصفّح Firefox Minefield وIE9، كما تم الإعلان عن إضافة ميزة التسريع على مستوى الأجهزة في Safari في الإصدار 5. (لقد وصلنا إلى Mobile Safari قبل ذلك بكثير). أضاف Chromium للتو عمليات تحويل ثلاثية الأبعاد وتسريع الأجهزة لنظام التشغيل Windows، مع إطلاق النظامين الأساسيين الآخرين قريبًا.

لا يبدأ تسريع وحدة معالجة الرسومات إلا في ظل مجموعة محدودة إلى حد ما من الشروط، ومع ذلك، فإن التحويلات ثلاثية الأبعاد ومعدلات التعتيم المتحركة هما أكثر الطرق شيوعًا لتحريك المفاتيح. هناك طريقة ابتكارية إلى حد ما ولكنها غير مزعجة لتفعيلها وهي:

.hwaccel {  -webkit-transform: translateZ(0); }

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

النصيحة 7: بالنسبة إلى العمليات التي تستهلك وحدة المعالجة المركزية (CPU)، يقدم عمال الويب

لدى موظفي الويب فائدتان مهمتان: 1) سرعة الاستجابة. 2) يظل المتصفح سريع الاستجابة أثناء استخدامهم لمهامك. ويمكنك إلقاء نظرة على عرض شرائح HTML5 المخصّص للعاملين. في ما يلي بعض الحالات المحتمَلة التي يمكنك فيها استخدام Web Workers:

• تنسيق نصي لمستند طويل
• تمييز البنية
• معالجة الصور
• تركيب الصور
• معالجة الصفائف الكبيرة

النصيحة 8: سمات نموذج HTML5 وأنواع الإدخال

يقدم HTML5 مجموعة جديدة من أنواع الإدخالات، من خلال ترقية مجموعة text وpassword وfile لتشمل search وtel وurl وemail وdatetime وdate وmonth وweek وtime وdatetime-local وnumber وrange وcolor. ويختلف دعم المتصفح لهذه الأدوات، حيث يتم تنفيذ Opera غالبًا في الوقت الحالي. من خلال اكتشاف الميزات، يمكنك تحديد ما إذا كان المتصفّح يتوافق مع النظام الأصلي (وسيوفّر واجهة مستخدم مثل منتقي التاريخ أو منتقي الألوان)، وإذا لم يكن كذلك، يمكنك مواصلة استخدام تطبيقات JavaScript المصغَّرة لتنفيذ هذه المهام الشائعة. بالإضافة إلى هذه الأنواع، تمت إضافة بعض الميزات المفيدة إلى حقول الإدخال العادية. يقدّم الإدخال placeholder نصًا تلقائيًا يتم محوه عند النقر عليه، وتركيز autofocus علامة الإقحام على تحميل الصفحة حتى تتمكّن من التفاعل على الفور مع ذلك الحقل. التحقق من صحة الإدخال هو شيء آخر يشق طريقه مع HTML5. تعني إضافة السمة required أنّ المتصفّح لن يسمح بإرسال النموذج إلى أن يتم ملء هذا الحقل. تتيح لك السمة pattern أيضًا تحديد تعبير عادي مخصَّص للإدخال الذي سيتم اختبار الإدخال بناءً عليه، ويؤدي استخدام قيم غير صالحة إلى حظر إرسال النموذج. تعتبر هذه البنية البيانية ترقية كبيرة ليس فقط من حيث سهولة قراءة المصدر، ولكن أيضًا انخفاض كبير في JavaScript ضروريًا. يمكنك أيضًا استخدام رصد الميزات لتوفير حلّ احتياطي في حال عدم توفّر دعم أصلي لهذه الميزات. يعني استخدام التطبيقات المصغّرة الأصلية هنا أنّك لست بحاجة إلى إرسال محتوى JavaScript وCSS المطلوب لاستخدام هذه الأدوات، ما يؤدي إلى تسريع تحميل الصفحة وتحسين استجابة التطبيقات المصغّرة على الأرجح. لتجربة بعض تحسينات الإدخال هذه، اطلع على عرض شرائح HTML5.

النصيحة التاسعة: استخدم تأثيرات CSS3 بدلاً من طلب تركيبات صور مدمجة ثقيلة

يوفر CSS3 العديد من إمكانيات التصميم الجديدة التي تحل محل استخدامنا للصور لتمثيل التصميم المرئي بدقة. ومن المفيد استبدال صورة بحجم 2 كيلوبايت و100 بايت من CSS بدلاً من ذلك، بالإضافة إلى إزالة طلب HTTP آخر. في ما يلي بعض السمات التي يجب معرفتها:

• التدرّجات الخطية والشعاعية
• نصف قطر الحدود للزوايا الدائرية
• إطار الصندوق للظلال الخلفية واللمعان
• نموذج أحمر أخضر أزرق لتعتيم ألفا
• عمليات التحويل من أجل التدوير
• أقنعة CSS

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

النصيحة 10: مآخذ WebSocket للتسليم بشكل أسرع وبمعدل نقل بيانات أقل من XHR

تم تصميم WebSockets استجابةً لتزايد رواج Comet. هناك مزايا فعلية لاستخدام WebSockets الآن، بدلاً من نموذج المذنب فوق نموذج XHR.

يتميز WebSockets بإطارات خفيفة للغاية، وبالتالي فإن معدل نقل البيانات الذي يستهلكه غالبًا ما يكون أفتح من XHR. تشير بعض التقارير إلى انخفاض بنسبة% 35 في وحدات البايت المرسَلة عبر السلك. بالإضافة إلى ذلك، يكون الفارق في الأداء أكبر عندما يتعلق الأمر بتسليم الرسائل، وقد تم تسجيل XHR في هذا الاختبار بمدة إجمالية تزيد عن WebSockets بنسبة 3500%. أخيرًا، درست Ericcson Labs أداء WebSockets ووجدت أنّ أوقات فحص الاتصال على HTTP كانت أكبر بـ 3 إلى 5 مرات مقارنةً بـ WebSockets بسبب توفّر متطلبات معالجة أكثر أهمية. وتوصلوا إلى أن بروتوكول WebSocket كان أكثر ملاءمة بشكل واضح لتطبيقات الوقت الفعلي.

مراجع إضافية

للحصول على اقتراحات بشأن القياس والأداء، من المفترض أن تستخدم بالتأكيد إضافتَي سرعة الصفحة وYSlow في Firefox. بالإضافة إلى ذلك، يوفّر Speed Tracer for Chrome وDynaTrace Ajax for IE مستوى أكثر تفصيلاً لتسجيل التحليل.