前端技术学习路线及技术汇总

前端的完全学习基础就是1——3若要接着升到中级，则需要考虑4——6。
如果需要接着升级7到10.

1. HTML

HTML5新特性 , 浏览器的标准模式和怪异模式, xhtml和html的区别, 使用data的好处, html模板语言, IE6 bug和一些定位写法, 渲染知识, 标签, meta

2. CSS
   动画, 布局, 响应式设计, 预处理器, 命名方案, UI框架, 选择器, 小知识点, 盒子模型

3. javascript

   基础的概念：页面渲染原理，白屏，async,defer
   重要概念:原型链，函数指针this,作用域，闭包，时间冒泡，异步队列
   ES3-ES5:数据类型，运算符，流程控制语句，函数，内置对象，定时器。
   Dom操作
   BOM:history, location ,navigator ,localStorage, cookie
   较为新鲜的知识：
   ES6:promise ,新特性以及如何区分ES6和ES5，let和const的优点，箭头函数，以及他的this,generator是什么，async/await实现原理, ES6和commonjs模板化规范区别。
   其他编程语言：TypeScript
   Web Worker

4. 框架与工具
   Vue:组件—Vuex,Vue router,nuxtjs。 虚拟Dom
   React:React Native, Reactjs
   Angular
   jquery和 Zepto
   lodash与 Underscore

5. 开发与调试
   开发工具：Vscode, Webstorm, Sublime, Chrome调试工具的使用，Git&GitHub的使用，markdown写作。
   单元测试:Mocha
   数据模拟：mockjs, Easymock, swagger.
   功能测试：nightwatch

6. 工程化
   打包工具：Webpack, parcel, Gulp, Browserify
   转译工具：Bbbel.

7. 模块化
   分三个部分：AMD, CMD, CommonJS

8. HTTP与HTTPS协议
   请求：GET, POST, OPTION
   响应：2xx,3xx,4xx,x
   报头：普通报头，实体报头，请求报头，x响应报头
   版本：http1.0 http2.0
   请求方式：XHR, FETCH
   策略：还可以接着分：同源策略。跨域：CROS,JSONP,FETCH no-cors

9. 优化：可以分搜索优化，性能优化。
   搜索优化：Web语义化，SEO
   性能优化：网络性能优化，图片优化，JS和CSS优化----压缩
   协议层优化，存储优化。
   存储优化：本地存储，缓存{浏览器缓存机制，H5离线缓存}。
   本地存储：localStorage,SessionStorage,Cookie.
   浏览器缓存机制：Cache-Control, Expires, Last Modified
   H5离线缓存：Manifest file

之后的离散知识：1后端知识。2移动开发。3监控与分析。4安全性 5软实力

10. 新技术

后端知识： 1python. 2java 3php .4NODEJS:框架{express,koa}，同构，架 构-----Restful.
移动开发: 微信小程序开发，H5页面开发
监控与分析：异常监控 ，格式监控 ，性能监控，网络监控 ，日志监控
异常监控：Fundebug,Betterjs.格式监控：EsLint,Jslint,JsHint.性能监控：WebPageTest,PageSpeed,PhantomJs,Chrome Tools.
网络监控：Fiddler,Charles
日志监控:LogRocket,LogLine
安全性：XSS攻击，Clickjacking攻击，CSRF攻击,Cookie劫持。
软实力:结构化问题，STAR原则，SMART原则。
新技术：WebAssembly,Material Design,WebRTC .