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

Pete LePage

نحن بصدد طرح الإصدار 77 من Chrome الآن.

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

سرعة عرض أكبر جزء من المحتوى على الصفحة

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

تُستخدَم واجهة برمجة التطبيقات Largest Contentful Paint API، المتوفّرة اعتبارًا من الإصدار 77 من Chrome، لتسجيل وقت عرض أكبر عنصر محتوى مرئي في إطار العرض، كما تتيح قياس وقت تحميل المحتوى الرئيسي للصفحة.

لقياس سرعة عرض أكبر جزء من المحتوى على الصفحة، عليك استخدام مراقب الأداء ، والبحث عن أحداث largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

بما أنّه غالبًا ما يتم تحميل الصفحة على مراحل، من المحتمل أن يتغيّر العنصر الأكثر حجمًا في الصفحة، لذا يجب الإبلاغ عن حدث largest-contentful-paint الأخير فقط لخدمة الإحصاءات.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

نشر "فيل" تدوينة رائعة حول سرعة عرض أكبر محتوى مرئي على web.dev.

إمكانات النماذج الجديدة

ينشئ العديد من المطوّرين عناصر تحكّم مخصّصة في النماذج، إما لتخصيص مظهر العناصر الحالية وأسلوبها، أو لإنشاء عناصر تحكّم جديدة غير مدمجة في browser. يتضمّن ذلك عادةً استخدام JavaScript وعناصر <input> المخفية، إلا أنّه ليس الحلّ المثالي.

أضافنا ميزتَين جديدتَين على الويب في الإصدار 77 من Chrome، ما يسهّل إنشاء عناصر تحكّم مخصّصة في النماذج ويزيل العديد من القيود الحالية.

الحدث formdata

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

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

عندما ينقر المستخدِم على زر الإرسال، يُشغِّل النموذج الحدث formdata، الذي يتضمّن عنصر FormData يحتوي على جميع البيانات التي يتم إرسالها. بعد ذلك، في معالِج حدث formdata، يمكنك تعديل formdata أو تغييره قبل إرساله.

العناصر المخصّصة المرتبطة بالنموذج

تساعد العناصر المخصّصة المرتبطة بالنموذج في سد الفجوة بين العناصر المخصّصة وعناصر التحكّم الأصلية. تؤدي إضافة سمة formAssociated ثابتة إلى توجيه المتصفّح لتعامل مع العنصر المخصّص مثل جميع عناصر النموذج الأخرى. يجب أيضًا إضافة السمات الشائعة المتوفّرة في عناصر الإدخال، مثل name وvalue وvalidity لضمان التوافق مع عناصر التحكّم الأصلية.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

يمكنك الاطّلاع على عناصر تحكّم أكثر فعالية في النماذج على web.dev للاطّلاع على كل التفاصيل.

التحميل الكسول الأصلي

لا أعلم كيف فاتتني ميزة "التحميل البطيء" الأصلية في الفيديو الأخير. إنه أمر مذهل للغاية، لذلك أقوم بتضمينه الآن. "التحميل البطيء" هو أسلوب يسمح لك بتأجيل تحميل الموارد غير المهمة، مثل <img> التي لا تظهر على الشاشة أو <iframe>، إلى أن تصبح مطلوبة، ما يؤدي إلى تحسين أداء صفحتك.

بدءًا من الإصدار 76 من Chrome، يتولى المتصفّح ميزة "التحميل البطيء" نيابةً عنك، بدون الحاجة إلى كتابة رمز مخصّص لميزة "التحميل البطيء" أو استخدام مكتبة JavaScript منفصلة.

لإعلام المتصفّح بأنّك تريد تحميل صورة أو إطار iframe بشكل بطيء، استخدِم سمة loading="lazy". يتم تحميل الصور وإطارات iframe "فوق مستوى الصفحة" بشكلٍ طبيعي. وبالنسبة إلى العناصر أدناه، لا يتم جلبها إلا عندما يمرر المستخدم بالقرب منها.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

يمكنك الاطّلاع على التحميل الكسول على مستوى المتصفّح للويب على web.dev للاطّلاع على التفاصيل.

قمة مطوّري برامج Chrome لعام 2019

ستُعقد قمة مطوّري البرامج في Chrome يومي 11 و12 تشرين الثاني (نوفمبر).

هذه فرصة رائعة للتعرّف على أحدث الأدوات والتحديثات التي ستتوفر لنظام الويب، والاطّلاع على آراء فريق Chrome الهندسي مباشرةً.

سيتم بث الحدث مباشرةً على قناتنا على YouTube، أو إذا أردت الحضور شخصيًا، يمكنك طلب دعوتك على الموقع الإلكتروني لجلسة قمة مطوّري Chrome لعام 2019.

وغير ذلك

هذه ليست سوى بعض التغييرات التي طرأت على Chrome 77 للمطوِّرين، وهناك الكثير من التغييرات الأخرى.

Contact Picker API هي واجهة برمجة تطبيقات جديدة ومتوفّرة كإصدار قيد الاختبار، وهي أداة اختيار جديدة عند الطلب تتيح للمستخدمين اختيار إدخال أو إدخالات من قائمة جهات الاتصال الخاصة بهم ومشاركة تفاصيل محدودة عن جهات الاتصال المحدّدة مع موقع إلكتروني.

وهناك وحدات قياس جديدة في واجهة برمجة التطبيقات intl.NumberFormat.

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

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

اشتراك

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

اسمي "بيت ليبيت"، وسأطلعك على الميزات الجديدة في Chrome فور طرح الإصدار 78.