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)的更多相关文章

  1. JS高程2.在HTML中使用Javascript(1)

    1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...

  2. JS_高程2.在HTML中使用Javascript(1)

    1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...

  3. 第2章 两种调用JS的方法——在HTML中使用JavaScript

    一. <script>标记 第一种方法是把 <sript></script>直接放到head和script两个标记之间(title下面,</head>上 ...

  4. JS_高程2.在HTML中使用Javascript(2)

    1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...

  5. 吃透Javascript数组操作的正确姿势—再读《Js高程》

    Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...

  6. jQuery-vsdoc.js文件是vs中的JavaScript intellisense,

    在VS 2008中启用jQuery Intellisense的步骤 要在VS中启用jQuery的intellisense完成,你要遵循三个步骤: 第一步: 安装VS 2008 SP1 VS 2008 ...

  7. 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

    本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...

  8. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

随机推荐

  1. Construction of Primitives in Open Cascade

    Construction of Primitives in Open Cascade eryar@163.com 一.创建基本图元 Making Primitives 将用到如下的类创建基本图元,包括 ...

  2. Express框架使用以及数据库公共操作类整理(Win7下的NodeJs)

    具体步骤: 1.安装开发工具WebStorm: 2.安装node/npm(下载地址:https://nodejs.org/download/)选择适合你的xxx.mis安装: 3.安装express框 ...

  3. mybatis generator配置生成代码的问题

    接触第二种orm两天下来,一脸懵逼.mybatis是大多数公司所推崇的,相比于hibernate性能较为好的,操作更为方便的轻量级工具,所以小富就搞起这个orm.好吧,都说mybatis有个配置可以自 ...

  4. Advice for students of machine learning--转

    原文地址:http://www.mimno.org/articles/ml-learn/ written by david mimno One of my students recently aske ...

  5. jQuery 简介和安装

    什么是jQuery jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HT ...

  6. PLT:说说Evaluation strategy

    Brief 在学习方法/函数时,我们总会接触到 按值传值 和 引用传值 两个概念.像C#是按值传值,但参数列表添加了ref/out后则是引用传值,但奇怪的事出现了 namespace Foo{ cla ...

  7. MVC中Action的执行过程

    接着上一篇:MVC控制器的激活过程 一.代码现行,该伪代码大致解析了Action的执行的过程 try { Run each IAuthorizationFilter's OnAuthorization ...

  8. 使用MVVM-Sidekick开发Universal App(二)

    上一篇文章已经建立了基本的实体类,并且搞定了多语言的问题,以后在app里用字符串的时候就可以从资源文件中取了.现在继续进行. 一.添加一个页面 CurrencyExchanger首页是一个货币兑换的列 ...

  9. PHP 判断是否为 AJAX 请求

    先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以 ...

  10. linux 新建文件的命令

    图形界面下就不用说了,终端下键入: touch test.java 就创建了一个新文件 test.java http://hovertree.com/menu/linux/ http://www.cn ...