13+ tips tối ưu code JavaScript

JavaScript giúp triển khai những thứ phức tạp trên các trang web. Nhiều lập trình viên biết tầm quan trọng của tệp JavaScript được rút gọn nhưng ít người biết về cách tối ưu code JavaScript như thế nào.

Tối ưu code JavaScript là sự kết hợp của lôgic được lập trình và một số tips trong JavaScript để tối ưu hóa hiệu suất, tốc độ và tiết kiệm thời gian.

Dưới đây là 13+ tips tối ưu code JavaScript tuyệt vời dành cho các lập trình viên để tối ưu code JavaScript nhằm 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ủ.

13+ tips tối ưu code JavaScript

1. Sử dụng Array.filter

Đây là một tip nhỏ để lọc ra nhóm các phần tử từ mảng. Hàm filter() tạo một mảng mới chứa các phần tử vượt qua bài kiểm tra do một hàm cung cấp. Nó sẽ không thực thi hàm với các phần tử trống và không làm thay đổi mảng gốc.

Ở ví dụ dưới đây, các phần tử null sẽ bị lọc ra:

schema = ["hi","ihaveboyfriend",null, null, "goodbye"]
schema = schema.filter(function(n) {
 return n
 });Code language: JavaScript (javascript)

Kết quả:

["hi","ihaveboyfriend", "goodbye"]
Code language: JSON / JSON with Comments (json)

2. Sử dụng String.replace

Hàm String.replace() cho phép bạn thay thế các chuỗi bằng String và Regex.

Về cơ bản, hàm này thay thế chuỗi ở lần xuất hiện đầu tiên của nó. Nhưng để thay thế tất cả, thay vì sử dụng hàm String.replaceAll(), hãy thêm /g ở cuối Regex:

var string = "login login"; 
console.log(string.replace("in", "out")); // "logout login" 
console.log(string.replace(/in/g, "out")); //"logout logout"Code language: JavaScript (javascript)

3. Sử dụng breakpoint và console để debug

Với sự trợ giúp của breakpoint và debugpoint, bạn có thể đặt nhiều điểm để phục vụ cho quá trình debug.

Bạn cũng có thể kiểm tra những giá trị động nào được tạo bởi một hàm, sử dụng console và có thể kiểm tra kết quả đầu ra trên các giá trị khác nhau.

4. Chuyển đổi sang float mà không làm giảm hiệu suất

Thông thường, chúng ta sử dụng math.floor, math.ceil và math.round để loại bỏ số thập phân. Thay vì sử dụng chúng, hãy sử dụng “~~” để loại bỏ số thập phân cho một giá trị.

Nó cũng hữu ích trong việc tăng hiệu suất khi nói đến tối ưu hóa mã nguồn.

// Sử dụng
~~ (math.random*100)


// Thay vì
math.round(math.random*100)Code language: JavaScript (javascript)

5. Sử dụng độ dài để xoá hết các phần tử trong mảng

Tip này sẽ giúp bạn thay đổi kích thước và làm trống mảng.

Để xóa hết các phần tử trong mảng, hãy sử dụng array.length.

var array = [1, 2, 3, 4, 5, 6]; 
array.length = 0; 
console.log(array.length); // 0 
console.log(array); // []Code language: PHP (php)

6. Hợp nhất các mảng mà không gây sập máy chủ

Nếu yêu cầu của bạn là hợp nhất 2 mảng, hãy sử dụng hàm Array.concat():

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.concat(array2)); // [1,2,3,4,5,6]; Code language: JavaScript (javascript)

Hàm này hoạt động tốt với điều kiện 2 mảng đầu vào có kích thước nhỏ. Khi hợp nhất mảng có kích thước lớn, ta phải sử dụng:

Array.push.apply(arr1, arr2)
Code language: CSS (css)

Lý do ở đây là sử dụng hàm Array.concat() trên các mảng lớn sẽ tiêu tốn nhiều bộ nhớ khi phải tạo một mảng mới.

Khi sử dụng Array.push.apply(arr1, arr2), nó sẽ hợp nhất mảng thứ hai trong mảng đầu tiên, do đó giảm mức sử dụng bộ nhớ.

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];Code language: JavaScript (javascript)

7. Sử dụng splice để xoá phần tử mảng

