Question

我发现如果我在iOS中加载一个网页，那么如果该页面使用JQueryMobile，则最初加载需要大约2到3秒的时间。例如，以下页面几乎立即加载：

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

然而，这需要几秒钟来加载：

<!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>

我有什么可以做的，试图摆脱这种延迟？

由于

Answer 1

如果脚本花费的时间太长，您可以将它们移到页面底部：

<!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>

然后再这样做会使得更难以准确预测会发生什么以及何时会发生。但是DOM应该在阻塞脚本标记加载之前加载和呈现。

现在你只需要弄清楚如何处理它。

Answer 2

尝试将JS置于底部

<!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>

Answer 3

jQueryMobile not that因其responsiveness而闻名。即使你已经尝试过每一次优化。

您可以尝试通过document.createElement()加载脚本。（理想情况下，即使这应该在底部）

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

这实际上只是在页面呈现后开始加载和执行脚本。即asynchronously种。

如果你有很多这样的人。

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

_{另外，我会保证SenchaTouch（如果这是你愿意考虑的选项）}

Answer 4

您可以尝试将脚本标记放在页面底部

<!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>

并且所有东西都应该加载更快，但脚本需要2-3秒

Answer 5

JavaScript会阻止页面的呈现，因为脚本可能会执行document.write或进行其他修改以使呈现的页面无效，因此最佳做法是将脚本标记放在页面底部。这样做的缺点是你不能在页面中间使用jquery，甚至不能使用$（document）.ready（）。相反，您必须在加载jquery之后放置所有脚本，或者必须使用本机window.onload或编写轻量级处理程序以在加载jquery之后注册回调。

使用JQueryMobile时，2-3秒延迟加载页面

5 个答案: