前端学习路线
- 基础（CSS、HTML、JavaScript）
- JS库
- 前端框架（MVVM）
- 浏览器&计算机基础
- 前端工程化
- 性能优化
- Nodejs
- 数据结构和算法
学习重点
一、三大件
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 非阻塞机制的实现原理
数据结构和算法
