الجيل التالي من الويب مع isInputPending

الجيل التالي من الويب مع isInputPending

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

هل يهم؟!

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

أولاً، يمكننا إكمال جميع الأعمال التي لدينا وإنجازها، ثم سنستمع إلى تفاعلات المستخدم (الأحداث)، والتي تمنع المستخدم من التفاعل مع الصفحة لثوانٍ (ربما أقل) أحيانًا، ولكنها لديه وقت تحميل سريع.

الطريقة الثانية هي الاستجابة السريعة، والتي قمنا بتقسيم الكود الخاص بنا إلى كتل وجدولتها / تشغيلها (شرح الجدولة). بعد الانتهاء من كل كتلة، نسمح للمتصفح للتحقق مما إذا كانت هناك فرصة لوجود أحداث للمستخدم / المتصفح للرد عليها؛ وبالتالي، يمكننا الاستجابة للمستخدم بشكل أسرع، ولكن سيكون لدينا وقت تحميل أبطأ، وهذا هو عدد الأطر / المكتبات التي تعمل.

الجيل التالي من الويب مع isInputPending
تحميل سريع أو استجابة سريعة عن طريق web.dev

isInputPending ()

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

الجيل التالي من الويب مع isInputPending

كيف يعمل isInputPending؟

لنقم بإنشاء مثال لنرى كيف يعمل ومتى سنستخدمه.

isInputPending هي أداة تجريبية، لذلك لا أوصي باستخدامها الآن، وفي المستقبل، ستساعد أطر العمل / جدولة المكتبات. لذلك فهي لحزم أكثر من الاستخدامات الشخصية / التجارية.

افترض أن لدينا وظيفة ضخمة لحساب دالة تسمى expensive، وسنقوم بتشغيلها دون كسر صفحة الويب.

function expensive() {
  /* Some expensive calculations */
}
function calculate() {
  if(navigator.scheduling.isInputPending()) {
    /* 
      if there's a pending input, yield to the browser, 
      cancel the operation, and put the function in another part of the event loop,
      to check and run it again if it's possible (if there's no pending input)
    */
    setTimeout(calculate, 0)
  }
  // if there's no pending input, run the expensive function
  expensive();
}
calculate();

هذا كل شيء عن isInputPending، وهذه هي الطريقة التي سنكون بها أكثر سرعة في المستقبل.

لمعرفة المزيد حول حلقة الحدث و zero delays setTimeout، تحقق من هذا.

Zero delay لا يعني التأخير الصفري في الواقع أن معاودة الاتصال ستنطلق بعد صفر مللي ثانية. استدعاء setTimeout مع تأخير قدره 0 (صفر) مللي ثانية لا ينفذ وظيفة رد الاتصال بعد الفاصل الزمني المحدد.

أتمنى أن تكون قد استمتعت بهذا المقال وتعلمت شيئًا جديدًا.

المصدر: Bugged🐞

محمدباقر عبيات

The one Who loves solving stuff and writing about them.

منشور ذات صلة
WordPress React 16 Minutes

كيفية استخدام WordPress React

جاسم ناظري

هناك العديد من الفوائد لاستخدام React لتطوير WordPress. بالنسبة للمبتدئين فهي صديقة للمبتدئين ويدعم الكثير من مزودي خدمات استضافة الويب استخدامها.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة