الميزات الجديدة في Chrome 66

Pete LePage

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

وهناك الكثير غيرها.

اسمي بيت ليب. لنتعمق أكثر ونتعرّف على الميزات الجديدة للمطوّرين في Chrome 66.

هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ راجِع قائمة تغييرات مستودع مصادر Chromium.

نموذج عنصر مكتوب بلغة CSS

إذا سبق لك تعديل سمة CSS من خلال JavaScript، يعني ذلك أنّك استخدمت نموذج كائن CSS. لكنها تعرض كل شيء كسلسلة.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

لتحريك خاصية opacity، يجب تحويل السلسلة إلى رقم، ثم زيادة القيمة وتطبيق التغييرات. ليست مثالية تمامًا.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

مع نموذج كائن CSS الجديد، يتم عرض قيم CSS ككائنات JavaScript مكتوبة، ما يقضي على الكثير من المعالجة النوعية ويوفّر طريقة أكثر منطقية للعمل مع CSS.

بدلاً من استخدام السمة element.style، يمكنك الوصول إلى الأنماط من خلال السمة .attributeStyleMap أو السمة .styleMap. حيث تقوم بإرجاع كائن يشبه الخريطة يسهل قراءته أو تحديثه.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

مقارنةً بنموذج كائن CSS القديم، تُظهر مقاييس الأداء المبكرة تحسُّنًا بنسبة 30% في العمليات في الثانية الواحدة، وهو أمر مهم بشكل خاص للصور المتحركة في JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

نشر منير مشاركة رائعة تتضمن العديد من العروض التوضيحية والأمثلة في الشرح.

Async Clipboard API

const successful = document.execCommand('copy');

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

إنّ واجهة برمجة التطبيقات Async Clipboard API الجديدة هي بديل يعمل بشكل غير متزامن، وتتكامل مع واجهة برمجة التطبيقات الخاصة بالإذن لتقديم تجربة أفضل للمستخدمين.

يمكن نسخ النص إلى الحافظة عن طريق الاتصال بالرقم writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

بما أنّ واجهة برمجة التطبيقات هذه غير متزامنة، تعرض الدالة writeText() وعودًا سيتم حله أو رفضه بناءً على ما إذا تم نسخ النص الذي تم تمريره بنجاح أم لا.

وبالمثل، يمكن قراءة النص من الحافظة عن طريق استدعاء getText() وانتظار حل الوعد الذي تم إرجاعه مع النص.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

يمكنك الاطّلاع على مشاركة "جايسون" وعروضه التوضيحية في الشرح. ولديه أيضًا أمثلة تستخدم دوال async.

سياق جديد للوحة الرسم BitmapRenderer

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

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

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

بدءًا من Chrome 66، يتوفّر سياق جديد لعرض غير متزامن يسهِّل عرض عناصر ImageBitmap. والآن، يتم عرضها بكفاءة أكبر وبأقل قدر من الضعف من خلال العمل بشكل غير متزامن وتجنب تكرار الذاكرة.

لاستخدامه:

1. اتصل بـ createImageBitmap وسلِّمه صورة فقاعة لإنشاء الصورة.
2. الحصول على سياق bitmaprenderer من canvas
3. ثم انقل الصورة إلى الداخل.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

تم، تم عرض الصورة.

AudioWorklet

ميزة Worklets متاحة الآن تم شحن PaintWorklet في الإصدار 65 من Chrome، ونحن الآن بصدد تفعيل AudioWorklet تلقائيًا في Chrome 66. يمكن استخدام هذا النوع الجديد من Worklet لمعالجة الصوت في سلسلة التعليمات الصوتية المخصّصة، وذلك بدلاً من ScriptProcessorNode القديمة التي تم تشغيلها على سلسلة التعليمات الرئيسية. يعمل كل AudioWorklet بنطاق عمومي خاص به، ما يقلّل من وقت الاستجابة ويزيد من استقرار سرعة معالجة البيانات.

هناك بعض الأمثلة الشيقة من AudioWorklet على ميزات Google Chrome الاختبارية.

ومقاييس أخرى

هذه ليست سوى عدد قليل من التغييرات التي تم إجراؤها في Chrome 66 للمطورين، بالطبع، هناك الكثير غير ذلك.

• يمكن الآن استخدام السمة autocomplete في TextArea وSelect.
• سيتم تطبيق الإعداد autocapitalize على العنصر form على أي حقول نموذج فرعية، ما يؤدي إلى تحسين التوافق مع تنفيذ Safari للسمة autocapitalize.
• تتوفّر السمتان trimStart() وtrimEnd() الآن كطريقة مستندة إلى المعايير لإزالة المسافات البيضاء من السلاسل.

احرص على زيارة الجديد في أدوات مطوري البرامج في Chrome للتعرّف على الميزات الجديدة في "أدوات مطوري البرامج" في الإصدار Chrome 66. وإذا كنت مهتمًا بتطبيقات الويب التقدّمية، يمكنك الاطّلاع على سلسلة فيديوهات Roadshow الجديدة. انقر بعد ذلك على الزر اشتراك في قناتنا على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

اسمي بيت ليب، وبعد إصدار Chrome 67، سأكون على الفور لأخبرك - عما هو جديد في Chrome!