NETWORKING

1. Compress files downloads.
   Utilize gzip encoding when making http requests and responding to those requests. Don’t do it on images! They’re already compressed.
2. Provide cache-able content.
   Set an expiration date on your responses so the server doesn’t have to pull it down again.
3. Use conditional requests.
   Only pull content if it was last modified since a certain date. Include the modification date in the response.
4. Minify your Javascript.
   Removes extra spaces and returns, replaces variables with single characters, can make your Javascript be 25% of its original size.
5. Do not scale images.
   Requires less CPU time for the browser to display the image. Sending more data than what is needed slows down the download process.
6. Use image sprites!
   Keeps network requests down.

HTML

1. Link Javascript to the bottom of your page.Inline Javascript slows down your page load in older browsers b/c older browsers need to execute that code right away.
   Don’t ever link to a script file in the head of your page. In older browsers they will go ahead and load that Javascript before the page is even done loading. Link your Javascript at the end of the file instead.
2. Add a defer tag when you must link Javascript at the top of the page.You can also use the defer tag in the script tag if you must put your Javascript in the head part of your page. This defers the loading of the Javascript until the entire HTML page has been rendered (supported since IE4, don’t know about FF).

CSS

1. Link the CSS in the head of your file, unlike the Javascript best practice.Don’t want any “flashes of unstyled content.” Avoid embedded styles; can slow down loading of webpages.
2. Avoid using the @import for CSS files as it slows down the browser.The browser tries to download all of those imported files so it can properly render the cascade and thus takes longer.

COLLECTIONS

1. He didn’t really address anything under this topic.

JAVASCRIPT

1. Minimize symbol resolution (walking up the lookup chain).To resolve a variable value there are 3 places Javascript looks:Local > Intermediate Scopes > GlobalThe higher up it must go to get the value the more performance cost.Objects work in the same way:Instance > Prototype Chain > DOMIf you don’t declare the variable using var = its scope is global and costs you performance. If you use var = you scope it to be a local variable.

   Works the same way with functions too.

2. Use native methods.To parse JSON you can use the native parse or stringify that’s native to the browser (possibly only IE8 though…?).
3. Remove duplicate script files.
4. Minimize the amount of Javascript frameworks you use on a page.

MARSHALLING

1. Minimize the amount of DOM interactions that you make from Javascript.Each time the Javascript engine has to communicate with the DOM it costs you a little bit more.
   Cache your DOM lookups in a variable, e.g. var elms = document.body.all;

DOM

1. Built in methods are always more effecient than trying to roll something yourself.Instead of nodes[i] to iterate through just use the DOM API node.nextSibling; to iterate through that collection; minimizes calls to the DOM.
2. Use the selectors API for effecient access to collections (IE8+ only).

FORMATTING

1. Only send the required styles for that page.(Doesn’t this go against the whole cacheing of your stylesheet as an advantage while surfing through your site?)
2. When possible, use class or id based selectors over element selectors.Make element selectors as simple as possible and use child or descendent selectors when able.

BLOCK BUILDING, LAYOUT, RENDERING

1. Batch visual changes.Don’t allow your user to see every change you make to the page until you’re done. Put all changes in a variable and then change the page.

At the end of Mr. Weber’s presentation he hit briefly on the new features of IE9. Below are my notes on this topic:

• Hardware accelerated HTML 5
• Compiled Javascript (into native machine code to be executed rather than interpreting non-native machine code)
• GPU powered HTML5 graphics

$(document).ready(function() {
$('input.button').attr('disabled', true);
$('input.button').attr('value', 'Please accept our terms to submit');
$('.accept input').bind('click', function() {
if ($('.accept input').is(':checked') == true) {
$('input.button').removeAttr('disabled');
$('input.button').attr('value', 'Send Memory');
} else {
$('input.button').attr('disabled', true);
$('input.button').attr('value', 'Please accept our terms to submit');
}
});
});

It’s JQuery for disabling a submit button until a checkbox is checked. In addition, as an added usability feature, the button says “Please accept our terms to submit” so that the user knows why the button isn’t able to be clicked.

In this example “button” is the class of my button and my terms checkbox is wrapped in a span with a class of “accept” (had to work around ASP.NET here at work thank you).

This post will most definitely be useful if I ever look for this functionality again!

Enter “clearfix.”

I first learned about the clearfix method by reading the book “Stylin’ with CSS: A Designer’s Guide” (1st Edition) by Charles Wyke-Smith, now in its 2nd edition (See it on Amazon).

When you float two items next to each other (say a nav bar and a content area) the two divs collapse in height because floated elements have no height. Say you then try to set a background to the div containing both your nav bar and content area. What happens? A whole lot of nothing. Why? Because the containing div is wrapping two divs that have no height themselves, so what makes you think your container div is going to have a height?

To fix this problem simply put the class of “clearfix” on the containing div and copy and paste the following into your CSS file.

/* CLEARFIX CONTROLS --------------------------------------------------- */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display: inline-block;} /* a fix for IE Mac */
/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

Now I believe I have seen some Javascript fixes out there as well but why get involved with scripts when this is just as easy, if not easier? Besides, in my opinion, if you can do it elegantly with CSS you should really stay away from another Javascript call on your page.

Let’s start with the basics in my file here at work:

To link to a stylesheet:
<link href="PATHTOFILE.css" type="text/css" rel="stylesheet" media="MEDIA" />

“PATHTOFILE.css” is obviously the path to your CSS file, whether relative or absolute. “MEDIA” is what type of media your stylesheet addresses. Options include “screen” for viewing on a normal computer, “print” for when a user prints out your web site, and “handheld” for viewing on a mobile device.

To link to a javascript file:
<script src="PATHTOFILE.js" language="javascript" type="text/javascript"></script>

“PATHTOFILE.js” is the path to your Javascript file, whether relative or absolute.

To link to a favicon:
<link href="PATHTOFILE.ico" rel="shortcut icon"/>

“PATHTOFILE.ico” is the path to your favicon file, whether relative or absolute.

A JQuery ready command:
$(document).ready(function(){
});

This is the most basic JQuery command in which you stuff all other JQuery code into. It basically says “don’t run any of the code in here until the page is fully loaded, or ‘ready’.”

We’ll get more complex later, I promise.