Build HTML on the client’s computer
What I mean by this is you use javascript to actually build the website. Only send the minimal amount of data in your html file itself. The rest should exist in a .js file that the user can cache and reuse to build your sites. For example, say you are building this table
| Username | Address | Phone number |
|---|---|---|
| gtucker | 123 Fake Street | 915-555-1234 |
if you were to use simple html and had 100 rows, the user would have to download 3,700 characters (each row adding 37 characters), plus any data in the actual table. If you were to make a .js file like this :
function buildTable(rows){
var html = [];
html.push('<table><tr><th>Username</th><th>Address</th><th>Phone number</th><tr>');
for(var i = 0; i < rows.length; i++){
html.push('<tr>');
for(var j = 0; j < rows[i].length; j++){
html.push('<td>');
html.push(rows[i][j]);
html.push('</td>');
}
html.push('</tr>');
}
html.push('</table>');
document.getElementById('myElement').innerHTML = html.join('');
}
Then in your html file call the function like this:
buildTable([
['Gordon Tucker','123 Fake Street','915-555-1234'],
['Gordon Tucker','123 Fake Street','915-555-1234'],
['Gordon Tucker','123 Fake Street','915-555-1234'],
['Gordon Tucker','123 Fake Street','915-555-1234']
]);
It suddenly becomes a lot more scalable. For 100 rows, it will be 1,100 characters (11 for each row). I'm ignoring the javascript file for now, since there are plenty of optimization techniques to make it smaller.
You might say, whats the big deal between 1,100 characters and 3,700 characters, both are tiny amounts. The difference is in scale (think of having 2000 rows of data...) Also remember that the more complex the HTML is going to be, the bigger the improvement you will see with this technique. Remember, no matter how much html you want to use, the data a user would have to download would stay relatively small.
May not seem like a ton, but techniques like this combined with others can dramatically improve your site's speed.
Hope this helps someone out there.
I'll try to get an example page up on Our site soon.
