三句话解释清楚的面试题（未完成版）

broweray18514
264 阅读13分钟

1.http状态码
401：未授权，未登录
403：Forbidden，无访问权限
405：Method Not Allowed，服务器禁止使用当前HTTP方法请求（GET与HEAD不得被禁止即也不会返回405）
500：Internal Server Error，服务器内部错误，举例：代码语法错误；php代码运行内存超了内存限制 memory_limit；nginx config 配置错误；
502：Bad Gateway，网关或代理角色的服务器，从上游服务器中接收到的响应是无效的
504：网关或者代理的服务器无法在规定的时间内获得想要的响应，举例：代码执行时间超时，或死循环了。
304：Not Modified，请求的网页/数据/资源未修改过，可以使用缓存的资源，不用在服务器取

2.http1.0/1.1/2.0/https特/优点、缺点、区别
http1.0：
http1.1：
http2：
https：
https对比http：协议名称和默认端口号。https默认端口号443，；http默认端口80。HTTP + SSL(TLS) = HTTPS。

3.less/sass编译原理
less是预编译处理器，会在编译前进行处理成css，首先less会转换为ast(抽象语法树，类似vnode那种生成object对象），然后遍历转换后所有的节点，最后再形成css树

4.http Response Headers和Request HEaders有哪些参数，大致意思

5.echarts和highcharts对比
Echarts：采用canvas渲染，更适合绘制图形元素数量非常大的图表，但动态增加删除节点不灵活，需要重绘；稳定性差低版本浏览器会出bug，
Highcharts：采用SVG渲染，轻量级，移动端更好，动态增加删除节点灵活，不需要重绘。兼容性好（可到IE6）所以稳定性好，
6.echarts 和 highcharts底层比较（即canvas和svg对比）
canvas:1.依赖分辨率，不支持事件处理器 2.弱的文本渲染能力 3.能够以.jpg、.png格式保存结果图像 4.最适合图像密集型的游戏，其中的许多对象会被频繁重绘[待理解深究考证~]，3D绘图有绝对优势[待理解深究考证~] 5.数据量大时会卡顿[待理解深究考证~]。
svg:1.不依赖分辨率，支持事件处理器 2.最适合带有大型渲染区域的应用（如谷歌地图）[待理解深究考证~]4.复杂度高会减慢渲染速度（同DOM）5.不适合游戏应用 6.图表配置的自由度高 7.数据量大时有优势。

6.箭头函数和普通函数区别
普通函数：this指向最终调用它的对象（谁调用指向谁），没有被对象调用的函数默认指向window。
箭头函数：没有自己的this，只会在自己作用域的上一层（通过作用域链）继承this（即定义时已确定而非执行时）（也即指向定义时外层第一个普通函数的this），继承来的this不会被call()、apply()、bind()等方法改变。没有prototype，所以不能new构造函数，也没自己的arguments。不能用作Generator函数，不能使用yeild关键字。

7.webpack 常见的plugin有哪些【摘自juejin.cn/post/700283… 】

  • ProvidePlugin：自动加载模块，代替require和import
  • html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件
  • extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件
  • DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。
  • HotModuleReplacementPlugin 热更新
  • optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重
  • webpack-bundle-analyzer 一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示。
  • compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS
  • happypack：通过多进程模型，来加速代码构建
  • clean-wenpack-plugin 清理每次打包下没有使用的文件
  • speed-measure-webpack-plugin:可以看至U每个Loader和Plugin执行耗时（整个打包耗时、每个Plugin和 Loader 耗时）
  • webpack-bundle-analyzer:可视化Webpack输出文件的体积（业务组件、依赖第三方模块） 8.webpack有哪些常⻅的Loader
  • file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件
  • url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去
  • source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
  • image-loader：加载并且压缩图⽚⽂件
  • babel-loader：把 ES6 转换成 ES5
  • css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性
  • style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
  • eslint-loader：通过 ESLint 检查 JavaScript 代码

9.webpack4的Tree Shaking是什么？作用，实现（的参数等），原理
定义：treeShaking 也叫摇树优化，通过移除多余代码，优化打包体积，生产环境默认开启
作用：
实现：

 optimization: {
   usedExports: true, //只导出被使用的模块
   minimize : true // 启动压缩
 }

原理：

10.ES6模块的优点
静态加载（编译时加载）；被多次引入时，只执行一次；减少命名冲突；避免引入时的层层依赖；

11.vue组件中的data为什么是一个函数，而new Vue里可以是对象
vue中组件是用来复用的，每次组件实例化时，data函数都会被调用，会return一个新对象，他们的内存地址都是不一样的，不会互相影响，具有独立性，即防止data复用时数据污染（被他处改变）。是JS本身原型链特性带来的，跟Vue本身设计无关。。
因为这个类创建的实例不会被复用。它只会new一次，不用考虑复用。

12.什么是闭包、原理、优缺点、及应用（或在项目中的使用）
函数执行后返回结果是一个内部函数，并被外部变量所引用，内部函数持有被执行函数作用域的变量，即形成了闭包；；
闭包就是函数声明的作用域与执行的作用域是不同的就叫闭包。
函数在定义时的词法作用域以外的地方被调用就会形成闭包。闭包使得函数可以继续访问定义时的词法作用域；；
闭包原理 : 利用函数作用域链特性，内部函数会将外部函数的活动对象添加到它自己的作用域链中，外部函数执行完毕，其执行作用域链销毁，但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被销毁后才被销毁。（参考github.com/lgwebdream/… 精简了）；；
优点 : 保存变量在内存中，供之后使用，可作为私有变量，避免变量污染全局；；
缺点 : 无法被垃圾回收，增大内存使用量，可能会导致内存泄漏；；
应用 : 早期的模块封装，保持私有变量；；循环经典案例中那种取值使用；；函数柯里化；；节流防抖；；惰性处理；；

13.什么是节流和防抖，及应用场景
防抖：（停顿后）触发事件后n秒后才执行函数，如果在n秒内又被触发，则重新计时。
应用： window的resize，联想搜索，mousemove鼠标滑动事件，表单提交，在线文档实时保存。
节流：（定时间隔） 应用：监听滚动事件，运行日志n秒一刷新，input动态搜索，

14.Vue-Router路由钩子函数有哪些
路由钩子函数有三种：
全局钩子： beforeEach、 afterEach(没有next函数，组件实例还没创建呢)、beforeResolve。
单个路由(独享)的钩子：  beforeEnter。
组件内钩子：beforeRouteEnter(没有this实例，用vm)、 beforeRouteUpdate(路由复用同一组件)、 beforeRouteLeave。

15.完整的路由导航解析流程(不包括其他生命周期)

  1. 触发进入其他路由。
  2. 调用要离开路由的组件守卫beforeRouteLeave
  3. 调用局前置守卫：beforeEach
  4. 在重用的组件里调用 beforeRouteUpdate
  5. 在路由配置里调 beforeEnter。
  6. 解析异步路由组件。
  7. 在要进入的路由组件中调用beforeRouteEnter
  8. 调用全局解析守卫 beforeResolve
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发DOM更新(mounted)。
  12. 执行beforeRouteEnter 守卫中传给 next 的回调函数

16.object.assign是深拷贝还是浅拷贝
Object.assgin 只能深拷贝第一层（单层）, 深层的还是浅拷贝

17.HTTPS用的是对称加密还是非对称加密
HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段

17-2.aes是对称加密还是非对称加密
是对称加密；；
对称加密,解密,即加密与解密用的是同一把秘钥,常用的对称加密技术有DES,AES等
非对称技术,加密与解密用的是不同的秘钥,常用的非对称加密技术有RSA等

18.vue，react生命周期
vue:
react:
常用的render(),constructor(),componentDidMount(),componentDidUpdate(),componentWillUnmount();
不常用
componentWillUpdate(此方面里不要更新props或 state，会导致死循环),shouldComponentUpdate(),static getDerivedStateFromProps(),getSnapshotBeforeUpdate(替代componentWillUpdate的),

19.vue和react父子传值
vue：父传子props，父上写冒号(:)属性,子传父&emit;
跨级provide/inject,ref,eventBus,storage，vuex。
react：父传子props，父上直接写属性，子直接this.props接;子传父（见下图） ,
跨级redux，storage,context提供一个全局态的store，提供组件之间共享数据，使用自定义事件event，emit事件发布，addListener订阅 ，一层层传
image.png
image.png

20.vue父子组件生命周期执行顺序
渲染过程（父父父子子子子父）：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程（父子子父）：父beforeUpdate->子beforeUpdate->子updated->父updated 销毁过程（父子子父）：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
21.vue怎么封装(类似table)组件，说下大致过程
slot,render函数，createElement

22.div水平垂直居中几种方式
父相对、子绝对定位left:50%;top:50%;transform: translate(-50%, -50%);;
父元素display: flex;align-items: center; justify-content: center;;

23.git merge和git rebase区别
如果你想要一个干净的，没有merge commit的线性历史树，那么你应该选择git rebase；；
如果你想保留完整的历史记录，并且想要避免重写commit history的风险，你应该选择使用git merge；；
rebase 特点：会合并之前的commit历史，优点：得到更简洁的项目历史，去掉了merge commit；；
缺点：如果合并出现代码问题不容易定位，因为re-write了history。git rebase –continue或git rebase –skip替代git commit。
merge 特点：自动创建一个新的commit，如果合并的时候遇到冲突，仅需要修改后重新commit；；
优点：记录了真实的commit情况，包括每个分支的详情；；
缺点：因为每次merge会自动产生一个merge commit，分支很杂乱。

24.实例创建后添加的属性，不会触发视图更新，解决方案
Vue.set(object, key, value)或this.$set(object, key, value)

this.$forceUpdate() 强制刷新 data并重新渲染

25.数组Array都有哪些新特性
ES5：forEach、every 、some、 filter、map、reduce、reduceRight；；
ES6：find、findIndex、keys、values、entries；；
ES6(非遍历)：Array.from(),includes,flat;;

26.数组去重的方法
Array.from(new Set(array)；；
for循环，if(!newArr.includes(arr[i]),newArr.push(arr[i]);
array.filter((it, i) => array.indexOf(it) === i)

27.判断数组类型的两种方法
Array.isArray(arr)；；
Object.prototype.toString.call(arr);;

28.本地储存区别

29.vue2、3区别

30.vue react虚拟dom区别

31.闭包及应用

32.vue router传值

33.介绍自己项目+亮点+遇到的经典问题
brk-h5:LoanListLP贷款页面复杂逻辑；；白屏或报错的处理；；jsbridge与原生交互；；联合登陆；；首页优化；；工厂函数组件；；安卓低版本和iPhone全面屏等兼容bug；；第三方内嵌页面返回的重渲染bug；；brk的全局路由守卫有吗，mgmt也有吗？toProductDetailMix里的产品跳转逻辑；；
产品亮点：a/b testing 、popup留客与访问、撞库、一二级分类挂分类和挂产品；；
brk-mgmt：动态添加多行表格；；权限管理（动态路由），产品的投放渠道和免登陆开关；；
34.事件循环event loop
macro-task(task)：script标签、setTimeout、setInterval、setImmediate、I/O、UI render
micro-task(jobs):process.nextTick、Promise、Async/Await(同promise)、MutationObserver

JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程，我们称为事件循环过程。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务）

代码开始执行，创建一个全局调用栈，script作为宏任务执行；；
执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列；；
同步任务执行完毕，查看微任务队列；；
若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务)；；
若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空；；。

  • 从宏任务队列中，按照入队顺序，找到第一个执行的宏任务，放入调用栈，开始执行；
  • 执行完该宏任务下所有同步任务后，即调用栈清空后，该宏任务被推出宏任务队列，然后微任务队列开始按照入队顺序，依次执行其中的微任务，直至微任务队列清空为止；
  • 当微任务队列清空后，一个事件循环结束；
  • 接着从宏任务队列中，找到下一个执行的宏任务，开始第二个事件循环，直至宏任务队列清空为止。 35.实现链式调用
    核心就是调用完的方法将自身实例返回；；
class Person {
  eat() {
    console.log('在吃饭');
    return this
  }
  drink() {
    console.log('去喝水');
    return this
  }
}
const person = new Person();
person.eat().drink()

function Child() {}
Child.prototype.method = function(param) {
    console.log(param)
    return this
}
let c = new Child()
c.method('玩').method('睡')

36.forEach和map区别（先摘录再自己汇总提炼）
forEach是遍历map是映射；；
区别就是你想拿到数据就用map，只想遍历操作就用forEach；；

37.Map/Set/Object的区别——231207

38.如何解释for循环中用var和let申明i,settimeout打印i的区别——231225
观点1（以for循环为例，彻底搞懂var和let的本质区别 - 掘金 (juejin.cn)）：
var申明的迭代变量i，在退出循环后的终值是5，所以再执行定时器逻辑时，输出的都是同一个值5；
let申明迭代变量i后，js引擎会在后台为每次循环申明新的循环变量实例，结束循环后，定时器中引用的都是不同的循环变量实例；
观点2：
39.WeakMap
WeakMap是用于生成键值对的集合，只接受对象作为键名，且该对象不计入垃圾回收机制，即对该对象的引用是弱引用，可以防止内存泄漏；有get()/set()/has()/delete()四个方法；一般用于DOM节点作为键名和部署私有属性；
40.栅格布局的底层实现原理
基于flexbox(Grid)布局；Row（行）设置display: flex(或display: grid);(还可以设置些flex-wrap: wrap;margin-right:-15px;margin-left: -15px;)。Col（列）设置flex: 1;(还可以设置些padding-right: 15px;padding-left: 15px;)

avatar
文章
阅读
粉丝