Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

Single post in A bit of info on the Header updates

Forum Index > Core > Announcements > News Archive > A bit of info on the Header updates >

Niet [Adam]'s Avatarhypermode-12.pngNiet [Adam]
Niet [Adam]'s Avatar
admin1.pngbooster.pnghypermode.pngarceus.pngd+.png
Hey guys! This post may be quite technical and/or difficult to follow, but for those who are interested: this is what I did with the header are (toolbox, navbar, announcement box) Basically, I realised that that part of the page has to load every single time you load a page. That might seem obvious, but it means a lot. In fact, the header area was about 9Kb in size! Again... doesn't seem like much, but think about it. 9Kb. Per page load. Across all users. Let's say... 2,500 users come online in a day. On average, they might load a hundred pages. That's 250,000 times 9Kb, or over 2GB, the size of a small USB drive. And that's not counting Guest users! They do get a smaller Header area though... so let's estimate that at about a total of 4Gb. PER DAY. That's a lot, just for the header! I decided this was unacceptable. Now, when you actually load the page, it is initially loaded with something like this:
<div id="toolbox"><code>in=;time=1392838893;on=[246,101];not=[0,0];out="yQtJSl";me=["Niet",10,1,"Niet's Mountain Cave"];money=[54332,2895,325]</code></div>
Yes, it looks ugly. That's the point XD Packing information into a small space makes it ugly. Have you ever tried to open a ZIP file in Notepad? See how ugly it is? This is comparatively tame! But anyway, you don't get to see that, because... well, you see a very nice header with a link to your user page, Farm, users online, etc. That's thanks to the JavaScript. When the page loads, pretty much the first thing the JavaScript does is look for that code, and process it, converting it into the actual result. You may realise, of course, that this means I had to add more JavaScript to the site. Yes I did. In fact, I had to write about 9Kb of JavaScript. Hang on a sec... If I was trying to make something that was 9Kb smaller, and I wrote 9Kb of code to do it... didn't I make it bigger? Well, yes and no. Yes, I made it bigger, but there are a couple of important points: - JavaScript can be compressed (minified). The code I write is all tidily organised, but before it goes on the site it gets mercilessly crushed to be as small as possible. In this case, the site's main JavaScript file gets crushed by about 30%, which is great! Makes my 9Kb of additions closer to 6Kb instead. - JavaScript files are cached. This means they are loaded once, and then your browser doesn't care any more. It knows the file won't change because the server tells it so (and I did some very clever cache-busting stuff for when the file does change). All in all, this means that the extra JS contributes a total of 6Kb per user, ever (or at least, per update of the code). For our 2,500 users, that adds up to 15Mb of bandwidth. And remember, that's not per day any more. Your browser will cache the file forever, no matter how many pages you load. Going from 4GB to 30Mb (factoring in guest users) is massive. You can see right there, it's two orders of magnitude different! A 99% savings on bandwidth for that element of the site! Also you get a quick visual indication of when there's a new Announcement, which is awesome, but only if you're paying attention :p
Clip from Pokémon anime, re-lined by me
-- OMNOMNOM!
Featured story: Injustice Feedback welcome!
© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page