2021前端面试知识点总结

一 canvas和svg各自优缺点，数据量大的话，哪个性能更好，为什么？

1 什么是canvas 跟svg
canvas 是使用JavaScript 程序绘图（动态生成）。
svg 是使用XML文档描述来绘图。
2 各自的优缺点
canvas是基于位图的图像，他不能改变大小，只能缩放显示。
svg是基于矢量的，更适合用来做动态交互，svg绘图容易编辑，只需要增加或者移除相应的元素的就可以。同时svg是基于适量的，所以它能够很好的处理图像大小的改变。
3 适用范围
canvas 提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。
svg 功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。

剑指 Offer 03. 数组中重复的数字

/**
 1. @param {number[]} nums
 2. @return {number}
 */
function findRepeatNumber (nums) {
  // 先把数组进行排序
  nums.sort((a,b) => a- b);
  let len = nums.length - 1 ; // 防止内存溢出
  // 循环遍历
  for (let i = 0; i< len; i++) {
    if(nums[i]=== nums[i+1]) {
  	  return nums[i]
    }
  }
  return -1
}

二 webpack

1 webpack的作用

①、依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块。
②、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS（压缩代码）可以减少、优化代码的体积。
③、各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript,eslint 可以检查编译期的错误。
web的作用 读取并处理依赖， 模块化， 打包压缩文件，管理插件。

2 webpack 的工作过程

① 初始化参数：解析配置参数，合并从shell（类似npm install的命令） 和 webpack.config.js 文件的配置信息，输出最终的配置信息；
② 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
③确定入口文件： 根据配置中的 entry 找到所有的入口文件
④编译模块：从入口文件出发，调用所有配置的loader对模块进行翻译，再找出该模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
⑤完成模块编译：在经过第4步使用loader翻译完所有模块后，得到了每个模块被翻译后的内容以及他们之间的依赖关系
⑥输出资源根据入口和模块之间的依赖观念西，组装成一个个包含多个模块的chunk，再把每个chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。
⑦输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

3 loader跟plugin

①什么是 loader

转换某些类型的模块。 webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：
1、test 属性，识别出哪些文件会被转换。
2、use 属性，定义出在进行转换时，应该使用哪个 loader。

这里介绍几个常用的loader：
1、babel-loader：把 ES6 转换成 ES5. 让下一代的js文件转换成现代浏览器能够支持的JS文件。babel有些复杂，所以大多数都会新建一个.babelrc进行配置
2、css-loader,style-loader: 两个建议配合使用，用来解析css文件，将 css 文件变成 CommonJS 模块加载 js 中，里面内容是样式字符串。能够解释@import,url(). style-loader: 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效 如果需要解析less就在后面加一个less-loader。
3、file-loader: 打包其他资源（除了css/js/html 资源）生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
4、url-loader: 在文件很小的情况下以 base64 的方式把文件内容注入到代码中去功能类似 file-loader,但是文件大小低于指定的限制时，可以返回一个DataURL事实上。
5、html-loader：处理 html 文件中的 img
6、eslint-loader：通过 ESLint 检查 JavaScript 代码

②什么是plugin

插件可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
常用的plugin:
1、html-webpack-plugin：可以复制一个有结构的html文件，并自动引入打包输出的所有资源（JS/CSS）
2、clean-webpack-plugin：重新打包自动清空 dist 目录
3、mini-css-extract-plugin：提取 js 中的 css 成单独文件
4、optimize-css-assets-webpack-plugin：压缩css
5、uglifyjs-webpack-plugin：压缩js
6、commons-chunk-plugin：提取公共代码

三 let、const 、var 区别

1. 作用域不同： var 是 全局作用域。 let ，const 是块级作用域，声明的变量只在它所在的代码块有效，不存在变量提升。
2. 暂时性死区 ： let ，const 存在暂时性死区，如果在变量声明前使用，会报错。
3. let，const 不允许重复声明，重复声明会报错。
4. const声明一个只读的常量。一旦声明，常量的值就不能改变。
   const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

四 vue 响应式原理

关于vue 中的三个核心类

1. Observer: 给对象的属性添加 getter 和 setter，用于依赖收集和派发更新
2. Dep： 用于收集当前响应式对象的依赖关系，每个响应性对象都有一个dep实例， dep.subs = watcher[],当数据发生变更的时候，会通过dep.notify() 通知各个watcher。
3. Watcher ： 观察者对象， render watcher，computer watcher，user watcher。

• 依赖收集

1. initState，对computed属性初始化时，会触发computed watcher 依赖收集。
2. initState， 对监听属性初始化的时候，触发user watcher 依赖收集。
3. render过程 ， 触发render watcher依赖收集。

• 派发更新
  Object.defineProperty
  1. 组件中对响应数据进行了修改，会触发setter逻辑
  2. dep.notify()
  3. 遍历所有subs, 调用每一个 watchr的update方法。

总结原理：
当创建vue实例时，vue 会遍历data 里的属性，Object.defineProperty 为属性 增加 getter 和 setter 对数据的读取进行劫持（getter ： 依赖收集和setter ： 派发更新），并且 在内部追踪依赖，在属性被访问和修改时通知变化。

每个组件的实例都会有对应 的watcher 实例，会在组件渲染的过程中记录依赖的所有数据属性进行依赖收集， 之后依赖项被改动时，setter 方法会通知依赖与此一大沓的watcher 实例重新计算(派发更新）。从而使他关联的组件重新渲染。

五 计算属性的实现原理？

computed watcher 持有一个dep 实例，通过，this.dirty属性标记计算属性是否需要重新求值。
当 computed 的依赖值改变是，就会通知订阅的watcher 进行更新，对于computed 的watcher 会将dirty设置为true并且进行计算属性方法的调用。

1. computed 所谓的缓存是什么
   计算属性是基于他们的响应式依赖进行缓存的， 只在相应响应式依赖发生改变时他们才会重新求值。
2. 那computed 缓存存在的意义是什么？ 或者说你经常在什么时候使用？
   比如 计算属性方法内部操作非常的耗时，遍历一个极大的数组，极端一次可能要耗费1s。

只有响应性变化，数据才会更新

六 Vue.nextTick的原理

Vue 异步执行dom更新，一旦观察到数据的变化 ，vue 会开启一个异步队列，然后把同一个事件循环（eventloop）中观察数据变化的watcher 推送进这个队列。如果这个watcher 被触发度多次，只会被推送到队列一次。
这种缓冲行为可以有效地去掉重复数据造成的不必要的计算和dom 操作，而在下一次事件循环时，vue 清空异步队列，并进行必要的dom更新。

所以可理解为。nextTick 先尝试微任务，如果浏览器不支持，就用宏任务。
所以 nextTick 的回调是在下一轮的事件循环里执行的。