HTML中的JavaScript

script元素

由网景公司创造，有如下八个属性：

async：可选，表示应该立即下载脚本，但不能阻止其他页面动作，只对外部文件有效。。
defer：可选，表示脚本可以延迟到HTML被完全解析后在执行，只对外部文件有效。立即下载，延迟执行。
关于以上两个属性，有一篇文章讲得很好：浅谈script标签的defer和async

执行顺序：3 - 6 - html渲染 - 7 - 4444 - 5 - 8 - 1 - 2

charset：可选，规定外部脚本文件使用的字符编码，默认为：ISO-8859-1。【很少用】
crossorigin：可选，配置相关请求的CORS设置。
integrity：可选，允许比对接受到的资源和指定的加密签名以验证子资源完整性。此属性用于确保内容分发网络（CDN）不会提供恶意内容。
src：可选，引入脚本路径。
type：可选，代替language，表示代码中脚本语言的内容类型（MIME类型）。默认值：“text/javascript”：。如果这个值是module，则会被当成ES6模块。
language已废弃，最初用于表示代码块中的脚本语言。

以上标签引出了很多web安全策略解决方案：
integrity可做SRI（防止CND恶意攻击），参考链接：【MDN-SRI】
crossorigin可设置不发送客户凭证，参考链接【CORS】

其他引入方式：

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

执行这段代码的时候不会发送请求，相当于添加了async。但此处有兼容性问题，建议写成：

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

由于此种方式获取的资源对浏览器预加载器
不可见，所以会严重影响性能，解决方案为让预加载器知道这些动态请求文件存在，提前声明：

<link rel="preload" href="gibberish.js">

行内代码与外部文件

使用外部文件的理由：

可维护性强
缓存（暂时不做深究，看到缓存后再来补充）
适应未来：假如某一天流行了XXXJS，只需修改引入的type即可
SPDY/HTTP2？不明白，挂起

文档模式

混杂模式（quirks mode）与标准模式（standards mode）
前者让 IE 像 IE5 一样（支持一些非标准的特性），
后者让 IE 具有兼容标准的行为。虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对
JavaScript 也有一些关联影响，或称为副作用。
随着发展，又出现了第三种模式准标准模式（almost standards mode）。

混杂模式

混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。这种约定并不合理，因为
混杂模式在不同浏览器中的差异非常大，不使用黑科技基本上就没有浏览器一致性可言。

标准模式

声明：

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!-- HTML5 -->
<!DOCTYPE html>

准标准模式

这种模式下的浏览器支持很多标准的特性，但是没
有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。准标准模式与标准模式非常接近，很少需要区分。
声明：

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

noscript元素

一个优雅降级的处理方案。noscript元素可以包含任何可以出现在body中的HTML元素，script除外。以下情况noscript会出现：

浏览器不支持脚本
浏览器对脚本的支持被关闭

总结：

没啥可总结的

重学JS（《JavaScript高级程序设计》笔记） - HTML中的JS相关推荐

重学《JavaScript 高级程序设计》笔记第6章对象
第6章面向对象的程序设计 ECMAScript中没有类的概念: 1.创建对象-历史 1.1 创建实例,添加方法和属性 → 对象字面量缺点: 使用同一接口创建很多对象,产生大量重复代码 var pe ...
JavaScript高级程序设计笔记01 | 第一章到第四章 | 关键字与保留字 | 数据类型 | 操作符 | 作用域
观前提示:大部分都是书上的内容,个人理解的部分的较少,看我的笔记还不如去看书第二章 async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部 ...
javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
[Javascript 高级程序设计]学习心得记录9 js面向对象
感觉最难的部分就是面向对象了,大学期间学习的是面向过程的c/c++,工作之后也没有深入了解过面向对象,通过这次的学习和回顾,也算是对面向对象有了新的认识.不过,就我在书上学到了结合个人理解随便说说,很 ...
[Javascript 高级程序设计]学习心得记录11 js的BOM
BOM(浏览器对象模型)是web中js的核心,而BOM的核心对象就是window对象.在浏览器中,window对象有双重角色,它既是通过js访问浏览器的一个接口,又是规定的Global对象.此外,还有 ...
JavaScript高级程序设计笔记 - 第四章变量作用域内存问题
4.1 基本类型和引用类型的值基本类型: 简单的数据段引用类型: 指那些可能有多个值构成的对象, 指保存在内存中的对象 4.1.2 复制变量值除了保存的方式不同之外,在从一个变量向另一个变量复制 ...
[Javascript 高级程序设计]学习心得记录10 js函数表达式
在前面说对象的时候已经提到了函数对象,对函数的定义参数的传递包括通过argumentd.callee实现递归.这篇博客我会继续深入讲解js中的函数表达式. 一,闭包关于闭包的概念,可以先看看http ...
javascript高级程序设计笔记
1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message="hello world!"; var messageAsBoole ...
JavaScript高级程序设计笔记事件冒泡和事件捕获
1.事件冒泡要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body><div> click me!</div> < ...
《JavaScript 高级程序设计》精读笔记
本系列读书笔记是我通过学习<Javascript 高级程序设计>第3版时结合自己的理解.概括.精炼然后加以一定的拓展,总结而来的,非常适合具有一定基础,同时又想把 JS 基础学更好的童鞋, ...

重学JS（《JavaScript高级程序设计》笔记） - HTML中的JS