เมื่อเร็ว ๆ นี้ฉันได้รับคำเตือนแบบนี้และนี่เป็นครั้งแรกที่ฉันได้รับมัน:

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

ฉันทำงานในโครงการกลุ่มและฉันไม่รู้ว่าสิ่งนี้มาจากไหน เรื่องนี้ไม่เคยเกิดขึ้นมาก่อน ทันใดนั้นมันก็ปรากฏขึ้นเมื่อมีคนอื่นมีส่วนร่วมในโครงการ ฉันจะค้นหาไฟล์ / ฟังก์ชั่นที่ทำให้เกิดคำเตือนนี้ได้อย่างไร ฉันกำลังมองหาคำตอบ แต่ส่วนใหญ่เกี่ยวกับการแก้ปัญหาเกี่ยวกับวิธีการแก้ปัญหา ฉันไม่สามารถแก้ปัญหาได้หากฉันไม่สามารถหาสาเหตุของปัญหาได้

ในกรณีนี้คำเตือนจะปรากฏเฉพาะใน Chrome ฉันพยายามใช้ Edge แต่ฉันยังไม่ได้รับคำเตือนที่คล้ายกันและฉันยังไม่ได้ทดสอบบน Firefox

ฉันยังได้รับข้อผิดพลาดจากjquery.min.js:

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

อัปเดต : Chrome 58+ ซ่อนข้อความเหล่านี้และข้อความแก้ปัญหาอื่น ๆ ตามค่าเริ่มต้น หากต้องการแสดงพวกเขาให้คลิกลูกศรถัดจาก 'ข้อมูล' และเลือก 'Verbose'

Chrome 57 เปิดใช้งาน 'ซ่อนการละเมิด' ตามค่าเริ่มต้น หากต้องการเปิดใช้งานอีกครั้งคุณต้องเปิดใช้งานตัวกรองและยกเลิกการทำเครื่องหมายในช่อง 'ซ่อนการละเมิด'

ทันใดนั้นมันก็ปรากฏขึ้นเมื่อมีคนอื่นเกี่ยวข้องกับโครงการ

ฉันคิดว่าคุณน่าจะอัปเดตเป็น Chrome 56 มากกว่านี้คำเตือนนี้เป็นคุณลักษณะใหม่ที่ยอดเยี่ยมตามความเห็นของฉันโปรดปิดหากคุณหมดหวังและผู้ประเมินของคุณจะทำเครื่องหมายออกจากคุณ ปัญหาพื้นฐานมีอยู่ในเบราว์เซอร์อื่น แต่เบราว์เซอร์ไม่ได้บอกคุณว่ามีปัญหา ตั๋ว Chromium คือที่นี่แต่ไม่มีการพูดคุยที่น่าสนใจ

ข้อความเหล่านี้เป็นคำเตือนแทนที่จะเป็นข้อผิดพลาดเพราะจะไม่ทำให้เกิดปัญหาร้ายแรง อาจทำให้เฟรมตกหล่นหรืออาจทำให้เกิดประสบการณ์ที่ราบรื่นน้อยลง

พวกเขาควรค่ากับการตรวจสอบและแก้ไขเพื่อปรับปรุงคุณภาพแอปพลิเคชันของคุณ วิธีการทำเช่นนี้คือการใส่ใจกับสถานการณ์ที่ข้อความปรากฏขึ้นและทำการทดสอบประสิทธิภาพเพื่อ จำกัด ขอบเขตของปัญหาที่เกิดขึ้น วิธีที่ง่ายที่สุดในการเริ่มการทดสอบประสิทธิภาพคือการใส่รหัสบางอย่างดังนี้:

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หรือทำให้การใช้ห้องสมุดการเปรียบเทียบเช่นนี้

เมื่อคุณพบรหัสที่ใช้เวลานาน (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);

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับธรรมชาติที่ไม่ตรงกันของ JavaScript ที่นี่

สิ่งเหล่านี้เป็นเพียงคำเตือนตามที่ทุกคนกล่าวถึง อย่างไรก็ตามหากคุณต้องการแก้ไขสิ่งเหล่านี้ (ซึ่งคุณควร) คุณต้องระบุสิ่งที่ทำให้เกิดคำเตือนก่อน ไม่มีเหตุผลใดที่ทำให้คุณได้รับคำเตือนการไหลย้อนกลับ มีคนสร้างรายการสำหรับตัวเลือกที่เป็นไปได้บางรายการ คุณสามารถติดตามการสนทนาสำหรับข้อมูลเพิ่มเติม
นี่คือส่วนสำคัญของเหตุผลที่เป็นไปได้:

กองกำลังรูปแบบอะไร / reflow

คุณสมบัติหรือวิธีการด้านล่างทั้งหมดเมื่อมีการร้องขอ / เรียกใน JavaScript จะเรียกเบราว์เซอร์เพื่อคำนวณสไตล์และโครงร่าง * สิ่งนี้เรียกอีกอย่างว่า reflow หรือเค้าโครง thrashingและเป็นคอขวดของประสิทธิภาพการทำงานทั่วไป

ธาตุ

ตัวชี้วัดกล่อง

• 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()โดยทั่วไปแล้วจะบังคับให้ใช้สไตล์ recalc ( แหล่งที่มา )

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

• ค่อนข้างมาก; ยังไม่ได้ทำรายการครบถ้วนสมบูรณ์ แต่รายการเรียกใช้เค้าโครงของ 2011 Tony Gentilcore ชี้ไปที่บางอย่าง

contenteditable

• มีสิ่งต่างๆมากมาย…รวมถึงการคัดลอกรูปภาพไปยังคลิปบอร์ด (ที่มา )

ตรวจสอบเพิ่มเติมที่นี่

นอกจากนี้ยังมีซอร์สโค้ดของ Chromium จากปัญหาดั้งเดิมและการอภิปรายเกี่ยวกับ API ประสิทธิภาพสำหรับคำเตือน

แก้ไข:นอกจากนี้ยังมีบทความเกี่ยวกับวิธีการลด reflow รูปแบบในPageSpeed Insight โดย Google มันอธิบายสิ่งที่เบราว์เซอร์ reflow คือ:

Reflow เป็นชื่อของกระบวนการเว็บเบราว์เซอร์สำหรับการคำนวณตำแหน่งและรูปทรงเรขาคณิตขององค์ประกอบในเอกสารอีกครั้งเพื่อจุดประสงค์ในการเรนเดอร์ส่วนหนึ่งหรือทั้งหมดของเอกสาร เนื่องจาก reflow เป็นการดำเนินการปิดกั้นผู้ใช้ในเบราว์เซอร์จึงเป็นประโยชน์สำหรับนักพัฒนาที่จะเข้าใจวิธีการปรับปรุงเวลา reflow และยังเข้าใจผลกระทบของคุณสมบัติเอกสารต่างๆ (ความลึก DOM, ประสิทธิภาพของกฎ CSS, การเปลี่ยนแปลงลักษณะต่าง ๆ ) บน reflow เวลา. บางครั้งการ reflowing องค์ประกอบเดียวในเอกสารอาจต้องการ reflowing องค์ประกอบหลักและองค์ประกอบใด ๆ ที่ตามมา

นอกจากนี้ยังอธิบายถึงวิธีลดขนาด:

1. ลดความลึกของ DOM ที่ไม่จำเป็น การเปลี่ยนแปลงที่ระดับหนึ่งในทรี DOM สามารถทำให้เกิดการเปลี่ยนแปลงในทุกระดับของทรี - ไปจนถึงรูทและลงไปสู่ลูกของโหนดที่ถูกแก้ไข สิ่งนี้นำไปสู่การใช้เวลามากขึ้นในการทำ reflow
2. ย่อเล็กสุดกฎ CSS และลบกฎ CSS ที่ไม่ได้ใช้
3. หากคุณทำการเปลี่ยนแปลงการเรนเดอร์ที่ซับซ้อนเช่นภาพเคลื่อนไหวให้ทำตามโฟลว์ ใช้ position-absolute หรือ position-fixed เพื่อทำสิ่งนี้
4. หลีกเลี่ยงตัวเลือก CSS ที่ซับซ้อนที่ไม่จำเป็น - ตัวเลือกที่สืบทอดโดยเฉพาะ - ซึ่งต้องการพลัง CPU มากขึ้นในการจับคู่ตัวเลือก

ความคิดสองประการ:

• ลบโค้ดครึ่งหนึ่งของคุณ (อาจเป็นการแสดงความคิดเห็น)

  • ปัญหายังคงอยู่หรือไม่ เยี่ยมมากคุณ จำกัด โอกาสให้แคบลง! ทำซ้ำ

  • ไม่มีปัญหาใช่ไหม ตกลงดูครึ่งที่คุณแสดงความคิดเห็น!

