ms-前端八股文

1、暂时性死区

是指在 JavaScript 中使用 let 或 const 声明变量时，变量在其声明之前不能被访问或使用的特性。

var可以变量提升（在 JavaScript 中，变量声明提升是指在执行代码之前，变量声明会被提升到作用域的顶部。）

let 或 const 不能变量提升，提前打印会报错阻塞代码运行

2、防抖与节流

3、关于面对后端给的上万张图片，我们如何进行最优处理

第一次只渲染10条，监听滚动事件，到达页面底部再渲染10条···········

4、vue的keep-alive生命周期函数

4.1、

activated(组件激活时) 该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面

4.2、

deactivated(组件停用时) 该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件停用时调用。在deactived里面，在里面进行一些善后操作

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数，初始化操作放在actived里面，一旦切换组件，因为组件没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在deactived里面，在里面进行一些善后操作，这个时候created钩子函数只会执行一次，销毁的钩子函数一直没有执行。

5、CSR和SSR

CSR，即客户端渲染，数据的获取和加载都在客户端进行。而SSR则是服务端渲染，数据的获取和拼接都是在服务端进行，服务器直接返回拼接好的HTML文件，因此加载速度很快。CSR和SSR都各有优缺点。SSR对SEO更加友好，CSR反之；因为SSR到达的很快，因此不会有白屏问题，而CSR同样反之；SSR因为需要在服务端加载，因此会占用比较多的服务端资源，但CSR可以减少很多服务端资源的占用；在用户体验方面，CSR的页面跳转因为不是真正的跳转，因此会更加流畅，而SSR则是根据网络情况决定。总之，CSR和SSR都有它各自擅长的地方，如何选用主要根据具体的使用场景来决定。

6、同构渲染

同构渲染就是结合了CSR和SSR优势的一种渲染方式。同构渲染在首次渲染时与SSR是一样的，即直接返回静态HTML文件，但是有一点不同的是，同构渲染返回的文件中，不会包含已经处理好的数据。同构渲染返回的HTML文件中会包含link和script标签，浏览器在加载完这些标签后，会开始激活操作，此时，整个应用都会被CSR接管，作为CSR应用进行操作。

7、大前端和前端的区别

首先前端通常指的都是web前端，web前端的工作范围就是在web浏览器中，包括网站前端页面，web后端服务器开发或者从后端程序员处调用接口数据开发等等。

而大前端涉及到的就比较多了，除了传统的web前端之外，还有其他PC界面，移动端，app，小程序等等显示界面都属于大前端开发的范畴。

8、模块化个人理解

常用es6模块化和require

模块化把相同代码进行提取，减少了代码冗余

实现了模块分类，提高了可维护性，达成按需引入的效果，增长了开发效率

问：模块化有哪几种标准？

答：目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统

问：ES Modules 和 CommonJS的一些区别

答：

使用语法层面，CommonJs是通过module.exports，exports导出，require导入；ESModule则是export导出，import导入
CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖
ESModule在编译期间会将所有import提升到顶部，CommonJs不会提升require
CommonJs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ESModule是导出的一个引用，内部修改可以同步到外部
CommonJs中顶层的this指向这个模块本身，而ESModule中顶层this指向undefined
CommonJS加载的是整个模块，将所有的接口全部加载进来，ESModule可以单独加载其中的某个接口

九、JS移动、复制DOM节点

可以看一下我的这篇文章（CSDN）

处理思路大概为将页面元素归为一个数组，通过下标置换来移动元素，复制元素则是在指定下标位置插入相同的值，页面重新渲染后就完成了移动复制页面元素的目的

十、闭包的写法

闭包闭包，老生常谈的闭包，内部函数访问外部函数的变量这个场景就是闭包，闭包的目的就是让内部函数访问外部函数的变量。

function createCounter() {let count = 0;return function() {count++;console.log(count);};
}const counter = createCounter();
counter(); // 输出：1
counter(); // 输出：2

十一、js将一个数组循环插入另一个数组（写起来跟轮播图似的，到达最后一个下标就从头开始）

      const imgUrlList=[require('@images/download.png'),require('@images/download-hover.png'),require('@images/cancel.png')];const videoOriginInfo=res.data.data;let indexNow=0;videoOriginInfo.forEach(a=>{if(indexNow!=this.imgUrlList.length){a.imgUrl=this.imgUrlList[indexNow];indexNow++;}else{indexNow=0;a.imgUrl=this.imgUrlList[indexNow];}})this.videoList = videoOriginInfo;

十二、webpack 热更新怎么知道模块文件改变的

热更新原理很简单，就是每个文件都有独特的编码名，每次修改只需要检测到相应文件发生变化，更新文件名，实现热更新，项目运行中几乎无感刷新。

那webpack是通过啥检测的，chokidar库（https://github.com/webpack/webpack-dev-server/blob/2aed7625d92f0eedfb691a4e4cf602658469c758/lib/Server.js#L3018C31-L3018C39），vite也是用的这个