“前端开发必备:掌握这些知识,让你的技能瞬间升级!“

现阶段存在的问题:

  • 目前只掌握了基础的框架使用,尚未突破前端核心技术瓶颈,底层代码能力相对薄弱。
  • 刚毕业,工作经验不足,可能在面对复杂项目时会遇到困难,甚至产生焦虑情绪。
  • 技术栈不够全面:只熟悉某些技术栈,例如React或Vue,但在实际工作中,需要掌握更多的技术栈,
  • 缺乏沟通能力:平时工作中需要与产品经理、UI设计、后端,测试等多个角色进行沟通,因为经验不足在沟通协作方面存在着不自信,不专业等问题
  • 对工具和框架依赖过重:作为一名刚毕业的前端开发工程师,我可能过于依赖工具和框架,导致在遇到问题时可能无法独立解决。需要加强对原生JavaScript、HTML和CSS的理解和运用能力。
  • 项目管理能力不足:在平时的工作中管理项目,包括任务排期、时间规划和进度控制等。在这方面能力欠缺

00. 基本功(数据结构,算法,计算机网络,硬件,安全等)

  • 计算机组成原理(CPU、内存、硬盘、I/O设备等)
  • 操作系统(进程、线程、内存管理、文件系统、设备驱动、调度算法等)
  • 计算机网络(OSI七层模型、TCP/IP协议、HTTP协议、DNS、路由器、交换机等)
  • 编译原理(词法分析、语法分析、语义分析、中间代码生成、目标代码生成、优化等)
  • 数据库原理(关系型数据库、非关系型数据库、SQL语言、事务处理、索引、查询优化等)MySQL、MongoDB等
  • 数据库知识 https://tsejx.github.io/database-guidebook/mysql/advanced/transition
  • 软件工程(需求分析、设计、编码、测试、维护等)
  • 计算机安全(加密算法、数字签名、身份认证、网络安全等)
  • 具体知识参考 https://xiaolincoding.com/os/,里面有详细的介绍
  • 图解 mysql https://xiaolincoding.com/mysql/
  • 图解 redis https://xiaolincoding.com/redis/
  • Linux 知识,参考我写的一篇博客汇总 https://juejin.cn/post/7053718932917583909
  • Linux知识汇总 https://tsejx.github.io/devops-guidebook/linux
  • 代码管理 参考: https://tsejx.github.io/devops-guidebook/code/git
  • 我写的一篇git 相关的博客 https://juejin.cn/post/7270916734139809792
  • 算法 leetcode https://xiaochen1024.com/courseware/60b4f11ab1aa91002eb53b18/61964164c1553b002e57bf18
  • 随想录 https://programmercarl.com/

01. 前端基础 HTML,CSS

  • HTML5: 语义化标签、多媒体标签、表单新特性、Web存储
  • CSS3: 动画、过渡、阴影、圆角、背景渐变、Flexbox布局、Grid布局
  • 响应式设计: 媒体查询、移动优先原则、视口设置
  • CSS预处理器: Sass、Less、Stylus
  • CSS架构: BEM、SMACSS、OOCSS
  • CSS GuideBook https://tsejx.github.io/css-guidebook/concept
  • HTML https://www.runoob.com/html/html-tutorial.html
  • CSS https://www.runoob.com/css/css-tutorial.html

02. JavaScript 内功

  • js 词典 https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

  • 现代js 教程 https://zh.javascript.info/

  • 阮一峰 ES6 经典之作 https://es6.ruanyifeng.com/#docs/proxy

  • 对JavaScript的数据类型、原型链、作用域、闭包等内容进行深入理解

  • 彻底弄懂 JavaScript 异步任务处理原理

  • 熟悉ES6+的新特性、模块化等

  • 掌握JavaScript的常用设计模式和代码优化技巧

  • 理解 JavaScript 中内存管理、垃圾回收机制、相关算法

  • 掌握 TypeScript 基本语法、高级特性、内置标准库等

  • 掌握函数式编程范式,理解函数式思想,为深入源码学习做出铺垫

  • 掌握 JavaScript 语言层面性能优化的 10 大优化细节

  • this、闭包与作用域

    • this 指针
    • 作用域
    • 默认绑定、显式绑定、隐式绑定
    • 闭包的概念
    • 存储空间、执行上下文
  • 原型继承与面向对象编程思想

  • JavaScript 原型与原型链,原型继承,new 创建对象原理

事件机制

  • 事件绑定

    • 事件冒泡与事件捕获
    • 事件处理常见问题与方案详解
    • 事件回调机制
    • 事件委托原理与实现
    • 异步编程
  • 模块化

  • JS垃圾回收机制&运行机制

    • 垃圾回收
    • JS运行机制
    • 内存管理
    • 宏任务&微任务
  • 函数式编程

    • 函数式编程的本质
    • 惰性求值及其应用场景
    • 函数式编程的好处 (引用透明、无副作用)
    • 高阶函数、柯里化、闭包
  • ES6 &ESNext 规范及编译工具

    • ECMAScript 规范发展简介ES6 新增 API 解析
    • ESNext 规范中的 API 解析babel 编译工具链的基础介绍
    • 使用babel实现esnext至es5的转换
  • TypeScript

    • Typescript VS JavaScript VS Flow
  • 基础理论及原理

    • Scanner 扫描器、Parser 解析器、Binder 绑定器、Checker 检查器、Emitter 发射器
  • Typescript范类、注解及反射

  • typescript guidebook https://tsejx.github.io/typescript-guidebook/syntax/basics/basic-types

03. 前端框架和库

0301.React

(1) React.js 基础
  • jsx 模版语法及 babel 编译配置。
  • 事件/条件渲染/列表渲染等基础用法
  • react 组件化及生命周期
  • refs 及 React API
  • create-react-app cli 的使用
  • 函数组件和 class 组件/受控组件和非受控组件
  • 高阶组件用法
  • react hook
  • ahooks https://ahooks.js.org/zh-CN/hooks/use-set-state/
  • 异步组件/suspense
  • 异步过程使用单例的 event 对象
  • 性能优化方式
  • immutable 库 immutable-js 和 immer
  • 使用 immutable 数据优化 react 应用
  • redux 状态管理,rematch,dva.js,react-redux,redux-thunk
  • redux-Saga https://redux-saga-in-chinese.js.org/docs/introduction/BeginnerTutorial.html
  • dva.js https://dvajs.com/guide/
  • state和context在状态管理中的应用
  • 集中状态管理方案深度对比 (Redux、Mobx、Jotai、Zustand)
(2) React.is 源码与进阶
  • 能熟练运用 React 设计开发企业级项目
  • React16 到 React18 的设计演变熟练掌握 React Hooks 原理,并能轻松自定义 Hook
  • 深入理解 React 设计思想与源码实现
  • 掌握 React 的状态管理库 Redux 设计思想与源码实现
  • 理解 React 应用优化常用手段
  • 掌握 React SSR
  • 手写一个redux
  • create-react-app 使用及原理剖析
  • 知识宝典 https://xiaoxiaosaohuo.github.io/react-books/chapter1/project.html
(3) React 路由&SSR
  • Vue Router 和 React Router实现的区别
  • React-router详解
  • 手写一个 react-router
  • 如何监听 url 的变化
  • 如何渲染对应的组件如何匹配 path,按什么规则
  • SSR方案的价值
  • 深入理解React Hydrate
  • Next.is服务端渲染开发指南
(4) React 核心源码解析
  • React 代码组织
    React架构原理
    React执行流程 render commit阶段实现
  • React Hooks实现
    Concurrent Mode实现
    React Diff实现
  • 源码解析知识文章 https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718

0302. Vue

  • Vue GuideBook https://tsejx.github.io/vue-guidebook/overview/basic/syntax
  • Vue3 架构 https://tsejx.github.io/vue-guidebook/infrastructure/vue3/overview

0303. 其他常用库

  • 其他库: Lodash、jQuery、axios、Moment.js、Immutable.js,canvas,tea,常用的组件库等
  • 前端图形学 https://tsejx.github.io/visualization-guidebook/canvas/basic/scale
  • react form hooks https://react-hook-form.com/docs/useform/form

04. 前端工程化

0401. 目标
  • 模块化和组件化开发: CommonJS、AMD、UMD、ES Modules,
  • 熟悉前端工程化相关工具的使用,如 Vite、Webpack、Babel、Rollup、Parcel、Gulp、Grunt 等,参考 https://tsejx.github.io/webpack-guidebook/basic/modularization
  • 代码检查和格式化: ESLint、Prettier
  • 掌握 Webpack Loader 与 Plugin 原理,深入理解 tapable 在插件化系统中的作用
  • 掌握 Webpack 实现原理,从零到一实现一个简版 webpack
  • 理解编译器原理,及在前端项目中的应用
  • 掌握前端脚手架设计方案,实现团队提效
  • 方案到落地,从零设计一个脚手架工具
  • 掌握前端自动化构建流程,包括代码检查、测试、打包、部署等
  • 熟悉前端性能优化相关知识,包括代码压缩、懒加载、CDN等
  • 学习一些DevOps技术,例如Docker、Kubernetes等,这些技术可以让你更好地管理和部署Web应用程序。
  • CI/CD: Jenkins、Travis CI、CircleCI、GitHub Actions、docker 等 https://tsejx.github.io/devops-guidebook/deploy/docker/overview
