一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里[4-5]。

将script放在<head>里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS，且浏览器下载JS时，就block掉解析其他HTML的工作[1]。将script放在头部，会让网页内容呈现滞后，导致用户感觉到卡。所以yahoo建议将script放在尾部，这样能加速网页加载。

将script放在尾部的缺点，是浏览器只能先解析完整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析页面，一边下载JS。

所以[2]提出了一种更modern的方式：使用async和defer。80%的现代浏览器都认识async和defer属性[3]，这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS)，一边解析HTML。他的优点不是增加JS的并发下载数量，而是做到下载时不block解析HTML。
  1. <script type="text/javascript" src="path/to/script1.js" async></script>
  2. <script type="text/javascript" src="path/to/script2.js" async></script>
带async属性的script会异步执行，只要下载完就执行，这会导致script2.js可能先于script1.js执行（如果script2.js比较大，下载慢）。defer就能保证script有序执行，script1.js先执行，script2.js后执行。
结论
1. [2]认为，如果可以不考虑支持<IE9的IE，最好的做法是将script标签放在head中，并使用async/defer属性。这样浏览器就能一边下载JS，一边解析其他的HTML。
2. Google自己的代码script放的也有点乱，有的放在</body>后面[6]，有的放在<body>里面[7]，还有的放在<head>里面[8]。总体来说，放在<body>里其实是最常见的做法。
3. 本文只讨论script的位置，至于link和style，还是放在head里的做法比较常见。link也是要下载CSS的啊，为毛不考虑下载CSS阻塞HTML解析的问题呢？其实，一般情况下，JS和CSS，放在head和放在body区别不大。CSS的link放在body也是可以的，只是可能导致页面暂时没有样式[9-10]。
参考
[1] https://developer.yahoo.com/performance/rules.html#js_bottom=
[2] http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup
[3] http://caniuse.com/#search=defer
[4] https://github.com/IgorMinar/foodme/blob/master/app/index.html
[5] https://github.com/GoogleChrome/wReader-app/blob/master/index.html
[6] https://github.com/GoogleChrome/multi-device/blob/master/_preview.html
[7] https://github.com/GoogleChrome/samples/blob/b2668086c25470e107e59f4ffa92dc0c21c63de3/beacon/index.html
[8] https://github.com/GoogleChrome/web-audio-samples/blob/gh-pages/samples/audio/adaptive-release.html
[9] http://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag
[10] http://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body

(转)script标签到底该放在哪里的更多相关文章

  1. [译]我们应该在HTML文档中何处放script标签

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  2. script标签的位置

    1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...

  3. 完整的JavaScript包括三部分、script标签、JavaScript的基本语法以及变量和字面量的关系

    完整的JavaScript包括三大部分: -ECMAScript   JavaScript的开发规范:提供核心语言功能 -DOM   document object model   文档对象模型:提供 ...

  4. 应该把script标签放在哪里

    应该把script标签放在哪里 目录: 1script标签放在底部的好处 2应该放在底部的哪里   概述: 如果在页面中写JS的话,那必然会用到script标签,理论上script标签放在哪里都是可以 ...

  5. 在html代码中js的script标签建议放在那里？

    今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...

  6. [转]HTML5 script 标签的 crossorigin 属性到底有什么用？

    HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...

  7. html中script标签使用async属性和defer属性的区别

    相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...

  8. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  9. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

随机推荐

  1. Flask上下文管理机制

    前引 在了解flask上下文管理机制之前,先来一波必知必会的知识点. 面向对象双下方法 首先,先来聊一聊面向对象中的一些特殊的双下划线方法,比如__call__.__getattr__系列.__get ...

  2. Spring《六》管理Bean

    BeanWrapper BeanFactory ApplicationContext 1.通常情况下使用BeanFactory.ApplicationContext 2.ApplicationCont ...

  3. web.config配置文件使用总结

    我们在开发web系统的时候,使用web.config进行配置是司空见惯的,那么web.confg到底是什么呢?什么时候使用web.config呢?有几种使用web.config方式呢? 如果不太明白的 ...

  4. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  5. firstChild与firstElementChild

    相同点: 都是获取父元素下的第一个节点对象 不同点: firstChild: IE6.7.8 第一个元素节点; 非IE6.7.8:返回第一个元素节点或文本节点 firstElementChild: I ...

  6. 「JavaSE 重新出发」05.03 反射

    能够分析类能力的程序称为反射(reflection). 反射库(reflection library)提供了一个非常丰富且精心设计的工具集,以便编写能够动态操纵 Java 代码的程序. 反射机制可以用 ...

  7. 原生js简易日历效果实现

    这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...

  8. 『转』How to Think About Your Career

    开始工作的伊始,逐渐转载及阅读Medium上知名华裔设计师Julie Zhuo的文章,这是她在medium上的介绍:Product design VP @ Facebook. Lover of foo ...

  9. Appstore排名前十的程序员应用软件

    程序员又名程序猿,苦逼劳累的代名词,曾经一个朋友这么开玩笑说,如果你是富二代,你当程序员就是脑残,如果你是穷二代,当程序员的话,死的时候一定是趴键盘. 程序员 哦,可怜的程序员.在那山的这边海的那边有 ...

  10. win7系统桌面上图标都变成lnk后缀

    1.右键点击空白处,选择“新建”,点击“文本文档”: 2.将文档命名为“1”,后缀名改为inf: 3.双击打开,复制以下内容: [Version] Signature="$Chicago$& ...