2

iOS で Web ページを読み込む場合、そのページで 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>

この遅延を解消するために私にできることはありますか?

ありがとう

4

5 に答える 5

3

時間がかかりすぎるスクリプトの場合は、ページの下部に移動できます。

<!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 を読み込んでレンダリングする必要があります。

あとは、それに対処する方法を理解する必要があります。

于 2012-08-30T17:08:45.013 に答える
0

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>
于 2012-08-30T17:09:51.817 に答える
0

jQueryMobile は、応答性が高いことで有名ではありません。すべての最適化を試した後でも。

ただし、スクリプトをロードしてみることができdocument.createElement()ます。（理想的には、これでも一番下に行くべきです）

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

これが効果的に行うことは、ページがレンダリングされた後にのみスクリプトの読み込みと実行を開始することです。つまり、一種の非同期的です。

このようなものがたくさんある場合。

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

また、私はSenchaTouchを保証します（それがあなたが検討するオプションである場合）

于 2012-08-30T17:10:50.340 に答える
0

スクリプトタグをページの下部に配置してみることができます

<!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 秒かかります

于 2012-08-30T17:13:03.340 に答える
0

JavaScript はページのレンダリングをブロックします。これは、スクリプトが document.write を実行したり、レンダリングされたページを無効にするその他の変更を行ったりする可能性があるためです。そのため、スクリプト タグをページの下部に配置することをお勧めします。これの欠点は、ページの途中で jquery を使用できず、$(document).ready() でさえ使用できないことです。代わりに、jquery のロード後にすべてのスクリプトを配置するか、ネイティブの window.onload を使用するか、jquery のロード後にコールバックを登録する軽量ハンドラーを作成する必要があります。

于 2012-08-30T17:13:08.383 に答える