Điều gì có thể được thực hiện để cải thiện hiệu năng IE8 cho các tập dữ liệu lớn?

Question

Tôi có một trang hiển thị ~ 300 trang giá trị của dữ liệu dạng bảng. Firefox, Chrome, Safari đều hoạt động tốt nhưng IE 7, 8 và 8 Khả năng tương thích xem tất cả các lỗi. Nó kéo dài trong vài giây khi tôi cố gắng cuộn hoặc nhấn nút lên/xuống trang.

Phân trang, tập hợp dữ liệu nhỏ hơn và các đề xuất khả năng sử dụng khác sẽ không hoạt động cho trang này. Giả sử tôi hoàn toàn không có lựa chọn nào khác ngoài việc hiển thị tất cả dữ liệu này cùng một lúc ... một số điều tôi có thể làm để tinh chỉnh nó là gì?

Dữ liệu đang được tải qua jQuery/Ajax và dường như ít nhất là một phần nghi ngờ ở đây, bởi vì khi tôi tạo trang thử nghiệm để hiển thị trực tiếp kết quả, không phải là khá. gần như linh hoạt như các trình duyệt khác.

Tôi đã sử dụng thành công các plugin jQuery như SlickGrid để giải quyết các vấn đề tương tự trong quá khứ, nhưng vì lý do mất nhiều thời gian để giải thích chúng không phải là tùy chọn, ngay cả với khả năng hiển thị mẫu vi mô. Tôi chủ yếu quan tâm đến những điều chỉnh mà tôi có thể thực hiện để cải thiện hiệu suất mà không cần làm lại toàn bộ trang hoặc giới thiệu các giải pháp của bên thứ ba.

DOM đơn giản có tạo sự khác biệt lớn không? Hay IE không xử lý dữ liệu được đưa vào qua JavaScript/Ajax?

Answer 1

Khó xem mà không có thêm chi tiết hoặc ví dụ ... bạn đang xây dựng nội dung như thế nào? Có khá ít bắt với nội dung bảng xây dựng: trong thiết lập cụ thể innerHTML trực tiếp trên <table> không hoạt động trong IE, do đó, html() của jQuery có thể sẽ thực hiện một vòng dài, chậm nếu đó là những gì bạn đang sử dụng.

Nhưng một mẹo có mục đích chung cho bất cứ điều gì với các bảng, đặc biệt là lớn hơn: thiết lập các phong cách table-layout: fixed trên các yếu tố <table>, thiết lập cột width phong cách ở hai hàng đầu tiên của tế bào chỉ, hoặc trên một tập hợp <col> s. (Cột không rõ ràng width sẽ chia sẻ chiều rộng còn lại bằng nhau giữa chúng trong trường hợp bố cục lỏng.)

Vì nó không phụ thuộc vào số lượng nội dung trong mỗi ô, bố cục bảng nhanh hơn và dễ dự đoán hơn mặc định auto thuật toán bố cục bảng.

Answer 2

Tôi thấy rằng khi bạn chèn động nội dung lớn, phức tạp vào một trang hiện có, IE nhanh hơn nhiều (nhiều) khi đặt innerHTML hơn là tạo hàng tá hoặc hàng trăm nút DOM và chèn chúng, cho dù bạn đang sử dụng thư viện phía máy khách hay không. Nếu bạn hiển thị phía máy chủ HTML của mình và gửi xuống dưới dạng chuỗi thay vì gửi dữ liệu JSON và hiển thị phía máy khách, bạn đang sử dụng nhiều băng thông hơn, nhưng người dùng IE của bạn có thể sẽ có trải nghiệm tốt hơn.

Hiệu suất javascript của IE hiện tại khá khủng khiếp, vì vậy nếu bạn muốn làm cho trang web của mình nhanh hơn trong IE, việc giảm thiểu thao tác DOM quy mô lớn là một khởi đầu tốt. Nó không phải là quá khó khăn để thực hiện một trường hợp thử nghiệm đơn giản để so sánh, để xem nếu một sự thay đổi như vậy sẽ có lợi cho tình hình cụ thể của bạn.

Answer 3

sử dụng innerHTML và giảm thiểu tương tác js/dom. Js không phải là chậm trong IE nhưng cầu js/dom là rất chậm. Cũng tránh chọn các phần tử trong html mà bạn sắp chèn. Nếu bạn làm như vậy, jQuery sẽ phải đi qua từng phần tử và kiểm tra đối với thuộc tính id hoặc css. Điều này rất chậm.

Tự chèn một vài nghìn phần tử trong DOM trong IE là có thể thực hiện được.nhưng nếu bạn bắt đầu thực hiện một số thay đổi trên html này, bạn có thể gặp phải vấn đề về mức độ nghiêm trọng.

Ngoài ra, mã của bạn là cần thiết để biết cách làm cho nó nhanh hơn. cũng là một trang thử nghiệm có thể được lược tả sẽ là tuyệt vời.

FYI, công cụ lược tả hiệu suất duy nhất có sẵn cho IE là phiên bản dynatrace ajax. Phần mềm miễn phí và chất lượng tuyệt vời của nó. Sử dụng nó !

Answer 4

Xem ra cho jQuery .find() trong IE8. Nếu nó không được viết cẩn thận, bạn có thể khiến IE8 làm một số thể dục dụng cụ vô lý. Muốn tôi biết thêm về lý do tại sao, vv vv nhưng nếu bạn nhận xét của bạn .find() trong jQuery của bạn và chạy nó, mặc dù kịch bản của bạn tạm thời bị hỏng, bạn có thể thấy rằng trang đột nhiên tải nhanh chóng.

Chỉ cần đoán, nhưng dễ dàng để thử.

Answer 5

1. Avoid using script that going to make changes in DOM specially inside a loop. 
     eg. 

for (var i = 0; i < rownodes.length; i++) { 
    curRow = document.createElement("tr"); // this is a direct operation to DOM 
    for(j=0 ;j <colLenth;j==){ 
    cell = document.createElement("td"); 
    } 
} 
// instead use.. 
var table = '<table>'; 
for (var i = 0; i < rownodes.length; i++) { 
    table = table + '<tr>'; // don't use DOM operation if not needed. 
    for(j=0 ;j <colLenth;j==){ 
     table = table + '<td> my text </td>'; 
    } 
} 
table = table + '</table>';// simple string operations will be much faster 
('#myDiv').append($(table));// at the end you can add it to the DOM. 

[Building High Performance HTML Pages][1] 

    [1]: http://msdn.microsoft.com/en-us/library/ms533002%28v=vs.85%29.aspx 

Answer 6

1. Cũng có thể cải thiện hiển thị bảng bằng cách cải thiện bản trình bày của nó. bằng cách thêm colgroup bằng cách này, việc hiển thị bảng trở nên nhanh (có thể thấy sự khác biệt khi làm việc với các bảng lớn) vì công cụ trình duyệt không phải tìm kiếm độ rộng của từng màu riêng lẻ.

<table style="table-layout: fixed" width="600"> 
    <colgroup> 
     <col width="100"><col width="300"><col width="200"> 
    </colgroup> 
    <tr height="20"> 
     <td>ss</td> 
     <td>ss</td> 
     <td>ss</td> 
    </tr> 
    <tr></tr> 
    .... 
    ... 
</table> 

see the below link for detailed discription 

http://msdn.microsoft.com/en-us/library/ie/ms533002(v=vs.85).aspx