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. JS高程2.在HTML中使用Javascript(2)

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

  4. JavaScript高级程序设计-(1)html中使用JavaScript

    html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...

  5. 在HTML中使用JavaScript元素

    script属性<script async = async charset="utf-8" defer="defer" src="index.h ...

  6. 2在HTML中使用JavaScript

    像HTML页面中插入JavaScrip的主要方法,就是使用<script>元素.HTML4.01为<script>定义了6个属性:async:可选,表示应该立即下载脚本,当不妨 ...

  7. javascript高级编程3第二章:在html中使用javascript

    2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...

  8. 在Swift中使用JavaScript的方法和技巧

    本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的Swift ...

  9. js002-在HTML中使用JavaScript

    js002-在HTML中使用JavaScript 2.1            <script>元素   定义了以下6个属性   async: 可选.表示应该立即下载脚本,但不妨碍页面中的 ...

随机推荐

  1. Linux 的文件类型

    Linux 的文件通常分为 7 大类 文件类型                                  缩写      英文名称                                ...

  2. 安装CentOS 7(转)

    转载地址:https://www.cnblogs.com/wcwen1990/p/7630545.html CentOS7安装详解   本文基于vmware workstations进行CentOS7 ...

  3. [转]简单三步,用 Python 发邮件

    https://zhuanlan.zhihu.com/p/24180606 0. 前言 发送电子邮件是个很常见的开发需求.比如你写了个监控天气的脚本,发现第二天要下雨,或者网站上关注的某个商品降价了, ...

  4. python全栈开发day72-django之Form组件

    一.ajax 1. 复习JSON 1. JSON是什么? 一种数据格式,和语言无关的数据格式. 2. Python里面转换 1. Python对象 --> 字符串 import json 字符串 ...

  5. 51Nod1317 相似字符串对 容斥原理 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1317.html 题目传送门 - 51Nod1317 题意 称一对字符串(A,B)是相似的,当且仅当满 ...

  6. JavaSE| 数组

    1.数组(array) 数组就是多个相同类型数据的组合,实现对这些数据的统一管理. 数组中的元素可以是任何数据类型,包括基本数据类型和引用数据类型.数组属引用类型,数组型数据是对象(object),每 ...

  7. oracle数据库删除数据恢复

    select * from table_name as of timestamp trunc(sysdate)-10; 数字部分可以调整到最近时间内 复制表内容 insert into res_pro ...

  8. Kmeans:利用Kmeans实现对多个点进行自动分类—Jason niu

    import numpy as np def kmeans(X, k, maxIt): numPoints, numDim = X.shape dataSet = np.zeros((numPoint ...

  9. POJ 3237 Tree 【树链剖分】+【线段树】

    <题目链接> 题目大意: 给定一棵树,该树带有边权,现在对该树进行三种操作: 一:改变指定编号边的边权: 二:对树上指定路径的边权全部取反: 三:查询树上指定路径的最大边权值. 解题分析: ...

  10. 从输入 URL 到页面加载完成的过程详解---【XUEBIG】

    从输入 URL 到页面加载完成的过程中都发生了什么事情? 这是一道经典的面试题,涉及面非常广,要答出来并不困难,当要将问题回答好却不是那么容易 过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 ...