前端技术中阶

前端技术中阶

统计信息：字数 4010 阅读9分钟

研发链路（工程化基础）

• 脚手架 (Scaffold)
• CLI（command-line interface）
  • commander
  • inquirer
  • ora
  • chalk
  • emoji
• 初始化（Boilerplate）
  • create-react-app
  • umi
  • vue-cli
• 包管理
• NPM
• Yarn
• 开发
• dev-server
• hot-reload
• mock
• proxy
• 构建
• 构建器
  • gulp
  • Webpack
  • snowpack
  • vite
• JS 编译
  • tsc
  • babel
  • esbuild
• CSS 编译
  • Sass
  • Less
  • Stylus
  • PostCSS
• 代码规范
• 业界流行规范
  • Airbnb Style Guide
  • StandardJS
  • Google Style Guide
• CSS 命名规范
  • BEM
  • OOCSS
  • SMACSS
• 工具
  • ESLint
  • stylelint
  • commitlint
  • Prettier（代码格式化）
  • husky 和 lint-staged（流程控制）
  • F2ELint
• 测试
• 单元测试
  • jasmine
  • mocha
  • jest
  • enzyme
• E2E 测试
  • Selenium
  • karma
  • cypress
  • Puppeteer
  • Appium
• 覆盖率测试
  • istanbul
• CI/CD
• TravisCI
• CircleCI
• Codecov
• Jenkins

库

• 原则
• DRY
• CSS
• 作用域
  • scoped css
  • css modules
  • css-in-js
• 样式库
  • normalize.css
  • Bootstrap
  • Tailwind
  • Bulma
• JS
• 工具类
  • history
  • path-to-regexp
  • lodash
  • fastclick
  • date-fns
• 网络
  • axios
  • got
• 数据流
  • rxjs
  • Immer
• 模板引擎
• 动画
• CSS 动画
• JS 动画
• Lottie
• 设计规范/组件
• Material Design
• Apple Human Interface Guidelines
• Ant Design
• WeUI
• mini-ali-ui
• 文档
• jsdoc
• bisheng
• dumi
• Storybook

框架

• React
• 基础
  • JSX
  • 生命周期
  • Hooks
  • Immutable
• 组件
  • AntDesign
  • material-ui
• 状态管理
  • Redux
  • Dva
  • Mobx
  • xState
• 路由
• 样式
  • classnames
  • styled-components
• 框架
  • Next.js
  • Gatsby
  • react-admin
  • Ant Design Pro
• 周边生态
  • React Native
  • preact、remax、rax、taro

性能优化

• 指标
• 真实指标
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)
• 实验室指标
  • Total Blocking Time (TBT)
  • Time to Interactive (TTI)
• 评估工具
• Chrome DevTools
• LightHouse
• PageSpeed Insights
• WebPageTest
• 优化方案
• 压缩
  • 代码压缩
  • 文本压缩（gzip、Brotli、Zopfli等）
  • Tree-shaking
  • Code-splitting
• 图片优化
  • 小图优化（css sprite、iconfont、dataURI、svg）
  • 图片格式选择
  • 压缩（如tinypng）
  • 响应式
• 加载策略
  • 懒加载
  • DNS预解析、预加载、预渲染
  • 离线化（ServiceWorker、AppCache、离线包等）
  • HTTP缓存
  • 数据缓存（localStorage、sessionStorage）
  • 资源加载（顺序、位置、异步等）
  • 请求合并
  • HTTP2
  • CDN
  • 服务端渲染
• 执行渲染
  • CSS代码优化（选择器、启用GPU、避免表达式等）
  • JS代码优化及评估
• 感官体验优化
  • 骨架屏
  • Snapshot
  • Loading

工作原理

• 浏览器
• DOM Tree、CSSOM
• 渲染、绘制
• 会话
• 事件循环
• 垃圾回收
• Webkit 深入
• JavaScirpt引擎
• V8
• SpiderMonkey
• JavaScriptCore

综合能力

• 知识管理
• Markdown
• 脑图
• wiki
• GitBook
• 软件工程
• 过程模型
• 需求分析
• 概念设计
• 体系结构设计
• 项目管理
• 交互设计
• 交互原型
• 视觉还原
• 开源项目
• GitHub
• OpenJS
• Apache

---

Last update: November 9, 2024