उल्लंघन लंबे समय तक चलने वाले जावास्क्रिप्ट कार्य ने xx ms लिया

330

हाल ही में, मुझे इस तरह की चेतावनी मिली है, और यह पहली बार हो रहा है:

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

मैं एक समूह परियोजना पर काम कर रहा हूं और मुझे नहीं पता कि यह कहां से आ रहा है। यह पहले कभी नहीं हुआ। अचानक, यह तब दिखाई दिया जब कोई और परियोजना में शामिल हो गया। मुझे कैसे पता चलेगा कि कौन सी फ़ाइल / फ़ंक्शन इस चेतावनी का कारण बनता है? मैं जवाब की तलाश में हूं, लेकिन ज्यादातर इसे हल करने के तरीके के बारे में। मैं इसे हल नहीं कर सकता अगर मुझे समस्या का स्रोत भी नहीं मिल रहा है।

इस मामले में, चेतावनी केवल क्रोम पर दिखाई देती है। मैंने एज का उपयोग करने की कोशिश की, लेकिन मुझे कोई समान चेतावनी नहीं मिली, और मैंने अभी तक फ़ायरफ़ॉक्स पर इसका परीक्षण नहीं किया है।

मैं भी त्रुटि से मिलता है jquery.min.js:

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

javascript google-chrome dom

— procatmer
स्रोत

आप इस चेतावनी को कहां देखते हैं? आप यह नहीं कहते कि आप किस वातावरण में काम कर रहे हैं। कुछ ब्राउज़र को मान लें, लेकिन कौन सा आदि?

— सामी कुहोमेन

3

@SamiKuhmonen इसके लिए क्षमा करें, मैंने अपना प्रश्न अपडेट कर लिया है। मैंने क्रोम का इस्तेमाल किया। मुझे एज पर कोई समान त्रुटि नहीं मिली।

— procatmer

8

मैं सिर्फ यह चेतावनी जोड़ना चाहता था कि 2016 के अंत में पेश किया गया यह चेतावनी संदेश, क्रोम में आपके द्वारा इंस्टॉल किए गए किसी एक्सटेंशन के कारण भी दिखाई दे सकता है। निजी मोड में परीक्षण करके इसके लिए जाँच करना आसान है।

— फेर

1

दाईं ओर की लिंक पर क्लिक करने से, आपको संकेत मिलता है कि स्क्रिप्ट जहां उल्लंघन होती है, आपको कोड में उस स्थान पर लाएगी जहां यह होता है।

— नीलापन

मैं Ionic 4 (Angular 8) का उपयोग कर रहा हूं, मेरा कोड ठीक काम कर रहा था, अचानक इस तरह का उल्लंघन होने लगा - अब मेरी सूची में कोई डेटा नहीं दिखा रहा है?

— कपिल रघुवंशी

278

अपडेट : Chrome 58+ ने इन और अन्य डीबग संदेशों को डिफ़ॉल्ट रूप से छिपाया। उन्हें प्रदर्शित करने के लिए 'जानकारी' के बगल वाले तीर पर क्लिक करें और 'वर्बोज़' चुनें।

Chrome 57 डिफ़ॉल्ट रूप से 'छिपाने के उल्लंघन' पर बदल गया। उन्हें वापस चालू करने के लिए आपको फ़िल्टर सक्षम करने और 'छिपाने के उल्लंघन' बॉक्स को अनचेक करने की आवश्यकता है।

अचानक यह तब प्रकट होता है जब कोई अन्य परियोजना में शामिल होता है

मुझे लगता है कि यह अधिक संभावना है कि आपने Chrome 56 को अपडेट किया है। यह चेतावनी एक अद्भुत नई सुविधा है, मेरी राय में, कृपया इसे बंद कर दें यदि आप हताश हैं और आपका मूल्यांकनकर्ता आपसे दूर हो जाएगा। अन्य ब्राउज़र में अंतर्निहित समस्याएँ हैं, लेकिन ब्राउज़र आपको यह नहीं बता रहे हैं कि वहाँ कोई समस्या है। क्रोमियम टिकट यहाँ है, लेकिन वास्तव में इस पर कोई दिलचस्प चर्चा नहीं है।

ये संदेश त्रुटियों के बजाय चेतावनी हैं क्योंकि यह वास्तव में बड़ी समस्याओं का कारण नहीं है। यह फ्रेम को गिराए जाने का कारण बन सकता है या अन्यथा कम चिकनी अनुभव का कारण बन सकता है।

हालांकि वे आपके आवेदन की गुणवत्ता में सुधार करने के लिए जांच और फिक्सिंग के लायक हैं। ऐसा करने का तरीका यह है कि संदेश किन परिस्थितियों में दिखाई देते हैं और इस मुद्दे को कम करने के लिए प्रदर्शन परीक्षण कर रहे हैं। प्रदर्शन परीक्षण शुरू करने का सबसे सरल तरीका कुछ कोड सम्मिलित करना है:

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

    // Do the normal stuff for this function

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

यदि आप अधिक उन्नत प्राप्त करना चाहते हैं, तो आप क्रोम के प्रोफाइलर का उपयोग भी कर सकते हैं , या इस तरह की बेंचमार्किंग लाइब्रेरी का उपयोग कर सकते हैं ।

एक बार जब आपको कुछ ऐसा कोड मिल जाता है, जिसमें लंबा समय लगता है (50ms क्रोम की सीमा है), तो आपके पास कुछ विकल्प हैं:

उस कार्य के कुछ / सभी को काट दें जो अनावश्यक हो सकता है
उसी कार्य को तेजी से करने का तरीका जानें
कोड को कई अतुल्यकालिक चरणों में विभाजित करें

(1) और (2) मुश्किल या असंभव हो सकता है, लेकिन यह कभी-कभी वास्तव में आसान होता है और आपके पहले प्रयास होने चाहिए। यदि आवश्यक हो, तो ऐसा करना हमेशा संभव होना चाहिए (3)। ऐसा करने के लिए आप कुछ का उपयोग करेंगे:

setTimeout(functionToRunVerySoonButNotNow);

या

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

आप यहां जावास्क्रिप्ट की अतुल्यकालिक प्रकृति के बारे में अधिक पढ़ सकते हैं ।

— voltrevo
स्रोत

16

उपयोग करने के बजाय, केवल एक सुझाव, performance.now()आप उपयोग कर सकते हैं console.time( developer.mozilla.org/en-US/docs/Web/API/Console/time ) console.time('UniquetLabelName') ....code here.... console.timeEnd('UniqueLabelName')

— denislexic

@ मुझे अचानक ऐसा लगता है। मुझे यकीन नहीं है कि क्या मूल्य है जो वास्तव में जोड़ता है। मेरा तर्क है कि वर्तमान समय और उस पर निर्माण के अंतर्निहित संचालन के बारे में सीखना अधिक मूल्यवान है।

— वॉल्ट्रेवो

34

शानदार जवाब, वाल्ट्रेवो! मेरा सवाल है, अगर इस तरह का कोड उल्लंघन है, तो वास्तव में इसका उल्लंघन क्या है? Google को लागू करने के लिए किसी प्रकार का मानक होना चाहिए, लेकिन क्या वह मानक कहीं सार्वजनिक रूप से प्रलेखित है?

— बंगलर

1

@ बंगलर डननो, मैं यह जानना चाहूंगा कि क्या कुछ दिशानिर्देश है जो इसे भी संदर्भित कर रहा है।

— वॉल्ट्रेवो

3

@ बंगलर मैं केवल अनुमान लगा सकता हूं कि यह कह रहा है कि जो कोड एनिमेट कर रहा है वह कम से कम 60 फ्रेम प्रति सेकंड प्रदान करने और इसलिए खराब उपयोगकर्ता अनुभव देने के उल्लंघन में है। ।

— user895400

90

जैसा कि सभी ने बताया कि ये केवल चेतावनी हैं। हालांकि, यदि आप इन (जो आपको चाहिए) को हल करने के लिए उत्सुक हैं, तो आपको यह पहचानने की आवश्यकता है कि पहले चेतावनी का क्या कारण है। ऐसा कोई कारण नहीं है जिसके कारण आपको बल रिफ्लो चेतावनी मिल सके। किसी ने कुछ संभावित विकल्पों के लिए एक सूची बनाई है । अधिक जानकारी के लिए आप चर्चा का अनुसरण कर सकते हैं।
यहाँ संभावित कारणों का सार है:

क्या लेआउट / reflow मजबूर करता है

नीचे दिए गए सभी गुण या विधियाँ, जब जावास्क्रिप्ट में अनुरोध / कॉल की जाती हैं, तो शैली और लेआउट की गणना करने के लिए ब्राउज़र को ट्रिगर किया जाएगा *। इसे रिफ्लो या लेआउट थ्रशिंग भी कहा जाता है , और सामान्य प्रदर्शन अड़चन है।

तत्त्व
बॉक्स मेट्रिक्स

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,elem.offsetParent

elem.clientLeft, elem.clientTop, elem.clientWidth,elem.clientHeight

elem.getClientRects(), elem.getBoundingClientRect()

स्क्रॉल सामग्री

elem.scrollBy(), elem.scrollTo()

elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()

elem.scrollWidth, elem.scrollHeight

elem.scrollLeft, elem.scrollTopउन्हें स्थापित करना

फोकस

elem.focus() एक डबल मजबूर लेआउट ( स्रोत ) को ट्रिगर कर सकता है

इसके अलावा ...

elem.computedRole, elem.computedName

elem.innerText( स्रोत )

getComputedStyle

window.getComputedStyle()आम तौर पर शैली पुनर्गणना को बल देगा ( स्रोत )

window.getComputedStyle() यदि कोई भी सत्य है तो लेआउट को भी बाध्य करेगा:

तत्व एक छाया पेड़ में है

