# Web 全栈开发学习路线(高级篇)

TIP

从全局的视角,看清楚完整的技术体系和学习路线是非常有必要的,学习就不会迷茫。

# 1、前端工程化

TIP

  • 规范化
    • Eslint 编码规范(结合 pre-commit)
    • Git 规范:branch 命名规范,commit 规范
    • jsdoc 注释规范
  • 模块化
    • 代码分模块组织(依赖于 js css 模块化语法和 webpack 等工具的支持)
    • 组件化
  • 自动化
    • 脚手架(如 create-react-app vue-cli),yeoman
    • 监听文件变化,自动构建
    • CI/CD 自动单元测试,自动提测、上线等
    • 自动兼容(如 postcss babel)
  • webpack
    • 基础配置,常用 loader,常用 plugin
    • 代码拆分、公共代码抽离(产出多 chunk)
    • 性能优化
  • babel 编译
    • babel-polyfill
    • babel-runtime
    • corejs
  • rollup.js ES 模块打包器
  • Parcel 零配置 JS 打包神器

# 2、运行和监控

Tip

  • 浏览器 和 webview 引擎
  • 页面加载和渲染:从输入 url 到页面显示的整个过程
    • 加载过程
    • 渲染过程
    • 重绘/重排
  • JS 运行机制
    • JS 引擎( 如 V8 )
    • 内存机制
    • 垃圾回收机制
  • 性能优化
    • 优化加载速度
    • 优化渲染速度
    • 优化操作体验(如节流、防抖)
    • Chrome Performance API 性能监控
    • Chrome lightHouse 检测工具
  • 安全
    • XSS
    • CSRF
    • DDOS 攻击
    • 密码加密存储
  • 监控和统计
    • 错误监控、报警
    • 性能监控
    • 统计上报(小流量统计)
    • APM 监控平台
  • 客户端能力
    • jsbridge(如微信 jssdk)
    • js 调起 app

# 3、前端框架基础

TIP

  • SPA 和 MPA (单页应用和多页应用)
  • 前端路由
  • MVVM
  • 组件化
  • 虚拟 DOM 和 diff 算法

# 4、Vue

Tip

  • vue-cli

  • 基础使用

    • 组件
    • 模板
    • 指令
    • 组件属性
    • 组件生命周期
    • 高级使用(如动态组件、异步组件、slot 等等)
    • 性能优化
  • 原理

    • 响应式( Object.defineProperty )
    • 模板编译
    • 虚拟 DOM
  • 周边

    • vuex
    • vue-router
    • UI 框架
      • elementUI
      • view-design(之前叫 iview)
      • ant-design-vue
  • Vue3.x + TypeScript + Vite

# 5、React

TIP

  • create-react-app
  • 基础使用
    • JSX 语法
    • 组件和属性
    • state 和 setState
    • 组件生命周期
    • 高级使用(如 Context、高阶组件、render-prop 等)
    • 性能优化(如 shouldComponentUpdate PureComponent )
  • 原理
    • JSX 语法糖本质
    • 合成事件机制
    • batchUpdate 机制
    • 事物机制
    • 组件渲染流程
    • fiber
  • 周边
    • redux
    • mobX
    • react-router
    • UI 框架
      • ant-design
  • Hooks

# 6、常用工具和插件

Tools

  • lodash - 工具函数
  • echarts - 统计图表
  • jquery 或 zepto - DOM 操作
  • axios - ajax
  • date-fns 或 moment - 日期时间格式
  • css reset 库
  • caniuse.com 浏览器兼容性
  • 等等 ....

# 7、服务端开发

TIP

  • NodeJS
    • 基本 API(如 http、fs 等)
    • commonjs 模块化
    • 框架
      • express
      • koa
      • egg
    • 调试
  • SSR
    • 服务端模板,如 ejs artTemplate 等
    • nuxt.js (Vue SSR)
    • next.js(React SSR)
  • 常用
    • nginx(反向代理、负载均衡)
    • 数据库
      • redis
      • MySQL
      • mongodb
    • Docker
    • 日志分析
  • serverless
  • Deno
  • 小程序开发
  • PWA
  • 跨端(如 RN Weex)
  • 客户端 electron
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X