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

  1. Javascript高级编程学习笔记(3)—— JS中的数据类型(1)

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  2. Javascript高级编程学习笔记(43)—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  3. Javascript高级编程学习笔记(48)—— HTML5

    HTML变动最大的版本应该就是HTML5了,这里就介绍一些 HTML5新增的DOM相关的API 与类相关的扩充 HTML4在普及后有一个十分重要的变化,即class属性使用的场景越来越多 所以HTML ...

  4. Javascript高级编程学习笔记(98)—— WebGL(4) WebGL上下文(2)

    错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以 ...

  5. Javascript高级编程学习笔记(61)—— 事件(5)UI事件

    UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...

  6. Javascript高级编程学习笔记(6)—— 流程控制语句

    话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指 ...

  7. JavaScript高级编程学习笔记(第三章之一)

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  8. Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  9. Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图

    类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...

随机推荐

  1. 深度学习原理与框架-猫狗图像识别-卷积神经网络(代码) 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表示变 ...

  2. 阿里云服务器 CentOS 安装Mysql 5.6

    下载:https://dev.mysql.com/downloads/file/?id=471181   第一步: 安装mysql5姿势是要先安装带有可用的mysql5系列社区版资源的rpm包 [ro ...

  3. 一个linux bbr存在的调用顺序bug

    最近跟踪bbr的状态转换的代码,发现一个问题: [,min_rtt_us=,full_bw=,cycle_idx=,pacing_gain=,cwnd_gain=,rtt_cnt= [,min_rtt ...

  4. python的相对导入

    最近断断续续学习flask,学到蓝本时候有点小问题卡住了,问题如下 导入包的时候py文件里使用了相对路径导入,但是这种导入方法不是很明白,就自己搜索加实验了终于有点眉目了 先定义一个包 adb包 这个 ...

  5. 动画优化、客户端存储、历史记录、worker

    一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAn ...

  6. 4、python常用基础类型介绍

    1.字符串 str 描述性质的一种表示状态的例如名字 word='helloworld' print(type(word),word) <class 'str'> helloworld2. ...

  7. 使用Global.asax的Application_BeginRequest事件过滤客户端XSS恶意脚本提交

    XSS攻击全称跨站脚本攻击(Cross Site Scripting),是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码(如HTML代码和客户端脚本)植入到提供给其它用户使用的页面中. ...

  8. 封装的mybatis连接类

    package com.kevin.utils;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSe ...

  9. SpriteKit 关于categoryBitMask collisionBitMask contactTestBitMask 遇到的一些问题

    手写copy一下官方解释 首先是categoryBitMask /** 定义了这个物理刚体是属于哪个类别的掩码 .在一个场景中的每个物理刚体可以分配给达到 32 不同的类别(参数 int bitmas ...

  10. FortiGate数据流分析 debug flow

    1.工具说明 在防火墙部署中,经常会遇到防火墙接收到了数据包,但并未进行转发.可以通过diagnose debug flow 命令来对数据包的处理过程进行跟踪,可以清晰查看数据包再各个功能模块内的处理 ...