Hiển thị bảng dữ liệu lớn hiệu quả với Aurelia

Question

Tôi đang gặp khó khăn với hiệu suất khi hiển thị bảng dữ liệu lớn bằng Aurelia.

Ngay cả trong trường hợp bảng có kích thước vừa phải (20x20) Tôi không nhận được dưới 200ms cho Chrome, MS Edge mất ~ 800ms và IE11 mất ~ 2 giây. 200ms cũng là một vấn đề, nếu bạn muốn thêm (cuộn) ảo. Thời gian xử lý tăng lên với số lượng các ràng buộc trên mỗi ô của bảng. Tôi đã đặt cùng một (example) liên kết 'css', 'lớp', và tất nhiên nội dung ô.

<table class="table"> 
    <tbody> 
    <tr repeat.for="row of rows"> 
     <td repeat.for="column of columns" css.bind="getCellStyle(column, $parent.$first)" class.bind="getCellClasses(column, row)"> 
     <template replaceable part="cell-template"> 
      <span>${getCellText(column, row)}</span> 
     </template> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Bất kỳ ý tưởng nào về cách tôi có thể cải thiện hiệu suất?

Dựa trên các đề xuất ban đầu, tôi đã cố gắng tránh lặp lại lồng nhau nhưng điều này là không thể trong trường hợp của tôi vì cả hai cột và hàng đều là động.

Answer 1

Câu hỏi hay, đây là điều chúng tôi đã tập trung nhiều vào thời gian gần đây.

Trước tiên, tránh lặp lại lồng khi có rất nhiều dữ liệu liên quan. Chúng tôi đang làm việc để cải thiện hiệu suất cho trường hợp này sẽ cải thiện hiệu suất hoàn hảo cho kịch bản này bằng cách bỏ mẫu nhưng chưa sẵn sàng để phát hành.

Thứ hai, sử dụng liên kết một lần bất cứ khi nào có thể. Điều này sẽ loại bỏ bất kỳ quan sát bất động sản và quan sát đột biến mảng trên cao.

<table class="table"> 
    <tbody> 
    <tr repeat.for="row of rows & oneTime"> 
     <td repeat.for="column of columns & oneTime" css.one-time="getCellStyle(column, $parent.$first)" class.one-time="getCellClasses(column, row)"> 
     <span>${getCellText(column, row) & oneTime}</span> 
     </td> 
    </tr> 
    </tbody> 
</table> 

12/13/2015 EDIT

Việc phát hành sắp tới có hai sự thay đổi đó sẽ cắt giảm thời gian render lưới lớn trong nửa hoặc thậm chí ít hơn. Một trong những thay đổi này cải thiện hiệu quả của các ràng buộc một chiều (đến nay là chế độ liên kết thường được sử dụng nhất) và các thay đổi khác sẽ làm giảm một số công việc liên kết cho đến sau khi kết xuất ban đầu được thực hiện. Điều này sẽ làm cho việc sử dụng oneTime và oneWay cũng nhanh về mặt hiển thị ban đầu. Thông tin thêm về những cải tiến ở đây: http://blog.durandal.io/2015/12/04/aurelia-repaint-performance-rules/

Demo đây: http://jdanyow.github.io/aurelia-dbmonster/

Answer 2

Chỉ cần kết hợp các mảng của bạn thành một như đã đề cập.