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

بيت ليبيج

يبدأ طرح الإصدار 83 من Chrome على الإصدار الثابت الآن.

وفي ما يلي ما تحتاج إلى معرفته:

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

الأنواع الموثوق بها

تعتبر البرمجة النصية على مستوى المواقع الإلكترونية المستندة إلى نموذج العناصر في المستند (DOM) إحدى أكثر الثغرات الأمنية شيوعًا على الويب. قد يكون من السهل تقديم أحدهما إلى صفحتك عن طريق الخطأ. يمكن أن تساعد الأنواع الموثوق بها في منع هذه الأنواع من الثغرات، لأنها تتطلب منك معالجة البيانات قبل تمريرها إلى دالة من المحتمل أن تكون خطيرة.

لنفترض أن innerHTML على سبيل المثال، عند تشغيل "موثوق" (الأنواع الموثوق بها)، إذا حاولت تمرير سلسلة، لن ينجح مع الخطأ TypeError لأن المتصفح لا يعرف ما إذا كان يمكنه الوثوق في السلسلة.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

بدلاً من ذلك، أحتاج إما إلى استخدام دالة آمنة، مثل textContent، أو إدخال نوع موثوق به، أو إنشاء العنصر واستخدام appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

قبل تفعيل الأنواع الموثوق بها، عليك تحديد أي انتهاكات وإصلاحها باستخدام عنوان سياسة أمان المحتوى (CSP) report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

وبعد أن تنتهي من إعداد كل العناصر، يمكنك تشغيلها بشكل صحيح. يمكنك الاطّلاع على التفاصيل الكاملة في القسم منع الثغرات الأمنية في النصوص البرمجية للمواقع الإلكترونية المتقاطعة المستندة إلى DOM باستخدام الأنواع الموثوق بها على web.dev.

تعديلات على عناصر التحكّم في النموذج

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

قبل ذلك، يتم عرض التصميم التلقائي لعناصر التحكّم في النموذج.
بعد ذلك، تم تعديل تصميم عناصر التحكّم في النموذج.

لقد أعجبتُ حقًا بالعمل الذي تقوم به Microsoft لتحديث مظهر عناصر التحكم في النموذج. وبالإضافة إلى التصميم المرئي الأجمل، توفّر هذه الأجهزة دعمًا أفضل باللمس، وإمكانية وصول أفضل، بما في ذلك دعم محسّن للوحة المفاتيح.

سبق أن تم توفير عناصر التحكّم الجديدة في النموذج في Microsoft Edge، وهي متوفّرة الآن في Chrome 83. لمزيد من المعلومات، يمكنك الاطّلاع على تعديلات في عناصر التحكم في النماذج والتركيز في مدونة Chromium.

مرحلة التجربة والتقييم

قياس الذاكرة باستخدام "measureMemory()"

بدءًا من مرحلة التجربة والتقييم في Chrome 83، فإنّ performance.measureMemory() هي واجهة برمجة تطبيقات جديدة تتيح قياس استخدام الذاكرة في صفحتك ورصد حالات تسرُّب الذاكرة.

من السهل تقديم ميزة تسرُّب الذاكرة:

  • نسيان إلغاء تسجيل أداة معالجة الحدث
  • التقاط الكائنات من iframe
  • لا يتم إغلاق عامل
  • تجميع الكائنات في المصفوفات
  • وهكذا

يؤدي تسرُّب الذاكرة إلى ظهور صفحات بطيئة وانتفاخات للمستخدمين.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

يمكنك الاطّلاع على القسم مراقبة الاستخدام الإجمالي للذاكرة لصفحة الويب من خلال measureMemory() على web.dev للاطّلاع على جميع تفاصيل واجهة برمجة التطبيقات الجديدة.

تعديلات على Native File System API

بدأت Native File System API تجربة مصدر جديدة في Chrome 83 مع إتاحة ساحات المشاركات القابلة للكتابة عليها وإمكانية حفظ مؤشرات الملفات.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

تساعد ساحات المشاركات القابلة للكتابة على تسهيل الكتابة إلى الملف، ولأنه يكون عبارة عن مجموعة بث، يمكنك بسهولة توجيه الردود من ساحة مشاركات إلى أخرى.

