Sao mạnh miệng nói "không có chuyện div load nhanh hơn table" hay thế
Tính về load trên đường truền mạng nhá , VD muốn định dạng 1 layout lồng nhé :
Table (97 characters không tính khoảng trắng) :
Without Table (ko tính khoảng trắng thì là 57 characters)
file css đính kèm :
Như đã nói là file css đính kèm còn dc hỗ trợ việc lưu cache nên chỉ load lần đầu tiên. Nhìn là đủ thấy size của file html sẽ dc giảm đáng kể rồi đấy. Thêm vào đó source code nhìn sẽ thoáng hơn, thuận tiện cho việc bảo trì hoặc nhìn lại. Trong quá trình code, việc bạn repeat lại 1 đoạn là rất thường xuyên, dẫn tới source code html nặng nề => trình duyệt load file html chậm hơn. Chính những thứ nhỏ nhặt này làm tăng tốc độ của website.
Ngoài chuyện dữ liệu trung chuyển giữa sever và client có sự khác nhau ra, thì việc load table vào bộ nhớ của DOM trong javascript cũng có sự chên lệch đáng kể. Cũng là ví dụ trên, nếu load các node table vào DOM thì nó sẽ như sau :
Code:
Table
| _ _ THEAD
|
| _ _ TBODY
| _ _ TR
| _ TD
| | _ Table
| | _ _ THEAD
| |
| | _ _ TBODY
| | _ _ TR
| | _ _ TD
| | |_ "Cot 1"
| |
| | _ _ TD
| |_ "Cot 2"
| _ TD
| _ "Cot 3"
Trong khi đó khi load DIV vào DOM, bộ nhớ lưu trữ chĩ có như vầy :
Code:
DIV
| _ _ DIV
| _ _ "Cot 1"
|
| _ _ "Cot 2"
DIV
| _ _ "Cot 3"
Bạn thấy những cái này quá là lý thuyết đúng ko, bạn thử viết slide hình hoặc hiệu ứng 3d đi rồi sẽ biết, khi mà 1 khối lượng lớn dữ liệu dc load vào DOM, việc bạn truy suất vào nó sẽ tốn thời gian như thế nào.
Như vậy là đủ thấy sẽ có chuyện load Div nhanh hơn Table rồi đấy (load theo nghĩa từ server xuống client lẫn từ text/pain vào bộ nhớ của trình duyệt). Mà cái việc quan trọng hơn tại sao ng` ta có xu hướng chuyển sang xài tableless là do tính dễ nâng cấp. Bạn cứ thử nghĩ lúc 1,2h đêm, khách bảo có critical bugs, và bạn bật file html lên table lồng loạn xạ nhau, lúc đó thì có nước đập đàu vào màn hình mà chết (đặc biệt, nếu ai đã có từng trong tình huống này sẽ rất dễ lộn td của table con với td của table cha
). Khi bạn sử dụng div, bạn tách biệt việc format ra file css, như thế bạn làm code html của bạn trong sáng hơn , ko có mớ lằng nhằng width với height hay align gì ở trong đống div của bạn.
Còn việc bạn bảo table định dạng dễ hơn thì cũng đúng dành cho ng` không có trình độ thôi. Quả thật là sinh viên ra trường chưa chắc đã thạo tableless. Sẽ tốn công 1 chút nhưng rất tốt cho sau này phải đọc lại. Không ai dám chắc là dăm ba ngày sau là ko có change request.
Nhưng nói nãy giờ không có nghĩa là ko xài table... Thằng nào như vậy thì còn ngu hơn những thằng tối ngày xài table
) Cần thì cứ xài (hoặc làm biến thì xài). Thường tabless chỉ sử dụng để thiết kế layout, chia cột cho website. Khi vào tới nội dung trong, cần show thông tin dạng bảng (vd bảng báo giá, thống kê theo cột, ...) mà xài tableless thì thằng đó ngu hết chỗ nói.
Như bạn Zstar nói. Tùy mục đính thì sử dụng.
Ở đây chỉ muốn làm rõ việc Table và Div không như nhau. mắc công 1 số member đọc vào tưởng 2 cái đều như nhau thì mệt