2-3 second delay loading page when using JQueryMobile

Question

I've found that if I load a web page in iOS, then if that page uses JQueryMobile it takes about 2 to 3 seconds longer to initially load. For example, the following page loads almost instantaneously:

<!DOCTYPE>
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

However this one takes a few seconds to load:

<!DOCTYPE>
<html>
    <head>
    <title>Hello</title>
        <link rel="stylesheet"  href="jquery.mobile-1.1.1.min.css" />
        <script src="jquery-1.7.2.min.js"></script>
        <script src="jquery.mobile-1.1.1.min.js"></script>
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

Is there anything I can do to try to get rid of this delay?

Thanks

If your server is not setup to compress the output of the JS/CSS files, then don't host them yourself. You can reduce the network latency by about 70% by enabling compressed output. — Jasper, Aug 30 '12 at 18:03

score 3 · Answer 1 · edited Aug 30 '12 at 18:04

If it’s the scripts that are taking too long, you can move them to the bottom of the page:

<!DOCTYPE html>
<html>
    <head>
    <title>Hello</title>
        <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
    </head>
    <body>
        <h1>Hello</h1>
        <script src="jquery-1.7.2.min.js"></script>
        <script src="jquery.mobile-1.1.1.min.js"></script>
    </body>
</html>

Then again, doing so will make it harder to predict exactly what happens and when it will happen. But the DOM should load and render before the blocking script tags load.

Now you just need to figure out how to deal with that.

Thanks, however it doesn't make any difference. Any other things I could try? — Gruntcakes, Aug 30 '12 at 17:20

score 0 · Answer 2 · answered Aug 30 '12 at 17:09

Try putting the JS at the bottom

<!DOCTYPE>
<html>
    <head>
    <title>Hello</title>
        <link rel="stylesheet"  href="jquery.mobile-1.1.1.min.css" />

    </head>
    <body>
        <h1>Hello</h1>
            <script src="jquery-1.7.2.min.js"></script>
        <script src="jquery.mobile-1.1.1.min.js"></script>
    </body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

jQueryMobile is not that famous for its responsiveness. Even after you have tried every optimization.

You could try loading the scripts via document.createElement() though. (Ideally, even this should go at the bottom)

function createScript(src){
   var script = document.createElement('script');
   script.src = src;
   document.getElementsByTagName('head')[0].appendChild(script);
}

What this effectively does is to start loading and executing the scripts only after the page has rendered. i.e. kind-of asynchronously.

If you have many like these.

var files = ['1.js', '2.js', '3.js'];
files.map(createScript);

_{Also, I would vouch for SenchaTouch(if that's an option you're willing to consider)}

edited May 23 '17 at 11:45

Community

1
1

answered Aug 30 '12 at 17:10

Robin Maben

22,194
16
64
99

Thanks, I'll give this a try. But how do I adopt your code snippet to deal with the fact the page has 2 scripts? – Gruntcakes Aug 30 '12 at 17:23
@MartinH: Have an array of `src` values and iterate and create the script elements for each of them. Edit coming soon. – Robin Maben Aug 30 '12 at 17:25
Robin what is the purpose of the /* load event*/ line, what should go there and why? (I'm not a JS dev, iOS is my area). P.S. I put this code in a .js file and added it to the html via a src= but the createScript() function gets called twice for everything within the files array, why is that? Thanks. – Gruntcakes Aug 30 '12 at 18:13
@MartinH: Wierd. Can you post a jsfiddle so I can see what's going on? Are you using IE/IE9? Seems like there is a related [known issue](http://msdn.microsoft.com/en-us/library/ie/hh180173(v=vs.85).aspx). – Robin Maben Aug 30 '12 at 18:21
My target is iOS where it exhibits that behavior, but I'm using KomodoEdit and it does the same thing with its default browser and with Safari, also the page flashes as if reloading twice. However it doesn't do this with Fiddle or with using Chrome in KomodoEdit. So it must a browser issue I guess. – Gruntcakes Aug 30 '12 at 19:26
@MartinH: Hmmm. Seems like you can post that as another separate question. (Maybe search around a little first). I wish I had the time. – Robin Maben Aug 30 '12 at 19:31
@MartinH: I think I just *might* have seen the problem. The `createScript` is best kept in **one place** i.e. the main page and not loaded dynamically. Probably that's where it gets appended and executes the second time.. ? – Robin Maben Aug 30 '12 at 19:38
I moved all the js into the html file but it still exhibits that same behavior. – Gruntcakes Aug 30 '12 at 21:29
1

All the code within the script tag is getting executed twice. For now I can workaround it by creating a flag on first pass then then checking for it so it skips the second pass. Would be interested to know why this is happening though. – Gruntcakes Aug 30 '12 at 21:37
@MartinH: Hmmm, I was going to suggest that hack. Let me see if I can try digging into it when I get a little free time. – Robin Maben Aug 31 '12 at 05:07

score 0 · Answer 4 · answered Aug 30 '12 at 17:13

You Can Try and Put The Script Tag in The Bottom of The Page

<!DOCTYPE>
<html>
<head>
<title>Hello</title>
    <link rel="stylesheet"  href="jquery.mobile-1.1.1.min.css" />
</head>
<body>
    <h1>Hello</h1>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</html>

and Everything Should Load Faster But The Scripts Gonna Take a 2-3 Seconds

Lie Ryan · Answer 5 · 2012-08-30T17:22:08.913

JavaScript blocks the rendering of the page because the script may do document.write or do other modification that will invalidate the rendered page, so best practice is to put script tags at the bottom of the page. The drawback to this is that you won't be able to use jquery in the middle of the page, not even $(document).ready(). Instead you'll have to put all your scripts after jquery is loaded or you'd have to use native window.onload or write a lightweight handler to register your callbacks after jquery is loaded.

2-3 second delay loading page when using JQueryMobile

5 Answers5