يتيح لك حفظ أسماء الملفات في IndexedDB بتخزين الحالة أو تذكُّر الملفات التي كان المستخدم يعمل عليها. على سبيل المثال، احتفظ بقائمة بالملفات التي تم تعديلها مؤخرًا، وافتح آخر ملف كان المستخدم يعمل عليه، وهكذا.

لاستخدام هذه الميزات، ستحتاج إلى رمز مميّز جديد لمرحلة التجربة والتقييم، لذا يمكنك الاطّلاع على مقالتي المعدَّلة حول واجهة برمجة التطبيقات Native File System API: تبسيط الوصول إلى الملفات المحلية على web.dev مع تضمين كل التفاصيل وطريقة الحصول على الرمز المميّز الجديد لمرحلة التجربة والتقييم.

تجارب مرحلة واحدة أخرى

يُرجى الاطّلاع على قائمة كاملة بالميزات في مرحلة التجربة والتقييم.

سياسات جديدة مشتركة المصدر

تزيد بعض واجهات برمجة تطبيقات الويب من خطر الهجمات على القنوات الجانبية، مثل Spectre. للحدّ من هذه المخاطر، توفّر المتصفِّحات بيئة معزولة قائمة على الاشتراك تسمى بيئة معزولة من مصادر متعددة. تمنع الحالة المعزولة من مصادر متعددة أيضًا تعديلات document.domain. إنّ إمكانية تغيير document.domain تتيح التواصل بين المستندات المتوفّرة على الموقع الإلكتروني نفسه تُعد ثغرة في سياسة المصدر نفسه.

اطّلِع على مشاركة "إيجي" بعنوان جعل موقعك الإلكتروني معزولاً عن مصادر متعددة باستخدام COOP وCOEP للحصول على التفاصيل الكاملة.

مؤشرات أداء الويب

هناك العديد من الجوانب لقياس جودة تجربة المستخدم. على الرغم من أنّ بعض جوانب تجربة المستخدم مرتبطة بالموقع الإلكتروني والسياق، هناك مجموعة شائعة من الإشارات باسم "مؤشرات أداء الويب الأساسية" والتي تُعدّ أساسية لجميع تجارب الويب. وتشمل الاحتياجات الأساسية لتجربة المستخدم كلاً من تجربة التحميل والتفاعل والثبات البصري لمحتوى الصفحة، ويستند المحرّكان معًا إلى "مؤشرات أداء الويب الأساسية" لعام 2020.

تحقق كل هذه المقاييس نتائج مهمة تركز على المستخدم، وتكون قابلة للقياس ميدانيًا، ولها أدوات ومكافئات لمقاييس التشخيص في المختبر. على سبيل المثال، على الرغم من أنّ مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" هو مقياس "سرعة تحميل المحتوى على الصفحة"، فهو يعتمد أيضًا بشكل كبير على "سرعة عرض المحتوى على الصفحة" (FCP) و"سرعة عرض أول بايت" (TTFB)، واللذين يبقىان مهمين للمراقبة والتحسين.

للاطّلاع على مزيد من المعلومات، يمكنك الاطّلاع على التفاصيل الكاملة في مقالة لمحة عن "مؤشرات أداء الويب": المقاييس الأساسية لضمان سلامة الموقع الإلكتروني، وذلك على مدونة Chromium.

والمزيد

هل تشعر بالفضول حول ما سيأتي في المستقبل؟ يمكنك الاطّلاع على أداة Fugu API Tracker لمعرفة المزيد.

محتوى إضافي للقراءة

يتضمن هذا القسم فقط بعض النقاط المهمة. اطّلِع على الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 83 من Chrome.

اشتراك

إذا كنت تريد الاطّلاع على آخر الأخبار حول فيديوهاتنا، يمكنك الاشتراك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

اسمي بيت ليبيج، وأحتاج إلى قص شعر، ولكن ما إن يتم طرح الإصدار 84 من Chrome، سأكون هنا لإخبارك بالجديد في Chrome!