Day: October 20, 2009

Categories
Networking

Really caching web content

Today I tried to optimize a web application to speed up the usage. One big and low hanging fruit is the correct caching of static files like images, css- or javascript-files. There are two parts you can save with caching. And only the correct usage will really save time and bandwidth.

1. Caching content with live time revalidation

Every request of a http client consist of two parts; the request and the response. In the request defines the browser, which resource is needed. The response of the server then is the requested resource. One caching-strategy is to slim the response. So you will save bandwidth and on slow connections also time. To achieve this you have to use the ETag and / or Last-Modified header of the HTTP protocol.

Response

If the browser then needs the requested resource again, it will send the If-None-Match and / or If-Modified-Since request header. Then the server can decide, if the resource has changed or not. If not, it will send the 304 response result. But what if we know on the first request, that the content is safe for the next x minutes / days? In this case we could also save the request. Imaging you have 100 pictures on one site and have a ping-time of 100 ms to a server. It would take in sequential mode 10 seconds to check these URLs.

2. Caching content with expiration dates

To give your content a time range, where it is valid, you have to define an expiration date using the Expires header. Additional you should enable caching itself for a time range using the Cache-Control header. The Cache-Control header can have several values, which can be combined. Typically would be:

“public,max-age=1800,must-revalidate”

The last option defines, that the client have to re-request the server for the resource after the time “max-age”, if the resource is needed again. Unfortunately the Safari browser have a bug which results in ignoring the Expires and Cache-Control header under some circumstances. As Steve Clay wrote on his blog, the problem belongs to the definition of must-revalidate. So currently using must-revalidate is no good idea until the bug is resolved.

To easily find the resources with missing Expires headers, you can use YSlow, a Firefox plugin provided by Yahoo.

YSlow

Categories
Javascript

Calculating with dates in JavaScript

JavaScript provides a class “Date” to work with dates. In this short article I want to give some tips with date calculation.

1. Working with seconds

The easiest way, if you need to calculate with seconds, minutes or hours, is to use the provided methods getTime() or setTime(). Here you will get or you can set the microseconds since 1.1.1970. So if you want to add one hour, just add 3.600.000 microseconds:

?View Code JAVASCRIPT
1
2

var date = new Date();
date.setTime(date.getTime()+3600000);

2. Working with days

If you work with days, the way with getTime()/setTime() is not preferred, because you have to honour the summer / winter time. So calculating with days, months or years should be done using the provided methods getDate() / setDate(), getMonth() / setMonth() or getFullYear() / setFullYear(). These methods are fault tolerant, so you can set the 35. day of a month and the date is correctly converted to the given day in the next month.

?View Code JAVASCRIPT
1
2

var date = new Date(2009,1,25); //date is 2009-02-25
date.setDate(date.getDate()+5); //would change date to 2009-03-02