मीडिया क्वेरीज़ (व्यूपोर्ट से संबंधित) हैं। विशेष रूप से, निम्न में से एक: ( स्रोत ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio

device-pixel-ratio, resolution,orientation

अनुरोध की गई संपत्ति निम्नलिखित में से एक है: ( स्रोत )

height, width * top, right, bottom, left * margin[ -top, -right, -bottom, -left, या आशुलिपि ] केवल तभी मार्जिन तय हो गई है। * padding[ -top, -right, -bottom, -left, या आशुलिपि ] ही अगर गद्दी तय हो गई है। * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx,ry

खिड़की

window.scrollX, window.scrollY

window.innerHeight, window.innerWidth

window.getMatchedCSSRules() केवल शैली को मजबूर करता है

फार्म

inputElem.focus()

inputElem.select(), textareaElem.select()( स्रोत )

माउस घटनाओं

mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY ( स्रोत )

दस्तावेज़

doc.scrollingElement केवल शैली को मजबूर करता है

रेंज

range.getClientRects(), range.getBoundingClientRect()

एसवीजी

काफी; एक संपूर्ण सूची नहीं बनाई गई है, लेकिन टोनी जेंटिलकोर की 2011 लेआउट ट्रिग्गरिंग सूची ने कुछ को इंगित किया है।

contenteditable

बहुत सारे और बहुत सारे सामान,… जिसमें एक छवि को क्लिपबोर्ड पर कॉपी करना ( स्रोत )

यहां और देखें ।

इसके अलावा, यहां मूल मुद्दे से क्रोमियम स्रोत कोड और चेतावनियों के लिए प्रदर्शन API के बारे में चर्चा है ।

संपादित करें: Google द्वारा पेजस्पीड इनसाइट पर लेआउट रिफ्लो को कम करने के तरीके पर एक लेख भी है । यह बताता है कि ब्राउज़र रिफ्लो क्या है:

दस्तावेज़ के पुन: रेंडरिंग भाग या दस्तावेज़ के उद्देश्य के लिए दस्तावेज़ में तत्वों की स्थिति और ज्यामिति को फिर से गणना करने के लिए रीफ़्लो वेब ब्राउज़र प्रक्रिया का नाम है। क्योंकि reflow ब्राउज़र में एक उपयोगकर्ता-अवरुद्ध ऑपरेशन है, इसलिए यह समझने के लिए डेवलपर्स के लिए उपयोगी है कि कैसे reflow समय में सुधार किया जाए और साथ ही Reflow पर विभिन्न दस्तावेज़ गुणों (DOM गहराई, CSS नियम दक्षता, विभिन्न प्रकार के शैली परिवर्तन) के प्रभावों को भी समझा जाए। समय। कभी-कभी दस्तावेज़ में किसी एक तत्व को फिर से भरने के लिए उसके मूल तत्वों को फिर से भरने की आवश्यकता हो सकती है और साथ ही किसी भी ऐसे तत्व की भी जो इसका पालन करते हैं।

इसके अलावा, यह बताता है कि इसे कैसे कम किया जाए:

अनावश्यक DOM की गहराई कम करें। DOM ट्री में एक स्तर पर परिवर्तन पेड़ के हर स्तर पर परिवर्तन का कारण बन सकता है - सभी तरह से जड़ तक, और सभी तरह से संशोधित नोड के बच्चों में। इससे रिफ्लेक्ट करने में अधिक समय लगता है।

CSS नियमों को कम से कम करें, और अप्रयुक्त CSS नियमों को हटा दें।

यदि आप जटिल प्रतिपादन परिवर्तन करते हैं जैसे कि एनिमेशन, तो प्रवाह से बाहर करें। इसे पूरा करने के लिए स्थिति-निरपेक्ष या स्थिति-निश्चित का उपयोग करें।

अनावश्यक जटिल सीएसएस चयनकर्ताओं से बचें - विशेष रूप से वंशज चयनकर्ता - जिन्हें चयनकर्ता मिलान करने के लिए अधिक सीपीयू शक्ति की आवश्यकता होती है।

— अनाडी
स्रोत

1

अधिक पृष्ठभूमि: मूल मुद्दे से क्रोमियम स्रोत कोड और चेतावनी के लिए प्रदर्शन API के बारे में चर्चा ।

— रोबोकट

1

उपर्युक्त के अनुसार, बस पढ़ने के element.scrollTop एक reflow को ट्रिगर करता है। यह मुझे एक सहज ज्ञान युक्त घटना के रूप में प्रभावित करता है। मैं समझ सकता हूँ कि सेटिंग क्यों कर रही है ।scrollTop एक रिफ्लो को ट्रिगर करेगा, लेकिन बस इसके मूल्य को पढ़ रहा है? क्या कोई आगे बता सकता है कि यह मामला क्यों है, अगर वास्तव में यह मामला है?

— डेविड एडवर्ड्स

29

विचारों की एक जोड़ी:

अपना आधा कोड निकालें (शायद इसे टिप्पणी के माध्यम से)।
- क्या अब भी समस्या है? महान, आप संभावनाओं को कम कर चुके हैं! दोहराएँ।
- क्या समस्या नहीं है? ठीक है, आपने जो आधा टिप्पणी की, उसे देखिए!
क्या आप किसी भी संस्करण नियंत्रण प्रणाली (जैसे, गिट) का उपयोग कर रहे हैं? यदि हां, तो git checkoutआपके कुछ और हालिया काम हैं। समस्या कब पेश की गई थी? जब समस्या पहली बार आई तो कोड क्या बदला, यह देखने के लिए प्रतिबद्ध देखें।

— therobinkim
स्रोत

आपके उत्तर के लिए धन्यवाद। मैं आधा निकाल दिया और यहां तक कि मेरे मुख्य .js फ़ाइल को परियोजना से बाहर कर दिया। किसी तरह त्रुटि अभी भी हुई। यही कारण है कि मैं इसके बारे में बहुत निराश हूँ। और हाँ, मैं git का उपयोग कर रहा हूँ। मुझे आज ही इस त्रुटि का एहसास हुआ। समूह परियोजना बन जाने के बाद से बहुत सारे कमिटमेंट हुए हैं। एक गहरी जाँच कर सकते हैं। विचारों के लिए फिर से धन्यवाद।

— procatmer

gpro कमिट ढूँढने के साथ @procatmer उसी रणनीति का उपयोग करते हैं। उदाहरण के लिए, यदि मेरे पास 10 कमिट्स (ए, बी, सी, डी, ई, एफ, जी, एच, आई, जे) हैं जहां ए सबसे पुराना था, तो मैं git checkout Eदेख सकता हूं कि क्या समस्या पहले से मौजूद है। यदि हाँ, तो मैं पहली छमाही में समस्या की तलाश जारी रखूंगा। अन्यथा, मैं दूसरी छमाही में समस्या की तलाश करता हूं।

— थेरोबिन्किम

1

@procatmer इसके अलावा, यदि आपने अपनी मुख्य .jsफ़ाइल को छोड़ दिया है और समस्या बनी रहती है ... यह एक पुस्तकालय हो सकता है जिसे आप एक <script src="...">टैग के माध्यम से लाए हैं ! शायद कुछ के बारे में चिंता करने लायक नहीं है (खासकर जब से यह सिर्फ एक चेतावनी है)?

— थेरोबिन्किम

1

मैं अंत में पाया है जहां समस्या है। मैंने परिवर्तनों को ट्रैक करने के लिए आपके दूसरे विचार का उपयोग किया। और हाँ, समस्या एक बाहरी .jsफ़ाइल से आती है । जाहिर है, यह मायने रखता है। यह मेरी साइट को काफी महत्वपूर्ण बनाता है। वैसे भी, आपके उत्तर और विचारों के लिए फिर से धन्यवाद।

— प्रात:

2

द्विआधारी खोज को लागू करने के लिए आप गिट बाइसक्ट का उपयोग कर सकते हैं। मुझे लगता है कि यह बग खोजने के उद्देश्य से है।

— पीटरोविस्मारा

12

समस्या के स्रोत की पहचान करने के लिए, अपना एप्लिकेशन चलाएं और इसे Chrome के प्रदर्शन टैब में रिकॉर्ड करें ।

वहां आप विभिन्न कार्यों की जांच कर सकते हैं जिन्हें चलाने में लंबा समय लगा। मेरे मामले में, कंसोल में चेतावनियों के साथ सहसंबद्ध जो एक फ़ाइल से था जिसे AdBlock एक्सटेंशन द्वारा लोड किया गया था, लेकिन यह आपके मामले में कुछ और हो सकता है।

इन फ़ाइलों की जाँच करें और यह पता लगाने की कोशिश करें कि यह कुछ एक्सटेंशन का कोड है या आपका। (यदि यह आपका है, तो आपको अपनी समस्या का स्रोत मिल गया है।)

— मैट लियोनोविच
स्रोत

नहीं, मेरे पास AdBlock नहीं है और मैं अभी भी कंसोल में हूं।

— निकोला स्टोजाकोविक

प्रदर्शन टैब के साथ इसका विश्लेषण करने का प्रयास करें, और लंबे समय तक चलने वाले कार्यों के स्रोत की तलाश करें। यह कुछ भी हो सकता है, लेकिन यह मुद्दे के स्रोत की पहचान करने का एक संभावित तरीका है।

— मैट लियोनोविच

6

नेटवर्क टैब के तहत क्रोम कंसोल में देखें और उन लिपियों को खोजें, जिन्हें लोड करने में सबसे लंबा समय लगता है।

मेरे मामले में मेरे द्वारा शामिल किए गए स्क्रिप्ट पर कोणीय जोड़ का एक सेट था, लेकिन अभी तक ऐप में उपयोग नहीं किया गया है:

<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>

ये केवल जावास्क्रिप्ट फाइलें थीं जो उस समय की तुलना में लोड होने में अधिक समय लेती थीं जो "लॉन्ग रनिंग टास्क" त्रुटि निर्दिष्ट करती थी।

ये सभी फाइलें मेरी अन्य वेबसाइटों पर बिना किसी त्रुटि के चलती हैं, लेकिन मुझे यह "लॉन्ग रनिंग टास्क" त्रुटि एक नए वेब ऐप पर मिल रही थी जिसमें मुश्किल से कोई कार्यक्षमता थी। हटाने पर त्रुटि तुरंत बंद हो गई।

मेरा सबसे अच्छा अनुमान है कि ये एंगुलर ऐड ऑन अपने शुरुआती टैग्स के लिए DOM के तेजी से गहरे खंडों में पुनर्संरचना देख रहे थे - कोई भी नहीं ढूंढने पर, उन्हें बाहर निकलने से पहले पूरे DOM को पीछे करना पड़ा, जो कि क्रोम एक्सपेक्ट्स की तुलना में अधिक समय तक रहा - इस प्रकार चेतावनी।

— जॉर्डन रेडिक
स्रोत

6

मुझे अपने कोड में इस संदेश की जड़ मिली, जिसने नोड्स (ऑफ़लाइन) को खोजा और छिपाया या दिखाया। यह मेरा कोड था:

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');
});