• คุณใช้ระบบควบคุมเวอร์ชัน (เช่น Git) หรือไม่? ถ้าเป็นเช่นนั้นgit checkoutความมุ่งมั่นล่าสุดของคุณ ปัญหานี้เกิดขึ้นเมื่อใด ดูการกระทำเพื่อดูว่ารหัสใดเปลี่ยนแปลงไปเมื่อเกิดปัญหาขึ้นครั้งแรก

เพื่อที่จะระบุแหล่งที่มาของปัญหาเรียกใช้โปรแกรมประยุกต์ของคุณและบันทึกไว้ในแท็บผลการดำเนินงานของ Chrome

คุณสามารถตรวจสอบฟังก์ชั่นต่าง ๆ ที่ใช้เวลานานในการรัน ในกรณีของฉันสิ่งที่สัมพันธ์กับคำเตือนในคอนโซลนั้นมาจากไฟล์ที่โหลดโดยส่วนขยาย AdBlock แต่นี่อาจเป็นอย่างอื่นในกรณีของคุณ

ตรวจสอบไฟล์เหล่านี้และลองระบุว่านี่เป็นรหัสของส่วนขยายหรือของคุณหรือไม่ (หากเป็นของคุณคุณก็จะพบสาเหตุของปัญหา)

ดูในคอนโซล 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 เดียวที่ใช้เวลาโหลดนานกว่าเวลาที่ระบุข้อผิดพลาด "Long Running Task"

ไฟล์ทั้งหมดเหล่านี้ทำงานบนเว็บไซต์อื่น ๆ ของฉันโดยไม่มีข้อผิดพลาดเกิดขึ้น แต่ฉันได้รับข้อผิดพลาด "Long Running Task" ในแอปพลิเคชันเว็บใหม่ที่แทบไม่มีฟังก์ชั่นใด ๆ ข้อผิดพลาดหยุดลงทันทีเมื่อนำออก

สิ่งที่ดีที่สุดที่ฉันคาดเดาได้ก็คือ Angular add-on เหล่านี้กำลังมองหาแท็กเริ่มต้นที่ลึกขึ้นเรื่อย ๆ เพื่อค้นหาแท็กเริ่มต้นโดยไม่ต้องค้นหาเลยพวกเขาต้องสำรวจ DOM ทั้งหมดก่อนที่จะออกซึ่งใช้เวลานานกว่า Chrome

ฉันพบรากของข้อความนี้ในรหัสของฉันซึ่งค้นหาและซ่อนหรือแสดงโหนด (ออฟไลน์) นี่คือรหัสของฉัน:

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

แท็บประสิทธิภาพ (profiler) แสดงเหตุการณ์ที่ใช้เวลาประมาณ 60 ms:

ขณะนี้:

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

ตอนนี้แท็บประสิทธิภาพ (profiler) แสดงเหตุการณ์ที่ใช้เวลาประมาณ 1 ms:

และฉันรู้สึกว่าการค้นหาใช้งานได้เร็วขึ้นตอนนี้ (229 โหนด)

ฉันพบวิธีแก้ปัญหาในซอร์สโค้ด 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
});

หลังจากใส่รหัสลับนี้ข้อความเตือนทั้งหมดจะหายไป

สิ่งนี้ถูกเพิ่มเข้ามาใน Chrome 56 เบต้าแม้ว่าจะไม่ได้อยู่ในรายการเปลี่ยนแปลงนี้จากบล็อก Chromium: Chrome 56 Beta: คำเตือน“ ไม่ปลอดภัย” เว็บบลูทู ธ และ CSSposition: sticky

คุณสามารถซ่อนสิ่งนี้ได้ในแถบตัวกรองของคอนโซลด้วยช่องทำเครื่องหมายซ่อนการละเมิด

หากคุณใช้ Chrome Canary (หรือเบต้า) เพียงทำเครื่องหมายที่ตัวเลือก 'ซ่อนการละเมิด'

นี่เป็นข้อผิดพลาดการละเมิดจาก Google Chrome ที่แสดงเมื่อVerboseเปิดใช้งานระดับการบันทึก

ตัวอย่างของข้อความแสดงข้อผิดพลาด:

คำอธิบาย:

