8 cách tối ưu hoá JavaScript mọi lập trình viên đều phải biết

8155
tối ưu hoá JavaScript

Có một điều đương nhiên là mọi developer js đều có thể làm việc với mọi môi trường khi sử dụng javascript. Họ đã làm quen với những điều tuyệt diệu mà Javascript có thể làm được. Nhưng khác ở chỗ, performance mỗi người lại khác nhau, và từ đó level ngày càng tách biệt nhau. 8 mẹo tối ưu hoá JavaScript này sẽ giúp bạn thực hiện công việc của mình chuyên nghiệp hơn nữa…

Tối ưu là một trong những vấn đề rất được quan tâm khi lập trình với Javascript, hay là vấn đề hiệu năng (performance). Không những giúp những ứng dụng của bạn chạy nhanh, tạo cảm giác mượt mà hơn, mà còn giúp ứng dụng của bạn khi network gặp sự cố.

Và sau đây, trong bài viết này chúng tôi sẽ giúp các bạn tìm hiểu 8 mẹo để tối ưu hoá JavaScript mọi lập trình viên cần biết.

  Tối ưu UX/UI bằng Animation - những khung hình "biết nói"
  Các kĩ sư Eureka đã tối ưu ứng dụng chat sử dụng gRPC như thế nào

8 cách tối ưu hoá JavaScript

Reduce library dependencies

Điều đầu tiên chúng ta đề cập tới đó là giảm những thư viện không cần thiết. Thời gian tải một website phụ thuộc rất nhiều của thư viện. Do đó, bạn nên sử dụng chúng càng ít càng tốt hoặc tốt nhất là không dùng tới nó. Một cách tuyệt vời để giải quyết vấn đề này đó là các bạn nên tận dụng những kỹ thuật hay các thư viện thích hợp sẵn của browser.

Xem thêm các thư viện JavaScript trực quan hoá dữ liệu hot nhất năm 2019

Minify JavaScript

Điều này chắc không ai trong số developer js là không biết đến kỹ thuật này. Một kỹ thuật đơn giản nhưng mang lại hiểu quả rất cao. Xóa dữ liệu dư thừa và không cần thiết khỏi code của bạn mà không ảnh hưởng đến cách browser xử lý tài nguyên đó chính là minification.

Ví dụ, loại bỏ code không sử dụng, rút ngắn chức năng và tên biến, nhận xét mã và định dạng. Một tool có thể giúp bạn rất phổ biến đó là Google Closure Compiler. Điều này cũng giúp webiste của bạn được google ưu tiên hơn những trang khác vì có sự khác biệt về tốc độ tải.

Minimize scope chain Immediate

Scope chain, các đối số của hàm và bất kỳ biến được khai báo cục bộ nào sẽ được khởi tạo khi bất kỳ hàm nào được thực thi trong JavaScript. Vì vậy, để truy cập vào một biến được khai báo toàn cầu, cần có thời gian để leo lên scope chain. Sử dụng keyword “this” khóa này và giảm call stack’s Dept sẽ tăng tốc độ thực thi.

Scope chain thiết lập cho mỗi scope một function nhất định. Mỗi function lại định nghĩa nested scope riêng như ta đã biết, và mỗi function được định nghĩa trong một function khác đều là local scope được liên kết với function bên ngoài – sự kết nối ấy được gọi là chain. Khi giải quyết một biến, JS bắt đầu với scope bên trong, sau đó tìm kiếm dần mở rộng ra bên ngoài cácbiến/object/function cho đến khi chúng được tìm thấy.

Using ‘this’ keyword

this keyword hoạt động như local chain và theo cách nó giúp, nó làm giảm sự phụ thuộc vào các biến toàn cục cũng như closures trong các chuỗi phạm vi cao hơn. Ngược lại, nó khuyên bạn nên tránh with keyword. Bởi vì nó có thể sửa đổi scope chain. Đọc thêm để nhớ lại các định nghĩa closures hay scope chain, xem ví dụ này:

Use Async and Defer

Ở bài trước chúng ta đã thảo luận rất kỹ về khái niệm này. Nó rất quan trọng trong việc tải hay load một page với nhiều thư viện. Synchronous loading cần đợi cho đến khi asset trước kết thúc load nhưng tải không đồng bộ có thể asynchronous loading.

Vì vậy, để tận dụng tải asynchronous loading, hãy sử dụng các thuộc tính async. Ví dụ:

Cache as much as possible

Đương nhiên rồi với một mẹo cache các bạn đã giúp hiệu năng tăng lên một cách đáng kể, thay vì các bạn biết một object có thể lạp lại nhiều lần, vậy thì hà cớ gì các bạn lại lục lõi vào database để lấy kết quả mà bạn đã biết trước. Thay vì điều đó các bạn hãy tận dụng cache của browser, nó sẽ giúp bạn rất nhiều trong việc thực thi data.

Taking advantage of native functions

ECMAScript là một thư mục rất lớn của các cấu trúc native. Còn chờ đợi gì nưã sử dụng các hàm và native functions sẽ tối ưu hoá JavaScript hơn là viết các thuật toán riêng hoặc dựa vào các đối tượng máy chủ.

Trim HTML

Thời gian tải của một truy vấn và các đối tượng DOM được sửa đổi chủ yếu phụ thuộc vào trang web HTML. Giảm một nữa HTML của một ứng dụng có thể tăng gấp đôi tốc độ DOM. Nó khó khăn nhưng loại bỏ không cần thiết và các thẻ sẽ là một khởi đầu tuyệt vời cho website của bạn.

Kết Luận

Việc tối ưu hoá trong code nói chung và Javascript nói riêng đang trở thành đề tài hot trong những năm gần đây, và tương lai rất trú trọng vào vấn đề này. Cho nên ngay bây giờ các bạn phải học những mẹo như thế nào để giúp bản thân bạn.

Có thể bạn quan tâm:

Xem thêm việc làm Javascript Developer hấp dẫn tại TopDev

TopDev via Anonystick

  Tối ưu Docker Image trong production - câu chuyện 1GB hay 100MB
  Kafka là gì? Tìm hiểu và ứng dụng Kafka cho hệ thống message tối ưu
SHARE