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
quanghien2005k viết 12:58 ngày 10/10/2018
Một bài viết hữu ích, có cái nào hay đưa lên nữa nhe bạn
anhchanghaudau viết 12:55 ngày 10/10/2018
Được gửi bởi quanghien2005k
Một bài viết hữu ích, có cái nào hay đưa lên nữa nhe bạn
Cảm ơn bạn, mình hy vọng sẽ chia sẻ những gì mình đã học được, hằng ngày mình sẽ cố gắng post một bài về những chuyên đề xoay quanh lập trình web: javascript, css, html, xử lý ảnh và một chút C#, PHP
zmt264 viết 13:02 ngày 10/10/2018
Được gửi bởi quanghien2005k
Một bài viết hữu ích, có cái nào hay đưa lên nữa nhe bạn
Tác giả chỉ nói cách làm, nói nên làm gì (how), mà không giải thích tại sao (why) cho nên đừng nghe theo vội , chừng nào tác giả giải thích có lý, nói có sách, mách có chứng, thì nghe theo vẫn chưa muộn.

Ví dụ tác giả thử giải thích đoạn này?

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 {...}
Cái này thì tác giả mâu thuẫn với chính mình rồi vì lúc thì muốn viết ngắn lại, lúc thì viết dài ra, quan điểm ko rõ ràng.
anhchanghaudau viết 13:04 ngày 10/10/2018
Bác vui tính thiệt, vạch ra nhiều sâu thiệt, nhưng hình như mình kiểm lại thì không thấy câu nào mình nói CSS nên viết ngắn lại cả, mình chỉ nói làm CSS tiết kiệm, hình như bác nhầm với bài viết về HTML của mình. 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. Cảm ơn đã góp ý.
Cà Phê Sữa Đá viết 12:58 ngày 10/10/2018
Vứt cho http server nó compress tất cả các document là [text/plain, text/html, text/javascript, text/css] là xong. Trừ khi bạn ngồi merge nhiều file css/javascript lại thành 1 chứ còn optimize kiểu thêm bớt thế này thật là kinh dị quá.
anhchanghaudau viết 13:02 ngày 10/10/2018
Được gửi bởi Cà Phê Sữa Đá
Vứt cho http server nó compress tất cả các document là [text/plain, text/html, text/javascript, text/css] là xong. Trừ khi bạn ngồi merge nhiều file css/javascript lại thành 1 chứ còn optimize kiểu thêm bớt thế này thật là kinh dị quá.
Đúng thế, mình chỉ trình bày nó làm như thế nào thôi, còn đa phần là có tool, có bộ lọc của server hết
zmt264 viết 12:51 ngày 10/10/2018
Được gửi bởi anhchanghaudau
Bác vui tính thiệt, vạch ra nhiều sâu thiệt, nhưng hình như mình kiểm lại thì không thấy câu nào mình nói CSS nên viết ngắn lại cả, mình chỉ nói làm CSS tiết kiệm, hình như bác nhầm với bài viết về HTML của mình. 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. Cảm ơn đã góp ý.
Nếu mỗi quan điểm của bạn có thể giải thích được lý do thì tốt hơn.

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.
anhchanghaudau viết 13:05 ngày 10/10/2018
Được gửi bởi zmt264
Nếu mỗi quan điểm của bạn có thể giải thích được lý do thì tốt hơn.

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.
Mình sẽ rút kinh nghiệm
lightstarvn viết 12:57 ngày 10/10/2018
Uhm trước giờ dùng tools ko,nếu optimize mà làm tay chắc chết quá! Thank bài viết.
Bài liên quan
0