前端学习路线及知识点整理

前端学习路线

1. 基础（CSS、HTML、JavaScript）
2. JS库
3. 前端框架（MVVM）
4. 浏览器&计算机基础
5. 前端工程化
6. 性能优化
7. Nodejs
8. 数据结构和算法

学习重点

一、三大件

CSS

• 盒模型（标准&IE）
• flex,float
• CSS常用选择器
• CSS选择器优先极&权重
• BFC与IFC的理解
• transform,transition,animation等
• 响应式而已的理解

H5

• 语义化标签
• Canvas
• 本地存储（localStorage,sessionStorage,cookie的区别）
• video与audio的用法
• 应用缓存（cache manifest)

JavaScript

• JS的数据类型：基础类型&引用类型
• this
• 作用域（作用域链）
• 原型&原型链&继承
• 闭包
• 动态作用域和词法作用域
• JavaScript的执行机制
• promise & async

二、库工具

• jQuery: 集合多种操作DOM的API，对于静态HTML开发很有用
• Zepto：移动端的jQuery（简化版）
• Moment: 日期和时间操作库
• lodash: js操作库

三、前端框架

前端框架：React，Vue， 数据驱动视图，Vue的双向绑定，单向数据流等等

• 响应式的基本原理： Vue的响应式原理、Vue与React对比响应式
• 发布订阅模式：理解JS的发布订阅模式
• Virtual DOM的理解：你不知道的VirtualDOM
• 前端路由的实现原理： Web前端路由原理解析和实现、网易云课堂-vue-router源码
• nextTicek的实现原理：$nextTick原理
• setState的实现原理
• diff算法：React的Diff算法理解
• 单页应用（SPA）的原理和优缺点：参考

四、浏览器 & 计算机基础

• 浏览器缓存机制：强缓存，协商缓存 ， 浏览器缓存机制
• 浏览器中的JS执行机制： 参考
• 页面渲染原理： 从输入URL到页面加载发生了什么、
• 浏览器安全问题：8大前端安全问题，8大前端安全问题（下）
• 浏览器为什么会跨域: 为什么浏览器要限制跨域访问
• 优化页面的思路
• HTTP与HTTPS的区别
• TCP/IP协议
• 三次握手和四次挥手
• CDN的作用和原理
• 正向代理和反向代理的特点

五、前端工程化

模块化

• JS模块化
• CSS模块化
• 资源模块化

组件化

• 组件化：从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

规范化

• 编码规范
• 接口规范
• git使用规范
• CodeReview
• UI元素规范

知识点

• 理解 Babel、ESLint、webpack 等工具在项目中的作用
• Babel 的核心原理
• Webpack 的编译原理、构建流程、热更新原理
• nginx 的基本理解
• 理解 Git 的工作流程
• Mock 的意义及优点

性能优化

• 前端性能衡量指标、性能监控（performance,LightHouse）
• 常见的性能优化方案有哪些
• SSR 方案的性能优化
• Webpack 的性能优化方案
• React、Vue 等框架使用性能优化方案
• 网络层面的优化方案
• 页面渲染层面的优化方案
• 白屏的优化方案

Nodejs

• Nodejs 在应用程序中的作用
• Express 和 Koa 的区别
• Nodejs 的底层运行原理、和浏览器的异同
• Nodejs 非阻塞机制的实现原理

数据结构和算法

• 栈：教程Blog
• 队列（列表）：教程Blog
• 链表：教程Blog
• 集合：教程Blog
• 字典和散列表：教程Blog
• 树：教程Blog
• 算法：leetCode在线刷题