Skip to content
知识库

面试复习

html

  • Doctype
  • 标签语义化
  • script 懒加载
  • link（prefetch 和 preload）
  • shadow DOM
  • 自定义标签
  • 编码以及乱码
  • iframe
  • async 和 defer

css

  • 盒模型
  • BFC
  • 选择器优先级

!important -> 内联 -> 内部 -> 外部引用 !important -> id -> 类、伪类、属性 -> 元素、伪元素 -> *

  • 伪元素和伪类
  • 属性继承和不可继承
  • BEM，css module，css in js ，atomic css
  • css 元素值，px、em、rem、rpx、vw、vh、vm 等等
  • 元素隐藏
dispaly:none;
visibility: hidden;
opacity:0;
z-index: -1;
position: 定位到外面
transform: 缩小
  • 引入外部 css @import 和 link
  • 响应式
  • flex 和 grid
  • css 预处理

js 基础

  • 数据类型及各个数据类型的特点
  • 类型判断及类型转换（隐式，显式）
  • 比较运算符（===、==、Object.is、instanceof）
  • JS 精度、大数运算
  • function、class
  • 原型、原型链
  • new、Object.create
  • 面向对象（封装，继承，多态）
  • 闭包
  • 变量提升 & time dead zone
  • 执行上下文、this
  • 函数 vs 类，函数 VS 箭头函数
  • 模块，cjs、ejs
  • set、weakSet、map、weakMap
  • Promise、Generator、async…await
  • setTimeout、setInterval、requestAnimationFrame
  • Event Loop
  • call、apply 及 bind
  • 内存分配（代码内存，栈内存，堆内存），垃圾回收，内存泄漏
  • 常见的存储，cookies、sessionStorage、localStorage、indexDB
  • encodeURI、encodeURIComponent
  • unicode、utf-8、utf-16

build & transform

构建组件的对比

webpack（webpack4 => webpack5）

  1. 生态较好
  2. 开发体验较差
  3. 构建速度较慢
  4. webpack 也可以使用 esbuild-loader 来提速，用于替换 babel-loader 和 ts-loader¬

vite

  1. 生态较 webpack 差
  2. 构建速度快（esbuild 快，go 的天然优势，esbuild 中途减少了 AST 的转换，尽可能的复用 AST）
  3. 开发环境工具（esbuild）和生产环境工具(rollup)不一致
  4. 在大文件或者较多网络请求时，表现较差

why rollup：相较于 webpack 生态一般，但相较于 webpack

  • 更加轻量，打包出来的代码更简洁
  • 使用 esm 标准模块（通过插件可以导入现有的 cjs）

webpack

启动

会走一遍完成的 bundle 的过程

file => (module => AST(dependence 分析) => module) => module graph => chunk => file

  1. resolve：根据 entry 定位入口文件路径，创建一个 Module 对象
  2. load：读取入口文件
  3. transform：调用 loader 处理
  4. parse：将处理好的文件解析为 AST，并分析 AST 找出依赖，并对依赖处理（从步骤 1 循环，知道依赖处理完毕）

对 module graph 处理

  1. tree shaking
  2. module 分类，根据静态加载还是动态加载，将 module 分为 init chunk 和 async chunk
  3. 优化 init chunk 和 async chunk 重复 module
  4. 分离 chunk，例如处理三方依赖
  5. 根据 chunk 获取到 template，并根据 template 输出

热更新

watch 文件变化，根据变化的文件，再走一次 bundle 流程，当 bundle 完后，通过 ws 通知浏览器获取新的打包文件

vite

开发环境

  1. 使用 esbuild 打包外部的依赖
  2. 响应浏览器的 <script type="module"> 发起的请求

生产环境

  1. 使用 rollup 打包

启动

vite 没有启动 bundle 这一个步骤，他是通过浏览器请求并 hack 此次请求，通过对浏览器请求的资源进行 resolve -> load -> transform -> parse

热更新

watch 文件变化，通知浏览器去加载变化的文件，然后自动会走 resolve -> load -> transform -> parse 的流程

esbuild

turbopack

网络

  • 网络 5 层协议（整个链路）
  • IP
  • IP v4、IP v6
  • TCP、UDP
  • DNS
  • HTTP1.1、HTTP2、HTTP3
  • HTTP、HTTPS（SSL）
  • 缓存
  • GET、POST、PUT
  • webscoket
  • webRTC

