前端常见问题一定要搞懂

迈不过友情╰ 2022-09-16 00:21 183阅读 0赞

# 前端常见问题 一定要搞懂： #

### CSS ###

#### 1. 盒模型 是什么？ ####

#### 2. 盒模型及如何转换？ ####

#### 3. BFC是什么？ ####

#### 4. 水平垂直居中有哪些方法？ ####

#### 5. rem和em的区别？ ####

#### 6. transition和animation的区别？ ####

### JS ###

#### 1.说一下promise? ####

#### 2.Promise.all中如果有一个抛出异常了会如何处理? ####

#### 3.Promise.all()是并发的还是串行的? ####

#### 4.Promise为什么能链式调用? ####

#### 5.写过原生的自定义事件吗 ? ####

#### 6.所有的事件都有冒泡吗? ####

#### 7.描述下原型链? ####

#### 8.描述一下this? ####

#### 9.typeof和instanceof的区别? ####

#### 10.什么是作用域链? ####

#### 11.什么是防抖节流? ####

#### 12.什么是重绘重排 ? ####

#### 13函数柯里化 ? ####

#### 14.闭包? ####

#### 15.递归? ####

#### 16.事件循环机制? ####

#### 17.return 、break和continue的区别和作用? ####

#### 18.forEach map filter 这些循环哪个可以在循环的过程中终止循环? ####

#### 19.js里面哪个循环速度最快? ####

#### 20.new运算符的执行过程? ####

#### 21.改变this的方式 ? ####

#### 22.this的指向? ####

参考文章：[this指向详解及改变它的指向的方法][this]

#### 23.讲讲AST语法书? ####

#### 24.存储有哪些 分别有什么优点和缺点? ####

#### 25.什么是垃圾回收机制? ####

#### 26.垃圾回收是发生在什么时候？? ####

#### 27.什么是内存泄露 怎么避免? ####

#### 28.宏任务和微任务? ####

#### 29.你知道 typeof null为什么是 object 吗? ####

#### 30.Vue中hash模式和history模式的区别? ####

#### 31.null和undefined的区别? ####

#### 32.js数组去重 有哪些方法? ####

#### 33.实现一个一组异步请求按顺序执行你有哪些方法? ####

#### 34.setTimeout的执行原理? ####

#### 35.如何在前端实现一个图片压缩? ####

#### 36.call bind apply 的区别？在哪些场景中使用过? 手写出来？ ####

#### 37.js继承方式有哪些？在哪些场景中使用过? ####

#### 38.$route和$router的区别 ####

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
    
    $router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

#### 39.vue-router守卫 ####

*  导航守卫 router.beforeEach 全局前置守卫
 *  to: Route: 即将要进入的目标（路由对象）
 *  from: Route: 当前导航正要离开的路由
 *  next: Function: 一定要调用该方法来 resolve 这个钩子。（一定要用这个函数才能去到下一个路由，如果不用就拦截）
 *  执行效果依赖 next 方法的调用参数。
 *  next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
 *  next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。

// main.js 入口文件
    import router from './router'; // 引入路由
    router.beforeEach((to, from, next) => {  
      next();
    });
    router.beforeResolve((to, from, next) => { 
      next();
    });
    router.afterEach((to, from) => { 
      console.log('afterEach 全局后置钩子');
    });

路由独享的守卫 你可以在路由配置上直接定义 beforeEnter 守卫

const router = new VueRouter({ 
      routes: [
        { 
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => { 
            // ...
          }
        }
      ]
    })

**组件内的守卫 :** 你可以在路由组件内直接定义以下路由导航守卫

const Foo = { 
      template: `...`,
      beforeRouteEnter (to, from, next) { 
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) { 
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) { 
        // 导航离开该组件的对应路由时调用，我们用它来禁止用户离开
        // 可以访问组件实例 `this`
        // 比如还未保存草稿，或者在用户离开前，
        将setInterval销毁，防止离开之后，定时器还在调用。
      }
    }

#### 40.事件如何先冒泡后捕获？ ####

> 根据w3c标准，应先捕获再冒泡。 若要实现先冒泡后捕获，给一个元素绑定两个 addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

参考文章：[DOM事件阶段以及事件捕获与事件冒泡先后执行顺序][DOM]

#### 41.哪些事件不支持冒泡事件？ ####

鼠标事件：mouserleave mouseenter  
焦点事件：blur focus  
UI事件：scroll resize

#### 42.如何判断一个变量是对象还是数组 ####

> **使用：`prototype.toString.call()`**

> 1.typeof判断数据类型（判断数组跟对象都返回object）

console.log(typeof null); // "object"
    console.log(typeof function () {  return 1 }); // "function"
    console.log(typeof '梦龙小站'); // "string"
    console.log(typeof 1); // "number"
    console.log(typeof a); // "undefined"
    console.log(typeof undefined); // "undefined"
    console.log(typeof []); // "object" 
    console.log(typeof NaN); // "number" 
    console.log(typeof { }); // "object"

> 2.instanceof判断对象的原型链是否是指向构造函数的prototype

var arr = [1,2,3,1];
    console.log(arr instanceof Array)//true

> 3.对象的constructor属性

