Faster JavaScript and CSS loading

    I don’t know if you know or don’t know, but
    1. Until the styles are loaded - the page will not be
    displayed 2. Until you load (and run) the script that you include - the page will not be displayed further
    3. From point 2 it follows that at one time only one script is loaded (and executed).
    * But depending on the writing, the second script can also be loaded (but not executed) simultaneously with the first ... but
    4. One browser at a time only holds two (or four?) Connections to one host.
    That is, on average, the browser will make 6 requests to the server one after another for downloading with a 6 script.
    In general, this does not apply to pictures, a mozilla like 4 pictures at the same time drags.
    BUT NOT MORE!

    What to do?


    It turns out that a standard page with
    1. one css file
    2. one js file
    3. a couple of js framework files (A LET'S PRESENT THIS IS A PROTOTYPE! WITH ASULOUS!)
    Waits on average 1-2 seconds to “fetch” these files. And only then it is drawn.

    Yes, half the downloads look like “If-Match || If-Modifited ”and is processed relatively quickly.
    Some files are not requested at all (built-in Min-Max Age)
    And everyone who doesn’t like IE generally likes not to ask even if necessary (and sits like a fool with old versions)

    In general, this was an introductory article to let people penetrate ...

    So to solve these problems (which came to me after reading habrahabr.ru/blog/AJAX/16489.html )
    I took the script described in the article and the malek changed it; the script
    itself is available here.

    So the script can work as an option as well as the original is
    added to .htaccess
    RewriteRule (. * \. Css) combine.php? Type = css & files = $ 1 [QSA, L]
    RewriteRule (. * \. Js) combine.php? Type = javascript & files = $ 1 [QSA, L]

    and the second combine.php branch works
    And ... we get only jsmin-minimized scripts compressed together and sent to you in a support encoding, just like in the original article

    Or ... (here it’s finally an innovation)
    In your HEADER (which, hopefully, is generated using php) write
    link rel = "stylesheet" type = "text / css" href = "= combine_makeref (" css ", $ HEADERcssfile)"

    or a scary line
    Quote:
    script language = "JavaScript" src = "? = combine_makeref (" javascript "," scripts / positioning.js, ~ brouser.js, ~ scripts.js, ~ site.js, sc ripts / aculous / lib / prototype.js, scripts / aculous / src / builder.js, ~ effects.js, ~ dragdrop.js, ~ controls.js, ~ slider.js ")" / script

    (the original size of the FEAR STRING is 204 kb, the size minimized by jsmin is 133 kb, the compressed size is 31 kb)
    In general, we call combine_makeref and we get some NAME at the output. Which changes when files are changed (those are unique for a set of files and the time they changed (in general, this is a simple E-Tag))
    and this Expires file is somewhere in a year.
    And one person will ship it once! (In the original version, the script update was checked every time)
    When accessing the file, it selects the best compression option and gives it to you.
    (required to add to .htaccess)
    RewriteRule (. * \. Cssf) combine.php? Type = css & fetch = $ 1 [QSA, L]
    RewriteRule (. * \. Jsf) combine.php? Type = javascript & fetch = $ 1 [QSA, L]

    Well - it’s already the best of all than the original, but some people may ask: "Isn’t it cool to give an account via php?"
    It’s cool sometimes ... therefore there is the last “best” option - it is to use the combine_makeref function combine_staticref instead. At the
    stage of issuing the header, it will determine the compression option and give a static link to the file ...
    Then give it to the gnixes and other Proubles without calling php code once again ...

    Uh, I’ve added it.
    Well, in general, I'm waiting for kamentov. combine.php kernel.php

    again



    Also popular now: