知识体系

基础知识

- 网络基础
  - UDP&TCP
    - UDP
    - TCP
  - HTTP 
    - HTTP/1.1
    - HTTP/2
    - HTTP/3
    - HTTPS
    - 跨域
    - 缓存
  - DNS
  - 优化

- 浏览器
  - 进程&线程
  - 渲染流程
  - 事件循环
  - 优化
    - 回流
    - 重绘

- JavaScript
  - 运行环境
    - V8
      - 流程（内核将js stream=> parser => AST => 字节码）
      - 语法分析  抽象语法树 词法作用域
      - 词法分析  token
      - parser 解析器
      - Ignition 生成字节码
      - turboFan 生成机器码(优化重复代码)
    - 内存管理
      - 栈
      - 堆
    - 垃圾回收
      - 新生代
      - 老生代
  - 基础
    - 执行上下文
      - 词法环境、变量环境、outer、this (编译阶段、运行阶段)
    - 作用域
    - this
      - call/apply/bind 实现
    - 闭包
  - 数据类型
    - 基本数据：Number String Boolean Undefined Null BigInt Symbol
    - 引用数据：Object Array Function
    - 类型判断：typeOf
  - 对象
    - 属性
    - 原型链
    - 继承
  - 函数
    - 箭头函数
    - 柯里化
    - 组合函数
  - 迭代器&生成器
    - 迭代器 iterator
      - 规范
      - 迭代类型和操作
      - 中断
    - 生成器 generator
      - 生成器函数
      - 终止
      - yield*

  - 异步处理
    - promise
    - async await
    - setTimeout/setInterval


- 设计模式
  - 单例模式
- 算法
  - 快速排序
  

个人项目

- react
  - jsx
  - 虚拟DOM
  - DOM-DIFF
  - Fiber
  - 异步更新
  - setState/useState
  - 合成事件
  - 性能优化
  - 服务端渲染原理ssr
- react-router
  - hash和history区别 原理
- redux
  - 中间件

- webpack
  - 构建流程?
  - loader作用，如何实现，常用loader?
  - plugin作用，如何实现，常用plugin？
  - webpack 热更新原理？
  - webpack 性能优化？
  - 描述一下抽象语法树，babel的作用？
  - source map是什么？生产环境怎么用？
  - 提升构建速度？
  - 实现项目优化？

语言相关: Typescript ES6+新特性 less/sass

工程化: babel(研究 babel 编译原理) webpack(打包流程、loader、plugin、optimization、文件压缩gzip和brotli、配置一套基于vue/react的项目) rollup、 vite、 tree-shaking(dead code) postcss相关插件和自定义插件如何编写一个组件库(包含按需加载) 如何发布npm包 npm install原理开发cli

难度大: 浏览器缓存技术、离线缓存、 Service Worker、 PWA、 SSR、性能优化(performance timing、FP、FCP、LCP、TTI、FID、TBT)、监控体系(数据监控、性能监控、异常监控)、 CDN原理以及容灾处理前端安全(存储、加密、网站攻击) XSS、CSRF、点击劫持、SQL注入、DOS等 V8引擎垃圾回收机制GC(新生代、老生代、标记清除、引用计数) 数据结构与算法单元测试(Jest、Karma+Macha、tape、Vitest)、集成测试、端到端测试(Cypress、Puppeteer、phantomjs、playwright、selenium) 编程思想(函数式编程FP/AOP/池化技术) 项目中如何落地23种设计模式？ web3相关()

基础: 数组、字符串、JSON方法特性正则表达式什么是闭包以及闭包的应用作用域和作用域链原型与原型链 this与上下文对象箭头函数操作符，运算符堆内存和栈内存严格模式进程与线程，为什么js是单线程浏览器渲染流程 dns解析过程防抖节流封装工具库文件上传与下载深浅拷贝以及循环引用观察器相关组合函数compose 柯里化carry 偏函数高阶函数异步编程promise generator async/await 取消异步请求并发限制

图形: canvas svg 数据可视化(Three d3 echarts mapbox-gl)

node: 使用场景 express koa egg 开启子进程(child_process shelljs) 数据库(mysql/mongodb/redis/sequelize) 爬虫技术 API风格(Restful/graphQL)

nginx 正向代理与反向代理服务转发proxy_pass 负载均衡upstream location规则

linux 各种命令行

知识体系

基础知识​

个人项目​

基础知识

个人项目