跳到主要内容

Front Guide

开发工具​

基础​

  • HTML
    • 文档结构、常用标签、表单
  • CSS
    • 选择器
    • 基础属性
    • 盒模型
    • 定位
    • Flex 布局
    • Grid 布局
    • 动画
    • CSS 变量
    • 媒体查询与响应式
  • JavaScript
    • ES6+ 语法
    • DOM 操作
    • 事件程序处理
    • 异步编程
    • 错误处理
    • 模块化
  • TypeScript
    • 类型体操

上手​

  • React
  • Vue
    • 基础语法
    • Ant Design Vue / Element Plus UI 组件
    • 状态管理
    • 单页应用
  • CSS 框架
    • Bootstrap
    • TailwindCSS
    • 预处理 Less Sass
    • CSS Module
    • CSS in JS
  • Angular
  • 小程序
  • 常用 Library
    • “瑞士军刀“ Lodash / Rambda
    • 日期处理库 Day.js
    • 网络请求 Axios
    • 数据可视化 Chart.js / D3.js / Echarts

工程化​

  • 脚手架
    • create-react-app
    • vue-cli
  • 构建与打包
    • webpack
    • babel
    • postcss
    • sourcemap
    • 缓存
  • 代码检查
    • ESLint
    • StyleLint
    • Prettier
  • 模块管理
    • Module Federation
    • Monorepo
  • 单元测试 / 自动化测试
    • Jest
    • React Testing Library
    • Vue Test Utils
    • Puppeteer
  • 前端工具链
    • Vite
    • RSBuild
  • CI / CD
    • Github Actions
    • Travis CI
    • Jenkins

实战开发​

性能优化​

  • 性能指标
    • TTFB / TTI / FMP / FPS
    • Google CWV
      • FCP
      • LCP
      • CLS
      • INP
  • 性能统计与上报
    • Performance API
    • Web Vitals
  • 页面加载全过程
    • 重定向
    • DNS 查询
    • TCP 建连
    • 服务器 RT
    • HTML Download
    • 浏览器解析、渲染
  • 性能分析
    • Chrome DevTools
    • WebPage Test
    • 均值与分位数
  • 性能优化手段
    • CDN
    • 静态资源打包优化
    • 使用更合适的图片格式
    • SSR / SSG
    • 流式渲染
    • 懒加载
    • 预加载

拓展​

  • 深入理解 HTTP 协议
  • NodeJS Web 框架
  • 微前端
  • BFF
  • 数据可视化
  • 跨端开发
    • Flutter
    • React Native
    • 小程序
    • Electron
  • LowCode
  • 国际化
  • Web 安全

前端面试​

  • 前端面试之道

软技能​

  • 项目管理
  • 团队沟通
  • 简历
  • 如何提问
  • 谈判技巧

参考​