লঙ্ঘন দীর্ঘস্থায়ী জাভাস্ক্রিপ্ট টাস্কে xx এমএস নিয়েছে

Question

সম্প্রতি, আমি এই ধরণের সতর্কতা পেয়েছি এবং এটি এটিই আমার প্রথমবার:

[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

Comments

আপনি এই সতর্কতাটি কোথায় দেখছেন? আপনি কোন পরিবেশে কাজ করছেন তা বলবেন না some কিছু ব্রাউজার ধরে নিচ্ছেন, তবে কোনটি?

— সামি কুহমনেন

@ সামিকুহমনেন এর জন্য দুঃখিত, আমি আমার প্রশ্ন আপডেট করেছি। আমি ক্রোম ব্যবহার করেছি। এজতে আমি তেমন কোনও ত্রুটি খুঁজে পাইনি।

— প্রোকেটমার

আমি কেবল যুক্ত করতে চেয়েছিলাম যে 2016 এর দেরীতে প্রবর্তিত এই সতর্কতা বার্তাটি আপনি Chrome এ ইনস্টল করেছেন এমন কোনও এক্সটেনশনের কারণেও উপস্থিত হতে পারে। ব্যক্তিগত মোডে পরীক্ষা করে এটি পরীক্ষা করা সহজ।

— ফের

ডান পাশের লিঙ্কটিতে ক্লিক করা, যেখানে স্ক্রিপ্ট নির্দেশ করে যেখানে লঙ্ঘন ঘটে তা আপনাকে কোডের জায়গায় নিয়ে আসে যেখানে এটি ঘটে happens

— ব্লুহফি

আমি আয়নিক 4 (কৌনিক 8) ব্যবহার করছি, আমার কোডটি ঠিকঠাক কাজ করছিল, হঠাৎ এই ধরণের লঙ্ঘন আসতে শুরু করে - এখন আমার তালিকায় কোনও ডেটা দেখাচ্ছে না?

— কপিল রঘুয়ানশি

Answer 1

আপডেট : ক্রোম 58+ এগুলি এবং অন্যান্য ডিবাগ বার্তা ডিফল্টরূপে লুকিয়েছিল। তাদের প্রদর্শন করতে 'তথ্য' এর পাশের তীরটি ক্লিক করুন এবং 'ভার্বোস' নির্বাচন করুন।

ক্রোম 57 ডিফল্টরূপে 'লঙ্ঘনগুলি লুকান' চালু করে। এগুলি আবার চালু করতে আপনাকে ফিল্টারগুলি সক্ষম করতে হবে এবং 'লঙ্ঘনগুলি লুকান' বাক্সটি চেক করতে হবে।

প্রকল্পের সাথে যুক্ত অন্য কেউ হঠাৎ এটি উপস্থিত হয়

আমি মনে করি আপনি সম্ভবত ক্রোম 56 এ আপডেট করেছেন more অন্তর্নিহিত সমস্যাগুলি অন্যান্য ব্রাউজারগুলিতে রয়েছে তবে ব্রাউজারগুলি কেবল আপনাকে সমস্যা বলে দিচ্ছে না। ক্রোমিয়াম টিকিটটি এখানে রয়েছে তবে এটি নিয়ে আসলেই কোনও আকর্ষণীয় আলোচনা নেই।

এই বার্তাগুলি ত্রুটির পরিবর্তে সতর্কতা হ'ল কারণ এটি সত্যই বড় সমস্যা তৈরি করে না। এটি ফ্রেমগুলি বাদ পড়ার কারণ হতে পারে বা অন্যথায় কম মসৃণ অভিজ্ঞতার কারণ হতে পারে।

তবে আপনার অ্যাপ্লিকেশনটির মান উন্নত করতে তারা তদন্ত এবং ফিক্সিংয়ের উপযুক্ত। এটি করার উপায় হ'ল বার্তাটি কী পরিস্থিতিতে উপস্থিত হয় সেদিকে মনোযোগ দেওয়া এবং যেখানে সমস্যাটি ঘটছে সেখানে সংকীর্ণ করতে পারফরম্যান্স টেস্টিং করা। পারফরম্যান্স টেস্টিং শুরু করার সহজ উপায় হ'ল কিছু কোড codeোকানো:

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 এর প্রোফাইলার , অথবা মত একটি মাপকাঠিতে গ্রন্থাগার ব্যবহার করতে এই এক ।

একবার আপনি এমন কিছু কোড খুঁজে পেয়েছেন যা দীর্ঘ সময় নিচ্ছে (50 মিম ক্রোমের দ্বারপ্রান্ত), আপনার কাছে কয়েকটি বিকল্প রয়েছে:

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

আপনি এখানে জাভাস্ক্রিপ্ট অ্যাসিনক্রোনাস প্রকৃতি সম্পর্কে আরও পড়তে পারেন ।

Comments

কেবলমাত্র একটি পরামর্শ, ব্যবহারের পরিবর্তে performance.now(), আপনি ব্যবহার করতে পারেন console.time( developer.mozilla.org/en-US/docs/Web/API/Console/time ) console.time('UniquetLabelName') ....code here.... console.timeEnd('UniqueLabelName')

— denislexic

@ এডিস্লিক্সিক আমি অনুমান করি। আমি নিশ্চিত না যে আসলে কী মান যুক্ত করে। আমি যুক্তি দিয়ে বলছি যে বর্তমান সময় পাওয়ার আন্ডারলাইং অপারেশন সম্পর্কে শিখতে এবং সেটির উপর ভিত্তি করে গড়ে তোলা আরও মূল্যবান।

— ভোল্ট্রেভো

দুর্দান্ত উত্তর, ভোল্ট্রেভো! আমার প্রশ্ন হ'ল যদি এর মতো কোডটি লঙ্ঘন হয় তবে এটি ঠিক কী লঙ্ঘন করছে? গুগল প্রয়োগ করছে এমন এক ধরণের স্ট্যান্ডার্ড থাকতে হবে, তবে সেই স্ট্যান্ডার্ডটি কি কোথাও প্রকাশ্যে নথিভুক্ত?

— বাংলোমার

@ ব্যাংলার ডুনো, আমি জানতে চাই যে এটির সাথে কিছু নির্দেশিকা উল্লেখ করা হয়েছে কিনা।

— ভোল্ট্রেভো

@ বুঙ্গলার আমি কেবল অনুমান করতে পারি যে এটি বলছে যে অ্যানিম্যাট করা কোডটি প্রতি সেকেন্ডে কমপক্ষে একটি 60 ফ্রেম সরবরাহ করা এবং তাই ব্যবহারকারীর দুর্বল অভিজ্ঞতা দেওয়া লঙ্ঘন করছে। ।

— ব্যবহারকারী895400

Answer 2

প্রত্যেকে উল্লিখিত হিসাবে এগুলি কেবল সতর্কতা। তবে, যদি আপনি এগুলি সমাধান করতে আগ্রহী (যা আপনার হওয়া উচিত), তবে আপনাকে প্রথমে সতর্ক করার কারণ কী ঘটছে তা সনাক্ত করতে হবে। এর কোনও কারণ নেই যার কারণে আপনি জোর করে রিফ্লো সতর্কতা পেতে পারেন। কেউ কেউ কিছু সম্ভাব্য বিকল্পের জন্য একটি তালিকা তৈরি করেছেন । আপনি আরও তথ্যের জন্য আলোচনা অনুসরণ করতে পারেন।
এখানে সম্ভাব্য কারণগুলির সংক্ষেপ:

কী লেআউট / রিফ্লো জোর করে

নীচের সমস্ত বৈশিষ্ট্য বা পদ্ধতি, যখন জাভাস্ক্রিপ্টে অনুরোধ করা / বলা হয়ে থাকে, শৈলী এবং বিন্যাস * সিঙ্ক্রোনালি গণনা করতে ব্রাউজারটিকে ট্রিগার করবে। একে রিফ্লো বা লেআউট থ্র্যাশিংও বলা হয় এবং এটি সাধারণ পারফরম্যান্সের বাধা।

উপাদান

বক্স মেট্রিক্স

• 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() নীচের কোনওটি সত্য হলে লেআউটটিকেও বাধ্য করবে:

1. উপাদানটি একটি ছায়া গাছে রয়েছে
2. মিডিয়া কোয়েরি রয়েছে (ভিউপোর্ট সম্পর্কিত)) বিশেষ করে, নিম্নলিখিত এক: ( উৎস ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio
   • device-pixel-ratio, resolution,orientation
3. অনুরোধ করা সম্পত্তি নিম্নলিখিতগুলির মধ্যে একটি: ( উত্স )
   • 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()

করা SVG

• কিছুটা; সম্পূর্ণ তালিকা তৈরি করেনি, তবে টনি জেন্টিলকরের ২০১১ লেআউট ট্রিজারিং তালিকা কয়েকটির দিকে ইঙ্গিত করেছে।

contenteditable

• ক্লিপবোর্ডে কোনও চিত্র অনুলিপি করা ( উত্স ) সহ প্রচুর এবং প্রচুর স্টাফ ...

এখানে আরও চেক করুন ।

এছাড়াও, এখানে মূল ইস্যু থেকে ক্রোমিয়াম উত্স কোড এবং সতর্কতার জন্য একটি পারফরম্যান্স এপিআই সম্পর্কে আলোচনা ।

---

সম্পাদনা করুন: গুগল কর্তৃক পেজস্পিড ইনসাইটে লেআউট রিফ্লো কীভাবে কম করা যায় সে সম্পর্কে একটি নিবন্ধও রয়েছে । এটি ব্রাউজার রিফ্লো কি তা ব্যাখ্যা করে:

অংশ বা সমস্ত নথিকে পুনরায় রেন্ডার করার উদ্দেশ্যে নথিতে উপাদানগুলির অবস্থান এবং জ্যামিতিগুলি পুনরায় গণনা করার জন্য ওয়েব ব্রাউজার প্রক্রিয়াটির নাম রিফ্লো। যেহেতু রিফ্লো ব্রাউজারে একটি ব্যবহারকারী-অবরুদ্ধ অপারেশন, এটি বিকাশকারীদের জন্য কীভাবে রিফ্লো সময় উন্নত করতে হয় এবং বিভিন্ন নথির বৈশিষ্ট্যগুলির (ডিওএম গভীরতা, সিএসএস নিয়ম দক্ষতা, বিভিন্ন ধরণের স্টাইল পরিবর্তন) এর প্রভাবগুলি বোঝার জন্য এটি দরকারী সময়। কখনও কখনও নথিতে কোনও একক উপাদানকে পুনরায় প্রতিস্থাপনের জন্য এর মূল উপাদানগুলি এবং এটি অনুসরণকারী কোনও উপাদানগুলির পুনরায় বহন করা প্রয়োজন।

তদতিরিক্ত, এটি কীভাবে কমাতে হবে তা ব্যাখ্যা করে:

1. অপ্রয়োজনীয় ডিওএম গভীরতা হ্রাস করুন। ডিওএম গাছের এক স্তরে পরিবর্তনগুলি গাছের প্রতিটি স্তরে - সমস্ত শিকড় অবধি এবং পরিবর্তিত নোডের শিশুদের মধ্যে সমস্ত পথে পরিবর্তন ঘটাতে পারে। এর ফলে রিফ্লো সম্পাদনে বেশি সময় ব্যয় হতে পারে।
2. সিএসএস বিধিগুলি ন্যূনতম করুন এবং অব্যবহৃত সিএসএস বিধিগুলি সরান।
3. আপনি যদি অ্যানিমেশনগুলির মতো জটিল রেন্ডারিং পরিবর্তন করেন তবে প্রবাহের বাইরে করুন। এটি সম্পাদন করতে অবস্থান-পরম বা অবস্থান-স্থির ব্যবহার করুন।
4. অপ্রয়োজনীয় জটিল সিএসএস নির্বাচকগুলি এড়িয়ে চলুন - বিশেষত বংশধর নির্বাচকরা - যা নির্বাচকের সাথে ম্যাচিংয়ের জন্য আরও সিপিইউ পাওয়ার প্রয়োজন।

Comments

আরও পটভূমি: আসল সমস্যা থেকে ক্রোমিয়াম উত্স কোড এবং সতর্কতার জন্য পারফরম্যান্স এপিআই সম্পর্কে আলোচনা ।

— রোবোকট

উপরের মতানুসারে, কেবল সরল উপাদান.স্রোলটপ পড়া রিফ্লো ট্রিগার করে। এটি আমাকে একটি পাল্টা স্বজ্ঞাত ঘটনা হিসাবে আঘাত করে। আমি বুঝতে পারি কেন এলিমেন্ট.স্রোকল টপ সেট করা রিফ্লোকে ট্রিগার করবে, তবে কেবল এর মান পড়ছে? কেউ যদি আরও ব্যাখ্যা করতে পারে যে কেন এটি কেস, যদি সত্যিই এটি হয়?

— ডেভিড এডওয়ার্ডস

Answer 3

কয়েকটি ধারণা:

• আপনার কোডের অর্ধেক সরান (সম্ভবত এটি মন্তব্য করার মাধ্যমে)।

  • সমস্যা কি এখনও আছে? দুর্দান্ত, আপনি সম্ভাবনাগুলি সঙ্কুচিত করেছেন! পদ্ধতি পুনরাবৃত্তি করুন।

  • সমস্যা কি নেই? ঠিক আছে, আপনি মন্তব্য করা অর্ধেক দেখুন!

• আপনি কি কোনও সংস্করণ নিয়ন্ত্রণ ব্যবস্থা ব্যবহার করছেন (যেমন, গিট)? যদি তা git checkoutহয় তবে আপনার সাম্প্রতিক কিছু কমিট। সমস্যাটি কখন চালু হয়েছিল? সমস্যাটি প্রথম আসার পরে ঠিক কী কোডটি পরিবর্তন হয়েছিল তা দেখার জন্য প্রতিশ্রুতিবদ্ধভাবে দেখুন।

Comments

আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ. আমি অর্ধ অপসারণ করেছি এবং এমনকি আমার মূল .js ফাইলটি প্রকল্প থেকে বাদ দিয়েছি। একরকম ত্রুটি এখনও ঘটেছে। এই কারণেই আমি এটি সম্পর্কে হতাশাবোধ করছি। এবং হ্যাঁ, আমি গিট ব্যবহার করছি আমি আজ এই ত্রুটিটি বুঝতে পেরেছি। এটি গ্রুপ প্রকল্পে পরিণত হওয়ার পর থেকে প্রচুর কমিটমেন্ট হয়েছে। একটি গভীর চেকিং করতে পারে। ধারনার জন্য আবার ধন্যবাদ।

— প্রোকেটমার

@ প্রোকাটার গিট কমিট সন্ধানের জন্য একই কৌশল ব্যবহার করুন। উদাহরণস্বরূপ, যদি আমার 10 টি কমিট হয় (A, B, C, D, E, F, G, H, I, J) যেখানে A সবচেয়ে প্রাচীন ছিল, আমি git checkout Eদেখতে চাই যে সমস্যাটি ইতিমধ্যে বিদ্যমান কিনা। যদি হ্যাঁ, আমি কমিটের প্রথমার্ধে সমস্যার সন্ধান করব continue অন্যথায়, আমি দ্বিতীয়ার্ধে সমস্যাটি খুঁজছি।

— therobinkim

@ প্রোকাটার এছাড়াও, যদি আপনি আপনার মূল .jsফাইলটি বাদ দেন এবং সমস্যাটি অব্যাহত থাকে ... এটি কোনও <script src="...">ট্যাগের মাধ্যমে আপনি আনা একটি লাইব্রেরি হতে পারে ! কিছু নিয়ে উদ্বিগ্ন হওয়ার মতো নয় (বিশেষত এটি কেবল একটি সতর্কবার্তা)?

— therobinkim

সমস্যাটি শেষ পর্যন্ত আমি খুঁজে পেয়েছি। আমি পরিবর্তনগুলি ট্র্যাক করতে আপনার দ্বিতীয় ধারণাটি ব্যবহার করেছি। এবং হ্যাঁ, সমস্যাটি একটি বাহ্যিক .jsফাইল থেকে আসে । স্পষ্টতই, এটা ব্যাপার। এটি আমার সাইটটিকে বেশ তাৎপর্যপূর্ণ করে তোলে। যাইহোক, আপনার উত্তর এবং ধারণা জন্য আবার ধন্যবাদ।

— প্রোকেটমার

বাইনারি অনুসন্ধান প্রয়োগ করতে আপনি গিট বিসেক্ট ব্যবহার করতে পারেন। আমি মনে করি এটি কেবল বাগ সন্ধানের উদ্দেশ্যেই।

— পিট্রোভিসমার

Answer 4

সমস্যার উত্স সনাক্ত করতে, আপনার অ্যাপ্লিকেশনটি চালনা করুন এবং এটি Chrome এর পারফরম্যান্স ট্যাবে রেকর্ড করুন ।

সেখানে আপনি বিভিন্ন ক্রিয়াকলাপ পরীক্ষা করতে পারেন যা চালাতে দীর্ঘ সময় নিয়েছিল। আমার ক্ষেত্রে, কনসোলে সতর্কতার সাথে যে সম্পর্কযুক্ত সে একটি ফাইল যা অ্যাডব্লক এক্সটেনশান দ্বারা লোড করা হয়েছিল, তবে এটি আপনার ক্ষেত্রে অন্য কিছু হতে পারে।

এই ফাইলগুলি পরীক্ষা করে দেখুন এবং এটি কোনও এক্সটেনশনের কোড বা আপনার কিনা তা সনাক্ত করার চেষ্টা করুন। (যদি এটি আপনার হয়, তবে আপনি আপনার সমস্যার উত্স খুঁজে পেয়েছেন))

