Tăng tốc website phần 5: Giảm số lượng đối tượng DOM

Một trang web phức tạp thường có dung lượng tải về lớn và việc này cũng sẽ làm cho việc truy xuất các đối tượng DOM (Document Object Model) trong JavaScript trở nên “ì ạch”. Chắc chắn sẽ có sự khác biệt khi bạn duyệt qua một trang web với 500 đối tượng và một trang web với 5000 đối tượng, thậm chí nhiều hơn.

DOM

Một số lượng lớn đối tượng DOM có thể là triệu chứng cảnh báo bạn cần cải tiến mã HTML của trang web mà không cần thiết phải gỡ bỏ hay giảm bớt nội dung. Bạn đang sử dụng nhiều bảng biểu được xếp chồng lên nhau cho mục địch hiển thị, hay sử dụng nhiều tag dạng <div> chỉ để khắc phục những trục trặc liên quan đến hiển thị?

Bạn có thể sử dụng các công cụ của YUI CSS (http://developer.yahoo.com/yui/), như grids.css để kiểm soát tốt phần thiết kế (layout), hay font.css và reset.css có thể giúp bạn bỏ qua định dạng mặc định của trình duyệt. Đây là cơ hội tốt để bạn làm mới cũng như tạo ra sự khác biệt cho trang web của mình trong khâu hiển thị.

Các lập trình viên thường tự hỏi bao nhiêu đối tượng DOM là quá nhiều? Ví dụ, trang chủ của Yahoo! là một là trang web khá dày đặc nhưng chỉ có dưới 700 đối tượng. Bạn có thể dễ dàng xác định số lượng đối tượng DOM với tiện ích Firebug (http://getfirebug.com/). Trong cửa sổ console, bạn gõ vào lệnh document.getElementsByTagName(‘*’).length.

Tham khảo: Yahoo! Developer Network