10/10/2018, 10:49
Nén CSS như thế nào ?
Xem lại phần 1
Ở phần 1, mình đã trình bày về cách "nén" mã javascript, sang phần này mình sẽ giải quyết tới "anh chàng" CSS.
Vậy CSS có khả năng "nén" được như javascript không ?
Ngoài cách "nén" ra còn có cách nào để tối ưu hóa CSS không ?
Chúng ta sẽ đi vào từng vấn đề trên.
CSS cũng tương tự như javascript, là một dạng văn bản có cấu trúc, mà đã là văn bản thì ta đều có thể "nén" được, tuy nhiên, tỉ lệ nén ở CSS không nhiều, và chỉ có một cách nén duy nhất. Thông thường các trình nén CSS sẽ làm như sau:
Loại bỏ những đoạn chú thích
Chú thích của CSS được đặt trong cặp /* và */
/*Đây là một đoạn chú thích*/
body {font: normal 9pt arial;}
Sau khi loại bỏ
body {font: normal 9pt arial;}
Loại bỏ những khoảng trống thừa
body
{
background: red;
color: white;
font-size: 9pt;
}
Sau khi loại bỏ
body{background:red;color:white;font-size:9pt;}
Loại bỏ những dấu ; thừa sau mỗi thuộc tính
Thông thường dấu ; của thuộc tính cuối cùng hoặc những dấu ; liên tiếp nhau sẽ bị loại bỏ
body { background: red; color: white;; font-size: 9pt;}
Sau khi loại bỏ
body { background: red; color: white; font-size: 9pt}
Rút gọn khai báo CSS
body
{
border-top: 1px solid silver;
border-left: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 2px;
}
Sau khi rút gọn
body { border: 1px solid silver; margin: 5px 10px 2px; }
Do thứ tự của thuộc tính border: <size> <style> <color> và thứ tự của margin: <top> <left và right> <bottom>
Việc "nén" CSS không đòi hỏi khắt khe phải tuân thủ cú pháp chặt chẽ như javascript, nên chúng ta sẽ "dễ thở" hơn.
Ngoài việc "nén" mã thô ra, ta còn có thể tối ưu về tốc độ thực thi đoạn mã CSS bằng những cách sau:
Sử dụng cú pháp "chọn" (selector) đủ và đúng
Tránh tình trạng thừa không cần thiết
div#mydiv {...}
Chúng ta nên chuyển thành
#mydiv {...}
Vì id của thẻ là duy nhất, không thể tồn tại một thẻ nào khác loại với div mà có cùng id được.
Tránh sử dụng * selector
body * {...}
Nếu có thể, hãy sử dụng những id selector hoặc class selector
#mydiv {...}
.myclass {...}
Tránh sử dụng descendant selector
ul li {...}
Nên thay bằng tên class được nối bởi tên của thẻ cha, thẻ con, thẻ cháu
.myulclass {...}
.myulclass-myliclass {...}
Tránh sử dụng quá 2 cấp descendant selector
Cho dù là sử dụng class selector hay tag selector
.level0 .level1 .level2 level3 {...}
Nên thay bằng
.level0 .level1_2_3 {...}
Loại bỏ những style không cần thiết
Khi làm việc với nhiều dự án website, chúng ta thường "tái chế" lại mã, đó là đều tất yếu, nhưng cũng chính điều này làm cho những "dĩ vãng đã qua" luôn hiện hữu trong những dự án mới bởi sự "lười" chọn lọc và loại bỏ những style không cần thiết. Chúng ta cứ nghĩ rằng thôi cứ để đó, biết đâu sau này lại cần, hay để cũng chẳng sao, điều này sẽ khiến trình duyệt thêm nặng nề khi phải biên dịch mớ "kỷ niệm" đó. Nếu bạn không sử dụng, hoặc không muốn xóa đi thì hay đánh dấu chú thích bao quanh nó và những dòng chú thích này sẽ được tự động xóa đi khi sử dụng công cụ "nén" CSS mà không làm ảnh hưởng đến mã nguồn gốc.
Khai báo style nên để ở đầu trang
Nên đặt khai báo style hoặc link ở đầu tập tin html, điều này giúp cho trình duyệt biên dịch mã hiển thị cho toàn trang ngay từ ban đầu. Tránh đặt rải rác những khai báo style ở thân trang, điều này sẽ làm trình duyệt vừa biên dịch, sau đó lại phải biên dịch lại và tiến hành hiển thị lại theo cấu trúc style mới, cứ thể tiếp tục...
Khai báo kích thước hình ảnh một cách tường minh
Nên khai báo kích thước của hình ảnh (thẻ img) khi hiển thị, điều này giúp trình duyệt xác định được vùng hình ảnh sẽ chiếm dụng, từ đó tính toán được vùng hiển thị lân cận, ngược lại, trình duyệt phải tải đầy đủ hình ảnh mới có thể xác định được vùng chiếm dụng sau đó mới tải và tính toán những vùng lân cận.
<img src="..." width="100px" height="100px"/>
Hoặc
.aritcle-image {width: 100px; height: 100px;}
Sử dụng div thay vì table
Nên sử dụng div để dàn trang khi có thể, tránh dùng table để dàn trang hoặc chứa toàn bộ nội dung trang, điều này khiến trình duyệt phải tính toán lại vùng hiển thị của table ở mỗi bước tải về hay hiển thị một thẻ mới. Tất nhiên chúng ta vẫn nên sử dụng table trong những trường hợp hiển thị những dữ liệu dạng "bảng", "danh sách", "lưới" có nhiều mục
Công cụ "nén" CSS
Sử dụng công cụ nén trực tuyến tại http://www.minifycss.com/css-compressor/
* Khi vào trang ta sẽ thấy một khung nhập lớn nằm bên trái, bên phải là những tùy chọn để "nén"
* Nhập nội dung CSS cần nén vào khung CSS-Code bên trái.
* Nhấn vào nút Process CSS
* Kết quả sẽ hiển thị ngay bên dưới khung nhập.
* Với những tùy chọn từ Compression (code layout), bạn có thể chỉ định tỉ lệ nén cao hay thấp.
* Ngoài ra còn có những tùy chọn chi tiết nén khác tại khung Options
Xem chi tiết tại http://linq2js.blogspot.com/2010/10/...te-phan-2.html
Ở phần 1, mình đã trình bày về cách "nén" mã javascript, sang phần này mình sẽ giải quyết tới "anh chàng" CSS.
Vậy CSS có khả năng "nén" được như javascript không ?
Ngoài cách "nén" ra còn có cách nào để tối ưu hóa CSS không ?
Chúng ta sẽ đi vào từng vấn đề trên.
CSS cũng tương tự như javascript, là một dạng văn bản có cấu trúc, mà đã là văn bản thì ta đều có thể "nén" được, tuy nhiên, tỉ lệ nén ở CSS không nhiều, và chỉ có một cách nén duy nhất. Thông thường các trình nén CSS sẽ làm như sau:
Loại bỏ những đoạn chú thích
Chú thích của CSS được đặt trong cặp /* và */
/*Đây là một đoạn chú thích*/
body {font: normal 9pt arial;}
Sau khi loại bỏ
body {font: normal 9pt arial;}
Loại bỏ những khoảng trống thừa
body
{
background: red;
color: white;
font-size: 9pt;
}
Sau khi loại bỏ
body{background:red;color:white;font-size:9pt;}
Loại bỏ những dấu ; thừa sau mỗi thuộc tính
Thông thường dấu ; của thuộc tính cuối cùng hoặc những dấu ; liên tiếp nhau sẽ bị loại bỏ
body { background: red; color: white;; font-size: 9pt;}
Sau khi loại bỏ
body { background: red; color: white; font-size: 9pt}
Rút gọn khai báo CSS
body
{
border-top: 1px solid silver;
border-left: 1px solid silver;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 2px;
}
Sau khi rút gọn
body { border: 1px solid silver; margin: 5px 10px 2px; }
Do thứ tự của thuộc tính border: <size> <style> <color> và thứ tự của margin: <top> <left và right> <bottom>
Việc "nén" CSS không đòi hỏi khắt khe phải tuân thủ cú pháp chặt chẽ như javascript, nên chúng ta sẽ "dễ thở" hơn.
Ngoài việc "nén" mã thô ra, ta còn có thể tối ưu về tốc độ thực thi đoạn mã CSS bằng những cách sau:
Sử dụng cú pháp "chọn" (selector) đủ và đúng
Tránh tình trạng thừa không cần thiết
div#mydiv {...}
Chúng ta nên chuyển thành
#mydiv {...}
Vì id của thẻ là duy nhất, không thể tồn tại một thẻ nào khác loại với div mà có cùng id được.
Tránh sử dụng * selector
body * {...}
Nếu có thể, hãy sử dụng những id selector hoặc class selector
#mydiv {...}
.myclass {...}
Tránh sử dụng descendant selector
ul li {...}
Nên thay bằng tên class được nối bởi tên của thẻ cha, thẻ con, thẻ cháu
.myulclass {...}
.myulclass-myliclass {...}
Tránh sử dụng quá 2 cấp descendant selector
Cho dù là sử dụng class selector hay tag selector
.level0 .level1 .level2 level3 {...}
Nên thay bằng
.level0 .level1_2_3 {...}
Loại bỏ những style không cần thiết
Khi làm việc với nhiều dự án website, chúng ta thường "tái chế" lại mã, đó là đều tất yếu, nhưng cũng chính điều này làm cho những "dĩ vãng đã qua" luôn hiện hữu trong những dự án mới bởi sự "lười" chọn lọc và loại bỏ những style không cần thiết. Chúng ta cứ nghĩ rằng thôi cứ để đó, biết đâu sau này lại cần, hay để cũng chẳng sao, điều này sẽ khiến trình duyệt thêm nặng nề khi phải biên dịch mớ "kỷ niệm" đó. Nếu bạn không sử dụng, hoặc không muốn xóa đi thì hay đánh dấu chú thích bao quanh nó và những dòng chú thích này sẽ được tự động xóa đi khi sử dụng công cụ "nén" CSS mà không làm ảnh hưởng đến mã nguồn gốc.
Khai báo style nên để ở đầu trang
Nên đặt khai báo style hoặc link ở đầu tập tin html, điều này giúp cho trình duyệt biên dịch mã hiển thị cho toàn trang ngay từ ban đầu. Tránh đặt rải rác những khai báo style ở thân trang, điều này sẽ làm trình duyệt vừa biên dịch, sau đó lại phải biên dịch lại và tiến hành hiển thị lại theo cấu trúc style mới, cứ thể tiếp tục...
Khai báo kích thước hình ảnh một cách tường minh
Nên khai báo kích thước của hình ảnh (thẻ img) khi hiển thị, điều này giúp trình duyệt xác định được vùng hình ảnh sẽ chiếm dụng, từ đó tính toán được vùng hiển thị lân cận, ngược lại, trình duyệt phải tải đầy đủ hình ảnh mới có thể xác định được vùng chiếm dụng sau đó mới tải và tính toán những vùng lân cận.
<img src="..." width="100px" height="100px"/>
Hoặc
.aritcle-image {width: 100px; height: 100px;}
Sử dụng div thay vì table
Nên sử dụng div để dàn trang khi có thể, tránh dùng table để dàn trang hoặc chứa toàn bộ nội dung trang, điều này khiến trình duyệt phải tính toán lại vùng hiển thị của table ở mỗi bước tải về hay hiển thị một thẻ mới. Tất nhiên chúng ta vẫn nên sử dụng table trong những trường hợp hiển thị những dữ liệu dạng "bảng", "danh sách", "lưới" có nhiều mục
Công cụ "nén" CSS
Sử dụng công cụ nén trực tuyến tại http://www.minifycss.com/css-compressor/
* Khi vào trang ta sẽ thấy một khung nhập lớn nằm bên trái, bên phải là những tùy chọn để "nén"
* Nhập nội dung CSS cần nén vào khung CSS-Code bên trái.
* Nhấn vào nút Process CSS
* Kết quả sẽ hiển thị ngay bên dưới khung nhập.
* Với những tùy chọn từ Compression (code layout), bạn có thể chỉ định tỉ lệ nén cao hay thấp.
* Ngoài ra còn có những tùy chọn chi tiết nén khác tại khung Options
Xem chi tiết tại http://linq2js.blogspot.com/2010/10/...te-phan-2.html
Bài liên quan
Ví dụ tác giả thử giải thích đoạn này?
ul li {...}
Nên thay bằng tên class được nối bởi tên của thẻ cha, thẻ con, thẻ cháu
.myulclass {...}
.myulclass-myliclass {...}
Ví dụ (HTML) viết ngắn thì được lợi cái gì và mất cái gì?
CSS mà viêt theo cách x, cách y , .... thì được/mất thế nào?
Và cuối cùng là giải thích tại sao lại được, mất như thế.
Thêm cả ví dụ những website đang áp dụng cách của bạn và những website không theo cách của bạn nữa, thì tốt.
Tất nhiên nếu bạn bận rộn không có thời gian làm mấy việc trên thì chịu rồi, nhưng nếu người đọc mù quáng nghe theo các quan điểm không có luận chứng rõ ràng thì họ sẽ thành đẽo cày giữa đường.
Ví dụ bạn bảo "Còn cách mình hướng dẫn đặt class là để làm cho trình duyệt xử lý tối ưu hơn" thì bạn có dẫn chứng gì không? Mình ko nói bạn sai, mình chỉ nói bạn nói không có căn cứ, không có dẫn chứng thôi. Nếu có vài link reference cùng quan điểm với bạn, và vài site nổi tiếng áp dụng nguyên tắc bạn nói thì tốt. Hơn nữa bạn chỉ nói cái được là trình duyệt xử lý tối ưu hơn, còn cái mất là gì thì ko thấy bàn đến.