请找到下面 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>
第二组是......
<!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>
(即)哪一个是正确的，将所有脚本放在顶部还是底部？
最佳答案
两者都是正确的，唯一的区别是如何绑定(bind)事件。
在第一种情况下，因为 HTML 已经加载到 DOM 中，所以可以直接绑定(bind)事件，如下所示:
$('#buttonID').on('click', function(){
});
因为按钮已经在DOM中，所以可以直接绑定(bind)点击事件。
在第二种情况下，因为 jQuery Mobile 在页面内容之前加载，所以所有事件绑定(bind)都必须像委托(delegate)一样完成:
$(document).on('click', '#buttonID',function(){
});
这是一种更安全但速度较慢的解决方案。不需要存在对象即可将事件绑定(bind)到它。
总而言之，解决方案 1 稍微快一些。
关于jquery-mobile - Jquery 移动性能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16011242/