Web 工程师
Web 全栈工程师
  基础代码编写
    前端语言及其生态
      HTML
        基本 DOM
        SVG
      CSS
        视觉格式化模型
          box generation
          box module
            inline level
            block level (flow / grid / flex / table...)
          display module
            formatting context
          positioned layout module
            absolute / fixed / sticky / relative
            z-index (Stacking Context)
          overflow module
            ink overflow (outlines 等)
            scroll container
        渲染相关
          compositing & blending
          transform
          background / image / gradient
          mix-blend-mode
        CSS 动画
          animation
          transition
        语法加强
          CSS Layers
          @media query
          @container query
          --css 变量
          calc 动态计算
      JavaScript
        ECMAScript
        TypeScript
        Node.js / Deno (Runtime) / Bun
        npm / pnpm / jsr
    后端语言与生态（选择 1-2 种深耕即可）
      JavaScript（Node.js API 相关）
      Golang
      Java
    通用编程思维
      常用数据结构、算法
      数学思维
        概率思维
        逻辑运算
      抽象思维
        抽象屏障与认知负担的管理
        问题分层拆解
          组件化
          模块抽象
        设计模式 / 函数式编程
    Tools
      Unix Tools
        版本管理：git
        文件：ls / find / grep / awk / sek / rsync
        文本：cat / less / head / tail / sort / uniq
        网络：curl / wget / ssh / scp / dig / nslookup / traceroute
        进程：ps / top / kill / lsof / nc
      AI Vibe Coding 提效
        AI 模型
        AI Coding 产品（常用 IDE & Agent）
        Context Engineering
          Prompting
          上下文提供 + AI 能力最大化
        流程实践
          成本与收益度量
          安全、隐私、合规的考虑
          AI 生成代码的可靠性与风险把控
    UI 框架 / 库
      React 及其生态
        Components
        Rendering (生命周期 / ref / events 等)
        Hooks 最佳实践
        Router
          React Router / Tanstack Router
        Data：State / API
          jotai（分布式状态管理）
          zustand（Flux 模型）
          TanStack Query（API 请求 / 缓存 / 并发控制）
        Form
          React Hooks Form
        前沿
          Server Components
          Streaming SSR
        Framework
          Next.js 14+
          Remix
          Astro
      Vue（了解为主）
      新兴框架
        Svelete
        Solid.js
    Env / Runtime
      Browser API
        UI
          DOM API
            Web Components
          Canvas 2D
          WebGPU 3D
        多媒体
          Web Audio API
          MediaStream
          MediaRecorder
          WebCodecs
        存储
          localStorage / sessionStorage
          indexedDB
        网络
          HTTP Fetch
          Server-Sent Events
          Beacon API
          WebRTC
          WebSocket
          WebTransport
        计算
          Web Worker
          Web Assembly
        OS 能力
          文件系统
          硬件设备
          剪贴板
          ...
        PWA
          Background Sync
          Notification API
          Service Worker
        ...
      操作系统 API
        文件系统
        网络 / 代理
        设备访问
        进程/线程调度
  系统设计与工程
    Web App 架构
      UI Components
        React / Vue
      Route / History 抽象
        React Router
      UI 数据层：State Management 方案
        前端状态
          Jotai
          Zustand
        后端同步、缓存
          TanStack Query
      后端 API 层
        协议
          gRPC
          REST API
        api definition
          openapi
          GraphQL / tRPC
      CSS 方案
        tailwind css (当前主流 + AI 友好)
        postcss + 常用插件
        CSS-in-JS 方案
          styled-components 等
      打包工具
        Vite （首选）
        WebPack（传统）
        Rollup（现代 + 适合类库）
        加强：Turbopack / Rspack / swc + esbuild
      端侧容器
        Hybrid App（WebView 容器）
          小程序
          Ionic Framework
        Native App
          React Native
          Hippy / Lynx
      PWA、边缘计算、全球化部署
        Cloudflare Workers
        Vercel 等
    编程能力扩展
      架构思想、设计原则
        SOLID 原则
        领域驱动设计 DDD
        关注点分离（模块化）
        CAP 理论、BASE 理论
        事件驱动架构
      技术决策能力，结合业务的架构权衡、演进
      复杂度治理、模块化实践
    用户体验
      性能与体验指标
        LCP / CLS / INP
      端到端性能优化
        渲染性能
        网络性能
        计算性能
      可访问性 a11y
      国际化 i18n
    质量保障
      测试方案
        单元测试
        组件、交互测试（Vitest + Testing Library）
        e2e 测试（Playwright）
      可观测性
        OTel （Tracing / Metric / Log）
        监控告警：Sentry / Datadog
    Web 后端与数据存储
      API 相关
        协议：REST / gRPC
        网关：Nginx / Caddy 等
        身份认证：JWT / OAuth / Cookie Session 等
      后端服务架构
        两极
          单体应用架构
          微服务架构
        综合：模块化单体
        Serverless / FaaS 架构
      缓存
        Redis / Memcached
      关系数据库
        SQL
        DBMS
          Postgres
          MySQL
          SQLite
        DB 相关知识
          ORM
          ACID
          事务
          三大范式
          ...
        数据库索引、Replication、分片等
      NoSQL 数据库
        Key-Value（缓存 / session / 配置）
        文档型（贴近开发）
        列式数据库（数据聚合、分析）
        图数据库（社交网络、知识图谱）
        时序数据库（系统监控、数据采集、金融数据分析等）
        搜索引擎数据库（文本搜索等）
        NewSQL（融合 SQL / NoSQL 特点）
        ...
      非结构化数据存储、分发
        对象存储：扁平化对象
        文件系统：树状目录
          本地文件系统
          分布式文件系统
        CDN：边缘缓存
        数据湖：大数据分析
    网络 / 安全 / 合规
      网络 / 传输
        IP
        TCP
        UDP
      HTTP
        基础语义：RFC9110
        具体实现
          HTTP/1.1
          HTTP/2
          HTTP/3 over QUIC
      TLS
        协议
          TLS 1.3
        算法
          对称加密
          非对称密钥交换
          签名、MAC
        证书管理
      身份认证
        基础凭证 Credentials
          用户名 + 密码（Username & Password）
          FIDO 标准 / Passkeys / WebAuthn
          一次性密码 OTP
            TOTP 基于时间 / HOTP 基于计数器
            短信 / 邮件验证码
        认证的授权 + 传递
          OAuth（开放授权）
          OpenID Connect（标准化用户身份信息的返回）
          SAML（用于企业级应用 SSO）
        授权后的身份令牌
          自包含的 Token：JWT
          服务器端存储：Session ID
      OWASP
        内容安全
          CSP/XSS 等
        API 安全
          访问控制
          输入输出校验
          DOS 攻击、注入攻击防护
        客户端安全
          反调试
          供应链漏洞
      合规
        隐私合规
          用户授权、最小化授权
          端到端加密
          存储方案
        软件许可
          开源许可证等（MIT，Apache，GPL...）
        数据本地化 / 跨境处理等要求
    DevOps、云服务等工程实践
      代码版本管理策略
        Git Flow
        GitHub Flow
        Trunk-Based Development
      持续交付、部署
        特性开关：Feature Flags
        蓝绿部署： Blue-Green Deployment
        金丝雀发布：Canary Release
      代码质量文化
        Code Review
        编码规范：Linting & Formatting
        复杂度分析、自动化重构等
        项目复盘能力
      微服务 / Serverless 架构
        容器与虚拟化
          LXC / Docker
          Kubernetes
        Service Mesh 等
      基础设施即代码 (IaC)
        Terraform
        Pulumi
      云服务
        CI / CD 基建
          Github Actions
          Jenkins
        网络与 CDN
        S3 等对象存储
        常用云服务提供商（AWS / GCP / Azure / 阿里云 / 腾讯云 等等）
  项目管理、协作
    项目管理（五大过程）
      项目启动
      项目规划
      项目执行
      项目监控、调整
      项目收尾
    Story 驱动的敏捷开发
      Story / 目标拆解
        Epic -> Story -> Task
        技术 Story 与 产品 Story
      有限行动力的分配：结合 Sprint 与 Backlog 排优先级
      技术 Story
        与业务 Story 的平衡
        业务价值与风险缓解价值
    项目开发、全局视角
      方案阶段
        评估解决方案
          Short-term workaround
          Long-term 彻底解决
        价值衡量、ROI
        方案设计
          Scope
          Before & After
        工作量评估
          Scope 粗估
          精细化拆解
      推进阶段
        MVP：P0 Flow Happy Path
        功能：细节完善
        测试：edge case 补充
        上线：Code Review & 回归 & 发版本
      复盘阶段
        方案沉淀整理
        风险、技术债务记录
      风险、债务管理
        主动识别技术风险
        产生新的 Story + 项目，消化风险、债务
    跨职能合作、沟通能力
      金字塔思维
        结论先行
        分层展开
        逻辑递进
      重点
        信任感建立
        非暴力沟通
      沟通方向
        向上管理
        横向协作
      RACI 角色 / 职责分配
        Responsible
        Accountable
        Consulted
        Informed
  产品能力
    核心
      用户思维 - 同理心
      逻辑拆解、概念清晰
      需求逆向管理
        伪需求识别
        根据实际情况提出更优解决方案
      技术驱动业务创新意识
    User Story 驱动
      User Story：核心目标、基本单位
        作为一个 [角色]，我想要 [做什么]，以便于 [实现什么价值]
      Test Case：边界场景
      User Story Map：大量 User Story 组织与取舍
    UI 审美
      Less is More
      Keep it simple stupid
  技术影响
    个人
      GitHub
      个人 Blog
      技术社区
    技术规划、布道
      渐进式落地
      新技术探索、实验
    人才培养
      内部 Mentorship、对 Junior 的指导
      技术传承的机制