jQuery / Javascript —如何在视觉上优化我的网站负载？

Question

I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site: http://marckremers.com/2011 (Still not complete, in alpha phase)

As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).

I'm wondering if there is a way i can make it click into place first and then load the elements?

I tried putting the reposition script just after , not even that works.

Any ideas? Thanks

Answer 1

With all of the images you have, your page is 1.5mb , coupled with 70 http requests. No wonder your site behaves the way it does.

You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.

If you want to go further into optimization I would also:

• Use one external javascript file. Yes it increases size, but I favor that over http requests.
• Minify your html/javascript/css.
• Don't host jQuery on your site, use a CDN such as Google APIS .
• Check out a service similiar to Amazon S3.

I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.

Answer 2

You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your if ... else that handles how many columns to display and your Google Maps iframe.

To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the projects and tb_tweets classes, so it doesn't have to wait for all your JavaScript to load before handling resizing of your projects and tb_tweets .

Answer 3

use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.

Answer 4

A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?

Answer 5

Generally you only want to trigger your events after the page has rendered, ie, using

$(document).ready(function()) {
   //your javascript goes here
}

Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.