7 Tips để cải thiện hiệu năng JS
[translate]7 Tips to Improve JavaScript Performance
Awesome
Khi xây dựng một trang web điều đầu tiên có thể kể đến là xây dựng được một ứng dụng đáp ứng đủ các tiêu chí về tính năng. Nhưng như vậy là chưa đủ, đáp ứng đủ nhu cầu nhưng cũng cần có hiệu năng và tốc độ xử lý ổn định. Trừ khi những ứng dụng này chỉ có bạn mới có, hoặc người dùng bắt buộc phải sử dụng ứng dụng của bạn, còn không thì người dùng sẽ chọn những ứng dụng khác đem lại trải nghiệm tốt hơn, hiệu năng cao hơn. Thử nghĩ coi 1 api mà load tần 8s thì thôi, coi như đời này bỏ. Vì vậy cần phải tối ưu lại code cho dù biết là JS là ngôn ngữ bất đồng bộ nhưng nếu nhiều xử lý khiến chậm thì vẫn toang. Do vậy hôm nay mình chọn reup lại bài với nội dung này. Nếu có bất kì sai xót nào mong các bạn comment phía dưới. Cho một thế giới awesome hơn.
Nội dung
Khi bạn xây dựng một trang web điều quan trọng nhất đối với người dùng là hiệu năng của trang web. Thật là bực bội khi mà họ phải chờ đợi trang web tải. Có nhiều trang web xây dựng trên JavaScript và việc tăng hiệu suất của các trang web này là không đơn giản.
Tối ưu trang web đóng vai trò quan trọng trong việc tăng hiệu suất của một ứng dụng web. Bạn cũng có thể tự động một vài task và sử dụng đa dạng các công nghệ để tăng tốc hiệu suất của ứng dụng. Trong một khảo sát, có 47% người truy cập kì vọng một trang web tải trang ít hơn 2 giấy và 10% người truy cập rời khỏi trang web nếu thời gian tải trang lớn hơn 3 giây.
Trong bài viết này, chúng ta sẽ thảo luận về một vài cách để cải thiện hiệu suất của trang web.
1. Giảm kích thước ứng dụng với Webpack
Kích thước của ứng dụng tăng lên khi bạn tiếp tục thêm các module JS. Nó sẽ làm tăng số file trng ứng dụng, và do đó ứng dụng sẽ trở lên công kềnh và chậm chạp và qua đó làm giảm hiệu suất. Các file càng lớn thì brower chưa chắc đã hiểu đúng nội dung mà lập trình viên viết.
Để giải quyết vấn đề này, lập trình viên đã sử dụng helper để đảm bảo rằng brower có thể hiểu đúng code.
Static module bundler webpack cũng cho phép giải quyết vấn đề này. Webpack tạo ra các graph phụ thuộc sử dụng các module có sẵn. Webpack tạo ra các package mới với số lượng tối thiểu có thể để ứng dụng có thể chạy được.
2. Sử dụng cache trong trình duyệt
Có 2 phương thức để sử dụng cache trong trình duyệt làm tăng hiệu suất của trang web. Bạn có thể sử dụng cache api JS hoặc bạn có thể sử dụng cache HTTP. Bạn cần cài đặt một service worker để cache api JS.
Lý do đằng sau việc sử dụng cache là việc sử dụng lặp lại các đối tượng cụ thể trong ứng dụng. Hiệu suất ngay lập tức sẽ được cải thiện khi bạn lưu các đối tượng được lặp lại.
3. Xóa JS không sử dụng
Xóa các file JS không sử dụng trong ứng dụng. Nó sẽ giảm thời gian dicchj, và nó cũng giảm thời gian trình duyệt phân tích và compile mã. Xóa tất cả các tính năng không sử dụng. Xóa tất cả các code JS liên quan với nó.
Ứng dụng của bạn sẽ tải nhanh hơn và người dùng sẽ có trải nghiệm tốt hơn. Xóa các thư viện và các gói phụ thuộc không cần thiết từ code của bạn khi nó không đem đến một mục đích gì.
4. Đặt JS ở cuối trang
Đây là một kỹ thuật phổ biến mà các lập trình viên thường làm để tăng hiệu suất của trang web. Đặt code Js ở đầu trang web làm giảm hiệu suất. Nơi tốt nhất là ở cuối. Trang web của bạn sẽ tải nhanh hơn nhưng trong một số trường hợp nó sẽ sẽ làm tăng số dòng code cần thiết.
5.Sử dụng Minification
Đây là một kỹ thuật phổ biến khác cần tuân theo khi phát triển web để cho nó tải nhanh hơn. Bạn có thể gaimr kích thước các file bằng cách xóa những ký tự Js không mong muốn như tab, space, etc, ... Khi thực hiện điều này phải đảm bảo là bạn không làm thay đổi các function đã có.
Có nhiều công cụ minification có sẵn. Thực hiện điều này sẽ làm cho ứng dụng của bạn tải nhanh hơn và người dùng có trải nghiệm tốt hơn.
6. Sử dụng nén Gzip
Các tệp Js có thể rất lớn có thể tăng thời gian tải trang cho website của bạn. Gzip là 1 phần mềm tốt được sử dụng để nén các file. Ngày nay, hầu hết các máy chủ và máy khách đều hỗ trợ Gzip.
Khi một trình duyệt yêu cầu tài nguyên nào đó, máy chủ sẽ nén response trước khi trả nó cho trình duyệt web. Phần mềm này làm giảm kích thước của các file Js, tối ưu băng thông và tăng hiệu suất truyền tải.
7. Tránh truy cập không cần thiết tới DOM
Truy cập tới DOM làm giảm hiệu suất của trang web. Trình duyệt phải làm mới - refresh trang mỗi lần khi bạn tương tác tới DOM bên ngoài môi trường gốc JS. Tốt nhất là nên giữ quyền truy cập vào DOM ở mức tối thiểu hoặc nếu bạn cần đọc nội dung nhiều lần thì nên lưu nó trong các biến global - biến cục bộ.
Hãy nhớ rằng nếu bạn xóa dữ liệu của DOM thì bạn nên đặt biến thành Null để tránh memory leak - rò rỉ bộ nhớ trong ứng dụng của bạn.
Tổng kết
Có nhiều công nghệ để tăng hiệu suất website của bạn. Mặc dù đây là những ký thuật tốt nhưng bạn nên làm theo một số phương pháp tốt nhất để tăng hiệu năng. Tránh nhứng vòng lặp lời gọi không cần thiết. Sử dụng search array thay thế sử dụng switch case. Sử dụng toán tử trên bit trong code để tận dụng bộ nhớ và chip xử lý. Và cũng tránh sử dụng các biến cục bộ - global variable và tốn quá nhiều bộ nhớ vì nó có hạn.