2023 Q1

# React 18 有什么新特性? ✅

好好想想先 😌
  • 参考链接

  • 简述

    • 放弃 ie11 支持
    • react dom root api(使用此 api 会开启 Concurrent mode)
    • setState 合并批处理(在异步回调中也会合并,18 之前不会)
      • 使用 flushSync 可以阻止 setState 合并
    • 删除 perform a state updated on an unmounted component 提示
    • useDeferredValue

# Vue 3 和 Vue 2 有哪些区别? ✅

好好想想先 😌

# RN 跨平台的原理是什么?如何实现热更新? ✅

好好想想先 😌
  • 参考链接

  • 简述

    • JSEngine
      • JavascriptCore, Hermes
    • RCTRootView
    • Native js 互相调用
      • FlushQueue
    • Js thread, Shadow thread, UI thread
    • Metro bundle
    • UIManager - 生成自增 id,将 js 组件和 native 对应

# RN 新架构更新了哪些东西? ✅

好好想想先 😌

# Vite 和 Webpack 有哪些区别? ✅

好好想想先 😌
  • 参考链接

  • 简述

    • Vite
      • 开发环境
        • 使用 ES Module
        • 使用 esbuild 预构建依赖
        • 模块使用强缓存
      • 生产环境 - 使用 rollup 打包 - esbuild 不能很好的处理代码分割、css 文件

# Webpack 模块联邦有什么作用?原理是什么? ✅

好好想想先 😌

# Express 和 Koa 中间件有什么区别? ✅

好好想想先 😌

# ts infer 关键字如何使用? ✅

好好想想先 😌
  • 参考链接

  • 简述

    • 表示在 extends 条件语句中待推断的类型变量
    type Parameters<T> = T extends (arg: infer P) => any ? P : T
    type ReturnType<T> = T extends (...args: any[]) => infer P ? P : any
    

# React 为什么要使用合成事件(SyntheticEvent)? ✅

好好想想先 😌
  • 参考链接

  • 简述

    • 合成事件最初用于处理浏览器兼容性问题
    • React 17 之前有事件池,事件消费完后会清空事件池
      • React 采用事件委托处理事件,会将合成事件放入事件池
      • 在异步方法中获取事件需调用 event.persist()
    • 捕获阶段 onClickCapture, 冒泡阶段 onClick
    • React 17 移除了事件池子,调不调 event.persist() 没有区别
      • 可以通过 event.nativeEvent 获取 dom 事件

# 网站性能指标有哪些?如何统计? ✅

好好想想先 😌
  • 参考链接

  • 简述

    • FCP (First Contentful Paint)
      • 浏览器从响应用户输入网址地址,到浏览器开始渲染内容的时间
      • 可以通过 performance.getEntriesByType(‘paint’)[1] 来获得这个时间
    • FMP (First Meaning Paint)
      • 首次有效绘制(主要内容绘制完成时间)
      • 需根据业务特定场景计算
    • FST (Fisrt Screen Time)
      • 首屏时间是指浏览器从响应用户输入网络地址,到首屏内容渲染完成的时间
      • 首屏时间 = 首屏图片全部加载完毕的时刻 - window.performance.timing.navigationStart
    • TTI (Time to interactive)
      • 可交互时间
      • 使用 PerformanceTiming.domInteractive 获取
      • 或者组件 mount 时间

# 如何监控网页 fps ? ✅

好好想想先 😌
  • 滚动监测
  • 监测 requestAnimationFrame 是否卡顿

# css 权重是怎么计算的? ✅

好好想想先 😌

# vue 模板是怎样编译的?和 jsx 相比性能如何? ✅

好好想想先 😌

# 浏览器有哪些线程? ✅

好好想想先 😌