优点和缺点:将 javascript 放在头部并在身体关闭之前放置

IT技术 javascript
2021-02-06 22:22:50

大多数 javascript 和 Web 开发书籍/文章都说您必须将 CSS 放在 head 标签中,并将 javascript 放在页面底部。

但是当我打开像这个stackoverflow这样的著名网站的html源代码时,我发现他们在head标签中放了一些js文件。

两种方法的优缺点以及何时使用哪种方法?

找到了针对同一问题的另一个问题: 我应该在哪里声明页面中使用的 JavaScript 文件?在 <head></head> 中还是在 </body> 附近?

5个回答

来自雅虎加速网站最佳实践

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

在某些情况下,将脚本移到底部并不容易。例如,如果脚本使用 document.write 插入页面的部分内容,则它不能在页面中移动到较低的位置。也可能存在范围界定问题。在许多情况下,有一些方法可以解决这些情况。

经常出现的另一种建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write,并且是浏览器可以继续呈现的线索。不幸的是,Firefox 不支持 DEFER 属性。在 Internet Explorer 中,脚本可能会被推迟,但不会如您所愿。如果一个脚本可以被推迟,它也可以移动到页面底部。这将使您的网页加载速度更快。

因此,一般情况下,最好将它们放在底部。然而,它并不总是可能的,而且往往不会使多大的差别呢。

谢谢,这对我帮助很大
2021-03-14 22:22:50
@DougHauf 不确定我是否准确,但您是否添加了 DOMContentLoaded 侦听器?我问是因为如果你在底部有你的脚本并且它可以很好地渲染到画布上;这是因为画布在您尝试写入之前已经加载到屏幕上。现在,如果您将脚本放在标题中,它就不会绘制到画布上,因为画布还不存在。因此,如果您添加侦听器,它将在加载画布后触发您的画布代码。
2021-03-31 22:22:50
我不知道你引用的文档有多老,但似乎Firefox 已经支持 defer 属性很长一段时间了
2021-04-02 22:22:50
我有一个在画布上移动正方形的示例,如果我将 javascript 放在 HTML 的头部部分,它将不起作用。声明 Canvas 后,它必须位于正文的底部。是否有原因,或者我如何将所有 Javascript 保留在文件的 <head> 部分中。
2021-04-12 22:22:50

正如其他人所说,当您将 javascript 放在头部时,它会延迟页面的呈现,直到脚本加载后,这意味着页面可能需要更长的时间来加载 - 特别是如果您正在下载大型脚本文件。

如果您将脚本标签移动到页面的末尾,您将确保浏览器在脚本标签之前下载图像和样式表,并且页面可能会在脚本开始运行之前呈现。这也意味着,如果您依赖于脚本中的某些功能,则在页面对用户可见后不久才可用。

如果您正在添加样式或元素(等,使用某种形式更丰富的编辑器切换文本字段),这将对用户显示为闪烁。

如果您要向元素添加点击事件,则在元素本身可见之后,它们才可点击。

有时这些问题需要你把你的脚本放在头上,其他时候你把它们放在底部就可以了。

恕我直言(完全反对 YSlow 和很多聪明人)你应该将你的脚本保存在 head 标签中,并且大部分时间都依赖它们被缓存。

通常,您应该将脚本引用放在页面底部。脚本不仅需要下载,还必须在块释放和页面继续渲染过程之前评估和执行。Modernizr 之类的东西应该放在顶部,因为它会执行一些您可能需要的功能检测以及 HTML5 填充程序。

您想尝试将脚本放在页面底部的另一个原因是单点故障或 SPOF。这是脚本调用超时或由于某些其他原因阻止页面执行的地方。第三方广告库等可能会经常发生这种情况。

是的,您可能需要更努力地思考如何构建应用程序,但我发现它对我来说很快变得非常自然。在过去的 4 年里,我用底部的脚本构建了数百个网络应用程序,我可以分辨出其中的不同。我可能是 500 毫秒,也可能是 5000 毫秒,但这一切都很重要。

这真的取决于你的网站。如果您正在访问和调用主体内的 JavaScript 函数,则必须在标头中引用它,以便加载。否则,如果您只想在加载整个文档时调用 JavaScript,那么将 JavaScript 放在正文的末尾是明智的。通过将 .JS 文件放在最后,您可以加载整个页面,然后获取 .JS 文件。通过这种方式,用户将能够快速查看页面,并且当他/她熟悉页面时,.JS 文件已经下载。

头部中的任何 javascript 都将在页面加载之前进行评估,这意味着页面感觉需要更长的时间来加载。如果所有的 javascript 都在最后,让事件正常工作会稍微困难一些,但 jQuery 几乎为你解决了这个问题。

您能否提一下 jQuery 如何出于兴趣解决这个问题?
2021-03-17 22:22:50
jQuery 有一个 API 用于将处理程序绑定到事件
2021-03-20 22:22:50