HTML, CSS, JS là những viên gạch xây dựng nên những trang web mà chúng ta sử dụng hàng ngày. HTML cho biết nội dung trang web là gì, CSS định hình cách trang web được hiển thị, và cuối cùng JS làm những việc còn lại mà hai thằng trước đó không làm được.
Khi có sự xuất hiện của HTML5 và CSS3 thì vai trò của 3 thằng trên có thể chồng chéo nhau. Có những trường hợp mà chúng ta có thể dùng CSS hay JS đều được, ví dụ điển hình là tạo ra các hoạt ảnh (animation). Trước đây khi chưa có CSS3 thì điều này chỉ có thể thực hiện được bằng JS, tuy nhiên giờ đây việc đó trở nên dễ dàng với CSS transition.
Như vậy thì chúng ta nên sử dụng thằng nào trong 3 thằng trên, nếu như dùng thằng nào cũng đạt được mục đích?
Câu trả lời ngắn gọi là:
Hãy hạn chế dùng JS nhiều nhất có thể!
Tại sao vậy?
Có một vài lý do cho việc sử dụng tối đa HTML và CSS và hạn chế sử dụng JS.
Thứ nhất, CSS và HTML rất mềm dẻo và ít gây lỗi crash trình duyệt. Nếu bạn quên 1 vài tag của HTML hay cho vào một số CSS rule không hợp lệ thì cũng không có vấn đề gì nghiêm trọng xảy ra, trang web của bạn vẫn hoạt động (tất nhiên là sẽ có những hiển thị bị sai, nhưng ít nhất là nó không chết hẳn!) Trong khi đó nếu bạn xử lý JS bị sai thì rất dễ xảy ra thảm hoạ, trang web có thể bị crash hoàn toàn, bạn bị mất toàn bộ dữ liệu đang xử lý, vân vân. Đó chắc chắn là điều bạn không hề muốn xảy ra phải không nào?
Thứ 2, CSS dễ dàng tối ưu hoá hơn bởi vì nó có thể tận dụng sức mạnh của bộ tăng tốc phần cứng để xử lý. Ngược lại, JS không thể truy cập trực tiếp vào các API đó.
Thứ 3, xử lý CSS nhẹ hơn JS. CSS nhẹ hơn là bởi nó là một ngôn ngữ mô tả (declarative), do đó nó có thể được xử lý song song (vì các selector trong file CSS có thể được thông dịch song song) và có thể trì hoãn việc xử lý cho đến khi các thành phần của trang web đã được vẽ lên trình duyệt. JS, ngược lại, cần phải được tải xuống, phân tích và biên dịch (dùng bộ biên dịch JIT) và chạy. Do vậy hao phí dành cho JS sẽ lớn hơn CSS nếu xét cùng một dung lượng file trên ổ cứng.
Cuối cùng, last but not least, xét về chi phí bảo trì phần mềm. Nếu dùng JS tức là sẽ phải dùng các thư viện có sẵn, việc này giúp chúng ta hoàn thành công việc nhanh hơn nhưng cũng “mang lại” những cái giá phải trả:
- Thêm thư viện (hay còn gọi là dependency) tức là phải tìm hiểu cách hoạt động của thư viện đó, và các API mà thư viện cung cấp. Điều này khiến thằng maintain code của bạn phải bỏ công sức tìm hiểu thêm một thư viện.
- Khi thêm thư viện cũng có nghĩa là thêm chi phí cho việc tải, phân tích, và chạy code JS lúc ban đầu.
CSS animation, ngược lại, không phát sinh thêm dependency và cũng không làm mất thêm thời gian để chạy. Hơn nữa, các developer rồi cũng sẽ quen với CSS animation, vì đó là điều tất yếu!
Đam mê Code 