[toc] ## JS 篇 #### 1.js 的数据类型以及区别 #### 2.数据类型判断 typeof #### 3.判断数组的几种方式 #### 4.var, let, const 区别 #### 5.js 垃圾回收机制 js 中在创建一个对象的时候，会开辟一个内存空间，如果是基本数据类型，就会放在栈空间中，如果是引用数据类型，就会放在堆空间中，并在栈中保存一个指针，而浏览器的 v8 回收机制，会每隔一段时间自动回收没有使用的变量，gc 的回收策略主要是一个分代回收，它分为新生代和老生代两种，在新生代中，存在 from 和 to 两个空间，一个使用，一个空闲，当新创建变量时，会放到 from 空间，当 from 占满后，就会启动垃圾回收清除 from 空间失活的对象，并把存活的部分复制到放到 to 空间中，然后 from 和 to 空间互换。在老生代中，会采用一个标记清除的方法，当变量进入执行环境时就会标记为进入环境，离开环境是就会标记为离开环境，并且启动标记清楚算法，老生代的内存空间是连续的，所以清楚后会出现内存碎片，当内存碎片超过了一定限制后，会启动压缩算法，将存活的对象放到一边，失活的放到另一边 #### 6.作用域和作用域链 js 分为全局作用域和函数作用域，外部无法获取内部声明的变量，作用域最大的用处就是隔离变量，不同作用域下的同名变量不会冲突 作用域链，比如函数内使用一个变量，如果这个函数作用域内找不到这个变量，就会从上一级去找，一直查到全局作用域，这个过程就叫做作用域链 #### 7.闭包是什么，作用？ #### 8.this #### 9.原型和原型链 #### 10.new 操作符的实现 #### 11.eventloop 事件循环 #### 12.promise, promise.all, promise.race promise.all 保证所有的 promise 都被 resolve 改变状态了，res 拿到的是一个数组[res1, res2]，如果 reject 了，就会返回第一个失败的 promise 结果 promise.race 是返回最快改变状态的 promise 的 res promise.allSettled()，不管内部的 promise 是被 resolve 还是 reject，都会返回一个 promise 结果的数组 #### 13.async/await async 是异步函数的语法糖， await 在 async 内部使用，await 的返回结果是一个 promise，await 语句下面的代码相当于 promise.then #### 14.节流和防抖，原理和使用 #### 15.数组遍历有哪些方法 #### 16.操作 string 有哪些方法 #### 17.es6 新增了哪些新特性 常见的 let, const, 箭头函数, Symbol, 解构赋值 数组中的方法：map, reduce, Array.from(), Array.flat() 字符串中的方法：startsWith, endWith 对象上的方法：Obejct.keys()，Object.assign, for in, Class 类 新增了一些对象，比如 promise, Set, Map, WeakSet, WeakMap 还有一些操作符，比如?., ?? #### 18.es5 和 es6 的继承区别 es5 继承通过在 function 的 prototype 添加方法实现方法继承 在构造函数 function 中通过父函数 parent.call(this, ...args)实现参数的继承 es6 是 class 类的继承，通过 extends 继承父类上的方法，通过 super(name)，继承父类的参数 #### 18.手写深拷贝 #### 19.拖拽方法 #### 20.websocket ## html && css 篇 #### 1.html5 新特性和语义化 #### 2.css 选择器以及优先级 #### 3.position 属性的值 static absolute relative fixed sticky #### 4.box-sizing #### 5.盒子模型 #### 5.BFC（块级格式上下文） #### 6.垂直居中的方法 #### 7.隐藏元素的三种方法 #### 8.css 实现三角符号 #### 9.flex 布局 #### 10.rem 和 vw, em, px, rpx 区别 #### 11.清除浮动 #### 12.css3 动画 #### 13.css 的 gpu 加速 以下属性自带 gpu 加速 transform opacity filter 主动触发 gpu 加速 will-change: transform #### 14.浏览器重绘和重排(回流) ## 网络，浏览器 #### 1.浏览器输入 url 到页面加载的过程 #### 2.http #### 3.https #### 4.强缓存和协商缓存 #### 5.http 三次握手 #### 6.http 四次挥手 #### 7.浏览器跨域 #### 8.Cookie, sessionStorage, localStorage ## 操作系统 #### 1.进程，线程和协程 进程是程序运行的一个载体，操作系统进行资源分配和调度的一个独立单位 一个进程可以拥有多个线程，同一进程下的线程之间共享进程的内存空间 协程:属于线程，是在线程中跑的由用户操作的程序,比如迭代器 generator ## webpack 篇 #### 1.webpack 中有哪些 loader，都有什么作用 1.css-loader 2.style-loader 3.sass-loader 4.less-loader 6.postcss-loader: 用于根据浏览器内核不同，添加 css 前缀 ```js // 在loader中配置，将原style-loader删除，使用MiniCssExtractPlugin.loader { test: /\.(css|less)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] } ``` 7.babel-loader 8.ts-loader 9.vue-loader 10.file-loader: 处理图片资源 11.url-loader: 处理图片资源，但是可以接受一个 limit 限制，超过这个大小用 http 请求，否则转化为 base6 #### 2.webpack 中用过哪些 plugin，有什么作用 1.html-webpack-plugin：通过一个 html template，自动引入需要的 js，css 等依赖 2.mini-css-extract-plugin: 将 css 分离成单独的文件 #### 3.loader 是什么，手写 loader loader 本质上是一个函数，接受模块的文件内容，进行一系列的处理，并 return 出去 比如 style-loader 1.拿到 css 文件的内容 2.创建 style 标签，并且把内容写入到 style 标签中 3.再将 style 标签 append 到 document.head 中 ```js function loader(source) { let style = document.createElement("style"); style.innerHTML = JSON.stringify(source); document.head.appendChild(style); return style; } module.exports = loader; ``` #### 4.plugin 是什么，手写 plugin #### 5.说说 webpack optimization #### 6.webpack 如何进行性能优化 #### 7.webpack 的打包流程是怎么样的 #### 8.tree-shaking 实现的原理 #### 9.webpack 热更新(HMR)是如何实现的 #### 10.webpack 打包中的 Babel 插件是如何工作的 #### 11.webpack 和 rollup 有哪些相同点和不同点 #### 12.webpack5 有哪些新特性 ## vue 篇 #### 1.简述 mvvm，优点 #### 2.Vue 双向数据绑定的原理 #### 3.vue 生命周期的理解以及原理 #### 4.computed 和 watch #### 5.组件中的 data 为什么是一个函数 #### 6.vue 中如何检测数组的变化 #### 7.vue 中如何进行依赖收集 #### 8.vue-router 原理 #### 9.vue.mixin 原理 #### 10.$nextTick 作用，原理 #### 11.连续修改两次数据，会导致视图更新两次吗？为什么 #### 12.vue 模板编译的原理 #### 13.对 diff 算法的理解 #### 14.vue3 中有哪些 api #### 15.vue3 和 vue2 有哪些区别 #### 16.vue-vuex 的原理 #### 17.vue 组件传参有哪些方式 ## 项目篇(仅针个人简历) #### 1.你项目中用过的比较亮眼的技术 #### 2.你封装过组件吗，怎么封装的，举例 #### 3.qiankun 是怎么实现的，他里面做了什么 #### 4.动态样式是怎么实现的 element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的， 所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。 拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的， 之后动态添加 style 标签来覆盖原有的 css 样式。 ## node 篇 ## 性能优化篇 ## 网络安全篇 ## js 手写题篇 #### 1.手写 call, bind, apply [详见](https://ihavenolimitations.xyz/book/mrxuxu/js/edit#2applyapply_31) #### 2.手写 promise.all [详见](https://ihavenolimitations.xyz/book/mrxuxu/js/edit#2applyapply_31) ## 算法篇 ## react 篇 #### react 组件传值 1.父传子：通过 props 2.子传父：通过给子组件外部挂一个事件，子组件拿到props中的这个事件，调用，然后通过这个事件传参 ```js import React from 'react' class ChildCom extends React.Component { valueToParent(value) { this.props.onValue(value); } render() { return ( <div> <h2>子组件</h2> <div> <a onClick={this.valueToParent.bind(this,123)}>向父组件传值123</a> </div> </div> ) } } export default ChildCom; ```