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

Pete LePage

يتم الآن طرح الإصدار 77 من متصفِّح Chrome.

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

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

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

أكبر واجهة برمجة تطبيقات لعرض محتوى مرئي، المتاحة بدءًا من الإصدار 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.

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

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

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

حدث "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 منفصلة.

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

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

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

مؤتمر Chrome Dev Summit لعام 2019

سينعقد مؤتمر Chrome Dev Summit في 11 و12 تشرين الثاني (نوفمبر).

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

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

ومقاييس أخرى

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

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

وهناك وحدات قياس جديدة في intl.NumberFormat API.

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

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

اشتراك

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

اسمي بيت لي بيج، وبعد طرح الإصدار 78 من Chrome، سأكون على أتمّ استعداد لإطلاعك على آخر الأخبار في متصفِّح Chrome.