Comments

না, আমার কাছে অ্যাডব্লক নেই এবং আমি এখনও এটি কনসোলে পেয়েছি।

— নিকোলা স্টোজাকোভিć

পারফরম্যান্স ট্যাব দিয়ে এটি বিশ্লেষণ করার চেষ্টা করুন এবং দীর্ঘ সময় ধরে চলমান কার্যগুলির উত্স সন্ধান করুন। এটি যে কোনও কিছু হতে পারে তবে সমস্যাটির উত্স চিহ্নিত করার এটি একটি সম্ভাব্য উপায়।

— ম্যাট লিওনোইচিজ

Answer 5

নেটওয়ার্ক ট্যাবের নীচে Chrome কনসোলে সন্ধান করুন এবং স্ক্রিপ্টগুলি সন্ধান করুন যা লোড হতে সবচেয়ে বেশি সময় নেয়।

আমার ক্ষেত্রে স্ক্রিপ্টগুলিতে অ্যাংুলার অ্যাডের সেট ছিল যা আমি অন্তর্ভুক্ত করেছিলাম তবে অ্যাপটিতে এখনও ব্যবহার করা হয়নি:

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

এগুলি কেবলমাত্র জাভাস্ক্রিপ্ট ফাইল যা "দীর্ঘ রানিং টাস্ক" ত্রুটি নির্দিষ্ট করার চেয়ে বেশি সময় নিয়েছে।

