<head>中的JavaScript或</ body>之前的JavaScript？

Question

我即将开始一个新的Web项目,我计划使用以下方案将我的JS脚本放在头部和终端之前:

这是一种明智的做法吗？

另一种方法是将所有脚本放入</body>并将defer属性添加到非必要脚本 - 但是我已经读过旧版本的FF没有获取defer属性.

Answer 1

我想很多开发人员都在之前运行javascript,</body>以便在所有元素都被渲染之后运行.

但是,如果正确组织代码,页面上的位置无关紧要.

例如,在使用jQuery时,您可以通过执行以下操作确保在页面及其元素完全呈现之前不运行代码:

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

然后可以将脚本引用放在head标记中.

更新 - 脚本标签应该在之前引用</body>.这可以防止脚本加载时渲染阻塞,并且对于站点感知速度更好.

使用此技术时,不应使用任何突兀的JavaScript.

不要忘记,当您将脚本移动到底部时,内容加载速度会更快.假设没有使用ajax加载页面默认内容. (21认同)
即使使用`DOMReady`,位置也非常重要.许多开发人员在`</ body>`之前放置了javascript标记,因为所有脚本都是**同步加载和执行**.当它们位于`<head>`时,页面渲染停止下载→解析→执行每个脚本. (9认同)
(打桩......)将SCRIPT放在页面底部的主要原因不是确保加载DOM(尽管是一个重要原因),而是更多关于使页面显示为响应.如果您在页面顶部加载脚本,浏览器会首先下载它们,并且您的内容会一直等到它们被下载 - 这会使页面加载速度变慢,从而使用户不满意. (7认同)

Answer 2

Javascript应该放在文档的末尾,这样它就不会延迟页面元素的并行加载.这确实需要以特定方式编写js,但它确实提高了页面加载的速度.

此外,理想情况下,您可以在不同的(子)域下托管此类引用.对jquery的引用也应该指向谷歌CDN.