JS笔记（一）基础知识
文章目录
一、浏览器执行JS简介
浏览器分为两部分：渲染引擎和 JS 引擎
- 渲染引擎：用来解析HTML和CSS，俗称内核，如chrome的blink，老版本的webkit
- JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，如chrome浏览器的v8
浏览器本身不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
二、JavaScript实现
- 核心（ECMAScript）
- 文件对象模型（DOM）：标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- 浏览器对象模型（BOM）：提供独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，如弹出框、控制浏览器跳转、获取分辨率等
2.1 ECMAScript
ECMAscript-262定义的语言，将这门语言作为一个基准，以便构建更稳健的脚本语言。web浏览器只是ECMAScript实现可能存在的一种宿主环境，提供ECMAScript的基准实现和与环境自身交互必须的扩展。
不涉及浏览器，在基本层面，ECMAScript描述了：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 全局对象
2.2 DOM
一个应用编程接口，用于在HTML中使用扩展的XML，DOM将整个页面抽象为一组分层节点
三、HTML中的JS
3.1 <script>元素
script 元素的属性：
-
async：可选。表示应该立即下载脚本，不能阻止其他页面动作（如下载资源）。只对外部脚本有效
-
charset：可选。使用src属性指定的代码字符集。很少使用，浏览器不关心他的值
-
crossorigin：可选。配置相关请求的CORS(跨源资源共享)。默认不使用CORS.
crossorigin =“anonymous”：配置文件请求不必设置凭据标志
crossorigin =“use-credentials”：设置凭据标志，出站请求就会包含凭据
-
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
-
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。若不匹配则报错不执行脚本。该属性可用于确保内容分发网络不会提供恶意内容
-
src：可选。表示包含要执行的代码的外部文件
-
type：可选。代替language。表示代码块中的脚本语言类型（MIME类型）
3.1.1 标签位置
过去，所有<script>元素都放在也页面的<head>标签内，意味着必须把所有JavaScript代码都下载、解析和解析完成后，才开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。所以，现代web应用程序通常将所有JavaScript引用放在**<body>元素中的页面内容后面**，这样页面就会子啊处理JavaScript代码之前完全渲染页面。
3.1.2 推迟执行脚本
<script>的属性defer，表示脚本会被延迟到整个页面都解析完毕后再运行
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script defer src="exm1.js"></script>
<script defer src="exm2.js"></script>
</head>
<body>
</body>
</html>
- 脚本按照出现的顺序执行
- 两者都会在DOMContentLoaded事件之前执行
- defer只对外部文件有效
- 对于XHTML，指定defer属性时应该携程defer=“defer”
3.1.3 异步执行脚本
- async和defer类似，都告诉浏览器立即下载。不过标记为async的脚本并不能保证能按照它们出现的次序执行。即第二个脚本可能先于第一个脚本执行。
- 异步脚本保证会在页面load事件前执行，但可能会在DOMContentLoaded之前或者之后
- 对于XHTML，async属性应该写为async=“async”
3.1.4 动态加载脚本
因为JavaScript可以使用DOM API。所以可以通过向DOM中动态添加script元素也可以加载指定脚本
let script = document.createElement('script');
script.src = 'exp.js';
script.async = false;
document.head.appendChild(script);
-
默认情况下这种方式创建的 script 是以异步方式加载的，相当于添加了async属性。但会出现问题，因为所有浏览器都支持createElement（）方法，但不是所有浏览器都支持async属性，所以要设置为同步加载
-
以这种方式获取的资源对浏览器预加载器是不可见的。会严重影响他们在资源获取队列中的优先级。在文档头部显式声明，就可让预加载器知道这些动态文件的存在：
<link rel="preload" href="exp.js">
3.2 行内脚本和外部脚本
3.2.1 行内式JS
<input type="button" value="cilck me" onclick="alert('Hello')"/>
- 可将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
- 注意单双引号：HTML中推荐双引号，JS中推荐单引号
- 可读性差，在html中编写JS大量代码时，不方便阅读
- 引号易错，引号多层嵌套时，易混淆
3.2.2 内嵌JS
<script>
alert('HELLO!');
</script>
-
可以将多行JS代码写到script标签中
-
若在代码中要出现
</script>字符串，必须要在 / 前面加转义字符 \
3.2.3 外部JS文件
<script src="my.js"></script>
- 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码，浏览器会忽略行内代码
- 适用于JS代码量大的情况
使用外部文件的好处：
- 可维护性
- 缓存。浏览器会根据特定的设置缓存所有的外部链接的JavaScript。意味着若两个页面都要用到同一个文件，则该文件只需要下载一次。
- 适应未来
3.3 文档模式（doctype）
分类：
- 混杂模式
- 标准模式
- 准标准模式
3.4 确保JavaScript不能用是的用户体验
使用<noscript>，可以指定在浏览器不支持脚本时显示的内容，若浏览器支持并启用脚本，则<noscript>中任何内容都不会被渲染
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/150442.html
