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

Paul Irish

مقدمة

يهدف الكثير من HTML5 إلى توفير دعم للمتصفّح الأصلي للمكونات والأساليب التي حقّقناها من خلال مكتبات JavaScript حتى الآن. يمكن أن يؤدي استخدام هذه الميزات، عند توفّرها، إلى تقديم تجربة أسرع بكثير للمستخدمين. في هذا الدليل التعليمي، لن ألخّص لك أبحاث الأداء الممتازة التي اطّلعت عليها في موقع Yahoo الإلكتروني المخصّص للأداء الاستثنائي أو مستندات سرعة الصفحة وموقع Let's make the web faster الإلكتروني من 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 مزايا كبيرة في الأداء

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

// 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 العادية، مثل: 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 Gears لإضافة ميزة تُعرف باسم Wordpress Turbo. وقد خزّن هذا الإصدار مؤقتًا العديد من الموارد المستخدَمة في لوحة المشرف على الجهاز، ما أدّى إلى تسريع الوصول إلى الملفات. يمكننا تكرار هذا السلوك باستخدام applicationCache في HTML5 وcache.manifest. تتمتع ذاكرة التخزين المؤقت للتطبيق بميزة طفيفة مقارنةً بإعداد رؤوس Expires، لأنّك تنشئ ملفًا توضيحيًا يشير إلى الموارد الثابتة التي يمكن تخزينها مؤقتًا، ويمكن للمتصفّحات تحسين ذلك بشكل كبير، وقد تخزّنها مؤقتًا قبل استخدامها. يمكنك اعتبار البنية الأساسية لموقعك الإلكتروني نموذجًا. لديك بيانات قد تتغيّر، ولكن يظل رمز HTML المحيط بها ثابتًا في العادة. باستخدام ذاكرة التخزين المؤقت للتطبيق، يمكنك التعامل مع ملف HTML كسلسلة من النماذج الخالصة، وتخزين العلامات مؤقتًا من خلال ملف cache.manifest، ثم إرسال ملف JSON عبر الإنترنت لتعديل المحتوى. يشبه هذا النموذج إلى حد كبير ما يفعله تطبيق الأخبار الأصلي على أجهزة iPhone أو Android.

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

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

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

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

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

النصيحة 7: بالنسبة إلى العمليات التي تستهلك الكثير من وحدة المعالجة المركزية، توفّر Web Workers

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

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

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

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

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

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

• التدرّجات الخطية والشعاعية
• Border-radius للزوايا المستديرة
• Box-shadow لتأثيرات التظليل والتوهج
• RGBA للتعتيم
• عمليات التحويل للدوران
• أقنعة CSS

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

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

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

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

موارد إضافية

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