预加载外部javascript，图像和CSS文件

Question

I have been working on a web application which (despite my best efforts) has been steadily getting bigger and bigger with more and more scripts, images and css files being called.

Being a web application I think it is perfectly acceptable for a pre-loading screen to appear after the user has logged in and before they reach the dashboard. On this page I want to call all external scripts, css files and images to be downloaded to the browser so that they are pulled from local cache rather than being downloaded on demand during the running of the application.

I am aware that there are billions of image preloader scripts, but I need to go one step further, with everything (mainly external scripts) being called on the page to be preloaded.

Thanks, Tim

Answer 1

http://requirejs.org/ for script loading. Not sure about for css. Also, not sure what platform you are on, but jammit for rails is pretty great for asset management.

Answer 2

Although I havent seen a question in there, I am assuming we are talking about speeding up a web page loads.

Having a preload page is a little pointless since the script ultimately has to be downloaded, so why bother sending the user to a pre load page. You simply incur additional redirect requests.

You got 3 main ways to reduce load times:

• Reduce HTTP Requests
• Reduce download size
• Move static content closer to the client

Combres (.NET) is great and handles concatination and minification of scripts and CSS. I am sure there is something similar for other tech stacks. This limits the number of files downloaded (also providing a minification hook)

Also make sure you are using CSS sprites. This limits the number of images downloaded

As far as size goes:

You havent mentioned the tech stack you are on, but try look at some script minification libraries (YUI Compressor, etc).

Also make sure you are using GZip (via either IIS config or on hardware via load balancer or whatever)

There is also several javascript techniques that you can use to perform JIT downloads of scripts and basically prioritize the user exeprience. Steve Souders has some great books on these techniques

After these approaches you then start to look for hardware solutions like CDN's, etc. These ensure your content sits close to your target audience for faster downloads.

Yahoo have some great guidance on this: http://developer.yahoo.com/performance/rules.html

Answer 3

You can :

1. Divide the page in two iframes or DIV elements
2. On page load, just show iframe that has a "loading..." animation
3. Second iframes's source URL should be blank to begin with. On page load, set to actual page URL. This iframe should be hidden.
4. On Completion of load for this iframe, hide the "loading" iframe and show this one.