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(){       

});

因为 button 已经进入 DOM，所以可以直接绑定 click 事件。

在第二种情况下，因为 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 回答
0

提高性能的第一个案例....据说这是将javascript保持在页面下方的一般做法...以便更快地加载内容....尽管我个人没有事实或分析。检查这个不错的帖子 sameelegantcode.com/2010/03/30/your-javascript-goes-where/

于 2013-04-15T09:03:06.113 回答