php - Optimize JavaScript CSS download - Stack Overflow

admin管理员组

文章数量:1200772

I have a number of pages for my website all use jQuery and JSON and the same CSS, except for a few pages. The first page is user login. As the user will take time to type in his username and password, I want to download all the required JavaScript and CSS files for the entire user session during login. How can this be done? The header is the same for all pages. How do I optimize it?

I have a number of pages for my website all use jQuery and JSON and the same CSS, except for a few pages. The first page is user login. As the user will take time to type in his username and password, I want to download all the required JavaScript and CSS files for the entire user session during login. How can this be done? The header is the same for all pages. How do I optimize it?

• php
• javascript
• jquery
• css

Share Improve this question Follow edited Jul 31, 2012 at 18:14 Bill the Lizard 406k211211 gold badges572572 silver badges889889 bronze badges asked Jul 31, 2012 at 8:23 rohitnaidu19rohitnaidu19 69355 silver badges2323 bronze badges 4

• Please explain this for entire user session – Adi Commented Jul 31, 2012 at 8:37
• @user982207 Would you be happy to include jQuery in your page? Ill be able to make my answer easier to follow – Undefined Commented Jul 31, 2012 at 8:38
• entire session meaining till user doesnt logout.. – rohitnaidu19 Commented Jul 31, 2012 at 9:06
• @sam yes im using jquery json and googlemaps – rohitnaidu19 Commented Jul 31, 2012 at 9:13

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 15

My idea would be load in js and css files dynamically after document.load. This would not affect the load time of the login page, whilst also caching your js and css files once the user has logged in.

You could also easily change this to document.ready if it loads faster for you.

What about something like this?

$(document).load(function() {
    function preloadFile(filename, filetype){

        //For javascript files
        if (filetype=="js"){
            var fileref=document.createElement('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", filename);
        }

        //For CSS files
        else if (filetype=="css") {
            var fileref=document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
        }

        document.getElementsByTagName("head")[0].appendChild(fileref)
    }

    //Examples of how to use below
    preloadFile("myscript.js", "js"); 
    preloadFile("javascript.php", "js");
    preloadFile("mystyle.css", "css");
});

References

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

• Add all your css/javascript on your login page.
• Put all your css at the top in HEAD section.
• Put all your Javascripts at the bottom.

• Also make your Javascripts and CSS as external files as they are cached by browser(rather than writing the inline javascript and css in the page).

• Minify your Javascript and CSS

UPDATE 2

Post loading of JS and CSS could also be done using YUI GET UTILITY

For more details look at this Yahoo : Best Practises for Optimizing your WebSite

i want to download all the required javascript and css files for entire user session during login

<title>Login</title>
<script src="foo.js"></script> <!-- This line might be better placed just before </body> -->
<link rel="stylesheet" type="text/css" href="foo.css">

I'd recommend an asynchronous loader e.g. requireJS.

Once you've created and compressed your javascript and css, assign the loading of it to an event, for instance when the user focuses on the username field.

Facebook uses a similar trick with their typeahead queries: loading data relevant to the user when the search box gains focus.

本文标签： phpOptimize JavaScript CSS downloadStack Overflow