Recently we are looking at Javascript performance, and there are many good resources (like High Performance Javascript book), when looking at CSS, my first thought is all about selector. However, after reading http://www.slideshare.net/booshtukka/high-performance-css slide, I realize that apart from selector/rendering performance, size/request numbers are still WPO fundamentals from CSS performance standpoint. Here are reading notes about "High Performance CSS" deck.
Size
name - using abbreviation
shortcuts (zeror no unit, decimal beginning with zero need no zero, shorthand)
no final semicolon
minify (use a build script to run YUI compressor)
run ImageOptim against images
Gzip CSS
Number of requests
Concatenate your files
Use CSS sprites for buttons/hover status
Rendering/selector efficiency
from right to left (make key selector efficient)
avoid being too specific (avoid overqualified selectors)
universal selector selects every element, breaks inheritance
hardware acceleration - not suggested
Other tips
avoid CSS greater than 20KB
avoid CSS holds more than 4096 rules
border-radius, box-shadow and RGBA are all slow
Wednesday, December 7, 2011
Friday, December 2, 2011
Comments in different places
XML
<!-- your comment -->
No -- within comments, so no nested comments (for backward compatibility with SGML)
No ending in ---> (three dashes are invalid)
JSON
comments in JSON are not allowed, if really need, add some property like "_comment" in JSON object. With that, XML is better for configuration, but JSON is better for data exchange in Ajax application.
Protobuf
To add comments to your .proto files, use C/C++-style
// your comment
Thrift
.thrift files support standard shell comment #, also support c/C++ style comment or javadoc style
# your comment
/**
your documentation (single or multiple lines)
*/
// your comment
Properties
.properties files can use the number sign (#) or the exclamation mark (!) as the first non blank character in a line to denote that all text following it, is a comment.
# your comment
! your comment
Javascript
// your single line comment
/*
your multi-line comments
*/
HTML
<!-- your comment -->
CSS
/* your comment*/
Java
// your comment
/* your comment */
/** your documentation */
C++
/* your comment */
// your comment
ASP.NET
<%-- your comment --%>
VB.NET
' (apostrophe) your comment
C#
// your comment
<!-- your comment -->
No -- within comments, so no nested comments (for backward compatibility with SGML)
No ending in ---> (three dashes are invalid)
JSON
comments in JSON are not allowed, if really need, add some property like "_comment" in JSON object. With that, XML is better for configuration, but JSON is better for data exchange in Ajax application.
Protobuf
To add comments to your .proto files, use C/C++-style
// your comment
Thrift
.thrift files support standard shell comment #, also support c/C++ style comment or javadoc style
# your comment
/**
your documentation (single or multiple lines)
*/
// your comment
Properties
.properties files can use the number sign (#) or the exclamation mark (!) as the first non blank character in a line to denote that all text following it, is a comment.
# your comment
! your comment
Javascript
// your single line comment
/*
your multi-line comments
*/
HTML
<!-- your comment -->
CSS
/* your comment*/
Java
// your comment
/* your comment */
/** your documentation */
C++
/* your comment */
// your comment
ASP.NET
<%-- your comment --%>
VB.NET
' (apostrophe) your comment
C#
// your comment
Subscribe to:
Posts (Atom)