var arr = [1,2,3,1];
    console.log(arr.constructor === Array)//true

> 4.Object.prototype.toString.call(arr)  
> 利用对象的toString可以准确判断是什么类型，call()改变this指向，这里是借用Object的方法，然后有人可能会问为什么不直接用arr.toString而要借用Object的方法

console.log(Object.prototype.toString.call("jerry"));//[object String]
    console.log(Object.prototype.toString.call(12));//[object Number]
    console.log(Object.prototype.toString.call(true));//[object Boolean]
    console.log(Object.prototype.toString.call(undefined));//[object Undefined]
    console.log(Object.prototype.toString.call(null));//[object Null]
    console.log(Object.prototype.toString.call({ name: "jerry"}));//[object Object]
    console.log(Object.prototype.toString.call(function(){ }));//[object Function]
    console.log(Object.prototype.toString.call([]));//[object Array]
    console.log(Object.prototype.toString.call(new Date));//[object Date]
    console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
    console.log(Object.prototype.toString.call(new Person));//[object Object]

直接用toString

console.log("jerry".toString());//jerry
    console.log((1).toString());//1
    console.log([1,2].toString());//1,2
    console.log(new Date().toString());//Wed Dec 21 2016 20:35:48 GMT+0800 (中国标准时间)
    console.log(function(){ }.toString());//function (){}
    console.log(null.toString());//error
    console.log(undefined.toString());//error

> 因为toString为Object原型上的方法，而Array、Function都是Object的实例，实例重新改写了原型上的toString方法，不同的对象调用toString方法，调用的是改写之后的方法（转成各种类型的字符串），而不会调用Object原型上的toString()方法，因此直接调用不能判断对象类型

var arr=[1,2,3];
    console.log(Array.prototype.hasOwnProperty("toString"));//true
    console.log(arr.toString());//1,2,3
    delete Array.prototype.toString;//delete操作符可以删除实例属性
    console.log(Array.prototype.hasOwnProperty("toString"));//false
    console.log(arr.toString());//"[object Array]"

> 我们可以看到，删除实例上的toString方法后调用的是Object原型上的toString()方法，返回对象类型

#### 43.setTimeout 和 setInterval的机制 ####

> 因为js是单线程的。浏览器遇到setTimeout 和 setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的待执行时间队列里面，等到浏览器执行完当前代码之后会看下事件队列里有没有任务，有的话才执行定时器里的代码

### Ajax ###

*  4个步骤
 *  JSONP的实现原理
 *  怎么解决跨域问题
 *  CORS跨域的原理
 *  token一般可以存放在哪里的？分别有什么好处

### axios ###

*  axios是什么？怎么使用？描述使用它实现登录功能的流程？

> Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。  
> axios是一个基于promise的Http库。可以发送get，post请求，正由于Vue，React的出现，促使了axios轻量级库的出现

Axios特性  
1、可以在浏览器中发送 XMLHttpRequests  
2、可以在 node.js 发送 http 请求  
3、支持 Promise API  
4、拦截请求和响应  
5、转换请求数据和响应数据  
6、能够取消请求  
7、自动转换 JSON 数据  
8、客户端支持保护安全免受 XSRF 攻击

### ES6 ###

*  promise 表达的
 *  导入导出 有哪些方式 优缺点
 *  说下 es6 的 class
 *  CommonJS和ES6模块的区别
 *  平常工作中ES6+主要用到了哪些？

### Node ###

*  nodejs Buffer缓冲区
 *  node原理 6步

### Vue ###

*  vue的生命周期
 *  哪个生命周期可以获取到DOM元素
 *  vue3 和vue2有什么不同 ？优缺点试什么 ？
 *  MVVM 表达
 *  Vue的响应式原理
 *  virtual dom 原理实现
 *  Proxy 相比于 defineProperty 的优势
 *  自定义写个v-loading 怎么写？
 *  this.$nextTick原理
 *  watch跟computed的区别
 *  $map
 *  $set
 *  diff算法
 *  Object.definedProperty 和 Proxy
 *  keep-alive 有啥用
 *  vue组件之间的通信方式有哪些
 *  Vue中computed和methods的区别
 *  不使用框架如何实现组件按需加载以及原理
 *  vue修饰符
 *  vue.extend和vue.component
 *  为什么虚拟DOM会提高性能

### webpack ###

*  webpack 原理
 *  webpack打包机制
 *  热更新的理解
 *  Plugin和 loader 相同和不同点
 *  vite原理
 *  反向代理知道吗？

### 正则表达式 ###

*  正则里的非如何实现的

#### 算法 ####

*  冒泡排序算法和数组去重
 *  二叉树

### 小程序 ###

*  登录流程 ？
 *  支付流程 ？
 *  购物车怎么做的 ？
 *  白名单怎么做的！
 *  静默登录怎么做的！

### http ###

*  http1.0 http1.1 http1.2 区别
 *  三次握手
 *  四次挥手
 *  为什么不是一次两次握手，三次挥手？
 *  TCP和UDP
 *  在项目中如何把http的请求换成https
 *  https的加密方式大概说下

### 前端安全方面 ###

*  前端安全方面？XSS？CSRF？
 *  XSS攻击以及如何预防？