Dạo bài
Một hệ thống lớn luôn phải đối mặt với sự gia tăng không ngừng của lượng truy cập từ người dùng, đồng thời phải kiểm soát được lượng dữ liệu ngày càng phình ra. Bạn bắt đầu nhận thấy những dấu hiệu rõ ràng của sự trì trệ, hệ thống chạy chậm và gây khó khăn trong trải nghiệm của người dùng
Trong bài viết này, mình sẽ giới thiệu một số kỹ thuật hữu ích để tối ưu hóa và cải thiện hiệu suất, giúp hệ thống của bạn hoạt động một cách hiệu quả hơn. Let's go!
Client
1. Cache
Là một trong những kỹ thuật ưu tiên và quan trọng hàng đầu mà bạn cần áp dụng ngay và liền cho hệ thống của mình
Sử dụng bộ nhớ cache để lưu trữ dữ liệu tạm thời và giảm số lần gửi yêu cầu đến máy chủ. Trình duyệt có 3 cách chính để lưu trữ dữ liệu tạm thời, bao gồm:
- Local Storage: Dữ liệu được lưu trữ trên trình duyệt không có thời gian hết hạn và vẫn giữ lại ngay cả khi bạn tắt tab hoặc tắt trình duyệt
- Session Storage: Dữ liệu được lưu trữ trên trình duyệt, tuy nhiên khi bạn tắt tab hoặc tắt trình duyệt, dữ liệu sẽ bị xóa
- Cookies: Dữ liệu được lưu trữ trên trình duyệt ngay cả khi bạn tắt tab hoặc tắt trình duyệt. Với Cookies, dữ liệu lưu trữ bị hạn chế dung lượng và bạn có thể cài đặt thời hạn lưu trữ trong bao lâu
2. Choose Data structure & Algorithm
Đây được xem là một trong những yếu tố quan trọng khi xây dựng hệ thống, nhằm nâng cao hiệu suất, tăng tốc độ chạy và tối ưu hiệu quả ứng dụng của bạn
Việc chọn sai cấu trúc dữ liệu và thuật toán có thể khiến hệ thống chậm đi, hiệu suất giảm
3. Tree shaking & Bundle code
Sử dụng các trình biên dịch như Vite, Webpack,... sẽ giúp bạn loại bỏ những đoạn code không dùng, giảm kích thước file và đồng thời đóng gói các file của bạn để triển khai ứng dụng
4. Code splitting
Khác với bundle code (đóng gói lại mã nguồn để giảm số lần request), thì với code splitting, mã nguồn của bạn sẽ được phân tách và chia nhỏ, chỉ tải những tệp cần thiết khi cần thiết, giảm thời gian tải và thực thi mã nguồn
5. Async/defer script
Sử dụng thuộc tính async hoặc defer khi import các tệp script vào HTML để tăng tốc độ tải trang
Có thể bạn đã biết hoặc chưa, khi trình duyệt phân tích tới thẻ script, nó sẽ block lại quá trình render HTML để tải và thực thi Javascript. Điều này sẽ gây khó chịu cho user của bạn. Bởi vì vậy, các thẻ Javascript cần đặt ở cuối thẻ body hoặc nếu đặt ở trong header thì cần dùng tới thuộc tính async hoặc defer
<script async src="script1.js"> <script defer src="script2.js"> 6. Optimize image
Trang web với nhiều hình ảnh có thể khiến cho trang của bạn chậm đi và tăng thời gian tải trang. Để giải quyết vấn đề này, bạn có thể áp dụng kỹ thuật lazy loading image để chỉ tải các hình ảnh khi cần thiết, tức là khi người dùng cuộn trang đến gần vị trí của hình ảnh thì lúc này hình ảnh mới được tải
<img src="image.png" loading="lazy" alt="Image" width="200" height="200">
Đảm bảo rằng kích thước hình ảnh được thiết kế sao cho phù hợp với kích thước hiển thị trên trang web
Sử dụng các công cụ nén hình ảnh để giảm kích thước tệp mà vẫn giữ được chất lượng hình ảnh
Chọn đúng định dạng hình ảnh cho từng trường hợp. Ví dụ, sử dụng định dạng JPEG cho hình ảnh có màu sắc phức tạp và PNG cho hình ảnh có độ trong suốt hoặc biểu đồ
7. Pagination
Khi user truy cập, sử dụng phân trang để hiển thị một phần nội dung trong trang sẽ giúp tăng tốc độ tải trang và giảm tải cho server
Một vài chiến lược trong kỹ thuật phân trang như:
- Basic pagination (Phân thành từng trang)
- Infinite scrolling (Cuộn vô hạn)
- Load more (Tải thêm)
8. Debounce & Throttle
Debounce và throttle là hai kỹ thuật được sử dụng để kiểm soát tần suất thực thi của các hàm trong quá trình xử lý sự kiện trong lập trình
Debounce là một hàm được gọi liên tục và sau đó được dừng gọi sau bao nhiêu ms thì hàm đó mới thật sự được thực thi
Ví dụ: Khi người dùng gõ vào ô tìm kiếm trên trang web, hàm xử lý tìm kiếm có thể được gọi liên tục mỗi khi người dùng gõ một ký tự. Tuy nhiên, để tránh việc gọi liên tục, ta có thể sử dụng debounce để chờ một khoảng thời gian sau khi người dùng dừng gõ ký tự, thì hàm sẽ chính thức thực thi và xử lý tìm kiếm từ khóa
Throttle giới hạn số lần gọi hàm trong bao nhiêu ms (bao nhiêu là do mình định nghĩa)
Ví dụ: Khi người dùng cuộn trang web, sự kiện scroll sẽ gọi và thực thi hàm liên tục. Tuy nhiên, để tránh tình huống đó, ta có thể sử dụng throttle để giới hạn hàm chỉ được thực thi sau mỗi 200ms chẳng hạn
9. Using CDN
Để cải thiện tốc độ tải trang và trải nghiệm người dùng, sử dụng mạng phân phối nội dung (CDN) là một lựa chọn thông minh
CDN là một hệ thống máy chủ phân tán đặt ở nhiều vị trí địa lý khác nhau trên thế giới. Khi người dùng truy cập trang web của bạn, CDN sẽ tải các tài nguyên (như hình ảnh, tệp CSS và Javascript) từ máy chủ gần vị trí của họ nhất
10. Using Web Workers
Web Workers là một công nghệ trong Web API của trình duyệt, cho phép bạn thực hiện các tác vụ chạy ngầm trên trang web. Nó hoạt động như một loại worker độc lập, không ảnh hưởng đến luồng chính của trang web
11. Using Tech & Library
Bằng cách lựa chọn công nghệ và thư viện phù hợp, bạn có thể tiết kiệm thời gian và công sức trong quá trình phát triển, đồng thời đảm bảo hiệu suất tốt nhất cho ứng dụng của mình
12. Performance Testing & Evaluation
Thực hiện thử nghiệm và đánh giá hiệu suất của trang web để xác định các vấn đề và những chỗ bị thắt cổ chai trong quá trình tải trang. Sử dụng các công cụ như Google Lighthouse, WebPageTest,... để đo và phân tích hiệu suất của trang web, từ đó tìm hiểu và cải thiện các vấn đề hiệu suất cụ thể
Kết bài
Các kỹ thuật trên sẽ giúp bạn tối ưu hóa hệ thống và cải thiện hiệu suất, mang lại trải nghiệm tốt hơn cho người dùng. Tuy nhiên, cần lưu ý rằng mỗi hệ thống có yêu cầu và đặc điểm riêng, vì vậy hãy xem xét và áp dụng những kỹ thuật phù hợp với hệ thống của bạn. Trong phần tiếp theo Phần 2, mình sẽ chia sẻ những kỹ thuật tối ưu liên quan đến phía server. Cảm ơn các bạn đã đọc