(转)script标签到底该放在哪里
一般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。
- <script type="text/javascript" src="path/to/script1.js" async></script>
- <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标签到底该放在哪里的更多相关文章
- [译]我们应该在HTML文档中何处放script标签
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- script标签的位置
1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...
- 完整的JavaScript包括三部分、script标签、JavaScript的基本语法以及变量和字面量的关系
完整的JavaScript包括三大部分: -ECMAScript JavaScript的开发规范:提供核心语言功能 -DOM document object model 文档对象模型:提供 ...
- 应该把script标签放在哪里
应该把script标签放在哪里 目录: 1script标签放在底部的好处 2应该放在底部的哪里 概述: 如果在页面中写JS的话,那必然会用到script标签,理论上script标签放在哪里都是可以 ...
- 在html代码中js的script标签建议放在那里？
今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...
- [转]HTML5 script 标签的 crossorigin 属性到底有什么用？
HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...
- html中script标签使用async属性和defer属性的区别
相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- script标签里的defer属性
入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...
随机推荐
- View的呈现（二）加载流程
这块涉及到Code+Razor模板=>html[output流] 而这块的问题在于Razor最后生成了什么?--对象:一个类文件:eg:index.cshtml => index_cst ...
- CSS3背景 制作导航菜单综合练习题
CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...
- linux系统管理-软件包管理
概述: inux家族中的软件包管理有很多工具. 一种是在debiton系列的linux中,以像ubuntu的apt-get为代表.对于此种方式的管理方式,个人感觉挺简单方便的, 一种是在Fedora和 ...
- ZBrush中标准笔刷介绍
ZBrush最实用.精彩的部分便是雕刻了,笔刷又有时雕刻时必不可少的工具,ZBrush中给我们提供了很多种笔刷,那么,最基础.最常用的笔刷是什么呢,本文内容向大家介绍ZBrush®中标准笔刷以便大家熟 ...
- 《图解HTTP》摘要
网络基础TCP/IP 使用Cookie进行状态管理 HTTP首部 确保Web安全的HTTPS 1.网络基础TCP/IP 2.使用Cookie进行状态管理:HTTP是无状态协议. 3.HTTP首部 HT ...
- Python内置数据结构之字典dict
1. 字典 字典是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.键可能是数(整数索引).字符串或元组.字典(日常生活中的字典和Python字典)旨在让你能够轻松地找到特定的单 ...
- CSS Grid(CSS网格)
Grid被设计来做一些Flexbox不能做的事情,所以不是被设计来取代Flexbox的. flexbox 一维的 Grid 二维的 总结: Grid Items作用在Grid Container的直 ...
- 小程序--wepy省市区三级联动选择
产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........ 不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建 ...
- 异常值（outlier）
简介 在数据挖掘的过程中,我们可能会经常遇到一些偏离于预测趋势之外的数据,通常我们称之为异常值. 通常将这样的一些数据的出现归为误差.有很多情况会出现误差,具体的情况需要就对待: 传感器故障 -> ...
- 2019-03-15 使用Request POST获取中加基金的PDF文件，并下载到本地
import requests import time base_url='http://www.bobbns.com/common-web/cms/content!getContentsInclud ...