प्रदर्शन टैब (प्रोफाइलर) ईवेंट को लगभग 60 एमएस में दिखाता है: क्रोमियम प्रदर्शन प्रोफाइलर लेआउट पुनर्गणना 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'));
});

प्रदर्शन टैब (प्रोफाइलर) अब ईवेंट को 1 ms के बारे में दिखाता है: क्रोमियम प्रोफाइलर डार्क

और मुझे लगता है कि खोज अब और तेजी से काम करती है (229 नोड्स)।

— विटाली ज़डनेविच
स्रोत

3

सारांश में, उल्लंघन प्राप्त करके, आप अपने कोड को अनुकूलित करने में सक्षम थे, और यह अब बेहतर प्रदर्शन करता है।

— उपयोगकर्ता जो

3

मुझे अपाचे कॉर्डोवा स्रोत कोड में एक समाधान मिला। वे इस तरह से लागू होते हैं:

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
});

इस ट्रिक कोड को डालने के बाद, सभी चेतावनी संदेश चले गए हैं।

— wf9a5m75
स्रोत

3

यह क्रोम 56 बीटा में जोड़ा गया था, भले ही यह क्रोमियम ब्लॉग से इस चैंज पर न हो: क्रोम 56 बीटा: "नॉट सिक्योर" चेतावनी, वेब ब्लूटूथ और सीएसएसposition: sticky

