写在前面

如何从初级前端晋升为中高级前端？以下是我工作快三年结合近来招聘要求总结的初级前端前端晋升为中高级前端的学习路线。总体思路是先列一个路线知识结构图，这个知识路线图会涵盖不同模块的重要知识的关键字，然后会根据不同的知识模块出不同的系列文章，边学习边整理，期待这篇文章能帮到你，也期待你和我一起学习，一起成长。

以下是路线图：

这个路线主要大模块分为HTML + CSS，JS，计算机基础，数据结构和算法，运行环境，框架和类库，前端工程，性能优化和安全。然后下面是对每个模块需要掌握的知识点的总结。后续会对这些知识点进行总结输出。

HTML + CSS

HTML

CSS

响应式布局

手写系列

曲线运动
绘制几何图形
图片瀑布流效果
实现常用布局

JS

语法和API

ESMAScript和JavaScript的关系
全局对象，全局函数，全局属性
高阶函数的应用
正则表达式
ES5和ES6的语法规范
setInterval
异常处理
module.exports和exports
export和import详解

变量和类型

执行机制

异步编程
宏任务和微任务
Node与浏览器EventLoop的差异
复杂的异步嵌套逻辑
Promise
js中async和await执行顺序详解
try catch
执行机制的应用————处理海量数据

作用域和闭包

词法作用域和动态作用域
作用域和作用域链
堆栈溢出和内存泄漏
循环的异步操作
this
模块化

原型和原型链

原型设计模式和设计规则
new的详细介绍
instanceof实现
es6的class
继承
继承的应用

计算机基础

网络协议

HTTP请求
HTTP版本
HTTP状态码
HTTPS
CDN
DNS
协议
可靠协议
三次握手和四次挥手
WebSocket

编译原理

如何将代码转成目标程序
进制的互相转换
正则表达式的匹配原理
JS代码解析成AST
base64

设计模式

编写代码的常见设计模式
设计模式的应用
发布订阅模式和观察者模式

数据结构和算法

常见数据结构

二叉树
堆
栈
队列
哈希表
图
数组、字符串的存储原理

算法

事件复杂度和空间复杂度
排序算法
查找算法
回溯算法
贪心算法
分治算法

JS编码能力

防抖和节流
实现sleep函数
函数柯里化
深拷贝的实现方式
实现数组去重、扁平化的方式

手动造轮子

promise,async,await
call, apply,bind
懒加载，预加载，下拉刷新，上拉加载
JSON.stringify, JSON.parse
实现双向绑定
实现模版引擎
手写EventEmitter实现事件发布，订阅

运行环境

浏览器原理

浏览器从输入URL到页面渲染的过程
浏览器解析HTML代码
浏览器解析CSS
绘制DOM树
回流和重绘
运行机制
JS引擎
数据请求
垃圾回收机制
浏览器的缓存

浏览器API

DOM操作API
BOM的全局API
DOM事件流
网络请求方式
存储机制
同源策略
跨标签通信
海量数据存储
性能优化

Node

Node的底层运行原理
Node事件驱动
Node的使用
Node的API
Node开发框架

前端工程

项目构建

npm、yarn依赖包管理
使用npm运行自定义脚本
Babel、EsLint、webpack的作用
Babel的核心原理
EsLint规则检测原理
webpack
loaders和plugins
配置前端代码兼容性方案

nginx

nginx内置变量
正向代理和反向代理
手动搭建nginx服务器
用nginx实现请求过滤

开发提速

接口管理
日志埋点方案
TDD与BDD

版本控制

git的相关配置
github创建项目
git代码管理
Git的核心
分支回滚等复杂问题的解决
Git命令

持续集成

操作完整的开发流程
CI、CD

框架和类库

Vue

MVVM框架设计理念
Vue的事件机制
Vue的双向绑定
template到DOM
vue路由
vue.extend
混入Mixin
Vue虚拟DOM和Diff算法的内部实现
手动实现一个Vue

React

React API和生命周期
React的事件底层实现机制
React的Fiber工作原理
React的虚拟DOM和Diff算法的内部实现
React中setState的执行机制
React Router 和 Vue Router 对比
React和Vue的对比
手动实现一个React

TypeScipt

面向对象相关概念
基础语法
规则检测原理
在框架中的使用

实用库

UI组件框架
图标绘制框架
GIS开发框架
可视化开发框架
工具函数库

多端开发

小程序开发框架
SPA
分辨率及各种像素
移动端适配
多端框架
JS移动客户端开发技术
JS PC客户端开发技术
移动化载体: 微信 + 企业微信生态，抖音、支付宝生态
微前端
云开发

开发和调试

浏览器的调试工具
代理工具
Android、IOS模拟器
Vue、React框架调试工具

数据流管理

跨组件通信方式
Redux管理数据流
Mobx管理数据流
Vuex管理数据流
比较常见管理数据流方案

性能优化及安全

性能优化

前端性能
常见的web、App性能优化方案
SEO
SSR实现方案
webpack的性能优化
Canvas性能优化
React、Vue等框架的性能优化

前端安全

XSS攻击
CSRF攻击
HTTP劫持
Token + Session + JWT
异常监控

以上就是我整理的前端路线知识图，你可以根据自己的情况查漏补缺，只要你全部掌握了这些知识，那你就基本上晋级到前端大神的段位了，后续我会根据这个路线图，对其中的每个知识点进行文章输出，然后附上链接，记得持续关注哦。

初级前端晋升为中高级前端的学习路线