تقييد كبير لموقّتات JavaScript المتسلسلة التي تبدأ في الإصدار 88 من Chrome

Jake Archibald

سيجعل Chrome 88 (كانون الثاني (يناير) 2021) يحدّ بشكل كبير من موقّتات JavaScript المتسلسلة للصفحات المخفية وفقًا لشروط معيّنة. سيؤدي ذلك إلى تقليل استخدام وحدة المعالجة المركزية (CPU)، مما سيقلل أيضًا من استخدام البطارية. هناك بعض الحالات الهامشية التي سيغير فيها السلوك، ولكن غالبًا ما يتم استخدام الموقتات حيث تكون واجهة برمجة تطبيقات مختلفة أكثر كفاءة وأكثر موثوقية.

حسنًا، كانت هذه المصطلحات معقدة للغاية، وغامضة بعض الشيء. لنبدأ...

المصطلحات

الصفحات المخفية

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

موقّتات JavaScript

موقّتات استخدام JavaScript، وأعني بها setTimeout وsetInterval تتيحان لك تحديد موعد لمعاودة الاتصال في وقت ما في المستقبل. الموقتات مفيدة، ولا تختفي، ولكن في بعض الأحيان تُستخدَم لاستطلاع حالة الاستطلاع عندما يكون الحدث أكثر كفاءة وأكثر دقة.

الموقّتات التسلسلية

إذا تم استدعاء setTimeout في نفس مهمة استدعاء setTimeout، يكون الاستدعاء الثاني "سلسلة". مع استخدام السمة setInterval، يشكّل كل تكرار جزءًا من السلسلة. قد يكون من الأسهل فهم ذلك باستخدام التعليمات البرمجية:

let chainCount = 0;

setInterval(() => {
  chainCount++;
  console.log(`This is number ${chainCount} in the chain`);
}, 500);

الشرط الثانوي:

let chainCount = 0;

function setTimeoutChain() {
  setTimeout(() => {
    chainCount++;
    console.log(`This is number ${chainCount} in the chain`);
    setTimeoutChain();
  }, 500);
}

آلية عمل التقييد

يحدث التقييد على مراحل:

الحد الأدنى من التقييد

ويحدث ذلك للموقّتات المُجدوَلة عندما ينطبق أي من الحالات التالية:

• الصفحة مرئية.
• أحدثت الصفحة تشويشًا خلال آخر 30 ثانية. يمكن أن يكون هذا من أي من واجهات برمجة تطبيقات إنشاء الصوت، ولكن لا يهم المقطع الصوتي الصامت.

لا يتم تقييد الموقّت ما لم تكن المهلة المطلوبة أقل من 4 ملي ثانية، وكان عدد السلاسل 5 أو أكثر، وفي هذه الحالة يتم ضبط المهلة على 4 ملي ثانية. وهذا ليس بالأمر الجديد، فالمتصفحات تستخدم هذا الوضع لسنوات عديدة.

تقييد

ويحدث ذلك للموقّتات التي يتم جدولتها عندما لا ينطبق الحدّ الأدنى للتقييد، ويكون أي من الحالات التالية صحيحًا:

• عدد السلاسل أقل من 5.
• تم إخفاء الصفحة لمدة تقل عن 5 دقائق.
• خدمة WebRTC قيد الاستخدام. وعلى وجه التحديد، هناك سمة RTCPeerConnection مع علامة "مفتوحة" RTCDataChannel أو علامة "منشورة" MediaStreamTrack.

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

تقييد مكثف

تَمَامْ، آدِي الْبَيَانَاتِ الْجَدِيدَة فِي Chrome 88. ويحدث التقييد المكثف للموقتات التي تمت جدولتها عندما لا تنطبق أي من شروط الحد الأدنى للتقييد أو التقييد، وتكون جميع الشروط التالية صحيحة:

• تم إخفاء الصفحة لمدة تزيد عن 5 دقائق.
• عدد السلاسل هو 5 أو أكبر.
• ظلت الصفحة صامتة لمدة 30 ثانية على الأقل.
• خدمة WebRTC ليست قيد الاستخدام.

