Video học lập trình mỗi ngày

Bây giờ, hãy tập trung bài viết này vào Javascript, vì Javascript đang mắc phải căn bệnh giống như mọi ngôn ngữ khác ngoài kia và một số mẹo nhỏ sẽ giúp bạn viết mã Javascript hiệu quả hơn. Hầu hết những lời khuyên này chỉ là lẽ thường, nhưng điều đó tạo ra sự khác biệt rất lớn khi xử lý hàng ngàn hoặc hàng trăm ngàn record. Bài toán này mình sẽ chỉ ra có hai loại lập trình viên điển hình ( điển hình nha các bạn).

Loại 1: - Làm sao cho code đẹp, dễ nhìn, và người khác nhìn vào cũng trầm trò khen ngợi với các dòng code hiện đại 

Loại 2: - Chỉ chú ý và phần lõi bên trong và tập trung vào giải quyết vấn đề hiệu suất, và có thể giải quyết trong tương lai. 

Đấy là hai mẫu lập trình hiện nay mà tôi đảm bảo rằng trong mỗi công ty hầu hết cũng có những anh chàng nhu thế này? Và để nói rõ hơn về vấn đề này mình tham khảo những bài viết khác và có một ví dụ điển hình sau đây nhằm giúp các bạn hình dung ra được kỹ năng lập trình ảnh hưởng thế nào đến hiệu suất của dòng code. 

1 - Loop Chaining

Ví dụ:

const users = [{
    name: 'Ronaldo',
    age: 23
}, {
    name: 'Messi',
    age: 14
}, {
    name: 'Anoystick',
    age: 22
}]

Bài toán tìm tên của các cầu thủ đó độ tuổi trên 18. bài toán rất đơn giản và rất bình thường nhưng nó thật sự khác biệt khi xử lý hàng triệu record đó các bạn. 

Code1:

const valid = users.filter(({ age }) => age >= 18).map(({ name }) => name);

Quan trọng không bỏ qua phần này.
Rất đẹp và tường minh. Code này dùng rất điệu nghệ và có vẻ đọc sách vở rất nhiều, các hàm map(), filter() được sử dụng ở đây. Nó sử dụng hai phương thức ES5, map(), filter(), và các arrow function ES6 và object de-structuring. Nó cũng viết và dễ đọc. Trông thật tuyệt! 

Nhưng nó không phải là vấn đề, nhưng các bạn thử hình dung nếu chúng ta có users với 100.000 object thì performance nó như thế nào? 

Phân tích ví dụ : Như tôi nói nếu có 100.000 object trong array user thì bạn sẽ phải filter() 100.000 lần mới có thể lọc ra được những object phù hợp hơn 18 tuổi. Ví dụ là được 50.000 pass qua vậy chúng ta phải chạy thêm 50.000 lần nữa để có thể get được name của các object. Vậy chương trình của bạn sẽ thực hiện 150.000 lần lặp thay vì chỉ có 100.000 lặp để lấy ra kết quả. Vậy hiệu suất nó như thế nào?

Code2: 

Thực tế có hai cách, một sử dụng single loop hoặc sử dụng reduce.

// the single loop
const names = [];
users.forEach(({ age, name }) => {
  age >= 18 && names.push(name);
});
 
// the reduce method
const valid = users.reduce((acc, { age, name }) => {
  return (age >= 18) ? [...acc, name] : acc;
}, []);

Cú pháp reduce có thể trông có thể lạ lẫm hơn, nhưng nó thực hiện chính xác giống như single loop, cách chúng ta thường làm trước các phương thức mảng ES5. Qua các cách làm ở ví dụ trên các bạn cũng đã hình dung được mình đang ở vị trí nào?

Và ở bất kỳ một vị trí nào các bạn cũng nên đặt performance lên đầu tiên cho các dòng code của các bạn.

Không hẳn thông qua các đoạn mã để dánh giá về performance mà còn rất nhiều yếu tố nữa cụ thể như 

2 - Kéo hẳn một thư viện về mà chỉ dùng cho một chức năng =]].

Cũng may nhờ internet bây giờ nhanh hơn gió, cho nên các devjs của chúng ta thường ít quan tâm hơn về build sizes. Các bạn biết để viết được ứng dụng "Hello word" thì Angular sẽ mất bao nhiêu (size) được tải không?

 Tất nhiên nhiều bạn sẽ nói là Angular sẽ hữu dụng hơn nhiều, chứ không hẳn "hello word". Đúng, các bạn nói đúng, nhưng ở bài viết này tôi nói về mẹo để cải thiện tốt hơn thôi. 

Ví dụ tiếp tục. Các bạn download Jquery về chỉ sử dụng mỗi chức năng ajax, thật buồn cho các bạn, các bạn vẫn có thể sử dụng vanilla javascript để thục hiện một chức năng đó ngon lành mà không cần jQuery. Ví dụ nữa. Thay vì các bạn dùng lodash cho method each, map, filter... 

Thì tôi khuyên các bạn nên trở về với vanilla javascript. Còn nếu như các bạn thật sự cần những chức năng cao hơn thì có thể xài Lodash nhưng hãy require cho chính xác tranh dư thừa require(‘lodash/fn_name). Lời khuyên chân thành: Hãy gắn bó với vanilla javascript bất cứ khi nào bạn có thể. 

3 - Kết luận

Đừng lo lắng quá. Đó chỉ là một vài lỗi mà các developer thường thấy trong quá trình code mà vô tinh ảnh hưởng đến hiếu suất. Các bạn sẽ được cải thiện nhiều hơn nếu ai đó mạnh dạn chỉ ra các lỗi đó cho các bạn. Đừng ngại và che giấu đi những điều mà mình chưa biết. Nó sẽ nguy hại rất lớn trong cách bạn làm việc. Đôi khi những mã thông thường lại cho ta những kết quả khả quan hơn. và quan trọng đó là kỹ năng chịu tìm tòi và khám phá. 

Tham khảo thêm: https://www.impactbnd.com/blog/the-importance-of-website-load-time

http://www.admios.com/blog/writing-good-javascript-lets-not-foret-about-performance