Trong loạt bài này, mình sẽ chia sẻ những kinh nghiệm và chiến lược tối ưu hiệu năng Frontend mà mình đã triển khai trong dự án thực tế. Nhằm gia tăng tốc độ render trang web và cải thiện trải nghiệm người dùng.
Mở Đầu
Khi làm việc với một khách hàng, mình đã phát hiện ra những vấn đề nghiêm trọng liên quan đến hiệu năng Frontend. Giao diện bị lag, khó thao tác và khiến cho khách hàng cảm thấy không hài lòng: "Sao phầm mềm càng ngày càng chậm thế em?" Lời phàn nàn đó khiến mình cảm thấy bối rối và quyết tâm tối ưu hóa giao diện ngay lập tức.
Để anh em dễ hình dung, mình sẽ mô tả qua giao diện cần tối ưu: đó là màn hình chi tiết của Mẫu bảng lương. Màn này có rất nhiều Thành phần lương, nơi người dùng chỉnh sửa công thức để tính lương. Giao diện này bao gồm các chức năng kéo thả, do đó mình đã sử dụng thư viện bên ngoài vuedraggable.
Vấn Đề 1: Màn Hình Trắng Trong 3 Giây Khi Vào Màn Chi Tiết Mẫu Bảng Lương
Khách hàng có khoảng 100 Thành phần lương trong Mẫu bảng lương. Dù rằng Vue có thể render 100 item một cách dễ dàng, nhưng với thư viện vuedraggable, việc này bị chậm lại, dẫn đến hiện tượng trắng màn hình khi người dùng vào màn.
Chiến Lược: Áp dụng Infinite Scroll và giảm kích thước DOM. Mình đã quyết định chỉ render 10 Thành phần lương khi mới vào trang, qua đó giảm kích thước DOM chỉ còn 10 item. Khi người dùng cuộn xuống gần cuối, 10 item tiếp theo sẽ được render, và quy trình này sẽ tiếp tục.
Để làm được điều này, mình đã thêm một thuộc tính isShow vào từng item trong mảng, sử dụng v-if để điều khiển hiển thị của item này trên DOM.
Kết Quả: Màn hình được render gần như ngay lập tức khi vào trang.
Vấn Đề 2: Lưu Công Thức Lương và Hiện Thị Thông Báo Lỗi
Khi người dùng bấm lưu và công thức không đúng, hệ thống sẽ thông báo lỗi, và khi người dùng chỉnh sửa lại công thức, phần mềm gặp hiện tượng lag khoảng 3-5 giây.
Chiến Lược 1: Đo Hiệu Năng Qua Tab Performance.
Mình đã đo hiệu năng khi người dùng chỉnh sửa công thức, trước và sau khi bấm lưu. Trước khi lưu, việc chỉnh sửa chạy mượt mà, nhưng sau khi lưu, một function có tên là fn lại tiêu tốn 1.15 giây, trong khi trước đó chỉ tốn 4.21 ms. Mình đã phát hiện hàm dependArray được gọi nhiều lần và tiêu tốn thời gian.
Chiến Lược 2: Khoanh Vùng Gây Lỗi. Mình tiếp tục tìm hiểu sâu vào hàm save, thử comment từng đoạn code để xác định đoạn gây chậm. Cuối cùng, mình tìm ra hàm xử lý validate là nguyên nhân chính gây ra tình trạng chậm trễ.
Khi kiểm tra khởi tạo giá trị cho biến validateInfo, mình phát hiện ra rằng nó được khởi tạo thành [] thay vì {}, điều này ảnh hưởng tới hiệu suất khi giá trị của ID các Thành phần lương ngày càng lớn.
Kết Quả
Sau khi sửa giá trị khởi tạo thành {}, mọi thứ lại trở nên mượt mà. Chỉ với vài bước cơ bản, mình đã giúp giảm tốc độ tải màn hình Mẫu bảng lương gấp hàng trăm lần.
Tổng Kết
- Kích thước DOM càng nhỏ, tốc độ render càng nhanh.
- Áp dụng Infinite Scroll để quản lý hiệu quả danh sách dài.
- Sử dụng tab Performance để đo lường hiệu năng.
- Rà soát và khoanh vùng lỗi chính xác.
Cảm ơn anh em đã đọc bài viết. Hy vọng rằng những chia sẻ này sẽ hữu ích và đừng quên theo dõi những phần tiếp theo của mình nhé!
Kết Nối
Có thể theo dõi mình qua các kênh:
