2

以下の 2 セットのコード ブロックを見つけて、どちらに従うべきか、またその理由を教えてください。

<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Set 1</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/customStyle.css" />    
</head> 

<body> 

<div data-role="page">      
    <div data-role="header" data-position="fixed"></div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed"></div>

</div>

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/customScript.js"></script>  
    <script src="js/jquery.mobile-1.2.0.js"></script>   

</body>
</html>

そしてセット2は……

<!DOCTYPE html> 
    <html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Set 1</title> 
        <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/customStyle.css" />        

        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/customScript.js"></script>  
        <script src="js/jquery.mobile-1.2.0.js"></script>
    </head>

(つまり) すべてのスクリプトを一番上に配置するのと、一番下に配置するのとでは、どちらが正しいですか?

4

3 に答える 3

1

どちらも正しいですが、唯一の違いは、イベントをバインドする方法です。

最初のケースでは、HTML がすでに DOM にロードされているため、次のようにイベントを直接バインドできます。

$('#buttonID').on('click', function(){       

});

ボタンは既に DOM に組み込まれているため、クリック イベントを直接バインドできます。

2 番目のケースでは、ページ コンテンツの前に jQuery Mobile が読み込まれるため、すべてのイベント バインディングは委譲のように行う必要があります。

$(document).on('click', '#buttonID',function(){       

});

これはより安全ですが、処理が遅くなります。イベントをバインドするためにオブジェクトが存在する必要はありません。

簡単に言うと、ソリューション 1 の方がわずかに高速です。

于 2013-04-15T09:08:05.077 に答える
0

すべての JavaScript をページの下部に配置するとよいでしょう。JavaScript の解析/実行によってページのレンダリングが遅れる可能性があることを決して忘れないでください。さて、あなたはhttp://developer.yahoo.com/performance/rules.html#js_bottomを読むのが好きだと思います

于 2013-04-15T10:14:41.190 に答える