এই সমস্ত ফাইল আমার অন্য ওয়েবসাইটে চালিত হয়েছে যার কোনও ত্রুটি উত্পন্ন হয়নি তবে আমি একটি নতুন ওয়েব অ্যাপ্লিকেশনটিতে এই "লং রানিং টাস্ক" ত্রুটিটি পাচ্ছিলাম যা সবেমাত্র কোনও কার্যকারিতা ছিল। ত্রুটি অপসারণের সাথে সাথেই বন্ধ হয়ে যায়।

আমার সর্বোত্তম অনুমান যে এই কৌণিক অ্যাডগুলি তাদের প্রারম্ভিক ট্যাগগুলির জন্য ডিওএমের ক্রমবর্ধমান গভীর অধ্যায়গুলিতে পুনরাবৃত্তভাবে তাকাচ্ছিল - কিছুই খুঁজে পাওয়া যায়নি, তাদের বের হওয়ার আগে পুরো ডিওএমকে অতিক্রম করতে হয়েছিল, যা ক্রোমের প্রত্যাশার চেয়ে বেশি সময় নিয়েছিল - এইভাবে সতর্কবাণী।

Answer 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 এমএস করে দেখায়:

এখন:

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 এমএস নিয়ে ইভেন্টটি দেখায়:

এবং আমি অনুভব করি যে অনুসন্ধানটি এখন দ্রুত (229 নোড) দ্রুত কাজ করে।

Comments

সংক্ষেপে, লঙ্ঘন পেয়ে আপনি নিজের কোডটি অনুকূলিত করতে সক্ষম হয়েছিলেন এবং এটি এখন আরও ভাল সম্পাদন করে।

— ব্যবহারকারী যে

Answer 7

আমি অ্যাপাচি কর্ডোভা উত্স কোডে একটি সমাধান পেয়েছি। তারা এগুলি প্রয়োগ করে:

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

সহজ বাস্তবায়ন, তবে স্মার্ট উপায়।

অ্যান্ড্রয়েড ৪.৪ ব্যবহার করুন Promise। পুরানো ব্রাউজারগুলির জন্য, ব্যবহার করুনsetTimeout()

---

ব্যবহার:

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

এই ট্রিক কোডটি সন্নিবেশ করার পরে, সমস্ত সতর্কতা বার্তা চলে গেছে।

Answer 8

এটি ক্রোমিয়াম ব্লগ: ক্রোম 56 বিটাতে পরিবর্তিত হওয়া সত্ত্বেও এটি ক্রোম 56 বিটাতে যুক্ত করা হয়েছিল: ক্রোম 56 বিটা: "সুরক্ষিত নয়" সতর্কতা, ওয়েব ব্লুটুথ এবং সিএসএসposition: sticky

