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

Pete LePage

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

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

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

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

هجمات النصوص البرمجية عبر المواقع الإلكترونية المستندة إلى نموذج العناصر في المستند (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()

اعتبارًا من مرحلة التجربة والتقييم في الإصدار 83 من Chrome، أصبحت 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. للتخفيف من هذا الخطر، تقدّم المتصفّحات بيئة معزولة تستند إلى الموافقة تُعرف باسم "البيئة التي تحظر الوصول من نطاقات أخرى". تمنع الحالة "مستند خاضع لإجراء عزل عناوين URL التابعة للنطاق نفسه" أيضًا تعديلات document.domain. إنّ إمكانية تغيير document.domain تسمح بالتواصل بين المستندات على الموقع الإلكتروني نفسه، وقد تم اعتبارها ثغرة في سياسة المصدر نفسه.

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

المؤشرات الحيوية للويب

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

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

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

والمزيد

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

مراجع إضافية

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

اشتراك

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

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