总结

庆东
135 阅读6分钟

面试题整理

2022年4月整理一下面试题

Vue有关

  • 第1题 Vue的性能优化？
    1. 路由懒加载
    2. v-if和v-show使用区别
    3. v-for循环使用使用key
    4. 数据计算要使用compouted缓存
    5. 资源包使用cdn 例如图片、api
    6. 使用keep-alive缓存组件
    7. 服务端渲染ssr
  • 第2题 Vue项目中遇到有哪儿些坑？
    1. 内存泄漏（setTimeout setInterval不及时清除）
    2. Vue2中的响应式数据问题
      • 数组使用arr[index]=1，直接修改响应式数组，页面不会刷新
      • 对象删除key，或者新增key，页面不会刷新，解决方法Vue.set/ Vue.delete
    3. tab切换页面状态重新刷新
  • 第3题 React项目的优化？
    1. 路由懒加载lazy suspense
    2. 组件和元素隐藏使用classNames类名实现，减少dom的重建
    3. for循环使用key，优化diff
    4. 函数组件使用memo缓存优化，class组件使用preComponent缓存优化
    5. 函数组件中方法使用useCallBack优化，对于计算值使用useMemo缓存
    6. 在构造函数中使用bind(this)
    7. 使用Fragment包裹多级组件，减少层级，优化diff
    8. JSX中不用定义自定义函数（JSX频繁执行会重复创建函数开销增加）
    9. ssr服务端渲染
  • 第4题 React项目中的坑有哪儿些？ 1.
  • 第5题 如何监听Vue项目的报错？
    1. 全局监听js报错使用window.onError方法
    2. 全局监听Vue报错使用Vue.config.errorHandle方法 （不会监听异步函数错误）
    3. 组件监听错误，使用errorCaptured生命周期函数监听下级组件错误 内部返回false时错误不会向上一级传递
  • 第6题 如何监听React项目中的报错?
    1. 使用window.onError方法监听全局js报错
    2. 使用try catch监听组件中的错误
    3. 使用errorBoundary监听下级组件的错误（只会监听组件渲染中的错误，且只有在 production环境才会生效）
  • 第7题 测试一个网页加载速度
    • 测试指标
      • First Panit (FP)
      • First Contentful Panit (FCP)
      • First Meaningful Panit (FMP)废弃表示有意义的渲染
      • First content Loaded (DCL)
      • Larget Contentful Panit (LCP)
    • 浏览器测试栏
      • preformance
      • network
    • 统计网页快慢的工具
      • LightHouse 有node包和浏览器插件 node包使用 lightHouse 网址
  • 第8题 Array-Flatten 数组扁平化
    • 使用递归
    function ArrFlaten(arr: any[]) {
  let resArr: any[] = [];
  if (!arr?.length) return resArr;
  arr.forEach((a) => {
    if (Array.isArray(a)) {
      const res = ArrFlaten(a);
      resArr = resArr.concat(res);
    } else {
      resArr.push(a);
    }
  });
  return resArr;
}
  • 第9题 获取一个数据的类型的函数 
      function getType(data: any): string {
    const dataStr: string = Object.prototype.toString.call(data);
    const str = dataStr.split(' ')[1].slice(0, -1);
    return str.toLowerCase();
  }
  • 第10题 new一个对象发生了什么？请手写new函数
    • 发生了什么？
      1. 首先创建一个空对象
      2. 继承构造函数的为当前空对象的原型
      3. 执行构造函数, 返回对象
    • 手写
      const Foo = function (name: string, age: number) {
    this.name = name;
    this.age = age;
  };

  function createObj(constructor: Function, ...args) {
    const obj = Object.create(constructor.prototype);
    constructor.apply(obj, args);
    return obj;
  }

  const foo = createObj(Foo, 'li', 20);
    • Object.create和{}的区别？
      • {}是字面量对象，其原型指向Object.prototype
      • Object.create创建的空对象其原型指向传入的原型
  • 第11题 遍历DOM树
    • 深度优先遍历
    • 广度优先遍历
  • 第12题 请手写一个LazyMan
  class Lazy {
    private name: string;
    private stacks: any[];
    constructor(name: string) {
      this.name = name;
      this.stacks = [];
      setTimeout(() => {
        this.next();
      });
    }
    add(food: string) {
      const stack: any = () => {
        console.log(`${this.name} eat ${food}`);
        this.next();
      };
      this.stacks.push(stack);
      return this;
    }
    sleep(time: number) {
      const task = () => {
        setTimeout(() => {
          this.next();
        }, time * 1000);
      };
      this.stacks.push(task);
      return this;
    }
    next() {
      const stack = this.stacks.shift();
      if (stack) {
        stack();
      }
    }
  }

  const man = new Lazy('张三');

  man.add('苹果').sleep(3).add('香蕉').add('鸡肉');
  • 第13题 什么是JS Bridge?
    • H5 <=> JS Bridge <=> App
    • scheme通信协议 weixin://getList?page=1
    • h5发送请求，监听webview callback函数，
  • 第14题 requestIdleCallback和 requestAnimationFrame区别？
    • requestIdleCallback是在浏览器一帧的剩余空间内执行优先度较低的任务
    • requestAnimationFrame每次渲染完都会执行（效率比较高）
  • 第15题 Vue的生命周期
    • Vue2
      • beforeCreate
      • created
      • beforeMounted
      • Mounted
      • beforeUpdate
      • update
      • beforeDestroy
      • destroyed
      • errorCaptured
      • actived (缓存keep-alive组件每次访问时候激活的钩子，非keep-alive组件不生效)
      • deactivated (keep-alive组件卸载生命周期)
    • Vue3
      • beforeCreate 和 created = setup
      • onBeforeMounted 在setup函数后执行
      • onMounted
      • onBeforeUpdate
      • onUpdated
      • onBeforeUnmount
      • onMounted
      • onErrorCatured
      • onRenderTracked (调试钩子)
      • onRenderTriggered (调试钩子)
  • 第15题 Keep-alive组件
    • onActivated 缓存组件被访问激活钩子函数
    • onDeactivated 缓存被隐藏激活钩子函数
  • 第16题 Vue3的生命周期变化
    • setup函数代替了beforecreate 和 created
    • 使用hooks函数的形式 mounted => onMounted
  • 第17题 Vue2、Vue3、和React三种diff的区别
    • react diff向右移动
    • Vue2 双端对比
    • Vue3 双端对比+ 最长地址子序列
    • diff使用优化
      • 同层比较，不跨级比较
      • tag不同，删掉重建
      • 子节点key区分
  • 第18题 Vue和React为什么必须使用key
    • 减少diff，优化diff时间
  • 第19题 移动端的300ms延时，如何解决？
    • 背景
      • 之前pc浏览器时代，浏览器双击放大网页产生的问题
    • 解决方案
      • HTML5之前有个fastClick库，原理是禁止jsClick事件，监听touchend事件， 执行绑定的dom事件
      • 现在浏览器有 mate width-device-width viewport属性，识别是否是响应式网页
  • 第20题 网络请求中的token和cookie有什么区别？
    • cookie
      • http无状态，每次请求都会携带cookie身份
      • 服务端需要存储用户cookie信息
      • 禁止跨域传递cookie
    • token（JWT）
      • 前端登录 后端返回token
      • 前端存储，请求时候携带
  • 第21题 JWT和session哪个更好？
    • session
      • 有点是，用户信息存储在服务端可以快速的封禁非法用户
      • 缺点是，占用的内存比较大，比较浪费服务器的资源
      • 多进程，多服务器，不太好同步信息
      • 默认有跨域限制
    • JWT
      • 有点：不占用服务器资源
      • 有点：多进程，多服务好维护
      • 缺点：用户信息存储在服务端，封禁有时间差
      • 缺点：用户信息容易丢失
      • 缺点：token体积别cookie大
  • 第22题 如何实现OSS单点登录
    • cookie 主域名相同设置cookie domain为主域名，即可共存
    • token需要借助服务端实现
  • 第23题 http协议和UDP协议有什么区别？
    • Http协议是 在应用层
    • TCP、UDP是在传输层
    • TCP （三次握手，四次传输） 稳定传输
    • UDP 不稳定传输、效率高，无连接，五断开，视频会议和语音通话用的居多
  • 第24题 http协议1.0、1.1、2.0有何区别
    • 1.0
      • 最基础的http协议
      • 支持get、post
    • 1.1
      • 缓存策略cache-control
      • 支持长连接 connention：keep-alive，一次tcp连接多次请求
      • 支持断电续传
      • Restful Api
    • 2.0
      • 可压缩header减少体积
      • 多路复用，一次tcp连接多个http并发请求
      • 服务端推送
    • 第25题 什么是中间人攻击？

总结来源于：[coding.imooc.com/class/562.h…]

avatar
文章
阅读
粉丝