1、作用域
w3scholl中定义：作用域指的是您有权访问的变量集合。
作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。
在 JavaScript 中有两种作用域类型：
- 局部作用域：在 JavaScript 函数中声明的变量，会成为函数的局部变量。（局部变量的作用域是局部的：只能在函数内部访问它们。）
- 全局作用域：函数之外声明的变量，会成为全局变量。
JavaScript 拥有函数作用域：每个函数创建一个新的作用域。（全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。）
2、变量提升
https://juejin.cn/post/7007224479218663455
- JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的行为
- 变量被提升后，会给变量设置默认值为 undefined
- ES6的let和const不存在变量提升
3、事件循环机制EventLoop
- 宏任务：setTimeout、setInterval、setImmediate、UI Rending
- 微任务：Promise、async\await
微任务是由ES6语法规定的
宏任务是由浏览器规定的
视频讲解：
事件循环-EventLoop
事件循环-宏任务、微任务
练习事件循环的网站
练习
上图依次打印：2 3 6 p2 p1 1 4 5
上图依次打印：script start -> async1 start -> async2 -> async1 end -> setTimeout
注：await 关键字，会等右边的方法执行完以后，再向下继续执行。
4、promise
特点：
①三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都不能改变这个状态。
②两种状态的转化：其一，从pending（进行中）到resolved（已完成）。其二，从pending（进行中）到rejected（已失败）。只有这两种形式的转变。
③Promise构造函数的原型对象上，有then()和catch()等方法，then()第一个参数接收resolved()传来的数据，catch()第一个参数接收rejected()传来的数据
作用：
①通常用来解决异步调用问题
②解决多层回调嵌套的方案
③提高代码可读性、更便于维护
Promise.all([]).then(() => {})：等待数组里所有的方法执行完以后，再执行then里的回调，只要有一个失败，就不会继续执行后续代码
js
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// Expected output: Array [3, 42, "foo"]Promise.race([]).then(() => {})：以最先执行好的结果为准
js
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
// Both resolve, but promise2 is faster
});
// Expected output: "two"5、async、await
①async/await是ES8新特性
②async/await是写异步代码的新方式，以前的方法有回调函数和Promise
③async/await是基于Promise实现的，它不能用于普通的回调函数
④async/await与Promise一样，是非阻塞的
⑤async/await使得异步代码看起来像同步代码
6、promis和async、await的区别
promise的出现解决了传统callback函数导致的地狱回调问题，但是他的语法导致它纵向发展形成了一个回调链，遇到复杂的业务场景显然是不美观的；
async、await看起来更加简洁，使得异步代码看起来像同步代码，只有await的代码执行完毕后才会执行下面的代码，与promise一样，也是非阻塞的；
async/await基于Promise实现，相当于Promise的升级版，不能用于普通的回调函数；
7、浏览器拿到html到现实在页面上，都做了什么
8、如何异步读取script标签（async、defer）
在浏览器加载html过程中，html解析器运行在主线程，并且在遇到<script> 标签后，会被阻塞，知道脚本从网络中被获取和执行，呃呃就是说<script>标签中的脚本会阻塞浏览器的渲染，这样也被称为"渲染人阻塞"。
async 异步：
该属性值为布尔值，指示浏览器是否允许异步执行该脚本，该属性仅对外链脚本有效。为 true 时，是告诉浏览器先把文件下载下来，在时机成熟的时候再执行。异步及哦啊笨一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发前或后执行。另外，标记为async的脚本并不保证按照指定他们的先后顺序执行，所以确保各个异步脚本互不依赖非常重要
defer：延迟：
该属性值为布尔值，指示浏览器该脚本将在文档完成解析后，触发DOMContentLoaded事件前执行，该属性仅对外链脚本生效。
总结：
script 标签有2个属性 async（异步） 和 defer（推迟）；他们的功能是：
async：他是异步加载，不确定何时会加载好；页面加载时，带有 async 的脚本也同时加载，加载后会立即执行，如果有一些需要操作 DOM 的脚本加载比较慢时，这样会造成 DOM 还没有加载好，脚本就进行操作，会造成错误。
defer：页面加载时，带有 defer 的脚本也同时加载，加载后会等待 页面加载好后，才执行。
9、vue底层，数据修改，如何更新显示
10、vue3的双向数据绑定
11、插槽的作用
扩展组件能力，提高组件的复用性;
使用插槽可以将一些比较复杂的父传子的通信去掉，直接在父组件中完成后利用插槽显示到子组件中（这是由于父组件模板的内容在父组件作用域内编译，子组件模板的内容在子组件作用域内编译）。
12、浏览器的缓存机制
1、Cache-Control（不需要前端做额外处理）
取值为：
- public：所有内容都被缓存
- private：只有客户端可以缓存
- no-cache：客户端缓存内容，但是是否使用缓存需要经过协商来验证决定
- no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
- max-age=10:缓存内通将在10秒后失效（不需要前端做额外处理）
2、Expires（不需要前端做额外处理）
缓存过期时间，用来制定资源到期的时间，是服务器的具体的时间点
3、Last-Modified和If-Modified-Since
- 浏览器首先发送一个请求，服务端在这个请求中，返回资源上一次的更新时间
last-modifired，浏览器通过webstorage缓存下这个时间和资源 - 浏览器在下次请求中，带上
if-modified-since：[保存的last-modified的值] - 服务端根据浏览器发生的修改时间和服务端的修改时间进行对比。一致的话代表资源没有变，服务端返回403，让浏览器从缓存中读取资源，否则重新更新时间，处理数据，一并返回给浏览器
由于last-modified依赖的是保存的绝对时间，会出现误差的情况
-
保存的时间是以秒为单位的，1秒内多次修改无法捕捉到
-
各机器读取到的时间不一致，会有误差的可能性，为了改善这个问题，提出了使用etag
4、ETag和if-None-Match
- 与 3 类似，不同的是，浏览器第一次请求时，服务端将更新时间
last-modifired改成ETag由数据内容生成的一个md5值或者其他字符串，浏览器保缓存这个值和数据 - 与 3 类似，浏览器下次请求时，请求头带上
if-none-match:保存的etag值 - 服务端通过得到的请求头中的值和服务端重新生成的etag值做比较，如果一致，代表资源没有改变，返回403，高度浏览器从缓存中读数据