你有所不知的<script>元素
向html页面中插入javascript的主要方法，就是使用<script>元素。
<script>定义了下列6个属性：
- async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
- charset：可选。表示通过src属性指定代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少人使用。
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
- language：已废弃。原来用于表示编写代码使用的脚本语言。大多数浏览器会忽略这个属性，因此也就没有必要再用了。
- src：可选。表示包含要执行的代码的外部文件。
- type：可选。可以看成事language的替代属性；表示编写代码使用的脚本语言的内容类型。虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。实际上，服务器在传送javascript文件时使用的MIME类型通常都是application/x-javascript，但在type中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/javascript和application/ecmascript。考虑到约定成俗和最大限度的浏览器兼容性，目前type属性的值依旧是text/javascript。不过，这个属性并不是必须的，如果没有指定这个属性，则其默认值仍为text/javascript。
在使用<script>嵌入javascript代码时，记住不要再代码中的任何地方出现"</script>"字符串。例如：在浏览器中加载下面所示的代码时就会产生一个错误：
<script type="text/javascript">
function Hi() {
alert("</script>");
}
</script>
因为按照解析嵌入代码的规则，当浏览器遇到字符串“</script>”时，就会认为那是结束的</script>标签。而通过转义字符“\”解决这个问题。
<script type="text/javascript">
function Hi() {
alert("<\/script>");
}
</script>
这样写的代码浏览器可以接受，因而也就不会导致错误了。
注意：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的javascript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本，嵌入的代码会被忽略。
延迟脚本：defer
defer属性，用于表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后在运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" defer="defer" src="a.js"></script>
<script type="text/javascript" defer="defer" src="b.js"></script>
</head>
<body>
<!--内容-->
</body>
</html>
在这个例子中，虽然我们吧<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行，html5规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。
前面提到过，defer属性只适用于外部脚本文件。这点在html5中已经明确规定，因此支持html5的实现会忽略给嵌入脚本设置defer属性。延迟脚本最好还是放在页面底部。
异步脚本 ：async
html5为<script>元素定义了async属性。这个属性和defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定他们的先后顺序执行，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" defer="defer" src="a.js"></script>
<script type="text/javascript" defer="defer" src="b.js"></script>
</head>
<body>
<!--内容-->
</body>
</html>
在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面的其他内容。为此，建议异步脚本不要在加载期间修改dom。
异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox3.6,Safari5和Chrome。
个人博客:https://www.zengfanping.com/
你有所不知的<script>元素的更多相关文章
- 【HTML5 】<script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- HTML5 <script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- 《JavaScript高级程序设计》笔记（1）：<script>元素
使用<script>元素内部的JavaScript代码将从上至下依此解释.在使用<script>嵌入的JavasCript代码时,代码任何地方不能出现"</sc ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- 第二章 script元素
<script>元素 async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 ...
- 2.1 <script>元素【JavaScript高级程序设计第三版】
向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...
- 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- <script>元素
简介 向HTML页面中插入JavaScript的主要方法,就是使用'<'script'>'元素. 标签的位置 现代Web应用程序一般都把全部的JavaScript饮用放在'<'bod ...
- <script>元素的位置
脚本元素会组织下载网页内容,浏览器可以同时下载多个组件,但一旦遇到一个外部脚本文本后,浏览器会停止进一步下载,知道这个脚本文件下载,解析并执行完毕.这会严重影响网页载入的总时间,特别是在网页在入时会发 ...
随机推荐
- Confluence 6 MySQL 创建数据库和数据库用户
一旦你成功的安装和配置了 MySQL 数据库服务器,你需要为你的 Confluence 创建数据库和数据库用户: 在 MySQL 中以超级用户运行 'mysql' .默认的用户为 'root' 同时密 ...
- 第八单元 正文处理命令及tar命令
使用cat命令进行文件的纵向合并 两种文件的纵向合并方法 归档文件和归档技术 归档的目的 什么是归档 tar命令的功能 tar命令的常用选项 使用tar命令创建.查看及抽取归档文件 使用tar命令 ...
- 用gojs写的流程图demo
领导要求,可以展开收缩子级,但是子级可以有多个父级,一开始用的dagre-d3.js,但是功能不是太全,无意中看到gojs,感觉还不错,所以拿来改了改... 代码地址:https://github.c ...
- Python基础之面向对象进阶一
一.isinstance(obj,cls)和issubclass(sub,super) 1.isinstance(obj,cls)检查obj是否是类 cls 的对象 class A: pass obj ...
- java/springboot自定义注解实现AOP
java注解 即是注释了,百度解释:也叫元数据.一种代码级别的说明. 个人理解:就是内容可以被代码理解的注释,一般是一个类. 元数据 也叫元注解,是放在被定义的一个注解类的前面 ,是对注解一种限制. ...
- gerrit原理
个人理解: 这个就是审核代码是否合理性的工具,一般是资深研发人工确认代码是否存在缺陷,通过发送邮件通知变化. 也可理解为这个是个git服务器,多一个代码审查的功能. 但是它是个web界面,方便管理 ...
- Android 中的缓存
AsimpleCache 1.它可以缓存什么东西? 普通的字符串. json. 序列化的java对象 字节数字. 2.主要特色 1:轻,轻到只有一个JAVA文件. 2:可配置,可以配置缓存路径,缓存 ...
- SQL Server索引的执行计划
如何知道索引有问题,最直接的方法就是查看执行计划.通过执行计划,可以回答表上的索引是否被使用的问题. (1)包含索引:避免书签查找 常见的索引方面的性能问题就是书签查找,书签查找分为RID查找和键值查 ...
- MyBatis - 8.MyBatis工作原理
Mybatis 配置 1.SQLSessionFactory的初始化 根据配置文件获取 SqlSessionFactory 2.openSession获取SqlSession对象 3.getMappe ...
- ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案
微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...