JS_高程2.在HTML中使用Javascript(2)
1.延迟脚本defer
在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行。<script>中的脚本会延迟到浏览器遇到</html>标签后再执行。
注:
(1)html5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。
在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
(2)html5规定,defer属性只适用于外部脚本文件,因此html会忽略给嵌入脚本设置defer属性。
ie4~ie7还支持对嵌入脚本的defer属性,但是ie8开始则完全支持html5的规范。
(3)有些浏览器会忽略defer属性,像平常一样处理脚本,为此,把延迟脚本放在页面的底部仍然是最佳的选择。
2.异步脚本async
async属性可以不让页面等待脚本的下载和执行,从而异步加载页面的其他内容。为此,建议异步脚本不要在加载期间修改DOM。
注:
async只适用于外部脚本文件,并告诉浏览器立即下载文件。但是defer不同的是,标记问async的脚本并不按照指定它们的先后顺序执行。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。
3.在XHTML(Extensible HyperText Markup Language)中的用法比html严格很多。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
function compare(a,b){
if(a <b){
alert("A is less than B");
}
else if(a > b){
alert("A is greater than B");
}
else{
alert("A is equal to B");
}
}
</script>
</head>
<body>
<button type="button" onclick="compare(3,10)">Try it</button>
</body>
</html>
运行结果:

同样的代码在xhtml中是无效的,结果如下:

因为比较语句a < b中的小于号“<”号在xhtml中将被当做开始一个新标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此导致语法错误。
P15~P17内容后续理解。
JS_高程2.在HTML中使用Javascript(2)的更多相关文章
- JS_高程2.在HTML中使用Javascript(1)
1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...
- JS高程2.在HTML中使用Javascript(1)
1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...
- JS高程2.在HTML中使用Javascript(2)
1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...
- JavaScript高级程序设计-(1)html中使用JavaScript
html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...
- 在HTML中使用JavaScript元素
script属性<script async = async charset="utf-8" defer="defer" src="index.h ...
- 2在HTML中使用JavaScript
像HTML页面中插入JavaScrip的主要方法,就是使用<script>元素.HTML4.01为<script>定义了6个属性:async:可选,表示应该立即下载脚本,当不妨 ...
- javascript高级编程3第二章:在html中使用javascript
2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...
- 在Swift中使用JavaScript的方法和技巧
本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的Swift ...
- js002-在HTML中使用JavaScript
js002-在HTML中使用JavaScript 2.1 <script>元素 定义了以下6个属性 async: 可选.表示应该立即下载脚本,但不妨碍页面中的 ...
随机推荐
- js/jquery如何获取获取父窗口的元素
1.$("#父窗口元素ID",window.parent.document); 对应javascript版本为 window.parent.document.getElementB ...
- 【BZOJ4155】[Ipsc2015]Humble Captains
题解: 第一问裸的最小割 第二问考虑贪心 我们把边权平均分配给两个点 然后就变成了给n个数分两组差最小 np-hard问题 暴力背包,操作存在区间左移,右移,or bieset优化
- 基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...
- lvs-ldirectord
Ldirectord;用来对后端服务器的检测状态后并进行操作 安装在director上 对后端的rs服务器的 健康检查包括几方面: 1通过ping 若可以ping到服务器表示主机活着 2 对端口的检 ...
- echarts入门
一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...
- string通过逗号分割不用split方法
package com.simon; import java.util.ArrayList; import java.util.Iterator; import java.util.List; pub ...
- Bi-shoe and Phi-shoe (欧拉函数)
题目描述: 题目大意:一个竹竿长度为p,它的score值就是比p长度小且与且与p互质的数字总数,比如9有1,2,4,5,7,8这六个数那它的score就是6.给你T组数据,每组n个学生,每个学生都有一 ...
- Manjaro安装配置笔记
简单介绍: Manjaro和Ubuntu的都使用有段时间了,还是AUR大法用着舒服趁着由KDE桌面更换deepin时系统崩溃,直接重装了系统,版本:Manjaro-deepin-17.1.7-x86_ ...
- ES2018正则表达式更新
如果你是一个初学者,这篇文章可以拓展你对正则表达式用法的理解,不过建议你先阅读一些正则表达式入门文章,比如经典的<正则表达式30分钟入门教程>.如果你对正则表达式有一定的认识,那么这篇文章 ...
- C - Visible Trees HDU - 2841 -莫比乌斯函数-容斥
C - Visible Trees HDU - 2841 思路 :被挡住的那些点(x , y)肯定是 x 与 y不互质.能够由其他坐标的倍数表示,所以就转化成了求那些点 x,y互质 也就是在 1 - ...