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

2013-05-05 10:41:27 +08:00
 leohxj
凌乱了,求点拨。
14395 次点击
所在节点    JavaScript
19 条回复
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
如果可以,请尽量将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
@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
@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
@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>前

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/67752

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX