Wednesday, December 7, 2011

CSS performance

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

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