Thực thi javascript chậm trong chrome, profiler sản lượng "(chương trình)"

Question

Làm cách nào để xác định xem hangups có trong ứng dụng javascript của tôi khi profiler đặt (chương trình) ở đầu với 80%? Logic của tôi có quá phức tạp để theo dõi điểm phát sóng xảy ra không? Bộ nhớ của tôi có quá lớn không? Nguyên nhân của việc này là gì?

biết thêm thông tin:

• Không có yếu tố về hình thức lưu thẻ một canvas
• Hiện tại không có thông tin liên lạc chờ (XHR)
• http://i.imgur.com/j6mu1.png

Answer 1

Chu kỳ không hoạt động ("không làm gì") cũng sẽ hiển thị dưới dạng "(chương trình)" (bạn có thể lập trang SO này trong vài giây và nhận 100% số (chương trình)), vì vậy đây không phải là dấu hiệu của một cái gì đó xấu trong chính nó.

Điều khác là khi bạn thực sự thấy ứng dụng của bạn bị trễ. Sau đó (chương trình) sẽ được đóng góp bởi mã liên kết V8 (và mã WebCore mà chúng gọi, về cơ bản là bất cứ điều gì: hoạt động DOM/CSS, vẽ, cấp phát bộ nhớ và GC, cái gì không.) Nếu trường hợp đó xảy ra, bạn có thể ghi lại Dòng thời gian của ứng dụng của bạn (chuyển sang bảng Timeline trong Công cụ dành cho nhà phát triển và nhấn nút Record trong thanh trạng thái dưới cùng, sau đó chạy ứng dụng của bạn trong một thời gian.) Bạn sẽ thấy nhiều sự kiện bên trong với thời gian của chúng dưới dạng thanh ngang . Bạn sẽ thấy các phản xạ, tính toán kiểu, hẹn giờ được kích hoạt, các sự kiện GC và hơn thế nữa (btw, phiên bản Chromium mới nhất có thời gian sử dụng bộ nhớ profiler cải tiến, do đó bạn sẽ có thể theo dõi bộ nhớ được sử dụng bởi các yếu tố nội bộ nhất định.)

Để chẩn đoán các vấn đề về bộ nhớ (nhiều phân bổ dẫn đến nhiều chu kỳ GC đầy đủ), bạn có thể sử dụng bảng điều khiển Profiles. Chụp nhanh heap trước khi phần mã của bạn bắt đầu, và một đoạn mã khác sau khi mã này đã chạy một thời gian. Sau đó so sánh hai heapshots (SELECT bên phải ở phía dưới) để xem phân bổ đã diễn ra, cùng với tác động bộ nhớ của chúng.

Answer 2

Để kiểm tra xem nó bị chậm do sử dụng tùy chọn bộ nhớ: chrome://memory

Ngoài ra, bạn có thể kiểm tra chrome://profiler/ để biết các gợi ý có thể xảy ra.

Tùy chọn khác là đăng mã javascript của bạn tại đây.

Answer 3

Xem liên kết này: nó sẽ giúp bạn trong việc Understanding Firebug profiler output

tôi sẽ nói bạn nên kiểm tra mà phương pháp chụp%. Bạn có thể giảm thiểu các thủ tục không mong muốn từ chúng. Tôi thấy trong hình của bạn cho một số phương pháp draw tiêu thụ khoảng 14% đang chạy ở chế độ nền. Có thể là do JS của bạn tải chậm. Bạn nên xác định những gì đang dành thời gian. Cả FF và Chrome đều có một tính năng hiển thị lưu lượng mạng. Có một cái nhìn tại yslow là tốt, họ có một addon tuyệt vời để Firebug.

tôi sẽ đề nghị một số công cụ kiểm toán Chome của mà có thể cho bạn biết rất nhiều về lý do tại sao điều này xảy ra, bạn nên có lẽ bao gồm nhiều thông tin về:

1. bao lâu đã làm nó mất kết nối với máy chủ?
2. mất bao lâu để chuyển nội dung?
3. đồng thời bạn đang tải bao nhiêu nội dung khác trên trang đó?

nào ngay cả khi không tất cả những gì, đây là một danh sách kiểm tra để cải thiện hiệu suất dành cho bạn:

• đảm bảo javascript của bạn được xử lý và phục vụ nội dung như tĩnh, ví dụ thông qua nginx/apache/bất cứ điều gì trực tiếp hoặc cdn, không nhấn vào khung ứng dụng của bạn
• điều tra xem bạn có thể sử dụng CDN để phân phát javascript hay không, đôi khi thậm chí chỉ tên miền khác nhau vào máy chủ của bạn tạo ra tác động tích cực, ví dụ: thay vì http://example.com/blah.js ->http://cdn2.example.com/blah.js
• đảm bảo js của bạn được phục vụ với tiêu đề hết hạn thích hợp, không tái tải nó mỗi khi khách hàng làm mới một trang
• bật gzipping nội dung js
• giảm bớt js của bạn sử dụng khác nhau công cụ có sẵn (ví dụ với trình biên dịch đóng cửa Google)
• kết hợp kịch bản của bạn (làm giảm số lượng yêu cầu)
• đặt thẻ kịch bản của bạn ngay trước
• tra và dọn dẹp/tối ưu hóa onload của bạn và móc document.ready

Hãy xem YSlow plugin và Google PageSpeed, cả hai đều rất hữu ích trong việc cải thiện hiệu suất.