आप इसे हिंसक उल्लंघन चेकबॉक्स के साथ कंसोल के फ़िल्टर बार में छिपा सकते हैं ।

— Bastien
स्रोत

2

यदि आप क्रोम कैनरी (या बीटा) का उपयोग कर रहे हैं, तो बस 'छिपाएँ उल्लंघन' विकल्प की जाँच करें।

Chrome 56 कंसोल में उल्लंघन चेकबॉक्स छिपाएँ

— zhaoming
स्रोत

1

यह Google Chrome की उल्लंघन त्रुटि है जो दिखाता है कि कब Verbose लॉगिंग स्तर सक्षम है या नहीं।

त्रुटि संदेश का उदाहरण:

स्पष्टीकरण:

दस्तावेज़ के पुन: रेंडरिंग भाग या दस्तावेज़ के उद्देश्य के लिए दस्तावेज़ में तत्वों की स्थिति और ज्यामिति को फिर से गणना करने के लिए रीफ़्लो वेब ब्राउज़र प्रक्रिया का नाम है। क्योंकि reflow ब्राउज़र में एक उपयोगकर्ता-अवरुद्ध ऑपरेशन है, इसलिए यह समझने के लिए डेवलपर्स के लिए उपयोगी है कि कैसे reflow समय में सुधार किया जाए और साथ ही Reflow पर विभिन्न दस्तावेज़ गुणों (DOM गहराई, CSS नियम दक्षता, विभिन्न प्रकार के शैली परिवर्तन) के प्रभावों को भी समझा जाए। समय। कभी-कभी दस्तावेज़ में किसी एक तत्व को फिर से भरने के लिए उसके मूल तत्वों को फिर से भरने की आवश्यकता हो सकती है और साथ ही किसी भी ऐसे तत्व की भी जो इसका पालन करते हैं।

मूल लेख: Lindsey Simon, UX डेवलपर द्वारा ब्राउज़र को छोटा करना , Developers.google.com पर पोस्ट किया गया।

और यह वह लिंक है जो Google Chrome आपको चेतावनी के बारे में अधिक जानकारी के लिए लेआउट प्रोफाइल (मौवे क्षेत्रों) पर प्रदर्शन प्रोफाइलर में देता है।

— पॉल-सेबस्टियन मैनोल
स्रोत

0

इस सूत्र के रूप में मेरी अंतर्दृष्टि को जोड़ना इस विषय पर "स्टैकओवरफ़्लो प्रश्न" पर जाना था।

मेरी समस्या एक सामग्री-यूआई ऐप (शुरुआती चरणों) में थी

कस्टम थीम प्रदाता की नियुक्ति का कारण था

जब मैंने पृष्ठ के प्रतिपादन के लिए कुछ गणनाएँ कीं (एक घटक, "प्रदर्शन परिणाम", दूसरों में सेट किए गए, "इनपुट अनुभाग") पर निर्भर करता है।

सब कुछ तब तक ठीक था जब तक मैंने "परिणाम" को अद्यतन नहीं किया जो "परिणाम घटक" को रेंडर करने के लिए मजबूर करता है। यहाँ मुख्य मुद्दा यह था कि मेरे पास एक ही रेंडरर (App.js / return ..) में सामग्री-यूआई विषय ( https://material-ui.com/customization/theming/#a-note-on-performance ) था। "परिणाम घटक" के रूप में, सारांश

समाधान था ThemeProvider को एक स्तर ऊपर (Index.js) उठाने के लिए, और यहां ऐप घटक को लपेटकर, इस प्रकार ThemeProvider को पुनर्गणना और आकर्षित / लेआउट / रिफ्लो करने के लिए मजबूर नहीं करना था।

इससे पहले

App.js में:

  return (
    <>
      <MyThemeProvider>
      <Container className={classes.appMaxWidth}>

        <SummaryAppBarPure
//...

index.js में

ReactDOM.render(
  <React.StrictMode>
      <App />
//...

उपरांत

App.js में:

return (
    <>
      {/* move theme to index. made reflow problem go away */}
      {/* <MyThemeProvider> */}
      <Container className={classes.appMaxWidth}>

        <SummaryAppBarPure
//...

index.js में

ReactDOM.render(
  <React.StrictMode>
    <MyThemeProvider>
      <App />
//...

— JimiSweden
स्रोत

-2

मजबूर रिफ्लो अक्सर तब होता है जब आपके पास निष्पादन के अंत से पहले कई बार एक फ़ंक्शन होता है।

उदाहरण के लिए, आपको स्मार्टफ़ोन पर समस्या हो सकती है, लेकिन क्लासिक ब्राउज़र पर नहीं।

मैं setTimeoutसमस्या को हल करने के लिए एक का उपयोग करने का सुझाव देता हूं ।

यह बहुत महत्वपूर्ण नहीं है, लेकिन मैं दोहराता हूं, समस्या तब आती है जब आप किसी फ़ंक्शन को कई बार कॉल करते हैं, और तब नहीं जब फ़ंक्शन 50 से अधिक एमएस लेता है। मुझे लगता है कि आप अपने उत्तरों में गलत हैं।

1-बाय -1 कॉल बंद करें और कोड को फिर से लोड करें यह देखने के लिए कि क्या यह अभी भी त्रुटि पैदा करता है।
यदि दूसरी स्क्रिप्ट त्रुटि का कारण बनती है, setTimeOutतो उल्लंघन की अवधि के आधार पर उपयोग करें ।

— चेरिफ
स्रोत

यह कोई हल नहीं है। मूल प्रश्न पर टिप्पणी के रूप में यह बेहतर सुझाव है।

— पॉल-सेबेस्टियन मैनोल

-6

यह केवल एक संदेश के लिए एक त्रुटि नहीं है। इस संदेश को परिवर्तन निष्पादित करने के लिए
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(उदाहरण)
के लिए
<!DOCTYPE html>(फ़ायरफ़ॉक्स स्रोत इस उम्मीद)

संदेश गूगल क्रोम और ओपेरा 74 60 में दिखाया गया था। बदलने के बाद यह स्पष्ट था, 0 क्रिया।
एक समाधान दृष्टिकोण

— Gerdixx
स्रोत

5

बस कुछ सलाह: आपके जवाब का सवालों से कोई लेना-देना नहीं है। या तो अपना उत्तर ठीक करो या हटाओ। सवाल था "क्रोम ब्राउज़र कंसोल क्यों उल्लंघन चेतावनी दिखा रहा है"। इसका उत्तर यह है कि यह नए क्रोम ब्राउज़रों में एक विशेषता है जहां यह आपको सचेत करता है यदि वेब पेज जेएस को निष्पादित करते समय अत्यधिक ब्राउज़र प्रतिक्षेप का कारण बनता है। कृपया अधिक जानकारी के लिए Google से इस संसाधन को देखें ।

— पॉल-सेबेस्टियन मैनोल