2023 Q1
- 创建于:2023-03-09
- 更新于:2023-03-16

# 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 有哪些区别? ✅
好好想想先 😌
参考链接
简述
- 响应式原理 Object.defineProperty -> Proxy
- diff 算法
- Composition api
# RN 跨平台的原理是什么?如何实现热更新? ✅
好好想想先 😌
参考链接
简述
- JSEngine
- JavascriptCore, Hermes
- RCTRootView
- Native js 互相调用
- FlushQueue
- Js thread, Shadow thread, UI thread
- Metro bundle
- UIManager - 生成自增 id,将 js 组件和 native 对应
- JSEngine
# RN 新架构更新了哪些东西? ✅
好好想想先 😌
参考链接
简述
- JSI - C++ 原生调用
- Fabric - 同步创建 UI
- Turbo modules - 仅在需要时加载 module
- Codegen - 生成 fabric 和 turbo modules 的 native 代码
# Vite 和 Webpack 有哪些区别? ✅
好好想想先 😌
参考链接
简述
- Vite
- 开发环境
- 使用 ES Module
- 使用 esbuild 预构建依赖
- 模块使用强缓存
- 生产环境 - 使用 rollup 打包 - esbuild 不能很好的处理代码分割、css 文件
- 开发环境
- Vite
# Webpack 模块联邦有什么作用?原理是什么? ✅
好好想想先 😌
参考链接
简述
- 主 app
- remote app
# Express 和 Koa 中间件有什么区别? ✅
好好想想先 😌
参考链接
简述
- Express 中间件,线型,next 用于调用下一个中间件并传递错误
- Koa 中间件,洋葱模型,next 会同步调用其他中间件
# 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 时间
- FCP (First Contentful Paint)
# 如何监控网页 fps ? ✅
好好想想先 😌
- 滚动监测
- 监测
requestAnimationFrame是否卡顿
# css 权重是怎么计算的? ✅
好好想想先 😌
参考
简述
- important > inline style > id selector > class 属性选择器、伪类选择器 > class > type
# vue 模板是怎样编译的?和 jsx 相比性能如何? ✅
好好想想先 😌
参考
简述
- template -> ast -> render function
- 会标记静态节点优化性能
# 浏览器有哪些线程? ✅
好好想想先 😌
参考
简述
- gui 线程
- dom 树,cssom 树解析和渲染
- js 线程
- 事件触发线程
- 定时器线程
- 网络请求线程
- webworker 线程(动态)
- gui 线程