引入js的script标签到底是放在head还是body中？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 4205 天前的主题，其中的信息可能已经有所发展或是发生改变。

凌乱了，求点拨。

script

head

19 条回复 • 1970-01-01 08:00:00 +08:00

loading

2013-05-05 10:51:18 +08:00

看大小和用途，像访问统计这种不影响浏览体验的自然就放最后了。类似于渐进增强。

如果实在太大，可以考虑使用head.js或sea.js这些加载库

xinyu198736

2013-05-05 11:40:56 +08:00

多实践，多思考，你看到的很多关于这个的论述其实都是为了突出一个观点故意弱化其他的影响。

一般来说我的实践是：通用的js放在head，例如jquery之类的每个页面都会引用的。而页面单独的js则放在页面底部。

放在页面底部的原因很多，例如不阻塞页面加载（事实上js会被缓存，这个影响极小，容易被人夸大）
可以直接在js里操作dom，这时候dom是准备好的。（实际上，现在大家js都会考虑这个，放在哪里都一样，ready后再操作dom）

guchengf

2013-05-05 11:55:58 +08:00

调用类的都是放在head部分，而本页面的JS脚本就直接写在body中

guchengf

2013-05-05 11:56:11 +08:00

我是这样子写的

DaniloSam

2013-05-05 13:40:16 +08:00

不管是直接写在页面中，还是引用的外部文件，js都会阻塞页面加载（ff会对js进行异步加载，并判断js的先后顺序），如果是操作DOM的js应该放在页面底部，这样起码可以保证js运行时dom是存在的

'猫头鹰书'建议的方式是放在页面底部，监听window.onload 或 readystate 来触发js

或者使用YUI.use或seajs的方式异步加载所需的js，只在head里放置其加载所需的文件，这样的好处是可以在加载DOM的同时下载js，在DOM就绪后运行js

至于直接写在页面内的脚本，是不建议使用的，原因很明了了

breeswish

2013-05-05 15:53:46 +08:00 via Android

如果可以，请尽量将javascript放在/body前，将styles放在head内。这可以(有时比较显著地)加快速度。如果是RIA那就无所谓了……

HowardMei

2013-05-05 16:22:47 +08:00

@breeswish 一般效果不会差很多，最明显的加速方法还是合并、多子域。

davidli

2013-05-05 16:23:07 +08:00

在不影响JS运行效果的前提下，尽量往后放。

breeswish

2013-05-06 00:03:21 +08:00 via Android

@HowardMei 两个都少不了……一个是传输阻塞一个是渲染阻塞

HowardMei

2013-05-06 00:09:23 +08:00

@breeswish 传输阻塞我比较清楚，渲染阻塞感觉不明显啊，除非用了非常复杂的逻辑。

zythum

2013-05-06 00:22:54 +08:00

放在html文档流最后

breeswish

2013-05-06 01:00:21 +08:00 via Android

@HowardMei 个人感觉还是比较明显的放在/body前相当于整个js的时间省下来了(或者说内容在这之前即显示出来)

leohxj

2013-05-06 08:49:17 +08:00

@zythum 所有的script都放，还是本页相关的js？

davepkxxx

2013-05-06 09:11:50 +08:00

随意

zythum

2013-05-06 09:51:04 +08:00

@leohxj 没用的放那干嘛？

DaniloSam

2013-05-06 11:11:11 +08:00 via iPad

@breeswish

给跪了

EchoFUN

2013-05-06 11:36:39 +08:00

如果页面html中引用到了的js函数，例如a标签的某个onclick，包含了这个函数的文件需要放在头部，防止js报错，脚本就停止执行了。
其他的js，可以都放在尾部。
个人感觉最好的实践，还是只要在尾部放个加载器，其他的js脚本都可以无阻塞加载进来。如果js文件太大且可以做成模块的情况下，建议使用异步加载的方式。

chemzqm

2013-05-06 22:43:46 +08:00

Google Analytics的代码放到上面可以可高一点准确度，内容型页面的js代码放到下面可以让用户等到js下载完成就能浏览到应用。
如果做应用我会把JS都放到上面，其它情况尽量放最下面。

IfengName

2013-05-13 23:31:22 +08:00

</body>前