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

Pete LePage

بدأنا بطرح الإصدار 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);

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

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

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

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

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

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

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

سبق أن تم طرح عناصر التحكّم الجديدة في النماذج في Microsoft Edge، وهي متاحة الآن في الإصدار 83 من Chrome. لمزيد من المعلومات، يُرجى الاطّلاع على تعديلات على عناصر التحكّم في النماذج وميزة "التركيز" في مدوّنة 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 مرحلة تجريبية جديدة في الإصدار 83 من Chrome مع إتاحة استخدام مصادر البيانات القابلة للكتابة، وإمكانية حفظ عناصر تحكم الملفات.

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)، اللذان يظلّان مهمّين للتتبّع والتحسين.

لمزيد من المعلومات، يمكنك الاطّلاع على مقالة تقديم Web Vitals: المقاييس الأساسية لموقع إلكتروني سليم في مدوّنة Chromium للاطّلاع على التفاصيل الكاملة.

والمزيد

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

مراجع إضافية

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

اشتراك

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

اسمي "بيت ليبيه"، وأحتاج إلى قصة شعر، ولكن بعد طرح الإصدار 84 من Chrome، سأتولى إبلاغك بالميزات الجديدة في Chrome.