Thủ thuật tối ưu hóa JavaScript: 16 mẹo và thủ thuật dành cho nhà phát triển
By khoanc, at: 12:10 Ngày 24 tháng 12 năm 2023
Thời gian đọc ước tính: __READING_TIME__ minutes
Giới thiệu
JavaScript, hay JS, đóng vai trò là xương sống trong việc triển khai các chức năng phức tạp trên các trang web. Trong khi nhiều nhà phát triển hiểu tầm quan trọng của các tệp JavaScript được thu gọn, chỉ một số ít biết đến sức mạnh của mã JavaScript được tối ưu hóa. Một cơ sở mã được tối ưu hóa kết hợp logic lập trình thông minh và các thủ thuật nhỏ để tăng hiệu suất, tốc độ và tiết kiệm thời gian phát triển. Trong bài viết này, chúng tôi trình bày 16 thủ thuật và mẹo JS hay để giúp các nhà phát triển tối ưu hóa JavaScript, cải thiện hiệu suất và thời gian thực thi mà không ảnh hưởng đến tài nguyên máy chủ.
1. Sử dụng Array Filter để Lọc Hiệu Quả
Tối ưu hóa thao tác mảng của bạn bằng cách sử dụng phương thức filter. Thủ thuật này tạo ra một mảng mới chứa các phần tử vượt qua một bài kiểm tra được chỉ định một cách hiệu quả, cho phép tạo một hàm callback cho các phần tử không bắt buộc.
let schema = ["hi", "joe", null, null, "goodbye"];
schema = schema.filter(n => n);
// Kết quả: ["hi", "joe", "goodbye"]
Thủ thuật này giúp đơn giản hóa mã, tiết kiệm cả thời gian và dòng code cho các nhà phát triển.
2. Hàm String Replace để Thay Thế Toàn Cầu
Nâng cao thao tác chuỗi bằng cách sử dụng hàm replace. Để thay thế tất cả các lần xuất hiện, hãy sử dụng hàm replaceAll với cờ /g ở cuối một biểu thức chính quy.
let string = "hello joe";
console.log(string.replace("e", "o")); // "hollo joe"
console.log(string.replace(/e/g, "o")); // "hollo joo"
3. Gỡ lỗi với Điểm ngắt và Console
Hỗ trợ gỡ lỗi bằng cách đặt điểm ngắt một cách chiến lược. Sử dụng console và điểm ngắt để xác định và sửa lỗi ở các giai đoạn khác nhau của quá trình thực thi script.
Nhấn F11 cho cuộc gọi hàm tiếp theo và F8 để tiếp tục thực thi script.
4. Chuyển đổi sang Số Thập phân với toán tử ~~
Tối ưu hóa việc chuyển đổi số thập phân bằng cách sử dụng toán tử ~~. Thay thế các phương pháp truyền thống như Math.round để tối ưu hóa vi mô nhanh hơn.
let randomNumber = ~~(Math.random() * 100);
// Thay vì Math.round(Math.random() * 100)
5. Sử dụng độ dài mảng để xóa các phần tử trống
Điều chỉnh kích thước và làm trống mảng một cách hiệu quả bằng thuộc tính độ dài của nó.
let array = [1, 2, 3, 4, 5, 6];
array.length = 3;
console.log(array); // [1, 2, 3]
// Để làm trống mảng
array.length = 0;
console.log(array); // []
Kỹ thuật này được ưu tiên để điều chỉnh kích thước hoặc hủy đặt các phần tử mảng.
6. Trộn mảng với Array.concat() và Array.push.apply()
Tối ưu hóa việc trộn mảng bằng cách sử dụng Array.concat() cho các mảng nhỏ và Array.push.apply() cho các mảng lớn hơn để giảm sử dụng bộ nhớ.
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1, 2, 3, 4, 5, 6]
// Đối với các mảng lớn hơn
Array.push.apply(array1, array2);
console.log(array1); // [1, 2, 3, 4, 5, 6]
7. Sử dụng Splice để xóa các phần tử mảng
Tối ưu hóa việc xóa mảng bằng cách sử dụng splice thay vì delete. Thực hành này tiết kiệm không gian và cải thiện tốc độ mã JS.
let myArray = ["a", "b", "c", "d"];
myArray.splice(0, 2);
// Kết quả: myArray ["c", "d"]
8. Kiểm tra giá trị trong một đối tượng
Xác định xem một đối tượng có trống hay không bằng cách kiểm tra độ dài của các khóa của nó.
let isEmpty = Object.keys(YOUR_OBJECT).length === 0;
// Trả về true nếu đối tượng trống
9. Lưu trữ biến để cải thiện hiệu suất
Tăng hiệu suất JavaScript đáng kể bằng cách lưu trữ các phần tử được truy cập thường xuyên thay vì liên tục duyệt DOM.
let cached = document.getElementById('passwordText');
cached.classList.add('cached-element');
Việc tối ưu hóa đơn giản này ảnh hưởng đến hiệu suất, đặc biệt là khi xử lý các mảng lớn trong vòng lặp.
10. Sử dụng Switch Case thay vì If/Else
Nâng cao thời gian thực thi script bằng cách ưu tiên các trường hợp switch hơn các câu lệnh if/else. Biểu thức để kiểm tra chỉ được đánh giá một lần trong một câu lệnh switch.
switch (expression) {
case value1:
// Khối mã
break;
case value2:
// Khối mã
break;
// Các trường hợp bổ sung
}
11. Điều kiện ngắn mạch để ngắn gọn
Cải thiện khả năng đọc và ngắn gọn của mã bằng cách tận dụng mạch ngắn. Điều này xảy ra khi một toán tử logic không đánh giá tất cả các đối số của nó.
// Câu lệnh if truyền thống
if (loggedin) {
welcome_message();
}
// Phiên bản mạch ngắn
loggedin && welcome_message();
Bằng cách sử dụng kết hợp của một biến đã được xác minh và && (toán tử AND), bạn có thể đạt được kết quả tương tự một cách ngắn gọn hơn.
12. Lấy mục cuối cùng trong một mảng
Sử dụng phương thức slice với các giá trị âm để dễ dàng lấy các phần tử cuối cùng từ một mảng.
let array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5, 6]
console.log(array.slice(-3)); // [4, 5, 6]
Thủ thuật thông minh này đơn giản hóa quá trình trích xuất phần cuối của một mảng.
13. Đặt giá trị mặc định với toán tử ||
Giải quyết vấn đề về các giá trị chưa được xác định bằng cách cung cấp các giá trị mặc định bằng cách sử dụng toán tử ||.
let a = a || 'hello';
// Đảm bảo a có giá trị mặc định là 'hello' nếu ban đầu nó là falsy hoặc chưa được xác định
Các nhà phát triển phải thận trọng với các giá trị mâu thuẫn được truyền vào các hàm để ngăn chặn các lỗi tiềm ẩn.
14. Làm đẹp mã JS của bạn
Nâng cao khả năng đọc và tính thẩm mỹ của mã bằng cách sử dụng các công cụ như jsbeautifier để định dạng mã JavaScript lộn xộn thành một định dạng có cấu trúc tốt và được tổ chức tốt.
Trước khi làm đẹp:
// Mã JS lộn xộn
function messyCode(){console.log('Hello');}
Sau khi làm đẹp:
// Mã có cấu trúc tốt
function tidyCode() {
console.log('Hello');
}
15. Đánh giá hiệu suất JS với jsperf
Đánh giá hiệu quả của mã JavaScript của bạn và chia sẻ kết quả với cộng đồng bằng cách sử dụng jsperf. Nó cung cấp một cách đơn giản để tạo và chia sẻ các trường hợp kiểm thử.
16. Khám phá các trình soạn thảo JavaScript trực tuyến
Thử nghiệm mã JavaScript của bạn trong thời gian thực bằng cách sử dụng các trình soạn thảo trực tuyến như Jsfiddle và jsbin. Các công cụ này không chỉ cho phép bạn kiểm tra mã của mình mà còn cung cấp một nền tảng để chia sẻ mã.
16 thủ thuật và mẹo JavaScript này cung cấp những hiểu biết quý giá để tối ưu hóa hiệu suất. Mặc dù không cần thiết phải sử dụng chúng trong mọi trường hợp, nhưng việc kết hợp chúng một cách thận trọng dựa trên các trường hợp và điều kiện cụ thể có thể dẫn đến những cải tiến đáng kể. Nếu bạn có thêm thủ thuật hoặc mẹo, hãy chia sẻ chúng trong phần bình luận.
Chinh phục nghệ thuật tối ưu hóa JavaScript và xem các ứng dụng web của bạn phát triển mạnh mẽ với tốc độ và hiệu quả được nâng cao!
