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:可选.表示立即下载脚本,不影响页面中 ...
- 第2章 两种调用JS的方法——在HTML中使用JavaScript
一. <script>标记 第一种方法是把 <sript></script>直接放到head和script两个标记之间(title下面,</head>上 ...
- JS_高程2.在HTML中使用Javascript(2)
1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...
- 吃透Javascript数组操作的正确姿势—再读《Js高程》
Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...
- jQuery-vsdoc.js文件是vs中的JavaScript intellisense,
在VS 2008中启用jQuery Intellisense的步骤 要在VS中启用jQuery的intellisense完成,你要遵循三个步骤: 第一步: 安装VS 2008 SP1 VS 2008 ...
- 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件
本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...
- javascript基础之javascript的存在形式和js代码块在页面中的存放位置
1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...
- js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比
1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...
随机推荐
- Construction of Primitives in Open Cascade
Construction of Primitives in Open Cascade eryar@163.com 一.创建基本图元 Making Primitives 将用到如下的类创建基本图元,包括 ...
- Express框架使用以及数据库公共操作类整理(Win7下的NodeJs)
具体步骤: 1.安装开发工具WebStorm: 2.安装node/npm(下载地址:https://nodejs.org/download/)选择适合你的xxx.mis安装: 3.安装express框 ...
- mybatis generator配置生成代码的问题
接触第二种orm两天下来,一脸懵逼.mybatis是大多数公司所推崇的,相比于hibernate性能较为好的,操作更为方便的轻量级工具,所以小富就搞起这个orm.好吧,都说mybatis有个配置可以自 ...
- Advice for students of machine learning--转
原文地址:http://www.mimno.org/articles/ml-learn/ written by david mimno One of my students recently aske ...
- jQuery 简介和安装
什么是jQuery jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HT ...
- PLT:说说Evaluation strategy
Brief 在学习方法/函数时,我们总会接触到 按值传值 和 引用传值 两个概念.像C#是按值传值,但参数列表添加了ref/out后则是引用传值,但奇怪的事出现了 namespace Foo{ cla ...
- MVC中Action的执行过程
接着上一篇:MVC控制器的激活过程 一.代码现行,该伪代码大致解析了Action的执行的过程 try { Run each IAuthorizationFilter's OnAuthorization ...
- 使用MVVM-Sidekick开发Universal App(二)
上一篇文章已经建立了基本的实体类,并且搞定了多语言的问题,以后在app里用字符串的时候就可以从资源文件中取了.现在继续进行. 一.添加一个页面 CurrencyExchanger首页是一个货币兑换的列 ...
- PHP 判断是否为 AJAX 请求
先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以 ...
- linux 新建文件的命令
图形界面下就不用说了,终端下键入: touch test.java 就创建了一个新文件 test.java http://hovertree.com/menu/linux/ http://www.cn ...