লঙ্ঘন লুকাও চেকবক্সের সাহায্যে আপনি এটি কনসোলের ফিল্টার বারে লুকিয়ে রাখতে পারেন ।

Answer 9

আপনি যদি ক্রোম ক্যানারি (বা বিটা) ব্যবহার করেন তবে কেবল 'লঙ্ঘনগুলি লুকান' বিকল্পটি পরীক্ষা করুন।

Answer 10

এটি Google Chrome থেকে লঙ্ঘন ত্রুটি যা Verboseলগিং স্তরটি সক্ষম হয়ে থাকে তা দেখায় ।

ত্রুটি বার্তার উদাহরণ:

ব্যাখ্যা:

অংশ বা সমস্ত নথিকে পুনরায় রেন্ডার করার উদ্দেশ্যে নথিতে উপাদানগুলির অবস্থান এবং জ্যামিতিগুলি পুনরায় গণনা করার জন্য ওয়েব ব্রাউজার প্রক্রিয়াটির নাম রিফ্লো। যেহেতু রিফ্লো ব্রাউজারে একটি ব্যবহারকারী-অবরুদ্ধ অপারেশন, এটি বিকাশকারীদের জন্য কীভাবে রিফ্লো সময় উন্নত করতে হয় এবং বিভিন্ন নথির বৈশিষ্ট্যগুলির (ডিওএম গভীরতা, সিএসএস নিয়ম দক্ষতা, বিভিন্ন ধরণের স্টাইল পরিবর্তন) এর প্রভাবগুলি বোঝার জন্য এটি দরকারী সময়। কখনও কখনও নথিতে কোনও একক উপাদানকে পুনরায় প্রতিস্থাপনের জন্য এর মূল উপাদানগুলি এবং এটি অনুসরণকারী কোনও উপাদানগুলির পুনরায় বহন করা প্রয়োজন।

মূল নিবন্ধ: লিন্ডসে সাইমন, ইউএক্স বিকাশকারী, ব্রাউজারের রিফ্লোটি মিনিমাইজ করে ডেভেলপারস ডটকমকে পোস্ট করেছেন।

এবং এই লিঙ্কটি হ'ল গুগল ক্রোম আপনাকে সতর্কতা সম্পর্কিত আরও তথ্যের জন্য লেআউট প্রোফাইলগুলিতে (মউভ অঞ্চলগুলি) পারফরম্যান্স প্রোফাইলারে দেয় gives

Answer 11

এই থ্রেড হিসাবে এখানে আমার অন্তর্দৃষ্টি যোগ করা বিষয়টিতে স্ট্যাকওভারফ্লো প্রশ্ন "যান"।

আমার সমস্যাটি ম্যাটেরিয়াল-ইউআই অ্যাপে ছিল (প্রাথমিক পর্যায়ে)

• কাস্টম থিম সরবরাহকারীর বসানো কারণ ছিল

যখন আমি পৃষ্ঠার রেন্ডারিংয়ের জন্য কিছু গণনা করেছি (একটি উপাদান, "প্রদর্শন ফলাফল", অন্যদের মধ্যে কী সেট করা আছে তার উপর নির্ভর করে "ইনপুট বিভাগ")।

আমি "অবস্থা" আপডেট না করা পর্যন্ত সবকিছু ঠিক ছিল যা "ফলাফলের উপাদান "টিকে রেন্ডার করতে বাধ্য করে। এখানে মূল সমস্যাটি হ'ল আমার একই উপস্থাপকটিতে একটি উপাদান-ইউআই থিম ( https://matory-ui.com/customization/theming/#a-note-on-performance ) ছিল (App.js / রিটার্ন ..) "ফলাফল উপাদান" হিসাবে, সংক্ষিপ্ততাবার্পিউর

সমাধান থিমপ্রাইডারটিকে এক স্তর উপরে তুলতে (সূচক.জেএস) করা এবং অ্যাপ অ্যাপ উপাদানটি এখানে মোড়ানো ছিল, এইভাবে থিমপ্রোভাইডারকে পুনরায় গণনা করতে এবং আঁকতে / লেআউট / রিফ্লোতে বাধ্য করা হয় না।

আগে

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

Answer 12

জোরপূর্বক রিফ্লো প্রায়শই ঘটে যখন আপনি কার্যকারিতা শেষ হওয়ার আগে একাধিকবার ডাকে একটি ফাংশন করেন।

উদাহরণস্বরূপ, আপনার স্মার্টফোনে সমস্যা হতে পারে তবে ক্লাসিক ব্রাউজারে নয়।

আমি setTimeoutসমস্যাটি সমাধান করার জন্য একটি ব্যবহার করার পরামর্শ দিচ্ছি ।

এটি খুব গুরুত্বপূর্ণ নয়, তবে আমি পুনরায় বলছি, আপনি যখন বেশ কয়েকবার কোনও ফাংশন কল করেন তখন সমস্যাটি দেখা দেয় এবং যখন ফাংশনটি 50 এমএসের বেশি লাগে না not আমি মনে করি আপনি নিজের উত্তরগুলি ভুল করেছেন।

1. 1-বাই -1 কল বন্ধ করুন এবং কোডটি এখনও ত্রুটি ঘটায় কিনা তা দেখতে পুনরায় লোড করুন।
2. যদি দ্বিতীয় স্ক্রিপ্ট ত্রুটির কারণ setTimeOutহয়ে থাকে তবে লঙ্ঘনের সময়কালের ভিত্তিতে একটি ব্যবহার করুন।

Comments

এটি কোনও সমাধান নয়। এটি মূল পরামর্শটির মতামত হিসাবে আরও ভাল একটি পরামর্শ।

— পল-সেবাস্তিয়ান মানোলে

Answer 13

এটি একটি সাধারণ বার্তা কেবল ত্রুটি নয়। এই বার্তাটি পরিবর্তন চালানো
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(উদাহরণস্বরূপ)
থেকে
<!DOCTYPE html>(FIREFOX উৎস এই আশা)

বার্তা গুগল ক্রোম 74 এবং অপেরা 60-এ দেখানো হয়েছে। পরিবর্তনের পরে এটি পরিষ্কার ছিল, 0 শব্দভাণ্ডার।
একটি সমাধান পদ্ধতির

Comments

কিছু পরামর্শ: আপনার উত্তরের প্রশ্নগুলির সাথে কোনও সম্পর্ক নেই। হয় আপনার উত্তর ঠিক করুন বা এটি সরান। প্রশ্নটি ছিল "ক্রম ব্রাউজার কনসোল কেন লঙ্ঘনের সতর্কতা দেখাচ্ছে"। উত্তরটি হ'ল এটি নতুন ক্রোম ব্রাউজারগুলির একটি বৈশিষ্ট্য যেখানে ওয়েব পৃষ্ঠার জেএস কার্যকর করার সময় অতিরিক্ত ব্রাউজারের রিফ্লো হওয়ার কারণ হলে এটি আপনাকে সতর্ক করে। আরও তথ্যের জন্য দয়া করে গুগল থেকে এই সংস্থানটি দেখুন।

— পল-সেবাস্তিয়ান মানোলে