Đây có lẽ là một trong những tips tối ưu code JavaScript hiệu quả nhất.

Thay vì phải cập nhật index của từng phần tử mảng, hàm splice() sẽ giúp chúng ta đơn giản việc này:

myArray = ["a", "b", "c", "d"] 
myArray.splice(0, 2) // ["a", "b"]

// Kết quả: myArray ["c", "d"]Code language: JavaScript (javascript)

8. Kiểm tra các giá trị trong một đối tượng

Để kiểm tra xem một đối tượng có rỗnghay không, hãy sử dụng:

Object.keys(YOUR\_OBJECT).length 

// Trả về 0 nếu đối tượng rỗngCode language: JavaScript (javascript)

9. Cache giá trị biến

Mỗi khi chúng ta sử dụng document.getElementById() hoặc getElementsByClassName(), JavaScript sẽ lặp đi lặp lại tất cả các phần tử theo mỗi yêu cầu phần tử tương tự.

var cached = document.getElementById('someElement');
cached.addClass('cached-element');Code language: JavaScript (javascript)

10. Sử dụng switch-case thay vì if-else

Thực tế là trong việc thực thi biểu thức để kiểm tra thì switch-case chỉ được đánh giá một lần, thời gian thực hiện sẽ ít hơn so với if-else.

11. Điều kiện ngắn mạch

Điều kiện ngắn mạch (hay Short-circuits conditional) là khi một toán tử logic không phụ thuộc vào đối số của nó.

if (loggedin) { 
   welcome\_messege();
}

Làm cho nó ngắn gọn bằng cách sử dụng kết hợp một biến đã được xác minh và một hàm sử dụng && (toán tử AND) ở giữa cả hai.

loggedin && welcome\_messege();

12. Lấy phần tử cuối cùng trong mảng

Array.prototype.slice(begin, end) được sử dụng để cắt mảng khi bạn đặt tham số bắt đầu và kết thúc. Nhưng nếu bạn không đặt tham số kết thúc, hàm này sẽ tự động đặt giá trị tối đa cho mảng.

Một tip khá thông minh là nó cũng có thể chấp nhận các giá trị âm và bằng cách đặt một số âm làm đối số bắt đầu, bạn sẽ nhận được các phần tử cuối cùng từ mảng.

var 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]Code language: PHP (php)

13. Giá trị mặc định bằng toán tử ||

Trong JavaScript, có một quy tắc cơ bản là có giá trị mặc định nếu chúng không được gán giá trị.

Để cung cấp giá trị mặc định cho một biến, ta sử dụng toán tử ||.

var a = a || 'hello'Code language: JavaScript (javascript)

14. Kiểm tra hiệu suất JavaScript

Để kiểm tra mã JavaScript hoạt động tốt như thế nào và chia sẻ kết quả, hãy sử dụng jsperf. Đây là cách dễ nhất để tạo và chia sẻ các bài kiểm tra hiệu suất.

15. IDE JavaScript trực tuyến

Jsfiddle là công cụ soạn thảo, biên dịch mã JavaScript phổ biến nhất hiện nay. Ngoài sự đơn giản về giao diện, Jsfiddle còn mạnh ở mảng chia sẻ mã nguồn, giúp cho các lập trình viên có thể cùng thực hiện thao tác chỉnh sửa code trên cùng 1 code base trong thời gian thực.

Video chia sẻ: Code Refactoring – Thay đổi nhỏ, lợi ích lớn

Refactoring là một trong các nhóm kỹ thuật có liên quan đến nhau và ảnh hưởng đến nhau, bao gồm kiểm thử tự động, TDD, clean code, design pattern… và đều tuân thủ các nguyên lý quan trọng về thiết kế phần mềm.

Video sẽ đề cập đến ý nghĩa của refactoring, các kỹ thuật refactoring thông dụng và ứng dụng của chúng trong thực tế. Phiên demo sẽ có các hướng dẫn về việc sử dụng các công cụ để thực hiện các kỹ thuật refactoring và giải thích cụ thể lợi ích của chúng.

Nếu bạn đã nghe về Clean Code, SOLID, Design Pattern thì video này là một clip không thể bỏ qua để hoàn thiện hơn nhóm các kỹ thuật quan trọng này.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG