个人整理内容，仅供参考。
初级学习路线
- 建议掌握一定的计算机基础知识，前端涉及到比较多的：计算机网络、数据结构、操作系统、编译原理。
- 学习路线：
- 菜鸟教程等线上教学入门基本的HTML、CSS、JS...
- 红宝书、你不知道的JS、ruanyifeng的es6教程、CSS世界...
- FreeCodeCamp做题闯关
- 了解jQuery、BootStrap
- 开始接触Vue/React框架，阅读官方文档并尝试造玩具
- 了解NPM、Webpack，使用一些脚手架进行快速开发（vue-cli、create-react-app）
进阶可能涉及到的知识点
-
安全：XSS CSRF 中间人攻击 http-only csp 转译用户输入 same-site:lax
-
协议：HTTP/HTTPS Websocket TCP/IP UDP
-
加密：base64编码、md5、RSA、SHA256（对称加密、非对称加密）
-
网络: HTTP/0.X 1.X 2 长连接 管道 Keep-Alive 一个tcp连接可以发起多个http请求 队头阻塞 多路复用 Hpack算法
-
缓存：强缓存协商缓存 Cache-control:max-age Expires Last-Modified If-Not-Modified-Since Etag If-None-Match Cookie/LocalStorage/SessionStorage
-
DNS：输入URL到页面展示经过的步骤 本地DNS缓存 本地DNS服务器 根服务器 顶级域名服务器
-
内核JS引擎线程/定时触发器线程/http以部请求线程/GUI渲染线程： 页面渲染流程 重绘 回流 如何提升页面性能(debounce、throttle、按需加载、懒加载、首屏优化、SSR)
-
CSS基础：flex/BFC/预处理语言 布局 动画
-
JS基础： 原型/原型链 构造 继承 this指向 作用域 上下文 变量提升 闭包 es6相关 函数式编程（pure function、 functor、curry\effect）
-
工程化：webpack配置 treeshaking pluign/loader差别 Mock服务原理 跨域解决方案（本地代理与Nginx反向代理） hash/history路由异同
-
NPM相关：
- 版本号语义化
- 主版号.次版号.修订号( x.y.z )
- 主版号：当你做了不相容的 API 修改，
- 次版号：当你做了向下相容的功能性新增，
- 修订号：当你做了向下相容的问题修正。
-
测试：单元测试、e2e测试（Mocha、Chai、puppeteer）
-
大前端：node（express、koa2、eggjs）、redis、mongodb（非关系型数据库）、mysql(关系型数据库)、docker、k8s、中间层（graphQL）、自动化工具（jenkins+hooks CI/CD）、基础建设系统（监控平台、发布系统、性能分析如利用lighthouse及一系列页面性能指标）、埋点、low-code、webIDE、微前端
-
算法基础：队列/栈/链表/树（二叉树、二叉搜索树）/图 排序（冒泡、快排、计数排序、堆排序） 原地哈希 双指针 滑窗算法 递归 迭代 背包 动态规划 二分查找 DFS BFS 最短路径 剪枝 贪心
-
模块化：CMD、AMD、CommonJS、ES6模块化
-
组件库：如何设计一个组件库、storybook、文档生成
-
框架基础：Vue/React源码 diff算法 组件通信 路由原理 状态管理（redux/vuex/dva/mobx）新特性（react-hooks、composition-api）
-
设计模式：观察者 工厂 发布-订阅 建造者 策略 原型模式
-
架构：RBAC（Role-Based Access Control ）基于角色的访问控制RBAC0~3、管理后台类项目设计、技术栈选型的原则
-
跨平台：Taro、各类小程序平台（一套代码多处使用、抽象层、不同平台编译器、v-dom本质作用）、dart、mpaas(原生开发、热部署、热修复)
-
跨领域：计算机图形学（Canvas、WebGL、Threejs、数据可视化、VR/AR）、机器学习（tenserflow）
前端涵盖的东西越来越多，需要接触了解的只是也越来越不局限于以往理解的前端工作内容了。做前端给我最大的感受就是你真的需要一个好的领路人，他会让你少走很多弯路，各个阶段你需要学习什么掌握什么，力用在该用的地方上。
