Việc tối ưu hiệu suất cho ứng dụng sử dụng thư viện Layui có thể cải thiện đáng kể trải nghiệm người dùng, đặc biệt khi xử lý lượng dữ liệu lớn. Bài viết này sẽ cung cấp các chiến lược và ví dụ thực tế giúp bạn tăng tốc độ tải và hiệu quả hiển thị của ứng dụng.

Tối ưu việc tải module

Layui sử dụng kiến trúc mô-đun, nhưng cách tải mặc định có thể gây lãng phí tài nguyên nếu không được kiểm soát.

Tải chọn lọc module cần thiết

Thay vì tải tất cả các thành phần không cần thiết:

// Không khuyến khích: Tải toàn bộ (khoảng 150KB)
layui.use(function(){
  var table = layui.table;
  var form = layui.form;
});

Hãy chỉ định cụ thể các module mà bạn cần:

// Khuyến khích: Chỉ tải module cần thiết (khoảng 30KB)
layui.use(['table'], function(modules){
  var table = modules[0];
  table.render({/*...*/});
});

Kết hợp các module nghiệp vụ

Để giảm số lượng yêu cầu HTTP, hãy kết hợp các file JavaScript của các module khác nhau vào một file duy nhất.

// main.js - File nhập chung
layui.define(['module1', 'module2'], function(exports){
  var mod1 = layui.module1;
  var mod2 = layui.module2;

  // Gộp logic nghiệp vụ tại đây
  exports('main', {/* Giao diện kết hợp */});
});

Sử dụng file đã gộp trên trang web:

<script>
layui.config({
  base: '/js/combined/' // Thư mục chứa module đã gộp
}).use('main'); // Sử dụng module đã gộp
</script>

Tăng tốc độ hiển thị bảng dữ liệu

Bảng là một trong những thành phần quan trọng của Layui, nhưng nó cũng là nơi dễ xảy ra chậm trễ khi dữ liệu quá lớn.

Sử dụng cuộn ảo và phân trang

Khi làm việc với khối lượng dữ liệu lớn, nên áp dụng phương pháp cuộn ảo và phân trang để tránh tải hết dữ liệu cùng lúc:

layui.table.render({
  elem: '#largeTable',
  url: '/api/data',
  page: true, // Bật phân trang
  limit: 50, // Giới hạn mỗi trang là 50 bản ghi
  height: 'full-100', // Chiều cao tự động
  cols: [[/* Cấu hình tiêu đề */]]
});

Xử lý dữ liệu trước khi truyền

Giảm thiểu kích thước dữ liệu gửi qua mạng bằng cách chỉ giữ lại những trường cần thiết:

{
  "status": "success",
  "data": [
    {"id": 1, "name": "Nguyễn A", "value": 90},
    {"id": 2, "name": "Trần B", "value": 85}
  ],
  "total": 10000
}

Cấu hình bảng đơn giản:

cols: [[
  {field: 'name', title: 'Tên', width: 150},
  {field: 'value', title: 'Giá trị', width: 100, sort: true}
]];

Vô hiệu hóa các chức năng không cần thiết

Với bảng chỉ dùng để hiển thị, hãy tắt các tính năng chỉnh sửa hoặc sắp xếp:

layui.table.render({
  elem: '#readOnlyTable',
  data: staticData,
  edit: false, // Tắt chỉnh sửa ô
  sort: false, // Tắt sắp xếp
  toolbar: false // Tắt thanh công cụ
});

Tối ưu sâu từ mã nguồn

Hiểu rõ cách thức hoạt động bên trong của Layui có thể giúp bạn tìm ra các điểm nghẽn và cải thiện chúng.

Cải tiến lõi render bảng

Tại src/modules/table.js, bạn có thể tối ưu hàm render bằng cách:

1. Sử dụng DocumentFragment để thêm nhiều nút DOM cùng lúc.
2. Giảm thiểu tái bố trí (re-flow) bằng cách xây dựng DOM ngoại tuyến trước khi chèn.
3. Áp dụng ủy quyền sự kiện thay vì ràng buộc từng dòng riêng lẻ.

Tự tạo sự kiện cuộn

Để giảm tần suất cập nhật khi cuộn, bạn có thể giới hạn số lần gọi sự kiện:

var container = $('.layui-table-scroll');
var lastScrollPos = 0;

container.on('scroll', function() {
  if (!this.scrollTimer) {
    this.scrollTimer = setTimeout(() => {
      var currentScroll = container.scrollTop();
      // Xử lý logic tại đây
      lastScrollPos = currentScroll;
      clearTimeout(this.scrollTimer);
      this.scrollTimer = null;
    }, 150); // Chờ 150ms giữa các lần gọi
  }
});

Giám sát hiệu suất

Xây dựng cơ chế theo dõi thời gian tải và hiển thị để đánh giá hiệu quả tối ưu.

performance.mark('startRender');

layui.table.render({
  done: function(){
    performance.mark('endRender');
    performance.measure('renderTime', 'startRender', 'endRender');
    var result = performance.getEntriesByName('renderTime')[0];
    console.log('Thời gian hiển thị:', result.duration, 'ms');
  }
});