jQuery và DOM Performance Manipulation Issue trong IE8

Question

tôi đã phát triển một mô-đun tại nơi làm việc của tôi trong JQuery, nó là cơ bản một bảng với các chức năng sau đây

• mức di Sửa
• Row mức chỉnh sửa
• Drop n thả hàng để thay đổi vị trí
• cột hiện/ẩn
• cột thay đổi kích thước

mọi thứ hoạt động tốt trên các trình duyệt mới nhất như, FF9.0, IE9 và Chrome, nhưng trong các trình duyệt cũ hơn như IE8 và FF3.6 là số hàng trong bảng làm tăng hiệu suất của trang giảm đáng kể. Tôi đã thử nhiều tối ưu hóa từ thao tác jQuery và DOM nhưng vẫn không ảnh hưởng đến hiệu suất. Bất kỳ ý tưởng nào nếu tôi thiếu điều gì đó hoặc một số mẹo để làm cho hiệu suất tốt hơn tức là ở mức có thể chấp nhận được.

Tôi chưa sử dụng bất kỳ plugin nào, mọi thứ đều là triển khai tùy chỉnh của tôi. Các tập tin javascript là khá lớn và tôi đang tìm kiếm một số thực hành tốt chung và lời khuyên.

Answer 1

Có hai cách chính để cải thiện hiệu suất với các trang html lớn - giảm số lần chỉnh trang và giảm số lượng trình xử lý.

1. Giảm số lượng các trang chỉnh lại dòng

Mỗi khi bạn thực hiện thay đổi vào DOM, nó cần phải vẽ lại bản thân. Đây là một reflow. Giữ chúng ở mức tối thiểu bằng cách tạo một chuỗi hoặc đoạn DOM với tất cả các thao tác DOM của bạn, sau đó chèn nó vào trang của bạn. Điều này sẽ kích hoạt chỉ có một reflow. Ví dụ: nếu bạn đang thêm một bảng, hãy tạo toàn bộ bảng có văn bản trong đó, sau đó chèn bảng đó vào một thao tác đơn lẻ.

JQuery cho phép bạn tạo ra một đoạn DOM như thế này:

var table = $('<table></table'); 

Bạn có thể thao tác đoạn theo những cách tiêu chuẩn:

var line = $('<tr><td>Some Data</td></tr>'); 
line.css('color','red'); 
table.append(line); 

Sau đó, khi đoạn hoàn tất, thêm nó vào DOM trong một bước duy nhất:

$('body').append(table); 

bạn sẽ chỉ kích hoạt một lần chỉnh lại và quy trình sẽ được đơn đặt hàng của cường độ nhanh hơn.

2. Giảm số lượng các bộ xử lý

Nếu bạn có rất nhiều điều khiển trên mỗi hàng, đó là rất nhiều các bộ xử lý. Thay vào đó, chỉ tạo một trình xử lý và đính kèm nó vào thư mục gốc của tài liệu, sau đó khi nó được gọi là kiểm tra thuộc tính đích để khám phá những gì cần làm. Trong JQuery, bạn có thể sử dụng trình xử lý "bật" mới để thực hiện việc này, hoặc sử dụng trình xử lý kiểu "sống" cũ.

ví dụ:

$('table td').on('click', function() { 
    //do work here 
}); 

Chỉ có một bộ xử lý sẽ được tạo ra mà sẽ xử lý tất cả các sự kiện td nhấp chuột.

Làm cả hai điều này và bạn sẽ thấy hiệu suất được cải thiện đáng kể.

Answer 2

Tin xấu là, không thực sự nhiều bạn có thể làm vì nó chủ yếu phụ thuộc vào công cụ javascript được sử dụng trong trình duyệt.

Nếu đó là tùy chọn để bạn dùng thử Chromeframe của Google cho IE8, nhưng trên trang web công cộng có nhiều khả năng không phải là giải pháp tốt nhất. Nhưng nó có thể ở trong môi trường doanh nghiệp khi người dùng có thể dễ dàng cập nhật phần mềm.

Bạn cũng có thể thử để làm cho bảng on-the-fly:

Ao bạn có bảng của bạn và bạn có một mảng với thông tin trong javascript (hoặc pullable qua ajax), ngoài ra bạn có thông tin về nơi bạn nằm trong bảng (hàng) và bảng dài (maxrows) trong bao lâu.

Sau đó, tạo bảng chỉ lớn bằng khung nhìn, có thể lớn hơn một chút. Mọi thứ ở trên và dưới chế độ xem được xử lý bởi một lớn <div> hoặc bất kỳ thứ gì được streched đến chiều cao của hàng hoặc hàng còn lại trước hàng trên cùng trong chế độ xem.

Bằng cách đó, chỉ có một số lượng rất hạn chế các nút dom có ​​mặt bất kỳ lúc nào. Nó có thể cải thiện hiệu suất.

Khi người dùng cuộn xóa ô bảng không còn trong chế độ xem (và thêm chiều cao của chúng vào khối trắng khoảng trắng tương ứng) và thêm ô bảng mới được đưa vào chế độ xem (loại bỏ chiều cao khỏi khoảng trắng ở phía bên kia)).