Reflow เป็นชื่อของกระบวนการเว็บเบราว์เซอร์สำหรับการคำนวณตำแหน่งและรูปทรงเรขาคณิตขององค์ประกอบในเอกสารอีกครั้งเพื่อจุดประสงค์ในการเรนเดอร์ส่วนหนึ่งหรือทั้งหมดของเอกสาร เนื่องจาก reflow เป็นการดำเนินการปิดกั้นผู้ใช้ในเบราว์เซอร์จึงเป็นประโยชน์สำหรับนักพัฒนาที่จะเข้าใจวิธีการปรับปรุงเวลา reflow และยังเข้าใจผลกระทบของคุณสมบัติเอกสารต่างๆ (ความลึก DOM, ประสิทธิภาพของกฎ CSS, การเปลี่ยนแปลงลักษณะต่าง ๆ ) บน reflow เวลา. บางครั้งการ reflowing องค์ประกอบเดียวในเอกสารอาจต้องการ reflowing องค์ประกอบหลักและองค์ประกอบใด ๆ ที่ตามมา

บทความต้นฉบับ: ย่อขนาดเบราว์เซอร์ reflowโดย Lindsey Simon, UX Developer, โพสต์บน developers.google.com

และนี่คือลิงค์ที่ Google Chrome ให้ใน Performance profiler บนโปรไฟล์เลย์เอาต์ (ภูมิภาค mauve) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคำเตือน

การเพิ่มข้อมูลเชิงลึกของฉันที่นี่เนื่องจากเธรดนี้เป็นคำถาม "ไปที่" สแต็คโอเวอร์โฟลว์ในหัวข้อ

ปัญหาของฉันอยู่ในแอพ Material-UI (ช่วงแรก ๆ )

• การวางตำแหน่งของผู้ให้บริการธีมที่กำหนดเองเป็นสาเหตุ

เมื่อฉันทำการคำนวณเพื่อบังคับให้แสดงผลของหน้าเว็บ (องค์ประกอบหนึ่ง "แสดงผลลัพธ์" ขึ้นอยู่กับสิ่งที่กำหนดไว้ในส่วนอื่น ๆ "ส่วนอินพุต")

ทุกอย่างเรียบร้อยดีจนกว่าฉันจะอัปเดต "สถานะ" ที่บังคับให้ "ส่วนประกอบผลลัพธ์" แสดงผลอีกครั้ง ปัญหาหลักของที่นี่คือฉันมีธีม material-ui ( https://material-ui.com/customization/theming/#a-note-on-performance ) ในโหมดแสดงภาพเดียวกัน (App.js / return .. ) ในฐานะ "องค์ประกอบผลลัพธ์", SummaryAppBarPure

วิธีแก้ไขคือการยก 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 />
//...

บ่อยครั้งที่การบังคับ reflow เกิดขึ้นเมื่อคุณมีฟังก์ชั่นที่เรียกว่าหลายครั้งก่อนที่จะสิ้นสุดการดำเนินการ

ตัวอย่างเช่นคุณอาจมีปัญหากับสมาร์ทโฟน แต่ไม่ใช่ในเบราว์เซอร์แบบดั้งเดิม

ฉันแนะนำให้ใช้ a setTimeoutเพื่อแก้ปัญหา

สิ่งนี้ไม่สำคัญมาก แต่ฉันทำซ้ำปัญหาเกิดขึ้นเมื่อคุณเรียกใช้ฟังก์ชันหลายครั้งและไม่ใช่เมื่อฟังก์ชั่นใช้เวลามากกว่า 50 ms ฉันคิดว่าคุณเข้าใจผิดในคำตอบของคุณ

1. ปิดการโทรแบบ 1 ต่อ 1 และโหลดรหัสใหม่เพื่อดูว่ายังเกิดข้อผิดพลาดอยู่หรือไม่
2. หากสคริปต์ที่สองทำให้เกิดข้อผิดพลาดให้ใช้งานsetTimeOutตามระยะเวลาของการละเมิด

นี่ไม่ใช่ข้อผิดพลาดเพียงแค่ข้อความ หากต้องการดำเนินการเปลี่ยนแปลงข้อความ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(ตัวอย่าง)
เป็น
<!DOCTYPE html>(แหล่งที่มาของ Firefox คาดหวังสิ่งนี้)

ข้อความแสดงใน Google Chrome 74 และ Opera 60 หลังจากเปลี่ยนแล้วมันชัดเจน 0 verbose
วิธีการแก้ปัญหา