V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
leohxj
V2EX  ›  JavaScript

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

  •  
  •   leohxj · 2013-05-05 10:41:27 +08:00 · 14384 次点击
    这是一个创建于 4011 天前的主题,其中的信息可能已经有所发展或是发生改变。
    凌乱了,求点拨。
    19 条回复    1970-01-01 08:00:00 +08:00
    loading
        1
    loading  
       2013-05-05 10:51:18 +08:00   ❤️ 1
    看大小和用途,像访问统计这种不影响浏览体验的自然就放最后了。类似于渐进增强。

    如果实在太大,可以考虑使用head.js或sea.js这些加载库
    xinyu198736
        2
    xinyu198736  
       2013-05-05 11:40:56 +08:00   ❤️ 3
    多实践,多思考,你看到的很多关于这个的论述其实都是为了突出一个观点故意弱化其他的影响。

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

    放在页面底部的原因很多,例如不阻塞页面加载(事实上js会被缓存,这个影响极小,容易被人夸大)
    可以直接在js里操作dom,这时候dom是准备好的。(实际上,现在大家js都会考虑这个,放在哪里都一样,ready后再操作dom)
    guchengf
        3
    guchengf  
       2013-05-05 11:55:58 +08:00   ❤️ 1
    调用类的都是放在head部分,而本页面的JS脚本就直接写在body中
    guchengf
        4
    guchengf  
       2013-05-05 11:56:11 +08:00
    我是这样子写的
    DaniloSam
        5
    DaniloSam  
       2013-05-05 13:40:16 +08:00   ❤️ 1
    不管是直接写在页面中,还是引用的外部文件,js都会阻塞页面加载(ff会对js进行异步加载,并判断js的先后顺序),如果是操作DOM的js应该放在页面底部,这样起码可以保证js运行时dom是存在的

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

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

    至于直接写在页面内的脚本,是不建议使用的,原因很明了了
    breeswish
        6
    breeswish  
       2013-05-05 15:53:46 +08:00 via Android   ❤️ 1
    如果可以,请尽量将javascript放在/body前,将styles放在head内。这可以(有时比较显著地)加快速度。如果是RIA那就无所谓了……
    HowardMei
        7
    HowardMei  
       2013-05-05 16:22:47 +08:00   ❤️ 1
    @breeswish 一般效果不会差很多,最明显的加速方法还是合并、多子域。
    davidli
        8
    davidli  
       2013-05-05 16:23:07 +08:00   ❤️ 1
    在不影响JS运行效果的前提下,尽量往后放。
    breeswish
        9
    breeswish  
       2013-05-06 00:03:21 +08:00 via Android   ❤️ 1
    @HowardMei 两个都少不了……一个是传输阻塞一个是渲染阻塞
    HowardMei
        10
    HowardMei  
       2013-05-06 00:09:23 +08:00   ❤️ 1
    @breeswish 传输阻塞我比较清楚,渲染阻塞感觉不明显啊,除非用了非常复杂的逻辑。
    zythum
        11
    zythum  
       2013-05-06 00:22:54 +08:00   ❤️ 1
    放在html文档流最后
    breeswish
        12
    breeswish  
       2013-05-06 01:00:21 +08:00 via Android   ❤️ 1
    @HowardMei 个人感觉还是比较明显的 放在/body前相当于整个js的时间省下来了(或者说内容在这之前即显示出来)
    leohxj
        13
    leohxj  
    OP
       2013-05-06 08:49:17 +08:00
    @zythum 所有的script都放,还是本页相关的js?
    davepkxxx
        14
    davepkxxx  
       2013-05-06 09:11:50 +08:00
    随意
    zythum
        15
    zythum  
       2013-05-06 09:51:04 +08:00
    @leohxj 没用的放那干嘛?
    DaniloSam
        16
    DaniloSam  
       2013-05-06 11:11:11 +08:00 via iPad
    @breeswish

    给跪了
    EchoFUN
        17
    EchoFUN  
       2013-05-06 11:36:39 +08:00
    如果页面html中引用到了的js函数,例如a标签的某个onclick,包含了这个函数的文件需要放在头部,防止js报错,脚本就停止执行了。
    其他的js,可以都放在尾部。
    个人感觉最好的实践,还是只要在尾部放个加载器,其他的js脚本都可以无阻塞加载进来。如果js文件太大且可以做成模块的情况下,建议使用异步加载的方式。
    chemzqm
        18
    chemzqm  
       2013-05-06 22:43:46 +08:00
    Google Analytics的代码放到上面可以可高一点准确度,内容型页面的js代码放到下面可以让用户等到js下载完成就能浏览到应用。
    如果做应用我会把JS都放到上面,其它情况尽量放最下面。
    IfengName
        19
    IfengName  
       2013-05-13 23:31:22 +08:00
    </body>前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5845 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:21 · PVG 14:21 · LAX 23:21 · JFK 02:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.