it-swarm.asia

الانتهاك استغرقت مهمة جافا سكريبت المستمرة تشغيل xx ms

لقد تلقيت هذا النوع من التحذير مؤخرًا ، وهذه هي المرة الأولى التي أحصل عليها:

[Violation] Long running JavaScript task took 234ms
[Violation] Forced reflow while executing JavaScript took 45ms

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

ملاحظات: في هذه الحالة ، يظهر التحذير فقط على الكروم. حاولت استخدام Edge ، ولم أحصل على أي تحذيرات مماثلة. لم أختبرها على موزيلا بعد.

تحديث: لقد تلقيت الخطأ من jquery.min.js قائلا:

[Violation] Handler took 231ms of runtime (50ms allowed)            jquery.min.js:2
226
procatmer

التحديث: أخفى Chrome 58+ ورسائل التصحيح الأخرى بشكل افتراضي. لعرضها ، انقر فوق السهم المجاور لـ "معلومات" وحدد "مطوّل".

التحديث 2: تشغيل Chrome 57 "إخفاء الانتهاكات" افتراضيًا. لإعادة تشغيلها ، تحتاج إلى تمكين عوامل التصفية وإلغاء تحديد مربع "إخفاء الانتهاكات".

فجأة يظهر عندما يشارك شخص آخر في المشروع

أعتقد أنه من المحتمل أن تكون قد قمت بتحديث Chrome 56. هذا التحذير هو ميزة جديدة رائعة (imo) - يرجى إيقافها فقط إذا كنت يائسًا وسيأخذ مقيمك علامات بعيدة عنك. المشاكل الأساسية موجودة في المتصفحات الأخرى ولكن المتصفحات لا تخبرك بوجود مشكلة. تذكرة Chromium موجودة هنا ، لكن لا يوجد أي نقاش مثير حولها: https://bugs.chromium.org/p/chromium/issues/detail؟id=662497

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

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

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

إذا كنت ترغب في الحصول على مزيد من التقدم ، فيمكنك أيضًا استخدام أداة إنشاء ملفات التعريف في Chrome: https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

أو استفد من مكتبة القياس مثل هذه المكتبة: https://benchmarkjs.com/

بمجرد العثور على بعض الرموز التي تستغرق وقتًا طويلاً (50ms هي عتبة Chrome) ، لديك خياران:

  1. قطع بعض/كل هذه المهمة التي قد تكون غير ضرورية
  2. معرفة كيفية القيام بنفس المهمة بشكل أسرع
  3. قسّم الكود إلى خطوات متعددة غير متزامنة

(1) و (2) قد يكون من الصعب أو المستحيل. ولكن في بعض الأحيان سهلة حقا وينبغي أن تكون المحاولات الأولى. إذا لزم الأمر ، ينبغي دائمًا القيام بذلك (3). للقيام بذلك ، سوف تستخدم شيء من هذا القبيل

setTimeout(functionToRunVerySoonButNotNow);

أو

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

يمكنك قراءة المزيد عن الطبيعة غير المتزامنة لجافا سكريبت هنا:

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

203
voltrevo

بعض الأفكار:

  • أزل نصف الكود الخاص بك (ربما عبر التعليق عليه).

    • هل ما زالت المشكلة قائمة؟ عظيم ، لقد ضاقت الاحتمالات! كرر.

    • هل المشكلة ليست هناك؟ حسنا ، انظر إلى النصف الذي علقت به!

  • هل تستخدم أي نظام للتحكم في الإصدار (على سبيل المثال ، Git)؟ إذا كان الأمر كذلك ، git checkout بعض أعمالك الحديثة. متى تم تقديم المشكلة؟ انظر إلى الالتزام لمعرفة الكود الذي تغير بالضبط عند وصول المشكلة لأول مرة.

26
therobinkim

في حالتي ، اكتشفت أن السبب في ذلك فعليًا هو رمز من ملحق (Adblock في حالتي).

من أجل تحديد مصدر المشكلة ، قم بتشغيل التطبيق الخاص بك ، وقم بتسجيله في علامة تبويب الأداء في Chrome.

هناك يمكنك التحقق من الوظائف المختلفة التي استغرقت وقتًا طويلاً للتشغيل. في حالتي ، كان الملف الذي تم تحميله بتحذيرات في وحدة التحكم من ملف تم تحميله بواسطة ملحق Adblock ، ولكن هذا قد يكون شيئًا آخر في حالتك.

تحقق من هذه الملفات وحاول تحديد ما إذا كان هذا هو رمز بعض الامتدادات أم لك.

8
Matt Leonowicz

ابحث في وحدة التحكم في Chrome أسفل علامة التبويب "الشبكة" وابحث عن البرامج النصية التي تستغرق وقتًا أطول للتحميل.

في حالتي ، كانت هناك مجموعة من [Angular تضاف على البرامج النصية التي أضفتها لكن لم أستخدمها بعد في التطبيق:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

كانت هذه هي ملفات JavaScript الوحيدة التي استغرقت وقتًا أطول للتحميل من الوقت الذي تم فيه تحديد الخطأ "مهمة الجري الطويل".

كل هذه الملفات تعمل على مواقع الويب الأخرى الخاصة بي دون أي أخطاء ، لكنني كنت أتلقى هذا الخطأ "مهمة طويلة المدى" على تطبيق ويب جديد بالكاد كان له أي وظائف. توقف الخطأ فور إزالته.

أفضل ما لدي هو أن هذه الإضافات (Angular) كانت تبحث بشكل متكرر في أقسام عميقة متزايدة من DOM بحثًا عن علامات البدء الخاصة بهم - لم يجدوا شيئًا ، وكان عليهم اجتياز DOM بأكملها قبل الخروج ، والتي استغرقت وقتًا أطول مما يتوقع Chrome - وبالتالي التحذير.

5
Jordan Reddick

يمكن أن يكون من Chrome 56 beta إذا كنت تستخدمه.

ولكنها ليست في سجل التغيير: https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html

يمكنك إخفاء ذلك في شريط تصفية وحدة التحكم باستخدام إخفاء الانتهاكات مربع الاختيار.

4
Bastien

لقد وجدت جذر هذه الرسالة في الكود الخاص بي. الوظيفة: البحث عن إخفاء/إظهار العقد (غير متصل). كان:

search.addEventListener('keyup', function() {
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            node.classList.remove('hidden');
        else
            node.classList.add('hidden');
});

في علامة تبويب الأداء (ملف التعريف):  Chromium performance profiler layour recalculation reflow

الآن:

search.addEventListener('keyup', function() {
    const nodesToHide = [];
    const nodesToShow = [];
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            nodesToShow.Push(node);
        else
            nodesToHide.Push(node);

    nodesToHide.forEach(node => node.classList.add('hidden'));
    nodesToShow.forEach(node => node.classList.remove('hidden'));
});

في علامة تبويب الأداء (ملف التعريف):  Chromium profiler dark

أشعر أن البحث الآن يعمل بشكل أسرع (229 عقدًا).

3
Vitaly Zdanevich

إذا كنت تستخدم chrome canary ، فما عليك سوى التحقق من خيار "إخفاء الانتهاكات" انظر هنا

3
zhaoming

لقد وجدت حلاً في شفرة المصدر Apache Cordova. أنها تنفذ مثل هذا:

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

تنفيذ بسيط ، ولكن بطريقة ذكية.

عبر Android 4.4 ، استخدم Promise. للمتصفحات القديمة ، استخدم setTimeout()


الاستعمال:

nextTick(function() {
  // your code
});

بعد إدراج رمز الخدعة هذا ، تختفي جميع رسائل التحذير.

3
wf9a5m75

يعد هذا خطأ انتهاك من Google Chrome يظهر عند تمكين مستوى التسجيل Verbose.

مثال على رسالة الخطأ:

 screenshot of the warning 

تفسير:

Reflow هو اسم عملية مستعرض الويب لإعادة حساب المواضع وهندستها من العناصر في المستند ، لغرض إعادة تقديم جزء أو كل المستند. نظرًا لأن reflow هي عملية حظر المستخدم في المستعرض ، فمن المفيد للمطورين فهم كيفية تحسين وقت إعادة التدفق وكذلك فهم تأثيرات خصائص المستند المختلفة (عمق DOM ، كفاءة قاعدة CSS ، أنواع مختلفة من تغييرات النمط) على إعادة التدفق زمن. في بعض الأحيان قد يتطلب إعادة تدفق عنصر واحد في المستند إعادة تدفق العناصر الأصل وأيًا من العناصر التي تتبعه.

المقال الأصلي: تقليل تدفق المتصفح بواسطة Lindsey Simon ، مطور UX ، المنشور على developers.google.com.

و هذا هو الرابط يمنحك Google Chrome في Profiler Performance ، في ملفات تعريف التخطيط (مناطق mauve) ، لمزيد من المعلومات حول التحذير.

0
brokenthorn

يحدث التدفق القسري غالبًا عندما يكون لديك وظيفة تسمى عدة مرات قبل انتهاء التنفيذ.

على سبيل المثال ، قد تواجهك مشكلة على الهاتف الذكي وليس على متصفح كلاسيكي.

أقترح استخدام setTimeout لحل المشكلة.

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

  1. قم بإيقاف تشغيل المكالمات 1 - 1 - 1 وإعادة تحميل الرمز لمعرفة ما إذا كان خطأ المنتج.
  2. إذا تسبب البرنامج النصي الثاني في الخطأ ، فاستخدم setTimeOut بناءً على مدة الانتهاك.
0
Cherif

1 حصلت على وحدة التحكم

2 انقر فوق أيقونة الفلتر بالقرب من (مربع "سجل الحفظ")

3 حدد "إخفاء الانتهاك" خانة اختيار


تصحيح

تمت إزالة هذه الميزة من Chrome 58

تغيير المنسدلة مستوى تسجيل الدخول إلى Verbose لرؤية الانتهاكات.

0
Sajan