Blu*_*ire 57 html javascript jquery
这个问题只是为了澄清一些问题.之前已经提出了类似这样的事情,这将它们全部归结为一个问题 - JavaScript应该放在HTML文档中,或者更重要的是,它是否重要？所以,我要问的其中一件事就是
<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>
完全不同(在功能方面)
<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>
更重要的是,我想专注于以任何方式修改或使用DOM中的元素的JS.所以我知道,如果你把一些像document.getElementById("test").innerHTML = "Hello world!"以前一样的东西<element id="test"></element>放在你的身体里,那么它将不起作用,因为身体从上到下加载,使得JS首先加载,然后继续尝试操纵一个不加载的元素还存在.因此,就像上面一样,它应该进入标签<head>之前或之前</body>.问题是,除了组织和排序之外,选择哪一个是否重要,如果是,那么以何种方式？
当然,还有第三种方法--jQuery方式:
$(document).ready(function(){ /*Code goes here*/ });
这样,放置代码的正文在哪里都没关系,因为它只会在所有内容都被加载时执行.这里的问题是,是否值得导入一个巨大的JS库只是为了使用一个方法,需要可以用准确放置脚本来替换它？我想在这里澄清一点,如果你想回答,请继续!总结:不同类型的脚本应该放在哪里 - 头部或身体,和/或它是否重要？jQuery是否值得为它准备好活动？
Sar*_*raz 56
最推荐的方法是将它放在</body>标签之前.雅虎表现文章还提出雅虎和谷歌分别为YSlow和Page Speed插件.
引用上面链接的雅虎文章:
脚本引起的问题是它们阻止了并行下载.HTTP/1.1规范建议浏览器每个主机名并行下载不超过两个组件.如果您从多个主机名提供图像,则可以并行执行两次以上的下载.但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载.
当您将脚本放入<head>标签时,浏览器会为它们提供服务,从而保持其他内容保持不变,直到加载脚本,用户会感觉到页面加载缓慢.这就是你应该把脚本放在底部的原因.
至于:
$(document).ready(function(){/*Code goes here*/});
当DOM可用并准备好进行操作时会触发它.如果你把代码放在最后,你不一定需要这个,但通常这是必需的,因为你想在DOM可用时立即做一些事情.
T.J*_*der 28
虽然通常的做法是,将script标记放入其中head通常不是一个好主意,因为它会保留页面的呈现,直到下载和处理这些脚本为止(禁止使用async或defer支持浏览器).
通常的建议是将script标签放在标签的最末端body,例如,就在之前</body>.这样,脚本上方的所有DOM元素都可以访问(参见下面的链接).有一点需要注意的是,可能会有一个短暂的时刻,您的页面至少部分呈现,但您的脚本尚未处理(尚未),如果用户开始与页面交互,他们可能会做一些事情来提出一个事件,你的脚本还没时间挂钩.所以你需要意识到这一点.这是渐进增强的一个原因,即页面在没有JavaScript的情况下工作,但使用它可以更好地工作.如果你正在做的页面/应用程序根本不能在没有JavaScript的情况下工作,你可能会在标签的顶部包含一些内联脚本body(例如<script>minimal code here</script>),它挂起任何冒泡事件,document.body并将它们排队等待你的行动.脚本已加载,或只是要求用户等待.
使用像jQuery这样的ready功能很好,但在库外没有必要(例如,如果你控制了script标签的位置,你通常不需要使用它;但如果你正在编写一个jQuery插件 -因为这需要在负载上做一些事情[这是相对罕见的,通常他们只是等待被召唤],你通常这样做.
更多阅读:
通过执行以下操作可以并行下载javascript：
(function () {
var ele = document.createElement('script');
ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
ele.id = "JQuery";
ele.onload = function () {
//code to be executed when the document has been loaded
};
document.getElementsByTagName('head')[0].appendChild(ele);
})();
在示例中，它从Google下载了缩小的JQuery v1.7.2，这是一种下载JQuery的好方法，因为从Google下载JQuery就像使用CDN一样，如果用户位于使用相同文件的页面上，则可能会对其进行缓存并缓存。因此不需要下载
这里有一个非常不错的Google技术话题，http://www.youtube.com/watch?v= 52gL93S3usU&feature =plcp