0402. 前端AST
  • 什么是AST
  • AST 简介、常见前端 AST 库解析
  • 前端AST相关生态
  • 基于JS实现简单的编译原理
0403. 前端工程化详解
  • 前端工程化发展
  • 前端项目打包构建
  • 前端脚手架核心原理
  • 脚手架开发实战
  • babel 在前端工程的应用
0404. 自动化构建
  • 从零到一搭建自动化构建场景Vite 新生态构建工具初探
  • npm scripts 详解
  • 构建缓存
  • 打包与部署基于 Webpack 的前端构建增速与产物优化
  • Webpack 模块详解
0405. 自动化测试及部署
  • 自动化测试概览
  • 单元测试的价值与实现
  • 前端单元测试框架对比与实践
  • E2E 测试实践CI/CD
  • 工作流与 devOps 大厂
  • 应用实战
  • E2E 测试的价值与实现
0406. 新晋打包方案
  • Vite 基本使用
  • Vite 1.x 到 2.x 对比
  • Vite 源码解析ESBuild.
  • Rollup、SWC 对比
  • Vite 实战
0407. 前端微服务化
  • 前端微服务化概念详解基座、路由及应用生命周期
  • js 隔离、CSS 隔离
  • 应用通信
  • qiankun 实现原理详解
  • qiankun 开发实战*web
  • component 与 lit 一瞥single-spa 使用与原理详解

05. 网络和性能优化

  • HTTP协议: 请求方法、状态码、请求头、响应头、HTTP/2、HTTP/3
  • 浏览器缓存: 强缓存、协商缓存、Service Worker
  • 性能优化: 代码压缩、懒加载、图片优化、CDN、预加载、预渲染
  • Web安全: XSS、CSRF、CSP、同源策略、跨域资源共享(CORS)
  • 网关,代理等

06. 前端测试

  • 自动化测试
  • 测试类型: 单元测试、集成测试、端到端测试
  • 测试框架: Jest、Mocha、Chai、Sinon、Jasmine、Cypress、Puppeteer

07. 服务端知识

  • 后端概念: RESTful API、数据库、认证与授权
  • 服务端语言: Node.js、Express、Koa、Python、egg.js,midway
  • 服务端渲染: React SSR、Vue SSR、Next.js、Nuxt.js、Gatsby
  • redis mysql java 等
  • nginx https://tsejx.github.io/devops-guidebook/server/nginx
  • node guidebook https://tsejx.github.io/node-guidebook/overview/basic
  • midway https://www.midwayjs.org/docs/intro
  • 分布式 https://icyfenix.cn/
  • node.js https://www.runoob.com/nodejs/nodejs-tutorial.html

08. 软技能

  • 沟通能力: 明确表达观点、倾听他人、提问技巧
  • 团队协作: 分工合作、代码评审、知识分享
  • 问题解决: 创新思维、逻辑分析、调试技巧
  • 项目管理: 敏捷开发、Scrum、看板、需求分析、风险评估

09. 前端框架生态库源码解析

10. 多端开发

  • 掌握原生微信小程序开发
  • 掌握 uni-app,并理解其实现原理
  • 掌握 Taro 框架,并理解其实现原理
  • 掌握 React Native,使用 RN 开发 iOS、Android 应用
  • 熟悉 dart 语言,能使用 flutter 开发构建多端应用
  • 了解 electron 架构设计,能基于 electron 实现桌面端应用

11.有需要再学习

学习一些新的前端技术,例如WebAssembly、WebGL等,这些技术可以更好地优化Web应用程序的性能。

总结:

  1. 第一优先级,浏览器相关知识, BOM, DOM,相关API, javascript的原生api(很多, 相对重要)

  2. 第二优先级网络知识(私有协议入(CGW), 服务发现),后端相关知识与容器化技术,这个因为工作中有用到

  3. 第三优先级,基本功部分,数据结构, 算法,硬件知识

你可能感兴趣的:(前端)