常见面试题总结

beta
108 阅读3分钟

react18新增了哪些更新

  1. Concurrent Mode
  2. strict mode更新
  3. react组件返回值更新(支持null和undefined返回)
  4. 去掉的支持IE浏览器
  5. setState自动批处理
  6. 引入createRoot API, 支持并发模式渲染

react的设计思想

  1. 组件化
  2. 数据驱动试图
  3. 虚拟DOM

react性能优化手段有哪些

  1. shouldComponentUpdata
  2. memo
  3. getDerviedStateFromProps(让组件在props变化时更新state)
  4. 使用Fragment
  5. v-for使用正确的key
  6. 拆分尽可能小的可复用组件，ErrorBoundary
  7. 使用React.lazy和React.Suspense延迟加载不需要立马使用的组件

vue性能优化有哪些

  1. v-for正确使用key
  2. 封装高度复用的模块(http请求)和组件(ui库)
  3. 路由懒加载，首屏加载快
  4. 生产环境productionSourceMap: false
  5. 启用gzip压缩，打包体积更小
  6. keep-alive缓存不活跃的组件
  7. 插件cdn方式引入到html中,减小项目体积
  8. 组件按需导入

为什么要使用hook

优点

  1. 告别难以理解的class组件
  2. 解决业务逻辑难以拆分的问题
  3. 使状态逻辑复用变得简单可行
  4. 函数组件从设计理念来看，更适合react

缺点

  1. hooks还不能完整的为函数组件提供类组件的能力
  2. 函数组件给了我们一定程度的自由，却也对开发者的水平提出了更高的要求
  3. Hooks 在使用层面有着严格的规则约束

讲一下generator

  1. Generator是ES6提供的一种异步编程解决方案
  2. Generator函数有两个特征:
    • function关键字和函数名之间有个星号
    • 函数体内部使用yield表达式, 定义不同的内部状态
  3. 执行generator函数会返回一个遍历器对象, 可以依次遍历generator函数内部的每个状态
  4. 通过next方法才会遍历到下一个内部状态

讲一下promise

  1. Promise是异步编程的一种解决方案
  2. promise对象有三种状态：pending, fulfilled, rejected
  3. 特点： 一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时候都可以得到这个结果
  4. promise实例存在的方法：then(), catch(), finally()
  5. promise构造函数存在的方法：all(), race(), resolve(), reject()

讲一下async...await

  1. async/await 是ES8提供的一种异步编程解决方案 它是 Generator 的语法糖，就是一个自执行的generate函数。利用generate函数的特性把异步的代码写成“同步”的形式。

谈谈你对vue的理解

  1. 是什么：vue是一个用于创建用户界面的开源javascript框架，也是一个创建单页面应用的web应用框架
  2. 核心特性：数据驱动(MVVM) 组件化 指令系统
  3. 和React的对比：
    • 相同点
      1. 组件化思想
      2. 支持服务端渲染
      3. 都有虚拟Dom
      4. 数据驱动视图
      5. 都有自己的构建工具
      6. 都有支持native的方案
    • 不同点
      1. 数据流向不同
      2. diff算法不同

你对$nextTick的理解

  1. Vue在更新DOM时是异步执行的，当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新
  2. 如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

你对mixin的理解

  1. mixin(混入)：提供了一种非常灵活的方式，来分发Vue中组件中的可复用功能
  2. 使用场景：将不同组件中相同或相似的代码提取出来

单页面应用首屏加载速度慢如何解决

  1. 加载慢的原因：
  • 网络延迟问题
  • 资源体积是否过大
  • 资源是否重复发送请求加载
  1. 解决方案：
  • 减小入口文件体积
  • 静态资源本地缓存
  • UI框架按需加载
  • 避免重复加载组件(配置webpack中的commonChunkPlugin)
  • 图片资源压缩(雪碧图或者在线字体)
  • 开启Gzip压缩(http压缩，在webpack中配置对应插件)
  • 使用SSR(服务端渲染)

vue父子组件生命周期执行顺序

父beforeCreate-->父created-->父beforeMount-->子beforeCreate-->子created-->子beforeMount-->子mounted-->父mounted-->父beforeUpdate-->子beforeUpdate-->子updated-->父updated-->父beforeDestory-->子beforeDestory-->子destoryed-->父destoryed

宏任务微任务和DOM渲染的执行顺序

微任务-->DOM渲染-->宏任务

svg和canvas的区别

  1. Canvas 主要是用笔刷来绘制 2D 图形的。
  2. SVG 主要是用标签来绘制不规则矢量图的。
  3. 相同点：都是主要用来画 2D 图形的。
  4. 不同点：Canvas 画的是位图，SVG 画的是矢量图。
  5. 不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
  6. 不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。

hash和histoty路由的区别

  1. hash路由通过监听onHashChange事件 history路由通过监听popState事件
  2. 地址栏表现形式不一样：hash带# history不带#
  3. hash不会重新加载页面，可以随意刷新 history不能刷新，需要后端配置，否则可能会返回404
  4. 都会改变当前页面显示的url，但都不会刷新页面

computed和watch的区别

  1. computed是计算属性 watch是侦听器
  2. watch可以进行异步操作 computed不行
  3. computed支持缓存 watch不支持缓存

浏览器事件循环机制

  1. 是什么： 实现单线程非阻塞的方法就是事件循环
  2. 执行一个宏任务，如果遇到微任务就将它放到微任务的事件队列中
  3. 当前宏任务执行完成后，会查看微任务的事件队列，然后将里面的所有微任务依次执行完

Node事件循环

  1. EventLoop有6个阶段
  2. timers阶段：这个阶段执行timer（setTimeout、setInterval）的回调
  3. 轮询阶段(poll)：检索新的 I/O 事件;执行与 I/O 相关的回调（几乎所有情况下，除了关闭的回调函数，那些由计时器和 setImmediate() 调度的之外），其余情况 node 将在适当的时候在此阻塞
  4. 检查阶段(check)：setImmediate() 回调函数在这里执行

你对node的理解

  1. node.js是一个开源与跨平台的Javascript运行时环境
  2. 特点：非阻塞异步 事件驱动
  3. 优点：处理高并发场景性能更佳 适合I/O密集型应用
  4. 缺点：不适合CPU密集型应用 只支持单核CPU 可靠性低，一旦代码某个环节崩溃，整个系统都崩溃
  5. 应用：后台管理系统 多人实时聊天客户端

线上问题如何定位

  1. 线上问题一般分为两类：一类是接口数据导致 另一类是数据正常，前端问题
  2. 数据不用：本地更多的是测试环境的数据，而线上是真实环境的数据，不同数据，页面的渲染和交互可能不同
  3. 代码疏忽：可能是某些场景的边界情况未处理好，或者未做容错降级处理
  4. 解决方案：直接在线上环境添加source-map链接来定位问题 相当于生产环境+本地的sourceMap文件
  5. 谷歌浏览器的Sources面板支持右键添加source-map
  6. 实现步骤：把生产环境的代码在本地重新打包，然后用http-server起一个静态服务,拿到source-map文件链接添加到浏览器中

less和sass的区别

  1. less是基于javascript，在客户端处理。sass是基于ruby在服务端处理
  2. 关于变量less用@ 而sass用$
  3. sass支持条件语句而less不支持
avatar
文章
阅读
粉丝