Giới thiệu về JSLint, một công cụ để tối ưu hiệu năng trong javascrip

Abstract: Như mọi người đều biết, một sản phẩm hoàn thiện, ngoài các chức năng, dữ liệu, thì còn có giao diện và trải nghiệm người dùng, một trong những thứ không thể thiếu đó hiệu năng của sản phẩm, cụ thể, trong bài viết này, tôi muốn nói đến web. Tuy vậy, khá nhiều trang web hiện nay hiệu năng không được cao, khá nhiều nguyên nhân được chỉ ra, do server chưa đủ mạnh, do đường truyền không liên tục, do trình duyệt..., nhưng lại có nhiều trường hợp Javascrip gây ra. Tại sao javascrip lại làm giảm hiệu năng của 1 trang web? Nguyên nhân chính là do chính lập trình viên chúng ta, do chúng ta thiếu những công cụ để debug, rút gọn trong quá trình thực hành. Và trong bài việt này, tôi muốn giới thiệu mọi người một công cụ để hỗ trợ.

I. Kiểm tra thời gian thực hiện bằng console của trình duyệt

• Với javascript đã có sẵn hàm console.time() và console.timeEnd() giúp lập trình viên do được thời gian hoạt động của 1 hàm, 1 đoạn lệch chúng ta viết. Ví dụ như sau:

console.time("time for loop");
function DemoObject(param){
    this.value = param;
}

for(var i =0; i < 1000; i++){
    var object = new DemoObject(i);
}

console.timeEnd("time for loop");

• Thực hiện đoạn lệnh trên bằng cách patse vào brower, và chúng ta có thể thấy kết quả trả về là undefined, bên cạnh đó, kết quả

time for loop: 0.523ms

là kết quả mà chúng ta cần quan tâm.

• Từ ví dụ trên, chúng ta có thể kết luận rằng, khi sử dụng, chúng ta chỉ cần để đoạn lệnh cần đo hiệu năng vào trong cặp time() và timeEnd() là được. Một lưu ý nho nhỏ, đó là đoạn string được truyền vào phải giống nhau. Và do đó, chúng ta có thể sử dụng các cặp lồng nhau 1 cách dễ dàng.
• Vậy khi nào chúng ta cần sử dụng đến hàm console.time này? Đơn giản là khi chúng ta cần thực hiện các phương pháp tối ưu, và chúng ta có thể nhận thấy kết luôn kết quả của phương pháp và 1 cái nhìn khác quan dựa trên 1 tham số cụ thể.

Tuy nhiên, như thế là chưa đủ, và giờ tôi muốn giới thiệu đến mọi người về công cụ JSLint, một công cụ hỗ trợ tốt hơn cho việc tối ưu code.

II. Giới thiệu về JSLint

• JSLint là một công cụ phân tích code javascript, nó được viết bởi Douglas Crockford, bằng ngôn ngữ javascript. Và một số công cụ hỗ trợ lập trình (IDE) đã sử dụng 1 số phiên bản của nó để giúp lập trình viên dễ dàng nhận biết những cú pháp sai của mình.
• Để sử dụng JSLint, chúng ta chỉ cần truy cập vào trang http://www.jslint.com/ để có thể sử dụng nó.

• Như trên hình, giao diện chính của nó bao gồm 2 phần, phần 1 là để chúng ta có thể nhập đoạn code cần đánh giá, và phần bên dưới, là các option. Và ý nghĩa các option như nào, tôi xin phép được giới thiệu ở phần tiếp theo.
• Với đoạn code như trên, khi tôi kích vào button JSlint, và tôi nhận thấy, chỉ với 1 đoạn code nhỏ, tôi đã có vô số sai làm, và đã được chỉ ra như trong hình dưới dây.

• Nhiệm vụ của chúng ta giờ cần là phải fix những cảnh báo này. Điều này giúp cho code chúng ta clean hơn, và hiệu năng sẽ tăng thêm. Để kiểm chứng điều này, chúng ta có thể sử dụng hàm time() và timeEnd() như tôi đã giới thiệu ở phần trên.

Như vậy, trong bài này, tôi đã giới thiệu qua về hàm time() của javascript và cách sử dụng nó, bên cạnh đó, tôi đã giới thiệu 1 chút bên ngoài của JSLint. Trong chuyên đề tiếp theo, tôi sẽ đi sâu vào nó và các option khi sử dụng JSLint.

Cảm ơn các bạn đã theo dõi!