浏览器

  • 事件机制
  • 跨域
  • WebWorker、SharedWorker
  • 缓存，如何利用缓存
  • Service Worker
  • 浏览器渲染原理，CSS tree、HTML tree
  • layout 和 paint
  • v8 运行，code => 字节码 => 机器码（JIT）
  • 浏览器的多进程模型
  • 浏览插件开发

安全

  • xss，实践

  1. 存储型

  2. 反射性

  3. DOM 型

  4. 过滤 + 转译

  5. CSP

  6. 培训

  • CSRF，如何更新 token，实践
  1. csrf token
  2. refer 白名单
  3. 双 cookies
  4. cookie samesite

监控 & 报警

  • 页面埋点
  • 性能监控
  • 异常监控
  • 报警 & 治理

性能优化

  1. 开发环境的优化
  2. 构建效率提升
  3. CDN & 缓存
  4. 拆包 & 提取公共包
  5. external 主应用包
  6. 减少首屏加载，组件懒加载
  7. 慢接口分析，接口缓存
  8. 关键接口前置请求
  9. tree shaking
  10. 图片优化，模糊图替换高清图，图片懒加载，webp
  11. 懒加载
  12. 借助 node.js 实现性能优化

React 相关

  • MVC、MVVM
  • Fiber
  • 异步
  • 浏览器空闲
  • 中断 & 状态恢复
  • Schduler
  • 如何判断空闲
  • 如何处理优先级
  • 如何中断与恢复
  • 如何批量更新，flushSync�
setAge(12);
setName('name');


// 触发dispatch时，获取此次更新优先级，创建Update对象，寻找到root，调用一次 scheduleUpdateOnFiber
// scheduleUpdateOnFiber -> ensureRootIsScheduled
// 在ensureRootIsScheduled 内会根据此次更新优先级判断，如果此次更新优先级已经存在，则不会创建更新的调度任务，否则会根据优先级
  - 同步任务，进入 syncQueue，立刻执行
  - 非同步任务，由SchedulerCallback调度




flushSync(()=>{
  setAge(12);
  setName('name');
});


// 使用flushSync disaptch时，它的优先级为同步，则进入同步队列syncQueue，由自身去 flushSyncCallbacks，此为立即执行
  • 合成事件
  • 生命周期
  • hooks
  • Context
  • router
  • 状态管理，redux，mbox，recoil
  • 通信
  • lazy，memo
  • Strict Mode

Vue 相关

  • 生命周期
  • router
  • vuex
  • vue3

测试

  • 单元测试
  • 压力测试
  • e2e 测试

设计模式

  • 策略模式
  • 发布订阅，观察者
  • 工厂模式
  • 单例
  • 装饰器（ts）
  • 代理，事件代理

数据结构与算法

  • 常见的排序

node.js

  • Event Loop
  • koa2
  • stream
  • npm install、link、run
  • 依赖
  • npm、yarn、pnpm

typescript

  • null，undefined，never，void 区别
  • any，unknow，never
  • type vs interface

微服务

  • qiankun
  • 微组件

实践

  1. 拖拽，drag API
  2. 接口请求 & 请求缓存
  3. 图片优化
  4. CDN 降级
  5. 前端的流量控制 & 灰度发布 & 泳道
  6. node.js 实践，流量控制，服务降级，日志监控，缓存，单元测试，压力测试
  7. 多语言
  8. 多时区的时间计算（冬令时，夏令时）
  9. 多地点的人才切换

项目

  1. CDN 降级及分支灰度发布
  2. i18n 的优化 - 包预请求
  3. 性能优化 - 包大小的分析
  4. 性能优化 - 接口预请求 & 接口优化
  5. 性能优化 - 流式渲染
  6. 性能优化 - node 中间层
  7. 面试 & 安排面试的重构

经典面试题

  1. 从输入 url 到浏览器渲染经过了哪些流程

    1. chrome 对输入处理
    2. 对输入分析，比如是进入搜索还是进入请求资源
    3. 主进程开辟网络请求线程，准备下载资源
    4. DNS
      1. 缓存，浏览器缓存 -> 本地缓存-> hosts 文件
    5. TCP -> SSL -> HTTP
    6. HTTP 缓存判断
    7. 资源下载
    8. HTML、CSS parser、其他资源下载
    9. layout -> paient -> composite
    10. 结束请求，TCP 断开连接 -> keep-alive

  2. React 的实践

  3. 收到一个问题或者报警，如何排查

    1. 先判断是谁
    2. 测试环节问题
    3. 线上问题，日志查询

  4. 日志 & 监控