面试 4

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里的回调，只要有一个失败，就不会继续执行后续代码

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(() => {})：以最先执行好的结果为准

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，高度浏览器从缓存中读数据

13、打包构建流程

1. 生成options (将webpack.config.js和shell中的参数，合并中options对象)
2. 实例化complier对象 （webpack全局的配置对象，包含entry，output，loader，plugins等所有配置信息）
3. 实例化Compilation对象 (compiler.run方法执行，开始编译过程，生成Compilation对象)
4. 分析入口js文件，调用AST引擎(acorn)处理入口文件，生成抽象语法树AST，根据AST构建模块的所有依赖
5. 通过loader处理入口文件的所有依赖，转换为js模块，生成AST，继续遍历，构建依赖的依赖，递归，直至所有依赖分析完毕
6. 对生成的所有module进行处理，调用plugins，合并，拆分，生成chunk
7. 将chunk生成为对应bundle文件，输出到目录

参考文档

14、loader和plaugin的区别

一、从功能作用的角度区分：

loader从字面的意思理解，是 加载 的意思。只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译,仅仅只是为了打包。

plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

二、从运行时机的角度区分

1 . loader运行在打包文件之前（loader为在模块加载时的预处理文件）
2. plugins在整个编译周期都起作用。

15、响应式布局