في هذه الحالة، سيتحقّق المتصفّح من الموقّتات في هذه المجموعة مرة كل دقيقة. كما هو الحال من قبل، يعني هذا أن المؤقتات سيتم تجميعها معًا في عمليات الفحص دقيقة بدقيقة.

الحلول البديلة

عادة ما يكون هناك بديل أفضل للموقّت، أو يمكن دمج الموقتات مع شيء آخر ليكون لطيفًا مع وحدات المعالجة المركزية وعمر البطارية.

الاقتراع في الولاية

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

إليك بعض الأمثلة:

• لمعرفة وقت إدخال عنصر في إطار العرض، استخدِم IntersectionObserver.
• إذا أردت معرفة وقت تغيُّر حجم العنصر، استخدِم ResizeObserver.
• إذا كنت تريد معرفة وقت تغيير نموذج العناصر في المستند (DOM)، استخدِم MutationObserver أو ربما طلبات معاودة الاتصال في مراحل نشاط العنصر المخصّص.
• بدلاً من استطلاع رأي الخادم، ننصحك باستخدام مآخذ الويب أو الأحداث التي يرسلها الخادم أو الرسائل الفورية أو جلب مجموعات البث.
• إذا أردت التفاعل مع تغييرات المرحلة في الصوت أو الفيديو، استخدِم أحداثًا مثل timeupdate وended أو requestVideoFrameCallback إذا أردت تنفيذ إجراء في كل لقطة.

هناك أيضًا مشغلات للإشعارات إذا كنت تريد عرض إشعار في وقت معين.

Animation

فالصور المتحركة عنصر مرئي، لذا يجب عدم استخدام وقت وحدة المعالجة المركزية (CPU) عندما تكون الصفحة مخفية.

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

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

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

function animationInterval(ms, signal, callback) {
  const start = document.timeline.currentTime;

  function frame(time) {
    if (signal.aborted) return;
    callback(time);
    scheduleFrame(time);
  }

  function scheduleFrame(time) {
    const elapsed = time - start;
    const roundedElapsed = Math.round(elapsed / ms) * ms;
    const targetNext = start + roundedElapsed + ms;
    const delay = targetNext - performance.now();
    setTimeout(() => requestAnimationFrame(frame), delay);
  }

  scheduleFrame(start);
}

الاستخدام:

const controller = new AbortController();

// Create an animation callback every second:
animationInterval(1000, controller.signal, time => {
  console.log('tick!', time);
});

// And stop it:
controller.abort();

الاختبار

سيتم تفعيل هذا التغيير لجميع مستخدمي Chrome في الإصدار 88 من متصفّح Chrome (كانون الثاني/يناير 2021). وهو مفعَّل حاليًا لـ 50% من مستخدمي الإصدارات التجريبية وإصدارات مطوّري البرامج من Chrome وإصدارات Canary. إذا كنت تريد اختباره، استخدِم علامة سطر الأوامر هذه عند إطلاق إصدار Chrome التجريبي أو إصدار مطوّري البرامج أو إصدار Canary:

--enable-features="IntensiveWakeUpThrottling:grace_period_seconds/10,OptOutZeroTimeoutTimersFromThrottling,AllowAggressiveThrottlingWithWebSocket"

تؤدي الوسيطة grace_period_seconds/10 إلى تقييد مكثف بعد 10 ثوانٍ من إخفاء الصفحة، بدلاً من 5 دقائق كاملة، ما يسهّل رؤية تأثير التقييد.

المستقبل

بما أنّ الموقتات هي مصدر الاستخدام المفرط لوحدة المعالجة المركزية (CPU)، سنواصل البحث في الطرق التي يمكننا من خلالها تقييد استخدامها بدون تعطيل محتوى الويب، وإلى جانب واجهات برمجة التطبيقات التي يمكننا إضافتها أو تغييرها لتلبية حالات الاستخدام. مع ذلك، لا أحتاج إلى استخدام ميزة "animationInterval" إلّا لاستخدام الصور المتحركة المنخفضة التردد الفعّالة. إذا كانت لديك أي أسئلة، يُرجى التواصل معي على Twitter.

صورة العنوان من قناة heather Zab المحتملة على قناة Un تحقق