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

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

  1. HTML

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

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

  2. 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

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

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

  5. 工程化
    打包工具:Webpack, parcel, Gulp, Browserify
    转译工具:Bbbel.

  6. 模块化
    分三个部分:AMD, CMD, CommonJS

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

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

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

  1. 新技术

后端知识: 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 .

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值