一般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. POJ 3020 Hungary

    一道建图题-- // by SiriusRen #include <cstdio> #include <cstring> using namespace std; #defin ...

  2. POJ 2137 DP

    思路: 枚举第一个点集中起点是哪个. 因为第i个点集总和第i-1个点集和第i+1个点集相连. 我们就可以DP求出最优解了. f[i][j]=min(f[i][j],f[i-1][k]+dis(i,j, ...

  3. SVN——Jenkins自动发布

    最近公司项目处于开发阶段,很多功能开发完后就需要发布到测试环境等待测试去验收,这个时候如果手动更新网站的话,是很费时费力的. 于是乎,我们做成了自动发布,这样我们只管提交代码到SVN就行了,发布由软件 ...

  4. 关于requestAnimationFrame()和cancelAnimationFrame()与定时器之间的比较

    在渲染页面动画的时候,其实也没有必要用定时器(setInterval),其实requestAnimationFrame()和cancelAnimationFrame()也能达到相应的效果,他是HTML ...

  5. <Android Framework 之路>Android5.1 Camera Framework（四）——框架总结

    前言 从之前的几篇文件,可以基本弄清楚 Camera从APK,经过framework的衔接,与HAL层进行交互,最终通过驱动完成Camera的一些动作. Camera层次分析 APP层 Framewo ...

  6. here.less

    <html><head><title>Test Less</title><link rel="stylesheet/less" ...

  7. 多年js学习累计总结

    http://www.codesec.net/list/6/ 大神http://www.cnblogs.com/tylerdonet/p/5543813.html

  8. CorelDRAW 2017通过智能笔触调整自然地绘制草图

    LiveSketch 工具是CorelDRAW 2017版本中的新增功能,LiveSketch 工具适合快速草图和绘图,可以帮助您加快工作流并使您能够专注于创建流程.该工具并不预填充节点和图柄,而且无 ...

  9. Java从入门到精通一步到位！

    Java作为近几年来非常火的编程语言,转行来做Java的人不计其数,但如今真正的人才仍然匮乏,所以学习Java一定要有一个系统的学习规划课程.阿里云大学帮您规划Java学习路线可以帮助您从一个小白成长 ...

  10. struts 中数据处理的3中方式

    方式一: 获取servletapi中的对象 方式二: struts中封装的对象 方式三: 实现接口 方式一和方式二的区别 方式一需要额外引入包或者是方式二实现不了的功能,比如:获取url 因为方式二只 ...