Lỗi Javascript phổ biến ảnh hưởng nghiêm trọng đến hiệu suất? [đóng cửa]

Tại một cuộc họp UI / UX gần đây mà tôi tham dự, tôi đã đưa ra một số phản hồi trên một trang web sử dụng Javascript (jQuery) cho tương tác và giao diện người dùng của nó - đó là hoạt hình và thao tác khá đơn giản, nhưng hiệu suất trên một máy tính tốt là rất kinh khủng.

Nó thực sự nhắc nhở tôi về rất nhiều trang web / chương trình mà tôi đã thấy với cùng một vấn đề, trong đó một số hành động nhất định chỉ phá hủy hoàn toàn hiệu suất. Nó chủ yếu trong các tình huống (hoặc ít nhất là đáng chú ý hơn) trong đó Javascript gần như đóng vai trò thay thế Flash. Điều này trái ngược hoàn toàn với một số ứng dụng web mà tôi đã sử dụng có nhiều Javascript và chức năng hơn nhưng hoạt động rất trơn tru (COGNOS của IBM là thứ tôi có thể nghĩ ra khỏi đỉnh đầu).

Tôi muốn biết một số vấn đề phổ biến không được xem xét khi phát triển JS sẽ giết chết hiệu suất của trang web.

Một kẻ giết người hiệu suất phổ biến đang kêu gọi .lengthHTMLCollection trong một forvòng lặp:

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

Mô hình chống đó làm cho kích thước của bộ sưu tập được tính trên mỗi lần đi qua vòng lặp. Cách tiếp cận tốt hơn là tính toán độ dài bên ngoài vòng lặp:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

Không, vấn đề không đến từ JS được sử dụng làm thay thế flash. Nếu bạn không bị thuyết phục với điều đó, hãy ghi lại cho bạn về bản mô tả: nó rất gần với JS.

Là kẻ giết người biểu diễn, bạn có thể tìm thấy một số thực hành xấu:

• Đính kèm trình xử lý sự kiện vào sự kiện liên tục, như cuộn, vuốt chuột hoặc những thứ tương tự. Điều này có 2 nhược điểm: nếu sự kiện không được kích hoạt đủ, ứng dụng của bạn sẽ không phản ứng. Nếu nó được kích hoạt quá nhiều, bạn sẽ có một tải CPU lớn mà không có gì.
• Thực hiện các cuộc gọi AJAX đồng bộ. Javascript không phải là đa luồng, sau đó, khi một phần của JS đang chờ một cái gì đó, ứng dụng của bạn bị đóng băng. Bạn nên sử dụng các cuộc gọi AJAX không đồng bộ tốt hơn và cùng một cách sử dụng setTimeout / setInterval để phân chia giai đoạn tính toán dài và giữ cho ứng dụng của bạn hoạt động trở lại.
• Độ phức tạp thuật toán cao như trong bất kỳ ngôn ngữ khác.

Tôi đã đưa ra một số phản hồi trên một trang web sử dụng Javascript (jQuery) cho tương tác và giao diện người dùng của nó - đó là hình ảnh động và thao tác khá đơn giản, nhưng hiệu suất trên một máy tính tốt là rất khủng khiếp.

Một vấn đề lớn nhất với hiệu năng là sử dụng các khái niệm trừu tượng mức cao (như jQuery) mà không hiểu mô hình DOM cơ bản và mô hình hoạt hình CSS3 (hoặc canvas hoặc svg).

Nếu bạn không biết cách thực hiện mà không có sự trừu tượng thì bạn hoàn toàn không có kiến thức về kỹ thuật nào nhanh hay chậm.

Tìm hiểu JavaScript, Tìm hiểu DOM. Một khi bạn biết hai điều đó và bạn biết những gì trừu tượng của bạn làm dưới mui xe thì bạn có thể sử dụng chúng một cách hiệu quả. Tất nhiên hầu hết thời gian bạn nhận ra sự trừu tượng là làm chậm và chỉ cần thực hiện thủ công mà không cần thư viện.

Cái hay và nhược điểm của Javascript là nó cực kỳ linh hoạt. Điều đó đang được nói, nó thực sự cho phép bạn làm những việc mà có lẽ bạn không nên làm trong nhiều trường hợp.

Từ các đánh giá mã mà tôi đã tham gia, các mối quan tâm chính có xu hướng liên quan đến kết xuất CSS. Đối với các nhà phát triển JS mới hơn, chúng ta có xu hướng thấy quá nhiều biến được sử dụng trong phạm vi toàn cầu.

Ngoài ra, đóng cửa không đúng cách thường có thể gây rò rỉ bộ nhớ. Tuy nhiên, hầu hết các khung Javascript hiện đại đều ngăn chặn các loại sự cố này miễn là mã của bạn tuân theo khung.

Đây là một liên kết nhanh mà tôi đã tìm thấy cách đây một năm về việc viết mã jquery tốt hơn: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increas-your-jquery-performance /

Một điều tôi vừa tìm thấy trong một mã đồng nghiệp đang giết chết hiệu năng là bộ nhớ đệm dữ liệu không cần lưu vào bộ nhớ cache.

Thí dụ:

var table = $("#data").dataTable(.....);

DataTables là một trình cắm thêm jQuery mà chúng tôi sử dụng để tạo các lưới tốt. Dù sao, bảng có gần 5k hàng trong đó, áp dụng trình cắm DataTables và sau đó lưu nó vào biến bảng thực sự khiến cả FireFox và IE cảnh báo rằng một tập lệnh mất quá nhiều thời gian. Đạo đức của câu chuyện, chỉ lưu trữ dữ liệu nếu bạn cần.

Từ những gì tôi nghe thấy forcác vòng lặp được tính toán nhanh hơn so với jQuery $.each().