Javascript高级编程学习笔记(2)—— Script标签
script标签
js在浏览器中的使用,肯定会涉及到script标签。
那么script标签有哪些属性呢?
1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分)
2.charset:设置js的字符集编码
3.defer:延迟脚本(当浏览器解析到/html 结束标签时才执行,该属性对嵌入脚本无效)
4.language:代码所使用的脚本语言(已废弃)
5.src:要执行的外部代码文件
6.type:与language类似可以看作是language的替代属性
在上面的这些属性中src就不用过多的说明了,除了src使用较多,并且应用范围较广的就是async和defer了
下面将主要分析一下这两个属性
首先是defer
根据说明,设置了该属性的script外部文件会在解析到</html>标签的时候才开始执行,并且会在DOMcontentonload 之前触发
而且根据html5的要求这些延迟脚本会按照在文档中的顺序执行
DOM文档加载步骤:
(1)解析html结构
(2)加载外部脚本和样式表文件
(3)解析并执行脚本代码
(4)构造HTML DOM模型 //DOMContentLoaded执行点
(5)加载图片等外部文件
(6)页面加载完毕 //load
我们来测试一下
首先新建一个简单的html页面
<!DOCTYPE html>
<html lang="zh">
<head>
<title>title</title>
<meta charset="utf-8"/>
<meta name="Description" content=""/>
<meta name="Author" content="巽秋"/>
<style type="text/css"></style>
<script src="./1.js"></script>
<script src="./2.js"></script>
</head>
<body> <script>
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false);
console.log("这里是嵌入脚本");
</script>
</body>
</html>
引入的外部js文件代码如下:
console.log("这里是外部脚本1");//1.js 中的内容
console.log("这里是外部脚本2");//2.js 中的内容
我们打开该页面结果如下:
我们可以看到DOMContentLoaded是在js代码执行完后执行的
现在我们再给外部引入的两个js文件加上defer属性
再次运行查看结果
我们可以看到嵌入脚本比1.js和2.js先执行了并且在domcontentloaded事件触发之前就执行完毕了
和我们预先预测的结果一致。
接下来我们再看一下,这两个外部文件的执行顺序是否真的和在页面中出现的顺序一致
我们交换一下两个script标签的引入的位置
再看一下结果
说明defer的延迟脚本的加载顺序和该脚本在页面中出现的顺序是一致的
说明的确是这样的
不过书中说实际上有可能不一定是这样的,所以我又换了几个浏览器试试
刚才的是chrome浏览器的结果
这是火狐浏览器的结果
这是ie11
ie10
虽然在低版本ie中addEventlistenter有兼容问题但是我们可以看到defer脚本的加载顺序并没有什么改变
所以我也不知道在什么情况下延迟脚本会不遵守这个规则
然后是async
书中给出的描述是有该属性的脚本,立即加载并执行,页面的其他部分异步加载
并且async属性的标签一定会在window.onload之前执行,可能会在domcontentloaded之后执行
该属性的脚本不会按顺序到来,所以在使用时需要确保该属性的脚本之间没有依赖关系
首先给之前引入的两个标签的defer改为async属性
然后加上window.onload事件
再来看一下结果
<!DOCTYPE html>
<html lang="zh">
<head>
<title>title</title>
<meta charset="utf-8"/>
<meta name="Description" content=""/>
<meta name="Author" content="巽秋"/>
<style type="text/css"></style>
<script src="./2.js" async></script>
<script src="./1.js"async></script>
</head>
<body> <script>
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false);
window.onload = function(){
console.log("window.onload执行");
};
console.log("这里是嵌入脚本");
</script>
</body>
</html>
结果如下
这里由于页面异步加载所以
嵌入脚本先执行了
异步脚本在domcontentloaded之后执行的
我为了测试不按顺序到来
我给两个js的consle之前加了循环
来控制加载的时间
看看异步脚本是谁先加载完就先执行吗?
我在2.js的后面粘贴了jq1.12.4的代码
让2.js比1.js文件要大 但是console都是第一句代码
2.js还会先console吗?
我们再来看看结果
结果很显然
async 属性的脚本应该是谁先加载完谁就先执行,并且不管怎样一定会在window.onload事件之前执行
noscript标签
当浏览器没有js环境,或者js被关闭的时候我们往往需要给用户一些提示之类的
那么这就是noscript标签的作用
我们再建一个新的html页面
<!DOCTYPE html>
<html lang="zh">
<head>
<title>title</title>
<meta charset="utf-8"/>
<meta name="Description" content=""/>
<meta name="Author" content="巽秋"/>
<style type="text/css"></style>
</head>
<body> <noscript>您的浏览器未开启js</noscript>
<script>
console.log("js");
</script>
</body>
</html>
我们打开这个页面
我们可以看到在js开启的情况下noscript标签中的内容是不会显示的
我接下来关闭js
然后刷新页面
今天就记录一下script标签吧
写完,收工。
Javascript高级编程学习笔记(2)—— Script标签的更多相关文章
- Javascript高级编程学习笔记(3)—— JS中的数据类型(1)
前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- Javascript高级编程学习笔记(48)—— HTML5
HTML变动最大的版本应该就是HTML5了,这里就介绍一些 HTML5新增的DOM相关的API 与类相关的扩充 HTML4在普及后有一个十分重要的变化,即class属性使用的场景越来越多 所以HTML ...
- Javascript高级编程学习笔记(98)—— WebGL(4) WebGL上下文(2)
错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用 gl.getError() 方法 该方法会返回以 ...
- Javascript高级编程学习笔记(61)—— 事件(5)UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- Javascript高级编程学习笔记(6)—— 流程控制语句
话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指 ...
- JavaScript高级编程学习笔记(第三章之一)
继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...
- Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)
WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...
- Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图
类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...
随机推荐
- 深度学习原理与框架-猫狗图像识别-卷积神经网络(代码) 1.cv2.resize(图片压缩) 2..get_shape()[1:4].num_elements(获得最后三维度之和) 3.saver.save(训练参数的保存) 4.tf.train.import_meta_graph(加载模型结构) 5.saver.restore(训练参数载入)
1.cv2.resize(image, (image_size, image_size), 0, 0, cv2.INTER_LINEAR) 参数说明:image表示输入图片,image_size表示变 ...
- 阿里云服务器 CentOS 安装Mysql 5.6
下载:https://dev.mysql.com/downloads/file/?id=471181 第一步: 安装mysql5姿势是要先安装带有可用的mysql5系列社区版资源的rpm包 [ro ...
- 一个linux bbr存在的调用顺序bug
最近跟踪bbr的状态转换的代码,发现一个问题: [,min_rtt_us=,full_bw=,cycle_idx=,pacing_gain=,cwnd_gain=,rtt_cnt= [,min_rtt ...
- python的相对导入
最近断断续续学习flask,学到蓝本时候有点小问题卡住了,问题如下 导入包的时候py文件里使用了相对路径导入,但是这种导入方法不是很明白,就自己搜索加实验了终于有点眉目了 先定义一个包 adb包 这个 ...
- 动画优化、客户端存储、历史记录、worker
一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAn ...
- 4、python常用基础类型介绍
1.字符串 str 描述性质的一种表示状态的例如名字 word='helloworld' print(type(word),word) <class 'str'> helloworld2. ...
- 使用Global.asax的Application_BeginRequest事件过滤客户端XSS恶意脚本提交
XSS攻击全称跨站脚本攻击(Cross Site Scripting),是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码(如HTML代码和客户端脚本)植入到提供给其它用户使用的页面中. ...
- 封装的mybatis连接类
package com.kevin.utils;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSe ...
- SpriteKit 关于categoryBitMask collisionBitMask contactTestBitMask 遇到的一些问题
手写copy一下官方解释 首先是categoryBitMask /** 定义了这个物理刚体是属于哪个类别的掩码 .在一个场景中的每个物理刚体可以分配给达到 32 不同的类别(参数 int bitmas ...
- FortiGate数据流分析 debug flow
1.工具说明 在防火墙部署中,经常会遇到防火墙接收到了数据包,但并未进行转发.可以通过diagnose debug flow 命令来对数据包的处理过程进行跟踪,可以清晰查看数据包再各个功能模块内的处理 ...