JavaScript - 头部、身体还是 jQuery?

IT技术 javascript jquery html
2021-01-31 14:41:38

这个问题只是为了澄清一些事情。以前有人问过这样的问题,这将它们全部归结为一个问题 - 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 是否值得仅仅为了就绪事件?

3个回答

最推荐的方法是把它放在</body>标签之前雅虎性能文章还表明,除了雅虎和谷歌分别提供的YSlowPage Speed插件之外。

引用上面链接的雅虎文章:

脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像,则可以同时进行两次以上的下载。然而,在下载脚本时,浏览器不会启动任何其他下载,即使在不同的主机名上也是如此。

当您将脚本放入<head>标记中时,浏览器会选择它们,从而在脚本加载之前保持其他内容,用户会认为页面加载缓慢。这就是为什么你应该把脚本放在底部。

至于:

$(document).ready(function(){/*Code goes here*/});

当 DOM 可用并准备好被操纵时,它会被触发。如果你把你的代码放在最后,你不一定需要这个,但通常这是需要的,因为你想在DOM 可用时立即做一些事情

这是一个很好的答案,但是如果您需要$("td.speical-format").live()在包含 jquery 之前出现的表上使用类似的内容您应该怎么做
2021-03-15 14:41:38
根据您的观点,您说我们也应该在底部下载 JS 库文件。除非我们使用异步,否则它将是一个渲染阻塞 JavaScript。但是在绘制过程完成后,JS库文件应该准备好了,以便自定义JavaScript(例如:document.ready())运行其功能不是吗?
2021-03-16 14:41:38
如果你打算把它放在最后,那么总是使用微调器/加载器..这是因为如果你的 css/js 很大或数量很大,那么一些依赖于 jquery 的东西将不起作用......
2021-03-23 14:41:38

尽管通常的做法是,将script标签放入head通常不是一个好主意,因为它会阻止页面的呈现,直到这些脚本被下载和处理(除非您使用asyncordefer和支持它们的浏览器)。

通常的建议是将script标签放在标签的最后body,例如,就在 之前</body>这样,脚本上方的所有 DOM 元素都可以访问(请参阅下面的链接)。一个警告是,当您的页面至少已部分呈现但您的脚本尚未处理(尚未)时,可能会有短暂的时刻,如果用户开始与页面交互,他们可能会做一些事情来引发一个事件你的脚本还没有来得及钩住。所以你需要意识到这一点。这是渐进增强的原因之一,即页面无需 JavaScript 也能工作,但使用它会更好。如果您正在制作一个完全没有 JavaScript 就无法运行的页面/应用程序,您可能会包含一些内联body标记顶部的脚本(例如,<script>minimal code here</script>)挂接任何冒泡事件,document.body并在您的脚本加载时将它们排队等待操作,或者只是要求用户等待。

使用 jQuery 之类的ready功能很好,但在库之外并不是真正必要的(例如,如果您可以控制script标签的位置,您通常不需要使用它;但是如果您正在编写 jQuery 插件 -因为需要在加载时做一些事情[这是相对罕见的,通常他们只是等待被调用],你通常会这样做)。

更多阅读:

因此,如果我正在制作一个集成 JS 的应用程序,我应该使用内联钩子;如果您正在制作 Chrome 扩展程序(不允许使用内联 JS)呢?
2021-03-23 14:41:38
@Bluefire:我没有说你应该这样做,只是说这将是抵御那个短暂间隔的一种方式。你是说你不能<script>code here</script>在 Chrome 扩展中吗?
2021-03-28 14:41:38
不 :D 我是说你不能做像<span oncick="yourEvent()"></span>. 我认为这就是您所说的“内联”。
2021-04-04 14:41:38
@Bluefire:啊,抱歉,我的意思是内联作为script直接包含其代码元素而不是引用单独的脚本文件。
2021-04-07 14:41:38

可以通过执行以下操作并行下载 javascripts:

(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 下载它就像使用 CDN,如果用户一直在使用相同文件的页面上,它可能会被缓存和因此不需要下载

有一个非常好的谷歌技术在这里讨论这个http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp