Gần đây, tôi nhận được loại cảnh báo này và đây là lần đầu tiên tôi nhận được nó:

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

Tôi đang làm việc trong một dự án nhóm và tôi không biết điều này đến từ đâu. Trước đây nó không bao giờ xảy ra. Đột nhiên, nó xuất hiện khi một người khác tham gia vào dự án. Làm cách nào để tìm tập tin / chức năng nào gây ra cảnh báo này? Tôi đã tìm kiếm câu trả lời, nhưng chủ yếu là về giải pháp về cách giải quyết nó. Tôi không thể giải quyết nó nếu tôi thậm chí không thể tìm ra nguồn gốc của vấn đề.

Trong trường hợp này, cảnh báo chỉ xuất hiện trên Chrome. Tôi đã thử sử dụng Edge, nhưng tôi không nhận được bất kỳ cảnh báo tương tự nào và tôi chưa thử nghiệm nó trên Firefox.

Tôi thậm chí còn nhận được lỗi từ jquery.min.js:

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

Cập nhật : Chrome 58+ ẩn các thông báo gỡ lỗi này và các thông báo gỡ lỗi khác theo mặc định. Để hiển thị chúng, nhấp vào mũi tên bên cạnh 'Thông tin' và chọn 'Verbose'.

Chrome 57 bật 'ẩn vi phạm' theo mặc định. Để bật lại chúng, bạn cần bật các bộ lọc và bỏ chọn hộp 'ẩn vi phạm'.

đột nhiên nó xuất hiện khi có người khác tham gia vào dự án

Tôi nghĩ nhiều khả năng bạn đã cập nhật lên Chrome 56. Cảnh báo này là một tính năng mới tuyệt vời, theo tôi, vui lòng chỉ tắt nó nếu bạn tuyệt vọng và người đánh giá của bạn sẽ đánh dấu bạn. Các vấn đề tiềm ẩn nằm ở các trình duyệt khác nhưng các trình duyệt không cho bạn biết có vấn đề. Vé Chromium ở đây nhưng thực sự không có bất kỳ cuộc thảo luận thú vị nào về nó.

Những thông báo này là cảnh báo thay vì lỗi vì nó không thực sự gây ra vấn đề lớn. Nó có thể khiến khung hình bị rơi hoặc gây ra trải nghiệm kém mượt mà.

Tuy nhiên, chúng đáng để điều tra và sửa chữa để cải thiện chất lượng ứng dụng của bạn. Cách để làm điều này là bằng cách chú ý đến những tình huống mà các thông báo xuất hiện và thực hiện kiểm tra hiệu năng để thu hẹp nơi xảy ra sự cố. Cách đơn giản nhất để bắt đầu kiểm tra hiệu năng là chèn một số mã như thế này:

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

    // Do the normal stuff for this function

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

Nếu bạn muốn nâng cao hơn, bạn cũng có thể sử dụng trình tạo hồ sơ của Chrome hoặc sử dụng thư viện điểm chuẩn như thư viện này .

Khi bạn đã tìm thấy một số mã mất nhiều thời gian (50ms là ngưỡng của Chrome), bạn có một vài tùy chọn:

1. Cắt bỏ một số / tất cả các nhiệm vụ có thể không cần thiết
2. Tìm hiểu làm thế nào để thực hiện cùng một nhiệm vụ nhanh hơn
3. Chia mã thành nhiều bước không đồng bộ

(1) và (2) có thể khó khăn hoặc không thể, nhưng đôi khi nó thực sự dễ dàng và nên là những nỗ lực đầu tiên của bạn. Nếu cần, nó luôn luôn có thể làm được (3). Để làm điều này, bạn sẽ sử dụng một cái gì đó như:

setTimeout(functionToRunVerySoonButNotNow);

hoặc là

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

Bạn có thể đọc thêm về bản chất không đồng bộ của JavaScript tại đây .

Đây chỉ là những cảnh báo như mọi người đã đề cập. Tuy nhiên, nếu bạn muốn giải quyết những điều này (mà bạn nên làm), thì bạn cần xác định điều gì gây ra cảnh báo trước. Không có lý do nào để bạn có thể nhận được cảnh báo chỉnh lại lực. Ai đó đã tạo một danh sách cho một số tùy chọn có thể. Bạn có thể theo dõi các cuộc thảo luận để biết thêm thông tin.
Đây là ý chính của những lý do có thể:

Những gì lực lượng bố trí / trào ngược

Tất cả các thuộc tính hoặc phương thức bên dưới, khi được yêu cầu / gọi bằng JavaScript, sẽ kích hoạt trình duyệt để tính toán đồng bộ kiểu và bố cục *. Điều này cũng được gọi là hồi lưu hoặc đập bố cục , và là nút cổ chai hiệu suất phổ biến.

Thành phần

Số liệu hộp

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth,elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

Công cụ cuộn

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollTopcũng, thiết lập chúng

Tiêu điểm

• elem.focus() có thể kích hoạt bố trí bắt buộc kép ( nguồn )

Cũng thế…

• elem.computedRole, elem.computedName
• elem.innerText( nguồn )

getComputingStyle

window.getComputedStyle()Thông thường sẽ buộc phong cách recalc ( nguồn )

window.getComputedStyle() cũng sẽ buộc bố trí, nếu bất kỳ điều nào sau đây là đúng:

1. Phần tử nằm trong cây bóng
2. Có các truy vấn phương tiện (những cái liên quan đến khung nhìn). Cụ thể, một trong những điều sau đây: ( nguồn ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio
   • device-pixel-ratio, resolution,orientation
3. Tài sản được yêu cầu là một trong những điều sau đây: ( nguồn )
   • height, width * top, right, bottom, left * margin[ -top, -right, -bottom, -left, Hoặc viết tắt ] chỉ khi biên độ được cố định. * padding[ -top, -right, -bottom, -left, Hoặc viết tắt ] chỉ khi đệm là cố định. * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx,ry

cửa sổ

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• window.getMatchedCSSRules() chỉ phong cách lực lượng

Các hình thức

• inputElem.focus()
• inputElem.select(), textareaElem.select()( nguồn )

Sự kiện chuột

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY ( Nguồn )

tài liệu

• doc.scrollingElement chỉ phong cách lực lượng

Phạm vi

• range.getClientRects(), range.getBoundingClientRect()

SVG

• Khá nhiều; chưa tạo ra một danh sách đầy đủ, nhưng Danh sách kích hoạt bố cục năm 2011 của Tony Gentilcore chỉ vào một số.

có thể nội dung

• Rất nhiều thứ, rất nhiều thứ, bao gồm cả việc sao chép một hình ảnh vào clipboard ( nguồn )

Kiểm tra thêm ở đây .

Ngoài ra, đây là mã nguồn Chromium từ vấn đề ban đầu và thảo luận về API hiệu suất cho các cảnh báo.

Chỉnh sửa: Ngoài ra còn có một bài viết về cách giảm thiểu phản xạ bố cục trên PageSpeed ​​Insight của Google . Nó giải thích phản xạ trình duyệt là gì:

Reflow là tên của quy trình trình duyệt web để tính lại vị trí và hình học của các thành phần trong tài liệu, nhằm mục đích hiển thị lại một phần hoặc toàn bộ tài liệu. Vì trào ngược là một hoạt động chặn người dùng trong trình duyệt, nên rất hữu ích cho các nhà phát triển để hiểu cách cải thiện thời gian chỉnh lại và cũng để hiểu tác động của các thuộc tính tài liệu khác nhau (độ sâu DOM, hiệu quả quy tắc CSS, các loại thay đổi kiểu khác nhau) trên dòng chảy lại thời gian. Đôi khi, việc chỉnh lại một phần tử trong tài liệu có thể yêu cầu chỉnh lại các phần tử cha của nó và bất kỳ phần tử nào tuân theo nó.

Ngoài ra, nó giải thích cách giảm thiểu nó:

1. Giảm độ sâu DOM không cần thiết. Các thay đổi ở một cấp độ trong cây DOM có thể gây ra các thay đổi ở mọi cấp độ của cây - tất cả các đường dẫn đến gốc và tất cả các đường dẫn xuống con của nút đã sửa đổi. Điều này dẫn đến nhiều thời gian hơn để thực hiện chỉnh lại dòng.
2. Giảm thiểu các quy tắc CSS và loại bỏ các quy tắc CSS không sử dụng.
3. Nếu bạn thực hiện các thay đổi kết xuất phức tạp như hình động, hãy thực hiện theo luồng. Sử dụng vị trí tuyệt đối hoặc vị trí cố định để thực hiện điều này.
4. Tránh các bộ chọn CSS phức tạp không cần thiết - cụ thể là các bộ chọn hậu duệ - đòi hỏi nhiều năng lượng CPU hơn để thực hiện khớp bộ chọn.

Một vài ý tưởng:

• Xóa một nửa mã của bạn (có thể thông qua nhận xét nó).

  • Vấn đề vẫn còn đó chứ? Tuyệt vời, bạn đã thu hẹp các khả năng! Nói lại.

  • Có vấn đề không có? Ok, nhìn vào một nửa bạn nhận xét!

• Bạn có đang sử dụng bất kỳ hệ thống kiểm soát phiên bản nào (ví dụ: Git) không? Nếu vậy, git checkoutmột số cam kết gần đây của bạn. Khi nào vấn đề được giới thiệu? Nhìn vào cam kết để biết chính xác mã nào đã thay đổi khi sự cố xảy ra lần đầu tiên.

Để xác định nguồn gốc của sự cố, hãy chạy ứng dụng của bạn và ghi lại vào tab Hiệu suất của Chrome .

Ở đó bạn có thể kiểm tra các chức năng khác nhau mất nhiều thời gian để chạy. Trong trường hợp của tôi, cái tương quan với các cảnh báo trong bảng điều khiển là từ một tệp được tải bởi tiện ích mở rộng AdBlock, nhưng đây có thể là một thứ khác trong trường hợp của bạn.

Kiểm tra các tệp này và cố gắng xác định xem đây là mã của một số tiện ích mở rộng hay của bạn. (Nếu đó là của bạn, thì bạn đã tìm ra nguồn gốc của vấn đề của mình.)

Tìm trong bảng điều khiển Chrome trong tab Mạng và tìm các tập lệnh mất nhiều thời gian nhất để tải.

Trong trường hợp của tôi, có một tập hợp Angular add trên script mà tôi đã đưa vào nhưng chưa được sử dụng trong ứng dụng:

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

Đây là các tệp JavaScript duy nhất mất nhiều thời gian để tải hơn thời gian xảy ra lỗi "Nhiệm vụ chạy dài".

Tất cả các tệp này chạy trên các trang web khác của tôi không có lỗi được tạo nhưng tôi đã gặp phải lỗi "Nhiệm vụ chạy dài" này trên một ứng dụng web mới hầu như không có bất kỳ chức năng nào. Lỗi dừng ngay lập tức khi gỡ bỏ.

Tôi đoán tốt nhất là các tiện ích bổ sung Angular này đang tìm kiếm đệ quy vào các phần ngày càng sâu của DOM cho các thẻ bắt đầu của chúng - không tìm thấy, chúng phải đi qua toàn bộ DOM trước khi thoát, mất nhiều thời gian hơn Chrome mong đợi - do đó, cảnh báo.

Tôi tìm thấy thư mục gốc của mã này trong mã của mình, nó đã tìm kiếm và ẩn hoặc hiển thị các nút (ngoại tuyến). Đây là mã của tôi:

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

Tab hiệu suất (profiler) hiển thị sự kiện mất khoảng 60 ms:

Hiện nay:

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

Tab hiệu suất (profiler) hiện hiển thị sự kiện mất khoảng 1 ms:

Và tôi cảm thấy rằng tìm kiếm hoạt động nhanh hơn bây giờ (229 nút).

Tôi tìm thấy một giải pháp trong mã nguồn Apache Cordova. Họ thực hiện như thế này:

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

Cách thực hiện đơn giản, nhưng cách thông minh.

Qua Android 4.4, sử dụng Promise. Đối với các trình duyệt cũ hơn, hãy sử dụngsetTimeout()

Sử dụng:

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

Sau khi chèn mã lừa này, tất cả các thông báo cảnh báo sẽ biến mất.

Điều này đã được thêm vào trong phiên bản Chrome 56 beta, mặc dù nó không có trong danh sách thay đổi này từ Blog Chromium: Chrome 56 Beta: Cảnh báo không bảo mật, Web Bluetooth và CSSposition: sticky

Bạn có thể ẩn điều này trong thanh bộ lọc của bảng điều khiển với hộp kiểm Ẩn vi phạm .

Nếu bạn đang sử dụng Chrome Canary (hoặc Beta), chỉ cần kiểm tra tùy chọn 'Ẩn vi phạm'.

Đây là lỗi vi phạm từ Google Chrome, hiển thị khi Verbosemức ghi nhật ký được bật.

Ví dụ về thông báo lỗi:

Giải trình:

Reflow là tên của quy trình trình duyệt web để tính lại vị trí và hình học của các thành phần trong tài liệu, nhằm mục đích hiển thị lại một phần hoặc toàn bộ tài liệu. Vì trào ngược là một hoạt động chặn người dùng trong trình duyệt, nên rất hữu ích cho các nhà phát triển để hiểu cách cải thiện thời gian chỉnh lại và cũng để hiểu tác động của các thuộc tính tài liệu khác nhau (độ sâu DOM, hiệu quả quy tắc CSS, các loại thay đổi kiểu khác nhau) trên dòng chảy lại thời gian. Đôi khi, việc chỉnh lại một phần tử trong tài liệu có thể yêu cầu chỉnh lại các phần tử cha của nó và bất kỳ phần tử nào tuân theo nó.

Bài viết gốc: Tối thiểu hóa phản xạ trình duyệt của Lindsey Simon, Nhà phát triển UX, được đăng trên developers.google.com.

Và đây là liên kết Google Chrome cung cấp cho bạn trong Trình cấu hình hiệu suất, trên các cấu hình bố cục (các vùng màu hoa cà), để biết thêm thông tin về cảnh báo.

Thêm những hiểu biết của tôi ở đây vì chủ đề này là câu hỏi stackoverflow "đi đến" về chủ đề này.

Vấn đề của tôi là trong một ứng dụng UI-UI (giai đoạn đầu)

• vị trí của nhà cung cấp Theme tùy chỉnh là nguyên nhân

khi tôi thực hiện một số tính toán buộc hiển thị trang (một thành phần, "kết quả hiển thị", tùy thuộc vào nội dung được đặt trong phần khác, "phần đầu vào").

Mọi thứ đều ổn cho đến khi tôi cập nhật "trạng thái" buộc "thành phần kết quả" phải đăng ký lại. Vấn đề chính ở đây là tôi đã có một chủ đề vật chất-ui ( https: // m vật liệu- ui.com/customization/theming/#a-note-on-performance) trong cùng một trình kết xuất (App.js / return ..) là "thành phần kết quả", SummaryAppBarPure

Giải pháp là nâng ThemeProvider lên một cấp (Index.js) và gói thành phần Ứng dụng ở đây, do đó không buộc ThemeProvider phải tính toán lại và vẽ / bố trí / chỉnh lại dòng.

trước

trong App.js:

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

        <SummaryAppBarPure
//...

trong index.js

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

sau

trong App.js:

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

        <SummaryAppBarPure
//...

trong index.js

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

Trào lưu cưỡng bức thường xảy ra khi bạn có một chức năng được gọi là nhiều lần trước khi kết thúc thực hiện.

Ví dụ: bạn có thể gặp sự cố trên điện thoại thông minh, nhưng không phải trên trình duyệt cổ điển.

Tôi đề nghị sử dụng một setTimeoutđể giải quyết vấn đề.

Điều này không quan trọng lắm, nhưng tôi nhắc lại, vấn đề phát sinh khi bạn gọi một hàm nhiều lần chứ không phải khi hàm này mất hơn 50 ms. Tôi nghĩ rằng bạn đang nhầm lẫn trong câu trả lời của bạn.

1. Tắt các cuộc gọi 1-1 và tải lại mã để xem nếu nó vẫn tạo ra lỗi.
2. Nếu tập lệnh thứ hai gây ra lỗi, hãy sử dụng setTimeOutdựa trên thời gian vi phạm.

Đây không phải là một lỗi chỉ đơn giản là một tin nhắn. Để thực hiện thay đổi thông báo này
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(ví dụ)
thành
<!DOCTYPE html>(nguồn Firefox mong đợi điều này)

Thông báo đã được hiển thị trong Google Chrome 74 và Opera 60. Sau khi thay đổi, rõ ràng, 0 verbose.
Một cách tiếp cận giải pháp