Mechanism of delta-loading

Usually, you will have different CSS’s and scripts on the various pages.
Some CSS’s and scripts tags will be page-specific while others are common to all pages.

Delta-loading means that:

  • CSS’s and scripts that are genuinely new to a page (page-specific) will be loaded dynamically
  • CSS’s and scripts that are common to both pages will remain in memory
  • CSS’s and scripts that are genuinely old to a page (page-specific) will be unloaded dynamically
  • all CSS’s and scripts with data-class="always" are always loaded, if the URL remains the same!

Inline scripts and style tags

…can now be loaded smartly

Preserving order of the DOM

From version 6.4.0, the order of the scripts in the DOM, whether inline or external is preserved, when delta-loading. That means you can steer the order of loading by interspersing inline and external scripts, which is probably, what you expected intuitively…

Initial load

…is performed without an extra GET! (analysing the DOM tree on DOMReady)

Delta-loading described at Wikipedia

see also: Delta-loading in HTTP at Wikipedia

16 thoughts on “Delta-loading”

  1. Hi,

    Thanks for Great Plugin, I have working it and found little problem.

    doesnt identify how to solve it.

    Ajaxify is not working with bootstrap for special onload classes.

    like i want to use selectpicker with ajaxify its doesnt work.

    Please help me to do it.

    Once Again Thanks

        1. The sign-up process doesn’t seem to work. Is that the issue we’re talking about?

          In here, you’ve set
          forms to false – so the form should not get ajaxified…

          There is an error in the console, saying, that “font-awesome.css” is not getting loaded?

          1. Yes I dont want to form ajaxify because i already handle it with ajax request.

            problem is there is male female dropdown.. when I remove ajaxify from page.

            its working fine.

            but when use ajaxify then that dropdown not worked.


          2. Could you try removing the no-ajaxy class? Just a quick idea.
            With forms set to false, Ajaxify should not do anything, really, but we could try that…

          3. Hello

            Removed no-ajaxy class..

            look it once ..

            then will remove ajaxify.js then will check it again.


          4. It said: “Your message was sent successfully.“, although I was not able to select the gender, leaving it as “male” – don’t know, whether Ajaxify was enabled or not

  2. Gotcha, I understand that this is probably not necessary for many users.
    I ended up just changing the if statement in the _freeOld function to this:
    if (s[i][1] == 2 && s[i][0] && s[i][0].search("typekit") < 0) _removeScript(s[i][0], PK);
    I didn’t want to run the javascript again I just wanted to keep the it created.
    This is maybe a bit of a hack but it’s working good for me so far.
    Thanks for your help!

  3. Hi,
    This plugin is awesome!
    I’m having one problem. I’m trying to use Typekit which doesn’t allow you to link directly to the font, you have to use an embed script which attaches a style tag to the head that links to the font. Is there a way I can have Ajaxify leave that style tag alone instead of offloading it when a new page is loaded?

      1. Yeah I should have mentioned I already tried that. I’ve also tried inline set to true and false and also put “Typekit” in inlinehints.
        Above it says:
        “CSS’s and scripts that are genuinely old to a page (page-specific) will be unloaded dynamically.”
        Since the Typekit styles have been generated for the current page only it seems like they would be “page-specific” and unloaded.
        I can see in web inspector that the style tag disappears when a new page is rendered.

      2. Hi Andrew,

        thanks for your detailled answer and thorough research!

        Here some quick feedback:

        inline pertains to inline scripts only (i.e. inline JS)
        you need to turn on style handling, in order to achieve, what you would like to do!
        – the usual “delta-loading” does not apply to style tags – they are handled differently:

        1) Fetch all style tags from the target page
        2) Delete all style tags from the head
        3) Append style tags from the target page to the head

        You’re right – this means that style tags from older pages are lost!

        What would you expect from a user’s point-of-view instead?
        I’d be happy to overhaul the style handling for you and future users

        From what you’ve posted, I reckon, you would like the following to happen instead:

        1) Fetch all style tags from the target page
        2) Compare with the “history” of style tags
        3) Append new style tags to the head
        (keeping a “history” of style tags)

        Just two more questions:

        – Does everything work, when Ajaxify is disabled?
        – What is the behaviour of “Typekit” then – does it generate the style tags for all pages?

        Thanks very much again!

        1. Hi,
          Thanks a lot for the info and help!
          I will answer your two questions first.
          Everything works when I disable Ajaxify.
          Yes Typekit generates style tags for each page. It works differently than some web fonts in that you don’t link directly to the stylesheet, you just include some javascript which does some feature detection and then attaches the link to the font. So yeah, I don’t actually have the link in the head on every page just the script.

          Yeah I think your solution would be great!
          My problem is specific to Typekit, but I imagine there would be times a user would want to leave a link alone especially if it involved making a request to a third party server.

          1. Hi Andrew,

            slept over this issue one more night. I think, I won’t implement the change, because in the current form, the algorithm reflects what probably most users would expect.

            What came to my mind: Could you please make sure, that Typekit runs before Ajaxify kicks in?
            If it’s the other way around, i.e. that Ajaxify runs first, the behaviour you reported is understandable…

            You also mentioned, that it’s a piece of Javascript that creates the style tags. In that case you need both style: true and inline: true or if that JS is the only one you’d like to trigger then inlinehints set…


Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright 2005-2016, All rights reserved.
Latest update: 18. October 2016