javascript - 我应该在哪里声明在我的页面中使用的 JavaScript 文件?在 <head></head> 还是在 </body> 附近?

标签 javascript html

我正在阅读教程,作者提到在结尾处包含 JavaScript 文件 body HTML 中的标记 ( </body>)。

对于哪种类型的功能,我不应该在 head 中声明/定义 JavaScript 包含部分?这对我来说很有意义,包括像 Google Analytics 这样的 JavaScript临近收盘body标签。在结束时我应该在哪里定义 JavaScript include body标签?

最佳答案

人们经常争论说,为了提高速度,您应该将 script 标签放在文档的末尾(在结束的 body 标签之前)。虽然这会导致最快的页面加载,但它有一些严重的缺点。

首先,网页开发的一个常见习惯是在中间有一个头文件、一个页脚文件和您的内容。为了将不必要的 JavaScript 代码保持在最低限度,您通常希望将代码片段放在单独的页面中。

如果您包括 jQuery ,例如,在文档的末尾,您的 jQuery 代码片段(如文档就绪的内容)必须在之后发生。从开发的 Angular 来看,这可能很尴尬。

其次,根据我的经验,由于页面加载速度更快,您最终会注意到正在应用某些效果,因为在应用它们时页面已经加载。

例如,如果您在文档中放置一个表格,并在正文关闭标记之前放置:

$(function() {
  $("tr:nth-child(odd)").addClass("odd");
});

通过适当的样式,所应用的效果通常是可见的。我个人认为这可能会导致糟糕的用户体验。我认为,如果您没有令人不安的视觉效果,通常最好让页面加载速度稍微慢一些(通过将脚本放在顶部)。

我通常提倡有效的缓存策略,因此您只需在 JavaScript 文件发生变化时下载它们,如 Supercharging JavaScript in PHP (但这些原则适用于任何语言,而不仅仅是 PHP)并且仍然将脚本放在首位。这样方便多了。

关于javascript - 我应该在哪里声明在我的页面中使用的 JavaScript 文件?在 <head></head> 还是在 </body> 附近?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1013112/

相关文章:

javascript - 如何在其他人向下滑动时删除一个类

javascript - Sails.js + Grunt "Cannot find module"错误

Java HTML Builder(反模板)库?

html - CSS - 未知元素 - 滚动条?

javascript - AngularJS - 在第一个可见元素上应用 CSS 类(最好不要使用 JQuery)

html - Flex-box 多行。如何使用: flex-wrap: wrap?

html - 始终向右浮动侧边栏

javascript - 谷歌说代码无效,我的错误在哪里?

php - 从所选复选框的数据库中选择全部

javascript - node.js 多人 html5 游戏中的延迟越来越高