الميزات الجديدة في 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

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

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

وغير ذلك

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

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

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

اسمي بيت ليبيج، وبمجرد إطلاق Chrome 67، سأكون على أتم استعداد لنطلعك على الميزات الجديدة في متصفِّح Chrome.